品优购案例练习（四）
品优购列表页制作
列表页面是新的页面,我们需要新建页面文件 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
<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>
<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>
<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>
<header class="header w">
<div class="logo">
<h1><a href="index.html" title="品优购商城">品优购商城a>h1>
div>
<div class="sk">
<img src="./images/sk.png" alt="">
div>
<div class="search">
<input type="search" name="" id="" placeholder="语言开发" /><button>
搜索
button>
div>
<div class="hotwrods">
<a href="#" class="style_red">优惠购首发a>
<a href="#">亿元优惠a>
<a href="#">9.9元团购a>
<a href="#">满99减30a>
<a href="#">办公用品a>
<a href="#">电脑a>
<a href="#">通信a>
div>
<div class="shopcar">
我的购物车
<i class="count">8i>
div>
header>
<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>
<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>
<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>
<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 Sitea> |
<a href="#">Contact Ua>
div>
<div class="copyright">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br />
京ICP备08001421号京公网安备110108007702
div>
div>
div>
footer>
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
<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">
<link rel="stylesheet" href="./css/base.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 Sitea> |
<a href="#">Contact Ua>
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;
}
效果：
