Web基本筆記~15.購物車案例(Logo和搜索框)
上一期
制作搜索框之前,先來了解一下圖示，在上一期導航欄的首頁其實是可以再添加一個小房子的圖示實作更加美觀，而阿里巴巴則有一個網站是提供了各種各樣圖示下載的，這里先隨便搜索一個圖示示范，找到自己喜歡的圖示后,就可以開始制作了~
圖示下載
點擊進入該網站
圖示引入
然后就可以直接引入了 < i class="iconfont">& #xe6d3;< /i >
其他的圖示也是一樣的道理
<link href="./icon/iconfont.css" type="text/css" rel="stylesheet"/>
<li><a href=""><i class="iconfont"></i>商城首頁</a></li>
logo和搜索框
<!-- 搜索框 -->
<div class="search">
<div class="warp">
<img src="./img/logo.jpg"/>
<div class="search_input">
<input type="text" class="search_text"/>
<input type="button" value="搜索" class="search_but"/>
</div>
</div>
</div>
/*搜索框*/
.search{
/*和上面拉開一點距離*/
margin-top: 20px;
}
/*設定logo*/
.search img{
/*清除之前的所有樣式
之所以這樣做是防止現在的樣式和之前的樣式有所沖突
*/
clear: both;
/*左浮動*/
float: left;
}
/*搜索框和按鈕*/
.search_input{
/*設定右浮*/
float: right;
/*拉開距離*/
margin-top: 20px;
}
/*設定框的長度和高度*/
.search_text{
width: 260px;
height: 20px;
/*文本框加顏色*/
border: 3px solid #c91623;
/*相對定位 讓按鈕和框盡量靠攏一點*/
position: relative;
left: 3px;
}
/*設定按鈕*/
.search_but{
width: 50px;
height: 25px;
/*背景顏色設定紅色*/
background-color: #c91623;
/*邊框去掉 設定0*/
border: 0px;
/*字體顏色設定白色*/
color: #FFFFFF;
}
當前樣式(這里圖示借用了京東的~)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/250244.html
標籤：其他