品優購列表頁製作
列表頁面是新的頁面,我們需要新建頁面文件 list.html。
因爲列表頁的頭部和底部基本一致,所以我們需要把首頁中的頭部和底部的結構複製過來。
頭部和底部的樣式也需要,因此list.html中還需要引入common.css。
需要新的list.css樣式文件,這是列表頁專門的樣式文件。
列表頁header和nav修改
秒殺盒子sk( second kill )定位即可
1號盒子左側浮動sk list裏面包含ul和li
2號子左側浮動sk_ con裏面包含ul和li
- list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="品優購-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，爲您提供愉悅的網上購物體驗!" />
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手錶,存儲卡,品優購" />
<title>列表頁-正品低價、品質保障、配送及時、輕鬆購物！</title>
<!-- 引入favicon -->
<link rel="shortcut icon" href=" favicon.ico" />
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/list.css">
</head>
<body>
<!-- 快捷導航模塊shortcut start -->
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品優購歡迎您！ </li>
<li>
<a href="#">請登錄</a>
<a href="#" class="style_red">免費註冊</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li>我的訂單</li>
<li></li>
<li class="arrow-icon">我的品優購</li>
<li></li>
<li>品優購會員</li>
<li></li>
<li>企業採購</li>
<li></li>
<li class="arrow-icon">關注品優購</li>
<li></li>
<li class="arrow-icon">客戶服務</li>
<li></li>
<li>網站導航</li>
</ul>
</div>
</div>
</section>
<!-- 快捷導航模塊shortcut end -->
<!-- 頭部模塊 header start -->
<header class="header w">
<!-- logo 模塊製作 -->
<div class="logo">
<h1><a href="index.html" title="品優購商城">品優購商城</a></h1>
</div>
<!-- 列表頁的秒殺模塊 -->
<div class="sk">
<img src="./images/sk.png" alt="">
</div>
<!-- search製作 -->
<div class="search">
<input type="search" name="" id="" placeholder="語言開發" /><button>
搜索
</button>
</div>
<!-- hotwrods 模塊製作 -->
<div class="hotwrods">
<a href="#" class="style_red">優惠購首發</a>
<a href="#">億元優惠</a>
<a href="#">9.9元團購</a>
<a href="#">滿99減30</a>
<a href="#">辦公用品</a>
<a href="#">電腦</a>
<a href="#">通信</a>
</div>
<!-- shopcar 模塊製作 -->
<div class="shopcar">
我的購物車
<i class="count">8</i>
</div>
</header>
<!-- 頭部模塊 header end -->
<!-- nav star -->
<nav class="nav">
<div class="w">
<div class="sk_list">
<ul>
<li><a href="#">品優購秒殺</a></li>
<li><a href="#">品優購秒殺</a></li>
<li><a href="#">品優購秒殺</a></li>
</ul>
</div>
<div class="sk_con">
<ul>
<li><a href="#">女裝</a></li>
<li><a href="#" class="style_red">女裝</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>
</nav>
<!-- nav end -->
<!-- 列表頁主體部分 start -->
<div class="sk_container w">
<div class="sk_hd"><img src="./upload/bg_03.png" alt=""></div>
<div class="sk_bd">
<ul class="clearfix">
<li>
<img src="./upload/list.jpg" alt="">
</li>
<li>
<img src="./upload/list.jpg" alt="">
</li>
<li>
<img src="./upload/list.jpg" alt="">
</li>
<li>
<img src="./upload/list.jpg" alt="">
</li>
<li>
<img src="./upload/list.jpg" alt="">
</li>
<li>
<img src="./upload/list.jpg" alt="">
</li>
<li>
<img src="./upload/list.jpg" alt="">
</li>
</ul>
</div>
</div>
<!-- 列表頁主體部分 end -->
<!-- 底部模塊 footer start -->
<footer class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障，提供發票</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障，提供發票</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障，提供發票</p>
</div>
</li>
<li>
<h5></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障，提供發票</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<!--dl>dd>dt+dd -->
<dl>
<dt>服務指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">會員介紹</a></dd>
<dd><a href="#">生活旅行/團購</a></dd>
<dd><a href="#">常見問題</a></dd>
<dd><a href="#">大家電</a></dd>
<dd><a href="#">聯繫客服</a></dd>
</dl>
<dl>
<dt>服務指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">會員介紹</a></dd>
<dd><a href="#">生活旅行/團購</a></dd>
<dd><a href="#">常見問題</a></dd>
<dd><a href="#">大家電</a></dd>
<dd><a href="#">聯繫客服</a></dd>
</dl>
<dl>
<dt>服務指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">會員介紹</a></dd>
<dd><a href="#">生活旅行/團購</a></dd>
<dd><a href="#">常見問題</a></dd>
<dd><a href="#">大家電</a></dd>
<dd><a href="#">聯繫客服</a></dd>
</dl>
<dl>
<dt>服務指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">會員介紹</a></dd>
<dd><a href="#">生活旅行/團購</a></dd>
<dd><a href="#">常見問題</a></dd>
<dd><a href="#">大家電</a></dd>
<dd><a href="#">聯繫客服</a></dd>
</dl>
<dl>
<dt>服務指南</dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">會員介紹</a></dd>
<dd><a href="#">生活旅行/團購</a></dd>
<dd><a href="#">常見問題</a></dd>
<dd><a href="#">大家電</a></dd>
<dd><a href="#">聯繫客服</a></dd>
</dl>
<dl>
<dt>幫助中心</dt>
<dd>
<img src="./images/wx.png" alt="" />
優購客戶端
</dd>
</dl>
</div>
<div class="mod_copyright">
<div class="links">
<a href="#">關於我們</a> | <a href="#">聯繫我們</a> |<a href="#">
聯繫客服</a>
| <a href="#">商家入駐</a> | <a href="#">營銷中心</a> |
<a href="#">手機品優購</a> | <a href="#">友情鏈接</a> |
<a href="#">銷售聯盟</a> | <a href="#"></a> |
<a href="#">品優購公益</a> | <a href="#">English Site</a> |
<a href="#">Contact U</a>
</div>
<div class="copyright">
地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096
電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn <br />
京ICP備08001421號京公網安備110108007702
</div>
</div>
</div>
</footer>
<!-- 底部模塊 footer end -->
</body>
</html>
- list.css
/* 列表頁專用css */
.sk {
position: absolute;
left: 190px;
top: 40px;
padding: 3px 0 0 14px;
border-left: 1px solid #c81523;
}
.sk_list {
float: left;
}
.sk_list ul li {
float: left;
}
.sk_list ul li a {
display: block;
line-height: 47px;
padding: 0 30px;
font-size: 16px;
font-weight: 700;
color: #000;
}
.sk_con {
float: left;
}
.sk_con ul li {
float: left;
}
.sk_con ul li a {
display: block;
/* 行高更大將會把文字向下擠 */
line-height: 49px;
padding: 0 20px;
font-size: 14px;
}
.sk_con ul li:last-child a::after {
content: '\e91e';
font-family: 'icomoon';
}
.nav {
overflow: hidden;
}
.sk_bd ul li {
float: left;
overflow: hidden;
width: 290px;
height: 460px;
border: 1px solid transparent;
margin-right: 13px;
}
.sk_bd ul li:nth-child(4n) {
margin-right: 0;
}
.sk_bd ul li:hover {
border: 1px solid #c81523;
}
效果：
註冊頁製作
註冊頁面: register.html
注意:註冊頁面比較隱私,爲爲保護用戶信息,我們不需要對當前頁面做SEO優化。
- register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>個人註冊</title>
<link rel="shortcut icon" href="favicon.ico">
<!-- 引入初始css -->
<link rel="stylesheet" href="./css/base.css">
<!-- 引入註冊頁面css -->
<link rel="stylesheet" href="./css/register.css">
</head>
<body>
<div class="w">
<header>
<div class="logo">
<a href="index.html"><img src="./images/logo.png" alt=""></a>
</div>
</header>
<div class="registerarea ">
<h3>
註冊新用戶
<div class="login">我有賬號，去<a href="#">登錄</a></div>
</h3>
<div class="reg_form">
<form action="#">
<ul>
<li>
<label for="">手機號：</label><input type="text"><span class="error"> <i class="error_icon"></i>
手機號碼格式不正確，請從新輸入</span>
</li>
<li>
<label for="">短信驗證碼：</label><input type="text"><span class="success"> <i
class="success_icon"></i>
短信驗證碼輸入正確</span>
</li>
<li>
<label for="">登錄密碼：</label><input type="password"><span class="error"> <i
class="error_icon"></i>
手機號碼格式不正確，請從新輸入</span>
</li>
<li class="safe">
安全程度 <em class="ruo">弱</em>
<em class="zhong">中</em>
<em class="qiang">強</em>
</li>
<li>
<label for="">確認密碼：</label><input type="password"><span class="error"> <i
class="error_icon"></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>
<footer class="footer">
<div class="w">
<div class="mod_copyright">
<div class="links">
<a href="#">關於我們</a> | <a href="#">聯繫我們</a> |<a href="#">
聯繫客服</a>
| <a href="#">商家入駐</a> | <a href="#">營銷中心</a> |
<a href="#">手機品優購</a> | <a href="#">友情鏈接</a> |
<a href="#">銷售聯盟</a> | <a href="#"></a> |
<a href="#">品優購公益</a> | <a href="#">English Site</a> |
<a href="#">Contact U</a>
</div>
<div class="copyright">
地址：北京市昌平區建材城西路金燕龍辦公樓一層 郵編：100096
電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn <br />
京ICP備08001421號京公網安備110108007702
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
*register. css
/* 版心 */
.w {
width: 1200px;
margin: 0 auto;
}
header {
height: 84px;
border-bottom: 2px solid #c81523;
}
.logo {
padding-top: 18px;
}
.registerarea {
height: 522px;
border: 1px solid #ccc;
margin-top: 20px;
}
.registerarea h3 {
height: 42px;
line-height: 42px;
padding: 0 10px;
border-bottom: 1px solid #ccc;
background-color: #ececec;
font-size: 18px;
font-weight: normal;
}
.registerarea h3 .login {
float: right;
font-size: 14px;
}
.registerarea h3 .login a {
color: #c81523;
}
.reg_form {
width: 600px;
margin: 50px auto 0;
}
.reg_form ul li {
margin-bottom: 20px;
}
.reg_form ul li label {
display: inline-block;
width: 88px;
text-align: right;
}
.reg_form ul li [type=password],
.reg_form ul li [type=text] {
width: 242px;
height: 37px;
border: 1px solid #ccc;
}
.error {
color: #c81523;
}
.success_icon,
.error_icon {
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
}
.error_icon {
background: url("../images/error.png") no-repeat;
}
.success {
color: green;
}
.success_icon {
background: url("../images/success.png") no-repeat;
}
.safe {
padding-left: 170px;
}
.safe em {
padding: 0 12px;
color: #fff;
}
.ruo {
background-color: #de1111;
}
.zhong {
background-color: #40b83f;
}
.qiang {
background-color: #f79100;
}
.agree {
padding-left: 95px;
}
.agree input {
vertical-align: middle;
}
.agree a {
color: #1ba1e6;
}
.btn {
width: 200px;
height: 34px;
font-size: 14px;
background-color: #c81523;
color: #fff;
margin: 30px 0 0 7px;
}
.mod_copyright {
text-align: center;
padding-top: 20px;
}
.mod_copyright .links {
margin-bottom: 15px;
}
.mod_copyright .links a {
margin: 0 3px;
}
.mod_copyright .copyright {
line-height: 20px;
}
效果：
