【品优购】-CFANZ编程社区

index.html

<!DOCTYPE html>

<head>

<title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>

家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦

的网上购物体验!" />

表,硬盘,品优购" />

</head>

<body>

<ul>

<li>品优购欢迎您！ </li>

<li>

</li>

</ul>

</div>

<ul>

<li class="arrow-icon"><a href="#">我的品优购</a></li>

<li><a href="#">品优购会员</a></li>

<li class="arrow-icon"><a href="#">关注品优购</a></li>

</ul>

</div>

</section>

<h1><a href="index.html" title="品优购商城">品优购商城</a></h1>

</div>

</div>

<a href="#" class="color_red">优惠购首发</a>

</div>

<div class="shopcar">我的购物车

</div>

</header>

<div class="dt">全部商品分类</div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</nav>

<ul>

<li>

</li>

</ul>

</div>

<h3>评优购快报</h3>

</div>

<ul>

<li><a href="#"><strong>[特惠]</strong>备战开学季全民半价购数码</a></li>

<li><a href="#"><strong>[公告]</strong>品优稳占家电网购六成份额</a></li>

<li><a href="#"><strong>[特惠]</strong>百元中秋全品类礼券限量领</a></li>

<li><a href="#"><strong>[公告]</strong>上品优生鲜享阳澄湖大闸蟹</a></li>

<li><a href="#"><strong>[特惠]</strong>每日享折扣品优品质游,质享每天好生活</a>

</li>

</ul>

</div>

<ul>

<li>

<i></i>

</li>

<li>

<i></i>

</div>

</li>

<li>

<i></i>

</li>

<li>

<i></i>

</li>

<li>

<i></i>

</li>

<li>

<i></i>

</li>

<li>

<i></i>

</li>

<li>

<i></i>

</li>

<li>

<i></i>

</li>

<li>

<i></i>

</li>

<li>

<i></i>

</li>

<li>

<i></i>

</li>

</ul>

</div>

</div>

</div>

<ul>

</ul>

</div>

</div>

<ul>

<li>

<p> 爱仕达 30CM炒锅不粘锅NWG8330E电磁炉炒</p>

</li>

</ul>

<ul>

<li>

<p>（jabra）BOOSI劲步</p>

</li>

</ul>

<ul>

<li>

<p>阳光美包新款单肩包女包时尚子母包四件套女</p>

</li>

</ul>

<ul>

<li>

<p> 爱仕达 30CM炒锅不粘锅NWG8330E电磁炉炒</p>

</li>

</ul>

<ul>

<li>

<p>（jabra）BOOSI劲步</p>

</li>

</ul>

<ul>

<li>

<p>阳光美包新款单肩包女包时尚子母包四件套女</p>

</li>

</ul>

</div>

<ul>

</ul>

</div>

<ul>

<li><a href="#">空气净化器</a></li>

<li><a href="#">IH电饭煲</a></li>

<li><a href="#">滚筒洗衣机</a></li>

</ul>

</a>

</div>

</a>

</div>

</a>

</a>

</div>

</a>

</div>

</a>

</a>

</div>

<ul>

</ul>

</div>

<ul>

<li><a href="#">空气净化器</a></li>

<li><a href="#">IH电饭煲</a></li>

<li><a href="#">滚筒洗衣机</a></li>

</ul>

</a>

</div>

</a>

</div>

</a>

</a>

</div>

</a>

</div>

</a>

</a>

</div>

<ul>

<li>

<p>正品保障提供发表</p>

</div>

</li>

<li>

<p>急速物流急速送达</p>

</div>

</li>

<li>

<p>7天无理由退换货</p>

</div>

</li>

<li>

<p>私人定制家电套餐</p>

</div>

</li>

<li>

<p>您的购物指南</p>

</div>

</li>

</ul>

</div>

<dl>

</dl>

<dl>

<dd><a href="#">配送服务查询</a></dd>

<dd><a href="#">配送费收取标准</a></dd>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

<dd><a href="#">DIY装机</a></dd>

<dd><a href="#">品优购E卡</a></dd>

<dd><a href="#">品优购通信</a></dd>

</dl>

<dl>

<dd>

品优购客户端

</dd>

</dl>

</div>

<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>

