文章目录

  • base.css
  • 相似的开头head
  • 共有的shortcut、header和footer
    • html
    • css：common.css
  • index
    • main
    • recom
    • floor
  • list
    • 改了一点的header
    • 改了一点的nav
    • sk_container
  • register
    • head
    • registerarea的html
    • registerarea的css
  • 总体代码
    • index
    • list
    • register

视频p298-352

base.css

/* 把所有标签内外边距清零 */
* {margin: 0;padding: 0;box-sizing: border-box;
}body {/* CSS3 抗锯齿形 让文字显示的更加清晰 */-webkit-font-smoothing: antialiased;background-color: #fff;font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;color: #666
}a {color: #666;text-decoration: none
}a:hover {color: #c81623
}/* 去掉li 的小圆点 */
li {list-style: none
}/* 搜索框和按钮 */
input,
button {/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;/* 默认有灰色边框我们需要手动去掉 */border: 0;/* 点击后不会有蓝色外边框 */outline: none;
}/* em和i不要斜体 */
em,
i {font-style: normal
}/* 清除浮动 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}

相似的开头head

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- SEO:TDK --><title>品优购</title><meta name="description" content=""><meta name="keywords" content=""><!-- 引入图标 --><link rel="shortcut icon" href="favicon.ico"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/index.css">
</head>

共有的shortcut、header和footer

效果：

代码：

html

html：

<body><!-- 快捷导航模块 start --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！&nbsp;</li><li><a href="#">请登录</a> &nbsp; <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 class="arrow-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块 end --><!-- header头部模块制作 start --><header class="header w"><!-- logo模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- search搜索模块 --><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><!-- hotwords模块制作 --><div class="hotwords"><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><!-- 购物车模块 --><div class="shopcar">我的购物车<i class="count">8</i></div></header><!-- header头部模块制作 end --><!-- nav模块制作 start --><nav class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分类</div><div class="dd"><ul><li><a href="#">家用电器</a> </li><li><a href="#">手机</a>、 <a href="#">数码</a>、<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><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 class="navitems"><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></ul></div></div></nav><!-- nav模块制作 end --><!-- 底部模块的制作 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><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_cz.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">关于我们</a>  |  <a href="#">联系我们</a>  |  联系客服  |  商家入驻  |  营销中心  |  手机品优购  |  友情链接  |  销售联盟  |  品优购社区  |  品优购公益  |  English Site  |  Contact U</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 底部模块的制作 end -->
</body>

css：common.css

/* 声明字体图标 这里一定要注意路径的变化 */
@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;}
/* 版心 */
.w {width: 1200px;margin: 0 auto;
}
.fl {float: left;
}
.fr {float: right;
}
.style_red {color: #c81623;
}
/* 快捷导航模块 */
.shortcut {height: 31px;line-height: 31px;background-color: #f1f1f1;
}
.shortcut ul li {float: left;
}
/* 选择所有的偶数的小li */
.shortcut .fr ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0;
}
.arrow-icon::after {content: '\e91e';font-family: 'icomoon';margin-left: 6px;
}
/* header 头部制作 */
.header {position: relative;height: 105px;}
.logo {position: absolute;top: 25px;width: 171px;height: 61px;}
.logo a {display: block;width: 171px;height: 61px;background: url(../images/logo.png) no-repeat;/* font-size: 0;京东的做法*//* 淘宝的做法让文字隐藏 */text-indent: -9999px;overflow: hidden;
}
.search {position: absolute;left: 346px;top: 25px;width: 538px;height: 36px;border: 2px solid #b1191a;
}
.search input {float: left;width: 454px;height: 32px;padding-left: 10px;
}
.search button {float: left;width: 80px;height: 32px;background-color: #b1191a;font-size: 16px;color: #fff;
}
.hotwords {position: absolute;top: 66px;left: 346px;
}
.hotwords a {margin: 0 10px;
}
.shopcar {position: absolute;right: 60px;top: 25px;width: 140px;height: 35px;line-height: 35px;text-align: center;border: 1px solid #dfdfdf;background-color: #f7f7f7;
}
.shopcar::before {content: '\e93a';font-family: 'icomoon';margin-right: 5px;color: #b1191a;
}
.shopcar::after {content: '\e920';font-family: 'icomoon';margin-left: 10px;
}
.count {position: absolute;top: -5px;left: 105px;height: 14px;line-height: 14px;color: #fff;background-color: #e60012;padding: 0 5px;border-radius: 7px 7px 7px 0;
}
/* nav模块制作 */
.nav {height: 47px;border-bottom: 2px solid #b1191a;
}
.nav .dropdown {float: left;width: 210px;height: 45px;background-color: #b1191a;
}
.nav .navitems {float: left;
}
.dropdown .dt {width: 100%;height: 100%;color: #fff;text-align: center;line-height: 45px;font-size: 16px;
}
.dropdown .dd {display: none;width: 210px;height: 465px;background-color: #c81623;margin-top: 2px;
}
.dropdown .dd ul li {position: relative;height: 31px;line-height: 31px;margin-left: 2px;padding-left: 10px;
}
.dropdown .dd ul li:hover {background-color: #fff;
}
.dropdown .dd ul li::after {position: absolute;top: 1px;right: 10px;color: #fff;font-family: 'icomoon';content: '\e920';font-size: 14px;
}
.dropdown .dd ul li a {font-size: 14px;color: #fff;
}
.dropdown .dd ul li:hover a {color: #c81623;
}
.navitems ul li {float: left;
}
.navitems ul li a {display: block;height: 45px;line-height: 45px;font-size: 16px;padding: 0 25px;
}/* 底部模块制作 */
.footer {height: 415px;background-color: #f5f5f5;padding-top: 30px;
}
.mod_service {height: 80px;border-bottom: 1px solid #ccc;
}
.mod_service ul li {float: left;width: 300px;height: 50px;padding-left: 35px;
}
.mod_service ul li h5 {float: left;width: 50px;height: 50px;background: url(../images/icons.png) no-repeat -252px -2px;margin-right: 8px;
}
.service_txt h4 {font-size: 14px;
}
.service_txt  p {font-size: 12px;
}
.mod_help {height: 185px;border-bottom: 1px solid #ccc;padding-top: 20px;padding-left: 50px;
}
.mod_help dl {float: left;width: 200px;
}
.mod_help dl:last-child {width: 90px;text-align: center;
}
.mod_help dl dt {font-size: 16px; margin-bottom: 10px;
}
.mod_copyright {text-align: center;padding-top: 20px;
}
.links {margin-bottom: 15px;
}
.links a {margin: 0 3px;
}
.copyright {line-height: 20px;
}

