品優購的簡單介紹
本次的專案我們要結合html和css來實作品優購網上商城網站前臺的部分頁面，包括品優購網站首頁、品優購商品串列頁，商品詳情頁、品優購用戶注冊頁和登錄頁，詳情如下
一、在本次專案使用到的相關小點
1、精靈圖
為了有效減少服務器接收和發送請求的次數，提高頁面的加載速度
主要借助與背景位置實作--background-position，一般情況精靈圖都是負值，x軸往右是正，左邊是負值，右軸同理
使用方法：把要使用的一張大的背景圖放在一個新建專案里面的一個圖片檔案夾里，然后用background-position來呼叫，或者使用background：url（）寫它所在的位置
background: url(images/icons.png) no-repeat -19px -15px;2、字體圖示
好處：輕量級：一個圖示字體比一系列的影像小，一旦加載了，圖示會馬上渲染出來，減少了服務器請求
本質是文字，可以隨意改變顏色、產生陰影、透明效果、旋轉等,幾乎支持所有的瀏覽器
使用方法：1）下載字體圖示網站：https://icomoon.io || http://www.iconfont.cn/
2）下載完成后要把 fonts檔案夾放在根目錄中
3） 把下載包里面的fonts檔案夾放在頁面根目錄下，再點開 style.css，把里面的字體檔案通過css引入到頁面中-在css樣式中全域宣告字體；再在解壓的htnl標簽內添加小圖示在頁面的html的標簽里，然后在樣式里添加font-family：‘icomoon’在字體圖示庫里引入icomoon
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?tomleg');
src: url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?tomleg') format('truetype'), url('fonts/icomoon.woff?tomleg') format('woff'), url('fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
給想要圖示的選擇器加
font-family: 'icomoon';
content: '?';二 、效果展示
1、品優購首頁index.html
首頁用到的知識點，包括：定位、字體圖示的參考、浮動float、精靈圖的使用 、結構偽類選擇器nth-child（n）、nth-of-type(n)
偽、偽元素選擇器 :before{ }、::after{ }
分享一個右側欄使用精靈圖的效果
html部分： 
<div class="news2">
<ul>
<li>
<i class="i1"></i>
<p>話費</p>
</li>
<li>
<i class="i2"></i>
<p>飛行</p>
</li>
<li>
<i class="i3"></i>
<p>影視</p>
</li>
<li>
<i class="i4"></i>
<p>游戲</p>
</li>
<li>
<i class="i5"></i>
<p>彩票</p>
</li>
<li>
<i class="i6"></i>
<p>加油</p>
</li>
<li>
<i class="i7"></i>
<p>租房</p>
</li>
<li>
<i class="i8"></i>
<p>公交車</p>
</li>
<li>
<i class="i9"></i>
<p>消費</p>
</li>
<li>
<i class="i10"></i>
<p>金融</p>
</li>
<li>
<i class="i11"></i>
<p>郵件</p>
</li>
<li>
<i class="i12"></i>
<p>書信</p>
</li>
</ul>css部分--使用精靈圖
.news2 {
height: 209px;
border-top: 0;
border: 1px solid #e4e4e4;
}
.news2 ul {
width: 252px;
}
.news2 ul li {
float: left;
width: 63px;
height: 71px;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
text-align: center;
}
.news2 ul li .i1,
.news2 ul li .i2,
.news2 ul li .i3,
.news2 ul li .i4,
.news2 ul li .i5,
.news2 ul li .i6,
.news2 ul li .i7,
.news2 ul li .i8,
.news2 ul li .i9,
.news2 ul li .i10,
.news2 ul li .i11,
.news2 ul li .i12 {
display: inline-block;
width: 24px;
height: 28px;
margin-top: 12px;
}
.news2 ul li .i1 {
background: url(images/icons.png) no-repeat -19px -15px;
}
.news2 ul li .i2 {
background: url(images/icons.png) no-repeat -79px -19px;
}
.news2 ul li .i3 {
background: url(images/icons.png) no-repeat -141px -17px;
}
.news2 ul li .i4 {
background: url(images/icons.png) no-repeat -204px -18px;
}
.news2 ul li .i5 {
background: url(images/icons.png) no-repeat -15px -87px;
}
.news2 ul li .i6 {
background: url(images/icons.png) no-repeat -78px -87px;
}
.news2 ul li .i7 {
background: url(images/icons.png) no-repeat -143px -88px;
}
.news2 ul li .i8 {
background: url(images/icons.png) no-repeat -208px -88px;
}
.news2 ul li .i9 {
background: url(images/icons.png) no-repeat -15px -158px;
}
.news2 ul li .i10 {
background: url(images/icons.png) no-repeat -78px -159px;
}
.news2 ul li .i11 {
background: url(images/icons.png) no-repeat -141px -159px;
}
.news2 ul li .i12 {
background: url(images/icons.png) no-repeat -207px -160px;
}
.news2 p {
font-size: 14px;
color: #666;
}
2、商品串列頁
<!-- nav模塊 -->
<div class="nv">
<div class="w">
<div class="ms-list1">
<ul>
<li><a href="#">品優秒殺</a></li>
<li><a href="#">品優秒殺</a></li>
<li><a href="#">品優秒殺</a></li>
</ul>
</div>
<div class="ms-list2">
<ul>
<li><a href="#">女裝</a></li>
<li><a href="#">女鞋</a></li>
<li><a href="#">女裝</a></li>
<li><a href="#">女裝</a></li>
<li><a href="#">女裝</a></li>
<li><a href="#">女裝</a></li>
<li><a href="#">女裝</a></li>
<li><a href="#">女裝</a></li>
<li><a href="#">更多分類</a></li>
</ul>
</div>
</div>
</div>
<!-- 串列頁主體模塊 -->
<div class="w ms-main">
<div class="ms-hd">
<img src="upload/bg_03.png" alt="">
</div>
<div class="ms-bd">
<ul>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>css樣式
.ms {
position: absolute;
left: 190px;
top: 40px;
border-left: 1px solid #c81523;
padding: 2px 0 0 15px;
}
.nv {
height: 47px;
border-bottom: 1px solid #b119b1;
}
.ms-list1 {
float: left;
}
.ms-list1 ul li {
float: left;
}
.ms-list1 ul li a {
padding: 0 30px;
font-size: 16px;
color: #000;
font-weight: normal;
line-height: 47px;
}
.ms-list2 {
float: left;
}
.ms-list2 ul li {
float: left;
}
.ms-list2 ul li a {
font-size: 14px;
font-weight: normal;
line-height: 47px;
padding: 0 24px;
}
.ms-list2 ul li:last-child a::after {
content: '\e91e';
font-family: 'icomoon';
}
.ms-list2 ul li :hover {
color: #c81523;
cursor: pointer;
}
.ms-list2 ul li:nth-child(2) a {
color: #c81523;
}
/* <!-- 串列頁主體模塊 --> */
.ms-hd img {
vertical-align: middle;
}
.ms-bd ul li {
float: left;
width: 290px;
height: 460px;
border: 1px solid transparent;
overflow: hidden;
padding: 0px 2px;
margin-right: 13px;
}
.ms-bd ul li:nth-child(4n) {
margin-right: 0;
}
.ms-bd ul li :hover {
border: 1px solid #c81523;
}
.ms-bd ul::after {
content: '';
clear: both;
height: 0;
display: block;
}
</style>
3、注冊頁
html
<div class="w">
<!-- /* 品優購頭部 */ -->
<header>
<div class="logo">
<a href="index.html">
<img src="images/logo.png" alt="">
</a>
</div>
</header>
<!-- /* 注冊用戶表 */ -->
<div class="bd">
<h3>
注冊新用戶
<div class="login">
我有賬號，去
<a href="login.html"> 登錄</a>
</div>
</h3>
<!-- /* 注冊表單 */ -->
<div class="bd-form">
<form action="">
<ul>
<li>
<label for="">手機號:</label>
<input type="tel" class="tel" placeholder="請輸入手機號" required autofocus>
<span class="error">
<i class="error-ico"></i>
手機號碼格式不正確，請從新輸入
</span>
</li>
<li>
<label for="">短信驗證碼:</label>
<input type="text" class="shuru" placeholder="請輸入驗證碼">
<span class="success">
<i class="success-ico"></i>
短信驗證碼輸入正確
</span>
</li>
<!-- 登錄密碼驗證 -->
<li>
<label for="">登錄密碼:</label>
<input type="password" class="shuru" placeholder="請輸入密碼" required>
<span class="error">
<i class="error-ico"></i>
密碼輸入格式不正確，請重新輸入
</span>
</li>
<!-- 安全程度 -->
<li class="safe">
安全程度
<span class="ruo">弱</span>
<span class="middle">中</span>
<span class="strong">強</span>
</li>
<!-- 確認密碼 -->
<li>
<label for="">確認密碼:</label>
<input type="password" class="shuru" placeholder="請再次輸入密碼" required>
<span class="error">
<i class="error-ico"></i>
密碼輸入不正確，請重新輸入
</span>
</li>
<!-- 同意協議 -->
<li class="agree">
<input type="checkbox"> 同意協議并注冊
<a href="#">《知曉用戶協議》</a>
</li>
<!-- 完成注 冊 -->
<li>
<input type="submit" value="完成注冊" class="btn">
</li>
</ul>
</form>
</div>
</div>
</div>
</body>
4、商品詳情頁
html介紹
<!-- 詳情頁內容部分 -->
<div class="xq-content w">
<!-- 第一內容部分 -->
<div class="xq-content1">
<a href="#">手機、數碼、通訊</a> >
<a href="#">手機</a> >
<a href="#">Apple蘋果</a> >
<a href="#">iphone 6s plus系列</a>
</div>
<!-- 產品介紹 -->
<div class="product">
<div class="preview">
<div class="preview-img">
<img src="upload/s3.png" alt="">
</div>
<div class="preview-list">
<a href="#" class="arrow-prev"></a>
<a href="#" class="arrow-next"></a>
<ul>
<li><img src="upload/pre.jpg" alt=""></li>
<li><img src="upload/pre.jpg" alt=""></li>
<li class="li-red"><img src="upload/pre.jpg" alt=""></li>
<li><img src="upload/pre.jpg" alt=""></li>
<li><img src="upload/pre.jpg" alt=""></li>
</ul>
</div>
</div>
<!-- 產品詳細介紹 -->
<div class="product-intro">
<div class="phone-name">
Apple iPhone 6s（A1700）64G玫瑰金色 移動通信電信4G手機
</div>
<div class="phone-news">
推薦選擇下方[移動優惠購],手機套餐齊搞定,不用換號,每月還有花費返
</div>
<div class="summary">
<dl class="summary_price">
<dt>價格</dt>
<dd>
<i class="price">￥5299.00 </i>
<a href="#">降價通知</a>
<div class="remark">累計評價612188</div>
</dd>
</dl>
<dl class="summary_promotion">
<dt>促銷</dt>
<dd>
<em>加購價</em> 滿999.00另加20.00元，或滿1999.00另加30.00元，或滿2999.00另加40.00元，即可在購物車換 購熱銷商 詳情 》
</dd>
</dl>
<dl class="summary_support">
<dt>支持</dt>
<dd>以舊換新，閑置手機回收 4G套餐超值搶 禮品購</dd>
</dl>
<dl class="choose_color">
<dt>選擇顏色</dt>
<dd>
<a href="#" class="current">玫瑰金</a>
<a href="#">金色</a>
<a href="#">白色</a>
<a href="#">土豪色</a>
</dd>
</dl>
<dl class="choose_version">
<dt>選擇版本</dt>
<dd>
<a href="#" class="current">公開版</a>
<a href="#">移動4G</a>
</dd>
</dl>
<dl class="choose_type">
<dt>購買方式</dt>
<dd>
<a href="#" class="current">官方標配</a>
<a href="#">移動優惠購</a>
<a href="#">電信優惠購</a>
</dd>
</dl>
<div class="choose_btns">
<div class="choose_amount">
<input type="text" value="1">
<a href="#" class="add">+</a>
<a href="#" class="reduce">-</a>
</div>
<a href="#" class="addcar">加入購物車</a>
</div>
</div>
</div>
</div>注意：由于上盒子產生大小從而產生的邊距的問題，解決問題就是給整個內容product添加overflow：hidden；
登錄頁和注冊頁很相似，在注冊的基礎上可以洗掉和增加一些需要的部分
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/398695.html
標籤：其他
下一篇：Object.entries()