地址：北京市昌平区建材城西路金燕龙办公楼一层邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>

京ICP备08001421号京公网安备110108007702

</div>

</footer>

</body>

</html>

index.css

.main {

width: 980px;

height: 455px;

margin-left: 220px;

margin-top: 10px;

background-color: #fff;

}

.focus {

float: left;

width: 721px;

height: 455px;

}

.newsflash {

float: right;

width: 250px;

height: 455px;

border: 1px solid #e4e4e4;

}

.news {

height: 165px;

}

.news-hd {

height: 33px;

line-height: 33px;

padding: 0 15px;

border-bottom: 1px dotted #e4e4e4;

}

.news-hd h3 {

float: left;

font-size: 14px;

}

.news-hd .more {

float: right;

}

.news-hd .more::after {

content: '\e909';

font-family: 'icomoon';

}

.news-bd {

padding: 5px 15px 0;

}

.news-bd ul li {

height: 24px;

line-height: 24px;

/* 隐藏超出部分 */

overflow: hidden;

/* 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */

white-space: nowrap;

/* 文本超出部分用省略号显示 */

text-overflow: ellipsis;

}

.lifeservice {

overflow: hidden;

height: 209px;

border: 1px solid #e4e4e4;

border-top: 0;

}

.lifeservice ul {

width: 252px;

}

.lifeservice ul li {

float: left;

position: relative;

width: 63px;

height: 71px;

border-right: 1px solid #e4e4e4;

border-bottom: 1px solid #e4e4e4;

text-align: center;

}

.lifeservice ul li .jian {

position: absolute;

right: 0px;

top: 0;

width: 10px;

height: 10px;

background-color: red;

}

.lifeservice ul li i {

display: inline-block;

width: 24px;

height: 28px;

margin-top: 12px;

background: url(../imges/icons.png) no-repeat -78px -16px;

}

.advertisement {

margin-top: 5px;

}

/* 推荐模块开始 */

.recommend {

height: 163px;

margin-top: 12px;

background-color: pink;

}

.recommend-hd {

float: left;

width: 205px;

height: 163px;

line-height: 163px;

text-align: center;

background-color: #5c5251;

}

.recommend-bd {

float: left;

background-color: #ebebeb;

}

.recommend-bd ul li {

float: left;

}

/* 推荐模块结束 */

/* 猜你喜欢模块开始 */

.title {

height: 48.5px;

}

.title h3 {

float: left;

margin: 9px 0;

font-size: 20.04px;

color: #333333;

}

.title a {

float: right;

color: #28a3ef;

font-size: 12px;

line-height: 48.5px;

margin-right: 30px;

}

.pic {

height: 252px;

border: 1px solid #e4e4e4;

}

.pic ul li {

float: left;

width: 193px;

height: 53px;

padding: 15px 30px;

/* text-align: center;

line-height: 53px; */

}

.pic ul li h3 {

color: #df3033;

}

/* 猜你喜欢模块结束 */

/* 楼层区模块开始 */

/* .floor-1区域开始 */

.floor-1-hd {

height: 30px;

border-bottom: 2px solid #c81623;

}

.floor-1-hd h3 {

float: left;

font-size: 18px;

color: #c81623;

font-weight: normal;

}

.floor-1 .banner {

margin-top: 30px;

}

.floor-1-bd {

height: 361px;

}

.tab_list {

float: right;

line-height: 30px;

}

.tab_list ul li {

float: left;

}

.tab_list ul li a {

padding: 0 15px;

}

.tab_list ul li:nth-child(even)::after {

display: inline-block;

content: '';

border: 1px solid red;

height: 8px;

}

.tab_list ul li:nth-child(odd)::after {

display: inline-block;

content: '';

border: 1px solid red;

height: 8px;

}

.tab_list ul li:last-child::after {

content: '';

border: 0;

}

.tab_list_item>div {

float: left;

height: 361px;

}

.list_1 {

width: 210px;

text-align: center;

background-color: #f9f9f9;

}

.list_1 ul {

padding-left: 12px;

}

.list_1 ul li {

float: left;

width: 85px;

height: 34px;

text-align: center;

line-height: 33px;

margin-right: 10px;

border-bottom: 1px solid #ccc;

}

.list_2 {

width: 329px;

}