index

效果：

main

html：

<!-- main模块 start --><div class="w"><div class="main"><div class="focus"><ul><li><img src="upload/focus1.png" alt=""></li></ul></div><div class="newsflash"><div class="news"><div class="news-hd"><h5>品优购快报</h5><a href="#" class="more">更多</a></div><div class="news-bd"><ul><li><a href="#"><strong>[重磅]</strong> 他来了他来了，pink老师来了，他是谁？</a></li><li><a href="#"><strong>[重磅]</strong> 他来了他来了，pink老师来了</a></li><li><a href="#"><strong>[重磅]</strong> 他来了他来了，pink老师来了</a></li><li><a href="#"><strong>[重磅]</strong> 他来了他来了，pink老师来了</a></li><li><a href="#"><strong>[重磅]</strong> 他来了他来了，pink老师来了，他是谁？</a></li></ul></div></div><div class="lifeservice"><ul><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li></ul></div><div class="bargain"><img src="upload/bargain.png" alt=""></div></div></div></div><!-- main模块 end -->

css：

/* -------------main模块------------- */.main {width: 980px;height: 455px;margin-left: 220px;margin-top: 10px;
}.main .focus {float: left;width: 721px;height: 455px;
}.main .newsflash {float: right;width: 250px;height: 455px;
}.main .newsflash .news {height: 165px;border: 1px solid #ccc;border-bottom: 0;
}.main .newsflash .news .news-hd {height: 33px;line-height: 33px;border-bottom: 1px dotted #ccc;padding: 0 15px;
}.main .newsflash .news .news-hd h5 {float: left;font-size: 14px;
}.main .newsflash .news .news-hd .more {float: right;
}.main .newsflash .news .news-hd .more::after {content: '\e920';font-family: 'icomoon';}.main .newsflash .news .news-bd {padding: 5px 15px 0;
}.main .newsflash .news .news-bd li {height: 24px;line-height: 24px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.main .newsflash .lifeservice {height: 209px;border: 1px solid #ccc;/* border-top: 0; */overflow: hidden;
}.main .newsflash .lifeservice ul {width: 252px;
}.main .newsflash .lifeservice ul li {border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;width: 63px;height: 72px;float: left;text-align: center;
}.main .newsflash .lifeservice ul li i {display: inline-block;text-align: center;width: 24px;height: 28px;/* background-color: pink; */margin-top: 12px;background: url(../images/icons.png) no-repeat -19px -15px;
}.main .newsflash .bargain {margin-top: 5px;
}

recom

<!-- 推荐模块start--><div class="w recom"><div class="recom-hd"><img src="images/recom.png" alt=""></div><div class="recom-bd"><ul><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li></ul></div></div><!-- 推荐模块end-->

css：

/* -------------recom模块------------- */.recom {height: 163px;/* background-color: pink; */margin-top: 12px;
}.recom .recom-hd {float: left;width: 205px;height: 163px;background-color: #5c5251;text-align: center;padding-top: 30px;
}.recom .recom-bd {float: left;width: 995px;background-color: #ebebeb;
}.recom .recom-bd ul li {position: relative;float: left;width: 248px;height: 163px;
}/* 前三个 */
.recom .recom-bd ul li:nth-child(-n+3):after {content: '';position: absolute;right: 0;top: 10px;height: 145px;width: 1px;background-color: #ddd;
}.recom .recom-bd ul li img {width: 248px;height: 163px;
}

floor

html：

<!-- 楼层区模块start--><div class="floor"><!-- 1楼 家用电器楼层 --><div class="w jiadian"><div class="box-hd"><h3>家用电器</h3><div class="tab_list"><ul><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><li><a href="#">空气净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><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></ul><a href="#"><img src="upload/floor-1-1.png" alt=""></a></div><div class="col_329"><a href="#"><img src="upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div><div class="col_219"><a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></div></div></div></div></div><!-- 楼层区模块end-->

css：

/* -------------floor模块------------- */
.floor .w {margin-top: 30px;
}.floor .box-hd {height: 30px;border-bottom:2px solid #c81632 ;
}.floor .box-hd h3 {float: left;font-size: 18px;color: #c81632;font-weight: 400;
}.floor .box-hd .tab_list {float: right;line-height: 30px;
}.floor .box-hd .tab_list ul li {float: left;
}.floor .box-hd .tab_list ul li a {margin: 0 15px;
}.floor .box-bd {height: 361px;
}.floor .box-bd .tab_content .tab_list_item>div {float: left;height: 361px;
}.floor .box-bd .tab_content .tab_list_item .bb {/* 一般情况下如果a包含块级元素，那它也要转换成块级元素 */display: block;border-bottom: 1px solid #ccc;
}.col_210 {width: 210px;background-color: #f9f9f9;text-align: center;
}.col_210 ul {padding-left: 12px;
}.col_210 ul li {float: left;width: 85px;height: 34px;border-bottom: 1px solid #ccc;text-align: center;line-height: 33px;margin-right: 10px;}.col_329 {width: 329px;
}.col_221 {width: 221px;border-right: 1px solid #ccc;
}.col_219 {width: 219px;
}

list

效果：

改了一点的header

    <!-- header头部模块 start --><header class="header w"><!-- logo模块 --><!-- 有logo的SEO优化 --><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><!-- hotwords模块 --><div class="hotwords"><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 -->

css：

/* -------header------- */.header .sk {position: absolute;border-left: 1px solid #c81532;left: 190px;top: 40px;padding-left: 14px;padding-top: 3px;
}

改了一点的nav

html：

<!-- nav模块 start --><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><li><a href="#">更多分类</a></li></ul></div></div></nav><!-- nav模块 end -->

css：

/* -------nav------- */
.nav {overflow: hidden;
}.nav .sk_list {float: left;
}.nav .sk_list ul li {float: left;
}.nav .sk_list ul li a {display: block;line-height: 47px;padding: 0 30px;font-weight: 700;font-size: 16px;color: #000;
}.nav .sk_con {float: left;
}.nav .sk_con ul li {float: left;
}.nav .sk_con ul li a {display: block;line-height: 47px;padding: 0 20px;font-size: 14px;
}.nav .sk_con ul li:last-child a::after {content: '\e91e';font-family: 'icomoon';
}

sk_container

html：

<!-- sk_container start --><div class="w sk_container"><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"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li></ul></div></div><!-- sk_container end -->

css：

/* -------sk_container------- */.sk_container .sk_bd ul li {overflow: hidden;float: left;margin-right: 13px;/* li本身就有1像素的边框 */width: 290px;height: 460px;border-color: transparent;}.sk_container .sk_bd ul li:nth-child(4n) {margin-right: 0;
}.sk_container .sk_bd ul li:hover {border: 1px solid #c81532;
}

register

head

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><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/common.css"> --><link rel="stylesheet" href="css/register.css">
</head>

registerarea的html

<div class="registerarea"><h3>注册新用户<div class="login">我有账号，去<a href="#" class="style_red">登陆</a></div></h3><!-- 注册内容 --><div class="reg-form"><form action=""><ul><li><label for="">手机号：</label><input type="tel" class="inp"><span class="error"><i class="error_icon"></i>&nbsp;手机号码格式不正确，请重新输入</span></li><li><label for="">短信验证码：</label><input type="text" class="inp"><span class="success"><i class="success_icon"></i>&nbsp;短信验证码输入正确</span></li><li><label for="">登录密码：</label><input type="password" class="inp"><span class="error"><i class="error_icon"></i>&nbsp;密码少于6位数，请继续输入</span></li><li class="safe">安全程度<em class="ruo">弱</em>&nbsp;<em class="zhong">中</em>&nbsp;<em class="qiang">强</em></li><li><label for="">验证密码：</label><input type="password" class="inp"><span class="error"><i class="error_icon"></i>&nbsp;密码不一致，请重新输入</span></li><li class="agree"><input type="checkbox" name="" id="">同意协议并注册<a href="#">《知晓用户协议》</a></li><li><input type="submit" value="完成注册" class="btn"></li></ul></form></div></div>

registerarea的css

/* -------- registerarea-------- */.registerarea {height: 522px;border: 1px solid #ccc;margin-top: 20px;
}.registerarea h3 {height: 42px;border-bottom: 1px solid #ccc;background-color: #ececec;padding: 0 10px;line-height: 42px;font-size: 18px;font-weight: 400;
}.registerarea h3 .login {float: right;font-size: 14px;
}.registerarea .reg-form {width: 600px;margin: 50px auto 0;
}.registerarea .reg-form ul li {margin-bottom: 20px;
}.registerarea .reg-form ul li label {display: inline-block;width: 88px;text-align: right;
}.registerarea .reg-form ul li .inp {width: 242px;height: 37px;border: 1px solid #ccc;
}.registerarea .reg-form ul li .error {color: #c8132c;
}.registerarea .reg-form ul li span .error_icon {display: inline-block;vertical-align: middle;margin-top: -2px;width: 20px;height: 20px;background: url(../images/error.png) no-repeat;
}.registerarea .reg-form ul li .success {color: green;
}.registerarea .reg-form ul li span .success_icon {display: inline-block;vertical-align: middle;margin-top: -2px;width: 20px;height: 20px;background: url(../images/success.png) no-repeat;
}.registerarea .reg-form ul .safe {padding-left: 170px;
}.registerarea .reg-form ul .safe em {padding: 0 12px;color: #fff;
}.registerarea .reg-form ul .safe .ruo {background-color: #de1111;
}.registerarea .reg-form ul .safe .zhong {background-color: #f79100;
}.registerarea .reg-form ul .safe .qiang {background-color: #40b83f;
}.registerarea .reg-form ul .agree {padding-left: 95px;
}.registerarea .reg-form ul .agree input {vertical-align: middle;
}.registerarea .reg-form ul .agree a {color: #1ba1e6;
}.registerarea .reg-form ul .btn {width: 200px;height: 34px;background-color: #c8132c;font-size: 14px;color: #fff;margin: 30px 0 0 70px;/* text-align: center; */
}

总体代码

index

html：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- SEO:TDK --><title>品优购</title><meta name="description" content=""><meta name="keywords" content=""><!-- 引入图标 --><link rel="shortcut icon" href="favicon.ico"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/index.css">
</head><body><!-- 快捷导航模块 start--><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！&nbsp;</li><li><a href="#">请登录&nbsp;</a><a href="#" class="style_red">&nbsp;&nbsp;免费注册</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 class="arrow-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块 end--><!-- header头部模块 start --><header class="header w"><!-- logo模块 --><!-- 有logo的SEO优化 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- search模块 --><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><!-- hotwords模块 --><div class="hotwords"><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模块 start --><nav class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分类</div><div class="dd"><ul><li><a href="">家用电器</a></li><li><a href="#">手机</a>、 <a href="#">数码</a>、<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><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 class="navitems"><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></ul></div></div></nav><!-- nav模块 end --><!-- main模块 start --><div class="w"><div class="main"><div class="focus"><ul><li><img src="upload/focus1.png" alt=""></li></ul></div><div class="newsflash"><div class="news"><div class="news-hd"><h5>品优购快报</h5><a href="#" class="more">更多</a></div><div class="news-bd"><ul><li><a href="#"><strong>[重磅]</strong> 他来了他来了，pink老师来了，他是谁？</a></li><li><a href="#"><strong>[重磅]</strong> 他来了他来了，pink老师来了</a></li><li><a href="#"><strong>[重磅]</strong> 他来了他来了，pink老师来了</a></li><li><a href="#"><strong>[重磅]</strong> 他来了他来了，pink老师来了</a></li><li><a href="#"><strong>[重磅]</strong> 他来了他来了，pink老师来了，他是谁？</a></li></ul></div></div><div class="lifeservice"><ul><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li><li><i></i><p>话费</p></li></ul></div><div class="bargain"><img src="upload/bargain.png" alt=""></div></div></div></div><!-- main模块 end --><!-- 推荐模块start--><div class="w recom"><div class="recom-hd"><img src="images/recom.png" alt=""></div><div class="recom-bd"><ul><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li></ul></div></div><!-- 推荐模块end--><!-- 楼层区模块start--><div class="floor"><!-- 1楼 家用电器楼层 --><div class="w jiadian"><div class="box-hd"><h3>家用电器</h3><div class="tab_list"><ul><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><li><a href="#">空气净水</a>|</li><li><a href="#">新奇特</a>|</li><li><a href="#">高端电器</a></li></ul></div></div><div class="box-bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><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></ul><a href="#"><img src="upload/floor-1-1.png" alt=""></a></div><div class="col_329"><a href="#"><img src="upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a><a href="#"><img src="upload/floor-1-3.png" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/floor-1-4.png" alt=""></a></div><div class="col_219"><a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a><a href="#"><img src="upload/floor-1-6.png" alt=""></a></div></div></div></div></div></div><!-- 楼层区模块end--><!-- 底部模块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><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_cz.jpg" 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="copyight">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 底部模块end -->
</body></html>

css：

/* -------------main模块------------- */.main {width: 980px;height: 455px;margin-left: 220px;margin-top: 10px;
}.main .focus {float: left;width: 721px;height: 455px;
}.main .newsflash {float: right;width: 250px;height: 455px;
}.main .newsflash .news {height: 165px;border: 1px solid #ccc;border-bottom: 0;
}.main .newsflash .news .news-hd {height: 33px;line-height: 33px;border-bottom: 1px dotted #ccc;padding: 0 15px;
}.main .newsflash .news .news-hd h5 {float: left;font-size: 14px;
}.main .newsflash .news .news-hd .more {float: right;
}.main .newsflash .news .news-hd .more::after {content: '\e920';font-family: 'icomoon';}.main .newsflash .news .news-bd {padding: 5px 15px 0;
}.main .newsflash .news .news-bd li {height: 24px;line-height: 24px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}.main .newsflash .lifeservice {height: 209px;border: 1px solid #ccc;/* border-top: 0; */overflow: hidden;
}.main .newsflash .lifeservice ul {width: 252px;
}.main .newsflash .lifeservice ul li {border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;width: 63px;height: 72px;float: left;text-align: center;
}.main .newsflash .lifeservice ul li i {display: inline-block;text-align: center;width: 24px;height: 28px;/* background-color: pink; */margin-top: 12px;background: url(../images/icons.png) no-repeat -19px -15px;
}.main .newsflash .bargain {margin-top: 5px;
}/* -------------recom模块------------- */.recom {height: 163px;/* background-color: pink; */margin-top: 12px;
}.recom .recom-hd {float: left;width: 205px;height: 163px;background-color: #5c5251;text-align: center;padding-top: 30px;
}.recom .recom-bd {float: left;width: 995px;background-color: #ebebeb;
}.recom .recom-bd ul li {position: relative;float: left;width: 248px;height: 163px;
}/* 前三个 */
.recom .recom-bd ul li:nth-child(-n+3):after {content: '';position: absolute;right: 0;top: 10px;height: 145px;width: 1px;background-color: #ddd;
}.recom .recom-bd ul li img {width: 248px;height: 163px;
}/* -------------floor模块------------- */
.floor .w {margin-top: 30px;
}.floor .box-hd {height: 30px;border-bottom:2px solid #c81632 ;
}.floor .box-hd h3 {float: left;font-size: 18px;color: #c81632;font-weight: 400;
}.floor .box-hd .tab_list {float: right;line-height: 30px;
}.floor .box-hd .tab_list ul li {float: left;
}.floor .box-hd .tab_list ul li a {margin: 0 15px;
}.floor .box-bd {height: 361px;
}.floor .box-bd .tab_content .tab_list_item>div {float: left;height: 361px;
}.floor .box-bd .tab_content .tab_list_item .bb {/* 一般情况下如果a包含块级元素，那它也要转换成块级元素 */display: block;border-bottom: 1px solid #ccc;
}.col_210 {width: 210px;background-color: #f9f9f9;text-align: center;
}.col_210 ul {padding-left: 12px;
}.col_210 ul li {float: left;width: 85px;height: 34px;border-bottom: 1px solid #ccc;text-align: center;line-height: 33px;margin-right: 10px;}.col_329 {width: 329px;
}.col_221 {width: 221px;border-right: 1px solid #ccc;
}.col_219 {width: 219px;
}

list

html：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- SEO:TDK --><title>品优购列表页</title><meta name="description" content=""><meta name="keywords" content=""><!-- 引入图标 --><link rel="shortcut icon" href="favicon.ico"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/list.css">
</head><body><!-- 快捷导航模块 start--><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您！&nbsp;</li><li><a href="#">请登录&nbsp;</a><a href="#" class="style_red">&nbsp;&nbsp;免费注册</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 class="arrow-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块 end--><!-- header头部模块 start --><header class="header w"><!-- logo模块 --><!-- 有logo的SEO优化 --><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><!-- hotwords模块 --><div class="hotwords"><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模块 start --><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><li><a href="#">更多分类</a></li></ul></div></div></nav><!-- nav模块 end --><!-- sk_container start --><div class="w sk_container"><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"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li><li><img src="upload/list.jpg"></li></ul></div></div><!-- sk_container end --><!-- 底部模块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><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_cz.jpg" 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="copyight">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 底部模块end -->
</body>

css：

/* -------header------- */.header .sk {position: absolute;border-left: 1px solid #c81532;left: 190px;top: 40px;padding-left: 14px;padding-top: 3px;
}/* -------nav------- */
.nav {overflow: hidden;
}.nav .sk_list {float: left;
}.nav .sk_list ul li {float: left;
}.nav .sk_list ul li a {display: block;line-height: 47px;padding: 0 30px;font-weight: 700;font-size: 16px;color: #000;
}.nav .sk_con {float: left;
}.nav .sk_con ul li {float: left;
}.nav .sk_con ul li a {display: block;line-height: 47px;padding: 0 20px;font-size: 14px;
}.nav .sk_con ul li:last-child a::after {content: '\e91e';font-family: 'icomoon';
}/* -------sk_container------- */.sk_container .sk_bd ul li {overflow: hidden;float: left;margin-right: 13px;/* li本身就有1像素的边框 */width: 290px;height: 460px;border-color: transparent;}.sk_container .sk_bd ul li:nth-child(4n) {margin-right: 0;
}.sk_container .sk_bd ul li:hover {border: 1px solid #c81532;
}

register

html：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><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/common.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="#" class="style_red">登陆</a></div></h3><!-- 注册内容 --><div class="reg-form"><form action=""><ul><li><label for="">手机号：</label><input type="tel" class="inp"><span class="error"><i class="error_icon"></i>&nbsp;手机号码格式不正确，请重新输入</span></li><li><label for="">短信验证码：</label><input type="text" class="inp"><span class="success"><i class="success_icon"></i>&nbsp;短信验证码输入正确</span></li><li><label for="">登录密码：</label><input type="password" class="inp"><span class="error"><i class="error_icon"></i>&nbsp;密码少于6位数，请继续输入</span></li><li class="safe">安全程度<em class="ruo">弱</em>&nbsp;<em class="zhong">中</em>&nbsp;<em class="qiang">强</em></li><li><label for="">验证密码：</label><input type="password" class="inp"><span class="error"><i class="error_icon"></i>&nbsp;密码不一致，请重新输入</span></li><li class="agree"><input type="checkbox" name="" id="">同意协议并注册<a href="#">《知晓用户协议》</a></li><li><input type="submit" value="完成注册" class="btn"></li></ul></form></div></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="copyight">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br>京ICP备08001421号京公网安备110108007702</div></div></div></body>

css：

.w {width: 1200px;margin: 0 auto;
}.style_red {color: #c8132c;
}/* -------- header-------- */header {height: 84px;border-bottom: 2px solid #c8132c;
}header .logo {padding-top: 18px;
}/* -------- registerarea-------- */.registerarea {height: 522px;border: 1px solid #ccc;margin-top: 20px;
}.registerarea h3 {height: 42px;border-bottom: 1px solid #ccc;background-color: #ececec;padding: 0 10px;line-height: 42px;font-size: 18px;font-weight: 400;
}.registerarea h3 .login {float: right;font-size: 14px;
}.registerarea .reg-form {width: 600px;margin: 50px auto 0;
}.registerarea .reg-form ul li {margin-bottom: 20px;
}.registerarea .reg-form ul li label {display: inline-block;width: 88px;text-align: right;
}.registerarea .reg-form ul li .inp {width: 242px;height: 37px;border: 1px solid #ccc;
}.registerarea .reg-form ul li .error {color: #c8132c;
}.registerarea .reg-form ul li span .error_icon {display: inline-block;vertical-align: middle;margin-top: -2px;width: 20px;height: 20px;background: url(../images/error.png) no-repeat;
}.registerarea .reg-form ul li .success {color: green;
}.registerarea .reg-form ul li span .success_icon {display: inline-block;vertical-align: middle;margin-top: -2px;width: 20px;height: 20px;background: url(../images/success.png) no-repeat;
}.registerarea .reg-form ul .safe {padding-left: 170px;
}.registerarea .reg-form ul .safe em {padding: 0 12px;color: #fff;
}.registerarea .reg-form ul .safe .ruo {background-color: #de1111;
}.registerarea .reg-form ul .safe .zhong {background-color: #f79100;
}.registerarea .reg-form ul .safe .qiang {background-color: #40b83f;
}.registerarea .reg-form ul .agree {padding-left: 95px;
}.registerarea .reg-form ul .agree input {vertical-align: middle;
}.registerarea .reg-form ul .agree a {color: #1ba1e6;
}.registerarea .reg-form ul .btn {width: 200px;height: 34px;background-color: #c8132c;font-size: 14px;color: #fff;margin: 30px 0 0 70px;/* text-align: center; */
}/* -------- mod_copyright-------- */.mod_copyright {text-align: center;padding-top: 20px;
}.mod_copyright .links {margin-bottom: 15px;
}.mod_copyright .links a {margin: 0 3px;
}.mod_copyright .copyight {height: 20px;line-height: 20px;
}

【前端】html+css案例：品优购 代码存档相关推荐

  1. HTML和CSS实现品优购首页

    HTML和CSS实现品优购首页 效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-CN"><h ...

  2. HTML+CSS实现品优购登录界面

    HTML+CSS实现品优购登录界面效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...

  3. CSS综合案例-品优购电商04

    目录 1. 品优购项目(四) 1). 详情页 detail.html 常用单词 2). 面包屑导航 3). 产品介绍 模块 4). 预览区域制作 3.1 preview_list 制作 5). 产品详 ...

  4. CSS 8 品优购项目

    目录 1.品优购项目规划 1.1网站制作流程 1.2品优购项目整体介绍 1.3品优购项目的学习目的 1.4开发工具以及技术栈 小总结​ 1.5品优购项目搭建工作. 1.5.1创建文件夹 1.5.2创建 ...

  5. 基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现（计算机毕业设计）

    HTML5期末大作业:电商网站设计--仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计 ...

  6. 【前端必备项目】品优购商城前端

    技术栈 Html css JavaScript jQuery 体验 pc端打开:https://yangyanyan.top/pygshopping/ 源码(记得给我个star):https://gi ...

  7. 前端与移动开发----购物商城案例（品优购PC项目上）

    品优购项目-上 目标 能够遵循品优购代码规范 能够在品优购首页中引入 favicon 图标 能够说出三大标签 SEO 优化 能够在品优购首页中使用字体图标 能够说出 LOGO 需要哪些 SEO 优化 ...

  8. 前端基础第一天项目 品优购

    品优购项目-上 目标 能够遵循品优购代码规范 能够在品优购首页中引入 favicon 图标 能够说出三大标签 SEO 优化 能够在品优购首页中使用字体图标 能够说出 LOGO 需要哪些 SEO 优化 ...

  9. Web前端开发——品优购项目(上)

    品优购项目介绍 项目名称:品优购 项目描述:品优购是一个电商网站,我们要完成 PC 端首页.列表页.注册页面的制作 主页 列表页 注册页 品优购项目的学习目的 电商类网站比较综合,里面需要大量的布局技 ...

