现在学会的HTML
圆角边框
<!--HTML--!>
<div class="圆角边框">啊</div>
<!--CSS--!>
<style>
.圆角边框 {
display: inline-block;
/*转为行内块儿 */
/*float: left; 原来：添加左浮动 */
width: 65px; /*左右宽度*/
height: 30px; /*边框高度*/
line-height: 30px; /*文字位置*/
font-size: 16px; /*不知道*/
text-align: center; /*文字位置*/
border: 1px solid #00f000; /*边框粗细及颜色*/
border-radius: 60px; /*弯曲程度*/
}
</style>
搜索框
<!--CSS--!>
<style>
.site_search {
width: 90%;
margin: auto;
}
.search_input {
margin-right: 6px;
height: 16px;
width: calc(100% - 100px);
border: 1px solid #ffffff;
padding: 4px 10px;
background: #00000000;
color: #ffffff;
font-size: 15px;
border-radius: 16px;
vertical-align: middle;
}
.search_btn {
width: initial;
height: 14px;
padding: 6px 20px;
background-color: #00000000;
border: 1px solid #ffffff;
border-radius: 16px;
vertical-align: middle;
}
</style>
<!--HTML-->
<form action="/search" class="site_search" method="get" role="search">
<span style="color: #f3f3f3;">
<input class="search_input" name="q" type="text" />
<input name="by-date" type="hidden" value="true" />
<input class="search_btn" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7B4Ipz0xYmkgPgibLspk7EHFUSjnahgICHTlCR1fwD5ICgOPDFvT03g2sM8UsgtIWeWP31FrbYPlIMTHLzoyA5Dj5DrKVSirqnvge0jVvIsBasnHMy-4YFG46v3h0sZ-R87SYbWwjgyH7/s1600/search-icon.png" type="image" />
</span>
</form>
<span style="color: #f3f3f3;">