.list_3 {

width: 221px;

border-right: 1px solid #ccc;

}

.list_4 {

width: 219px;

}

.bb {

/* 一般情况下 a如果要包含有宽度的盒子 a就要转换为块级元素 */

display: block;

border-bottom: 1px solid #ccc;

}

/* .floor-1区域结束 */

/* .floor-2区域开始 */

.floor-2-hd {

height: 30px;

border-bottom: 2px solid #c81623;

}

.floor-2-hd h3 {

float: left;

font-size: 18px;

color: #c81623;

font-weight: normal;

}

.floor-2 .banner {

margin-top: 30px;

}

.floor-2-bd {

height: 361px;

}

/* .floor-2区域结束 */

/* 楼层区模块结束 */

list.html

<!DOCTYPE html>

<head>

<title>列表页-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>

家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦

的网上购物体验!" />

表,硬盘,品优购" />

</head>

<body>

<ul>

<li>品优购欢迎您！ </li>

<li>

</li>

</ul>

</div>

<ul>

<li class="arrow-icon"><a href="#">我的品优购</a></li>

<li><a href="#">品优购会员</a></li>

<li class="arrow-icon"><a href="#">关注品优购</a></li>

</ul>

</div>

</section>

<h1>

<a href="index.html" title="品优购商城">品优购商城</a>

</h1>

</div>

</div>

</div>

<a href="#" class="color_red">优惠购首发</a>

</div>

<div class="shopcar">我的购物车

</div>

</header>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</nav>

</div>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

<ul>

<li>

<p>正品保障提供发表</p>

</div>

</li>

<li>

<p>急速物流急速送达</p>

</div>

</li>

<li>

<p>7天无理由退换货</p>

</div>

</li>

<li>

<p>私人定制家电套餐</p>

</div>

</li>

<li>

<p>您的购物指南</p>

</div>

</li>

</ul>

</div>

<dl>

</dl>

<dl>

<dd><a href="#">配送服务查询</a></dd>

<dd><a href="#">配送费收取标准</a></dd>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

<dd><a href="#">DIY装机</a></dd>

<dd><a href="#">品优购E卡</a></dd>

<dd><a href="#">品优购通信</a></dd>

</dl>

<dl>

<dd>

品优购客户端

</dd>

</dl>

</div>

<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>

地址：北京市昌平区建材城西路金燕龙办公楼一层邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>

京ICP备08001421号京公网安备110108007702

</div>

</footer>

</body>

</html>

list.css

.clearfix:before,

.clearfix:after {

content: "";

display: table;

}

.clearfix:after {

clear: both;

}

.clearfix {

*zoom: 1;

}

.nav {

overflow: hidden;

}

.miaosha {

position: absolute;

border-left: 1px solid #c81523;

left: 190px;

top: 40px;

padding: 3px 0 0 14px;

}

.miaosha_list {

float: left;

}

.miaosha_list ul li {

float: left;

}

.miaosha_list a {

display: block;

line-height: 47px;

padding: 0 30px;

font-size: 16px;

font-weight: 700;

color: black;

}

.miaosha_con {

float: left;

}

.miaosha_con ul li {

float: left;

}

.miaosha_con a {

display: block;

line-height: 49px;

padding: 0 20px;

font-size: 14px;

}

.miaosha_con ul li:last-child a::after {

content: '';

font-family: 'icomoon';

}

.miaosha_bd ul li {

float: left;

overflow: hidden;

margin-right: 13px;

width: 290px;

height: 460px;

border: 1px solid transparent;

}

.miaosha_bd ul li:nth-child(4n) {

margin-right: 0;

}

.miaosha_bd ul li:hover {

border: 1px solid #c81523;

}

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</header>

<h3>注册新用户

</h3>

<ul>

<li>

<label for="">手机号：</label> <input class="int"

οninput="value=value.match(/[0-9]{1,10}\.?[0-9]{0,6}/)" οnchange="checkNum(this)"

autocomplete="off" maxlength="11" />

<span class="error"><i class="error_icon"></i> 手机号格式不正确，请重新输入</span>

</li>

<li>

<label for="">短信验证码：</label> <input type="text" class="int">

<span class="success"><i class="success_icon"></i> 短信验证码输入正确</span>