最新文章

  1. 使用MapReduce实现join操作
  2. js中的null和undefined总结
  3. 第4周实践项目1 建立单链表（非多组织结构）
  4. 腾讯云Service Mesh生产实践及架构演进
  5. 网络安全应急演练方案内容_筑牢网络安全屏障 盐田区开展网络安全应急演练...
  6. 利用系统错误日志监控磁盘健康状况
  7. java gdal_Java通过jni方式调用gdal踩过的坑
  8. python足球投注_/usr/lib目录属性更改引发的蝴蝶效应
  9. 0基础学python做什么工作好-零基础自学python到什么程度才有机会去小公司实习？...
  10. 完美卸载SQL Server2014数据库
  11. 使用ZipEntry解压zip文件报错: java.lang.IllegalArgumentException: MALFORMED
  12. c语言课程设计交通处罚单系统,交通处罚单管理系统课程设计.doc
  13. python 水位流量关系曲线_水位流量关系曲线的绘制方法_张红艳
  14. Android 开机权限默认授予Runtime权限
  15. Android OTG U盘相关
  16. Mac电脑系统设置WIWF热点
  17. qq浏览器的两种开发者工具
  18. 【Vue2.0学习】—数据绑定
  19. 探究阿里云物联网开发板1-Haas 100
  20. Abaqus 实体平移和旋转

热门文章

  1. java疫情防控管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
  2. Android常用控件，四大组件，intent应用
  3. 5G通信面临的困难挑战及解决方案有哪些？
  4. 视频教程-2017年软上半年软考网络工程师级别考前冲刺之第一天-软考
  5. Linux下安装宋体以及微软雅黑字体-转PDF后不显示中文，以及中文乱码
  6. c语言 压缩txt文件的函数,c语言 文本文件压缩
  7. 使用.Net对图片进行裁剪、缩放、与加水印
  8. linux系统useradd及周边命令和概念详解
  9. 电商私域流量品牌社群规划运营sop表格工作计划方案范文
  10. 数字鸿沟、无关人员进入会议……网课爆破事件都给了我们什么启示？