xx闪购—搜索框和iconfont
生活随笔
收集整理的這篇文章主要介紹了
xx闪购—搜索框和iconfont
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.做搜索框：
?
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>小米閃購 - 小米商城</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!--把圖片放到cc文件夾下，直接引入圖片--><link rel="stylesheet" href="css/style.css"><!--引入CSS的樣式--> </head> <body><div class="topbar"><div class="container"><div class="topbar-nav"><a href="">小米商城</a><span>|</span><!--spen標簽 "|"給加回來--><a href="">MIUI</a><span>|</span><a href="">IOT</a><span>|</span><a href="">云服務</a><span>|</span><a href="">金融</a><span>|</span><a href="">有品</a><span>|</span><a href="">小愛開放平臺</a><span>|</span><a href="">企業服務</a><span>|</span><a href="">Select Region</a><span>|</span></div><div class="topbar-cart"><a href="">購物車<span>（0）</span></a></div><div class="topbar-info clearfix"><a href="">登錄</a><span>|</span><a href="">注冊</a><span>|</span><a href="" class="sep">消息通知</a></div></div></div><div class="header"><!--居中 --><div class="container"><div class="header-logo"><a href="#" class="lr">小米官網</a></div><!-- 頭部下面 的導航 --><div class="header-nav"><!--clearfix 清浮動--><ul class="nav-list clearfix"><li class="nav-category"><a href="">全部商品分類</a></li><li class="nav-item"><a href="">小米手機</a></li><li class="nav-item"><a href="">紅米</a></li><li class="nav-item"><a href="">電視</a></li><li class="nav-item"><a href="">筆記本</a></li><li class="nav-item"><a href="">空調</a></li><li class="nav-item"><a href="">新品</a></li><li class="nav-item"><a href="">路由器</a></li><li class="nav-item"><a href="">智能硬件</a></li><li class="nav-item"><a href="">服務</a></li><li class="nav-item"><a href="">社區</a></li></ul></div><div class="header-search"><from action="" class="search-from"><input type="search" name="keyword" class="search-text" ><input type="submit" value="搜索" class="searh-btn"></from></div> </div></div></body> </html> body , ul ,li {/*去掉 body 里面 header-nav里面的 ul,li默認屬性*/margin:0;padding: 0; } /*修改字體 */ body {font: 14px/1.5 "Helvetica Nene",Helvetica,Arial,"Microsoft Yahei","Hiragino SansGB","Heiti SC","WenQuanYi Micro Hei",sans-serif;height: 2500px; } /*去掉 ul里面點的屬性 */ ul {list-style-type: none; } a {text-decoration: none; } .topbar {/*加邊框*//*border: 1px solid black;*/background-color: #333;height: 40px; } .container {/*border: 1px solid black;*//*居中*/margin: 0 auto;width: 1226px; } /*偽元素 清浮動*/ .container::before,.container::after， .clearfix::before,.clearfix::after {content: "";/*把行元素變成塊元素 table 固定的給上面加內容*/display: table; } .container::after,.clearfix::after {/*清浮動*/clear: both; }/*在a標簽加顏色 大小*/ .topbar a {color: #b0b0b0;font-size: 12px; } /*鼠標點擊 a 效果*/ .topbar a:hover {color: #fff; } .topbar-nav {/*浮動*/float: left;/* 添加居中效果 */height: 40px;line-height: 40px;/*設計字體大小 空格就消失了*/font-size: 0; } .topbar-nav span{/* 字體大小 顏色 樣式 距離*/font-size: 12px;color:#424242;font-family: sans-serif;margin: 0.5em; }.topbar-info,.topbar-cart {float:right; } /* 購物車的 a標簽*/ .topbar-cart a {/*改屬性變成 塊元素*/display: block;height: 40px;line-height: 40px;text-align: center;width: 120px;background-color: #424242; } /* 鼠標點擊的效果*/ .topbar-cart a:hover {background-color: #fff;color: #ff6700; } .topbar-info {margin-right: 15px; } /* 通過span給topbar-cart添加樣式*/ .topbar-cart span {/* 往左移 */margin-left: -4px;font-size: 12px; } .topbar-info a {float: left;/* 上下不動 左右是 */padding: 0 5px;/* 居中 */line-height: 40px;height: 40px; } .topbar-info span {float: left;/* 字體 */font-family: sans-serif;font-size: 12px;color:#424242;line-height: 40px;height: 40px; } /*重新設置 消息通知 效果*/ .topbar-info .sep {padding: 0 10px; } /* header */ .header {height: 100px; } .header-logo {float: left;width: 62px;/* 設置 高度 */margin-top: 22px;/* height: 55px;*//* 加 邊框 *//*border : 1px solid black;*/ } .header-logo a {/* 先把A標簽 修改成塊元素*/display: block;width: 55px;height: 55px;/* url后面的.表示返回上一級 no-repear 50% 50%不循環 */background: #ff6700 url(../img/logo12.png) ; } .header-logo .lr {/*布局靠最左側 */text-align: left;/* 首行縮進 */text-indent: -9992em; } /* header nav */ .header-nav {float: left;width: 820px;height: 100px;/* 去邊框 *//* border : 1px solid black;*/ } /* 設置字體的樣式 */ .header-nav .nav-list{width: 820px;height: 88px;font-size: 16px; padding: 12px 0 0 30px; } /*重新設置全部商品分類分類的樣式*/ .header-nav .nav-list .nav-category {float:left;width: 127px;padding: 0 15px 0 0; } .header-nav .nav-list .nav-category a{display: block;padding: 26px 0 38px;/*文字靠右 */text-align: right;color:#333; } /* 讓字體橫過來 */ .header-nav .nav-list .nav-item {float: left; } /* 添加 a標簽的效果 */ .header-nav .nav-list .nav-item a {display: block;padding: 26px 10px 38px;color: #333; } .header-nav .nav-list .nav-item a:hover {color:#ff6700; } /* 添加鼠標移上去的效果 */ .header-search {float: right;width: 296px;height: 50px;margin-top: 25px;border : 1px solid black; }/*頭部下面的用from表單的搜索框*/ .header-search .search-from {display: block;width: 296px;height: 50px; }/*.header-search .search-from .search-text {display: block;width: 245px;height: 50px;line-height: 50px;border: 1px solid #a39c9c;outline: 0; }*/ .header-search .search-form .search-text {float: left;display: block;width: 245px;height: 50px;/*搜索框里面的字居中*/line-height: 50px;/* border: #e0e0e0;*//* 去掉先線*/outline: 0; }在瀏覽器中顯示的效果！
?
2.編寫按鈕：
2.1. 樣式不對的BUG:把search-from 改成 search-form
/*頭部下面的用from表單的搜索框*/ .header-search .search-from {position: relative;display: block;width: 296px;height: 50px; }.header-search .search-from .search-text {display: block;width: 245px;height: 50px;line-height: 50px;border: 1px solid #a39c9c;outline: 0; } .header-search .search-from .search-btn {display: block;width: 52px;height: 50px;border: 1px solid #e0e0e0;font-size: 24px;line-height: 24px;background: #fff;color: #616161;outline: 0; } <div class="header-search"><from action="" class="search-form"><input type="search" name="keyword" class="search-text" ><input type="submit" value="搜索" class="search-btn"></from></div> /*頭部下面的用from表單的搜索框*/ .header-search .search-form {position: relative;display: block;width: 296px;height: 50px; }.header-search .search-form .search-text {display: block;width: 245px;height: 50px;line-height: 50px;border: 1px solid #a39c9c;outline: 0; }.header-search .search-form .search-btn {display: block;width: 52px;height: 50px;border: 1px solid #e0e0e0;font-size: 24px;line-height: 24px;background: #fff;color:#616161;outline: 0; }?
在瀏覽器中顯示的效果！
2.2.
/*頭部下面的用from表單的搜索框*/ .header-search .search-form {position: relative;display: block;width: 296px;height: 50px; }.header-search .search-form .search-text {display: block;width: 245px;height: 50px;line-height: 50px;border: 1px solid #a39c9c;outline: 0; }.header-search .search-form .search-btn {display: block;width: 52px;height: 50px;border: 1px solid #e0e0e0;font-size: 24px;line-height: 24px;background: #fff;color:#616161;outline: 0; } .header-search .search-form .search-btn:hover {background-color: #ff6700;color:#fff; }在瀏覽器中顯示的效果！
2.3.按鈕定位：
/*頭部下面的用from表單的搜索框*/ .header-search .search-form {position: relative;display: block;width: 296px;height: 50px; }.header-search .search-form .search-text {/*position: absolute 是相對于form表居中*//*空開按鈕的距離*/position: absolute;top: 0;right: 51px;display: block;width: 245px;height: 50px;line-height: 50px;border: 1px solid #a39c9c;outline: 0; }.header-search .search-form .search-btn { /*空開按鈕的距離*/position: absolute;top: 0;right: 0;display: block;width: 52px;height: 50px;border: 1px solid #e0e0e0;font-size: 24px;line-height: 24px;background: #fff;color:#616161;outline: 0; } .header-search .search-form .search-btn:hover {background-color: #ff6700;color:#fff; }?
在瀏覽器中顯示的效果！
3.加小圖標：
png的圖片放越大，越模糊；
https://www.iconfont.cn
1.官方圖庫；
2.選好要保存到購物車的圖片；
3.點擊添加購物車；
4.選擇添加至項目；
5.點擊確定：
6.添加成功：
7.下載到本地：
8.把 iconfont.eot 和 iconfont.css 文件放入到D:\cc\css 里面;
9.在html中引入CSS文件
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>小米閃購 - 小米商城</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!--把圖片放到cc文件夾下，直接引入圖片--><link rel="stylesheet" href="css/style.css"><!--引入CSS的樣式--><link rel="stylesheet" href="css/iconfont.css"> </head> <body><div class="topbar"><div class="container"><div class="topbar-nav"><a href="">小米商城</a><span>|</span><!--spen標簽 "|"給加回來--><a href="">MIUI</a><span>|</span><a href="">IOT</a><span>|</span><a href="">云服務</a><span>|</span><a href="">金融</a><span>|</span><a href="">有品</a><span>|</span><a href="">小愛開放平臺</a><span>|</span><a href="">企業服務</a><span>|</span><a href="">Select Region</a><span>|</span></div><div class="topbar-cart"><a href="">購物車<span>（0）</span></a></div><div class="topbar-info clearfix"><a href="">登錄</a><span>|</span><a href="">注冊</a><span>|</span><a href="" class="sep">消息通知</a></div></div></div><div class="header"><!--居中 --><div class="container"><div class="header-logo"><a href="#" class="lr">小米官網</a></div><!-- 頭部下面 的導航 --><div class="header-nav"><!--clearfix 清浮動--><ul class="nav-list clearfix"><li class="nav-category"><a href="">全部商品分類</a></li><li class="nav-item"><a href="">小米手機</a></li><li class="nav-item"><a href="">紅米</a></li><li class="nav-item"><a href="">電視</a></li><li class="nav-item"><a href="">筆記本</a></li><li class="nav-item"><a href="">空調</a></li><li class="nav-item"><a href="">新品</a></li><li class="nav-item"><a href="">路由器</a></li><li class="nav-item"><a href="">智能硬件</a></li><li class="nav-item"><a href="">服務</a></li><li class="nav-item"><a href="">社區</a></li></ul></div><div class="header-search"><from action="" class="search-form"><input type="search" name="keyword" class="search-text" ><input type="submit" value="#xe632;#xe632;" class="search-btn iconfont"></from></div> </div></div></body>在瀏覽器中顯示的效果！?
10.添加購物車的圖標：
<div class="topbar"><div class="container"><div class="topbar-nav"><a href="">小米商城</a><span>|</span><!--spen標簽 "|"給加回來--><a href="">MIUI</a><span>|</span><a href="">IOT</a><span>|</span><a href="">云服務</a><span>|</span><a href="">金融</a><span>|</span><a href="">有品</a><span>|</span><a href="">小愛開放平臺</a><span>|</span><a href="">企業服務</a><span>|</span><a href="">Select Region</a><span>|</span></div><div class="topbar-cart"><a href=""><i class="iconfont"></i>購物車<span>（0）</span></a></div>在瀏覽器中顯示的效果！??
10.1.調整距離大小
/* 鼠標點擊的效果*/ .topbar-cart a:hover {background-color: #fff;color: #ff6700; } .topbar-cart i {font-size: 20px;line-height: 20px;margin-right: 4px;vertical-align: -4px; } .topbar-info {margin-right: 15px; }在瀏覽器中顯示的效果！???
總結
以上是生活随笔為你收集整理的xx闪购—搜索框和iconfont的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LeetCode Contains Du
- 下一篇： 计算机网络第五版谢希仁答案