</li>

<li>

<span class="error"><i class="error_icon"></i> 密码不少于8位，请重新输入</span>

</li>

</li>

<li>

<span class="error"><i class="error_icon"></i> 密码不正确，请重新输入</span>

</li>

<li class="agree"><input type="checkbox" name="" id="">  同意协议并注册

<a href="#">《知晓用户协议》</a>

</li>

<li>

</li>

</ul>

</form>

</div>

<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>

地址：北京市昌平区建材城西路金燕龙办公楼一层邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>

京ICP备08001421号京公网安备110108007702

</div>

</footer>

</div>

</body>

</html>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

}

.banner {

width: 1200px;

margin: 0 auto;

}

header {

height: 84px;

border-bottom: 2px solid #c81523;

}

.logo {

padding-top: 18px;

}

.main {

height: 522px;

margin-top: 20px;

border: 1px solid #ccc;

}

.main h3 {

height: 42px;

line-height: 42px;

padding: 0 10px;

font-size: 18px;

font-weight: normal;

border-bottom: 1px solid #ccc;

background-color: #ececec;

}

.newregister {

float: right;

font-size: 14px;

}

.newregister a {

color: #c81523;

}

.register_form {

width: 600px;

margin: 50px auto 0;

}

.register_form ul li {

padding: 10px 0;

}

.register_form ul li label {

display: inline-block;

width: 88px;

text-align: right;

}

.error {

color: #c81523;

}

.error_icon,

.success_icon {

display: inline-block;

width: 20px;

height: 20px;

background: url(../imges/error.png) no-repeat;

vertical-align: middle;

margin-top: -2px;

}

.success_icon {

background: url(../imges/success.png) no-repeat;

}

.register_form ul li .int {

width: 242px;

height: 37px;

border: 1px solid #ccc;

}

.success {

color: green;

}

.safe {

margin-left: 166px;

}

.safe em {

padding: 0 12px;

color: #fff;

}

.safe .ruo {

background-color: #de1111;

}

.safe .zhong {

background-color: #40b83f;

}

.safe .qiang {

background-color: #f79100;

}

.agree {

margin-left: 95px;

}

.agree input {

vertical-align: middle;

}

.agree a {

color: #1ba1e6;

}

.btn {

width: 200px;

height: 34px;

color: #fff;

margin: 30px 0 0 100px;

background-color: #c81623;

}

/* 底部区域模块 */

.mod_copyright {

text-align: center;

padding-top: 20px;

}

.links {

margin-bottom: 15px;

}

.links a {

margin: 0 3px;

}

.copyright {

line-height: 20px;

}

.common.css

/* public */

.banner {

width: 1200px;

margin: 0 auto;

}

.fleft {

float: left;

}

.fright {

float: right;

}

.color_red {

color: #c81623;

}

/* 声明字体图标 */

@font-face {

font-family: 'icomoon';

src: url('../fonts/icomoon.eot?tlgeni');

src: url('../fonts/icomoon.eot?tlgeni#iefix') format('embedded-opentype'),

url('../fonts/icomoon.ttf?tlgeni') format('truetype'),

url('../fonts/icomoon.woff?tlgeni') format('woff'),

url('../fonts/icomoon.svg?tlgeni#icomoon') format('svg');

font-weight: normal;

font-style: normal;

font-display: block;

}

/* 快捷导航 */

.shortcut {

width: 100%;

height: 31px;

line-height: 31px;

background-color: #f1f1f1;

}

.shortcut ul li {

float: left;

}

.shortcut .fright ul li:nth-child(even) {

width: 1px;

height: 12px;

background-color: #666;

margin: 9px 15px 0 15px;

}

.arrow-icon::after {

content: '\e900';

font-family: 'icomoon';

font-size: 12px;

margin-left: 3px;

}

/* header制作 */

.header {

position: relative;

height: 105px;

/* background-color: skyblue; */

}

.logo {

position: absolute;

width: 171px;

height: 61px;

top: 25px;

/* background-color: pink; */

}

.logo a {

display: block;

width: 171px;

height: 61px;

background: url(../imges/logo.png) no-repeat;

/* 京东做法 */

/* font-size: 0; */

text-indent: -9999px;

overflow: hidden;

}

/* 搜索框部分 */

.search {

position: absolute;

width: 538px;

height: 36px;

left: 346px;

top: 25px;

border: 2px solid #b1191a;

}

.search input {

float: left;

width: 454px;

height: 32px;

padding-left: 10px;

}

.search button {

float: left;

width: 80px;

height: 32px;

color: #fff;

font-size: 16px;

background-color: #b1191a;

}

.hotwords {

position: absolute;

top: 66px;

left: 346px;

}

.hotwords a {

margin: 0 10px;

}

/* 购物车 */

.shopcar {

position: absolute;

top: 25px;

right: 60px;

width: 140px;

height: 35px;

line-height: 35px;

text-align: center;

border: 1px solid #dfdfdf;

background-color: #f7f7f7;

}

.shopcar::before {

content: '\e910';

font-family: 'icomoon';

margin-right: 5px;

color: #b1191a;

}

.shopcar::after {

content: '\e909';

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 {

height: 47px;

border-bottom: 2px solid #b1191a;

}

.nav .dropdown {

float: left;

width: 210px;

height: 45px;

background-color: #b1191a;

}

.nav .navtems {

float: left;

}

.dropdown .dt {

width: 100%;

height: 100%;

color: #fff;

line-height: 45px;

text-align: center;

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;

}

.dropdown .dd ul li a {

color: #fff;

font-size: 12px;

padding-left: 10px;

}

.dropdown .dd ul li:hover {

background-color: #fff;

}

.dropdown .dd ul li::after {

position: absolute;

content: '\e909';

font-family: 'icomoon';

top: 1px;

right: 10px;

font-size: 14px;

color: #fff;

}

.dropdown .dd ul li:hover a {

color: #c81623;

}

.navtems ul li {

float: left;

}

.navtems ul li a {

display: block;

height: 45px;

line-height: 45px;

font-size: 16px;

padding: 0 25px;

}

/* 导航制作结束*/

/* footer模块开始 */

.footer {

height: 416px;

background-color: #f5f5f5;

padding-top: 30px;

}

.mod_service {

height: 80px;

border-bottom: 1px solid #ccc;

}

.mod_service ul li {

float: left;

width: 240px;

height: 50px;

padding-left: 70px;

/* background-color: pink; */

}

.mod_service ul li h5 {

float: left;

width: 50px;

height: 50px;

margin-right: 8px;

background: url(../imges/icons.png) no-repeat -252px -2px;

}

.mod_service ul li h2 {

float: left;

width: 50px;

height: 50px;

margin-right: 8px;

background: url(../imges/icons.png) no-repeat -254px -53px;

}

.mod_service ul li h3 {

float: left;

width: 50px;

height: 50px;

margin-right: 8px;

background: url(../imges/icons.png) no-repeat -256px -105px;

}

.mod_service ul li h1 {

float: left;

width: 50px;

height: 50px;

margin-right: 8px;

background: url(../imges/icons.png) no-repeat -257px -156px;

}

.mod_service ul li h6 {

float: left;

width: 50px;

height: 50px;

margin-right: 8px;

background: url(../imges/icons.png) no-repeat -256px -208px;

}

.service_txt h4 {

font-size: 14px;

font-weight: 700;

}

.service_txt p {

font-style: 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 {

text-align: center;

width: 90px;

}

.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;

}

/* footer模块结束 */

base.css

/* 把所有标签的内外边距清零 */

* {

margin: 0;

padding: 0;

/* 盒子模型 */

box-sizing: border-box;

}

/* em和i斜体字体变正常 */

em,

i {

font-style: normal;

}

/* 去掉li前面的小圆点 */

li {

list-style: none;

}

img {

/* 照顾低版本浏览器图片外包含的链接会有边框的问题 */

border: 0;

/* 取消图片底部回有留白缝隙的问题 */

vertical-align: middle;

}

a {

/* 取消超链接下面的下划线 */

text-decoration: none;

/* 超链接字体颜色 */

color: #666;

}

a:hover {

color: #c81623;

}

button {

/* 鼠标经过button时鼠标会变成小手 */

cursor: pointer;

}

button,

input {

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

border: 0;

outline: none;

}

body {

-webkit-font-smoothing: antialiased;

background-color: #fff;

font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

}