该系列文章是博主学习前端入门课程的笔记，同时也为了方便查阅，有任何错漏或疑问都欢迎在评论区提出。本文是项目练习，目的是熟悉网站开发流程及复习所学知识，网站基本涵盖了
所有的HTML和CSS的基础知识。网站是对照psd文件编写而来，文件可以在课程评论区置顶链接获取

第一章文件夹结构

base.css对项目进行初始化，common.css为网站公共部分设置样式(如头部、底部)
images文件夹存放logo、招牌图片等等(不变的)，upload文件夹存放产品图片(常换的)
favicon.ico是网页的图标

第二章初始化CSS代码

2.1 base.css

/* 初始化css *//* 把我们所有标签的内外边距清零 */
* {margin: 0;padding: 0;/* css3盒子模型 */box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {font-style: normal
}
/* 去掉li 的小圆点 */
li {list-style: none
}img {/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */border: 0;/* 取消图片底侧有空白缝隙的问题 */vertical-align: middle
}button {/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */cursor: pointer
}a {color: #666;text-decoration: none
}a:hover {color: #c81623
}button,
input {/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;/* 去除默认边框 */border: 0;/* 去除聚焦时出现的蓝色边框 */outline: none;
}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
}.hide,
.none {display: none
}
/* 清除浮动 */
.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0
}.clearfix {*zoom: 1
}

第三章首页(index)代码

3.1 index.html

<!DOCTYPE html>
<html lang="zh-CN"><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><!-- 网站说明 --><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"><!-- index文件 --><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="#">请登录</a> &nbsp; <a href="register.html" 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"><!-- SEO优化，h1标签是为了提权 --><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><!-- search模块 --><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><!-- 热词模块 --><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"><dt>全部商品分类</dt><dd><ul><li><a href="#">家用电器</a></li><li><a href="list.html">手机、</a><a href="#">数码、</a><a href="#">通信</a></li><li><a href="#">电脑、</a><a href="#">办公</a></li><li><a href="#">家居、</a><a href="#">家具、</a><a href="#">家装、</a><a href="#">厨具</a></li><li><a href="#">男装、</a><a href="#">女装、</a><a href="#">童装、</a><a href="#">内衣</a></li><li><a href="#">个户化妆、</a><a href="#">清洁用品、</a><a href="#">宠物</a></li><li><a href="#">鞋靴、</a><a href="#">箱包、</a><a href="#">珠宝、</a><a href="#">奢侈品</a><a href="#"></a></li><li><a href="#">运动户外、</a><a href="#">钟表</a></li><li><a href="#">汽车、</a><a href="#">汽车用品</a></li><li><a href="#">母婴、</a><a href="#">玩具乐器</a></li><li><a href="#">食品、</a><a href="#">酒类、</a><a href="#">生鲜、</a><a href="#">特产</a></li><li><a href="#">医药保健</a></li><li><a href="#">图书、</a><a href="#">音像、</a><a href="#">电子书</a></li><li><a href="#">彩票、</a><a href="#">旅行、</a><a href="#">充值、</a><a href="#">票务</a></li><li><a href="#">理财、</a><a href="#">众筹、</a><a href="#">白条、</a><a href="#">保险</a></li>         </ul></dd></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"><!-- 正式开发中要这样写，配合js设计轮播图 --><ul><li><img src="upload/focus1.png" alt=""></li></ul></div><div class="newsflash"><div class="news"><div class="news_hd"><h5>品优购快报</h5><!-- 箭头放到a标签和用after伪元素的区别：直接放说明字体和箭头是一体的，但实际开发中不区分两种写法--><a href="#">更多</a></div><div class="news_bd"><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></div><div class="lifeservice"><ul><!-- 配合js使用精灵图更方便 --><li><i></i><p>话费</p></li><li><div class="hot"><div class="jian">减</div><div class="sanjiao1"></div><div class="sanjiao2"></div></div><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/news.png" alt=""></div></div></div></div><!-- 首页专有模块main end --><!-- 推荐模块 start --><div class="w recom"><div class="recom_hd"><img src="images/recommend.png" alt=""></div><div class="recom_bd"><ul><li><img src="upload/recom_03.png" alt=""></li><li><img src="upload/recom_03.png" alt=""></li><li><img src="upload/recom_03.png" alt=""></li><li><img src="upload/recom_03.png" alt=""></li></ul></div></div><!-- 推荐模块 end --><!-- like模块 start? --><!-- like模块 end --><!-- 楼层区 start --><div class="floor"><!-- 1楼-家用电器模块 start --><div class="jiadian w"><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></ul></div></div><div class="box_bd"><!-- 与tab_list对应，利用js可以进行切换 --><div class="tab_content1"><div class="tab_content_item"><!-- 也可以用无序列表实现 --><div class="col_210"><ul><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</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="bottom_line"><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="bottom_line"><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><!-- 2楼-手机模块 --><div class=" w"><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></ul></div></div><div class="box_bd"><!-- 与tab_list对应，利用js可以进行切换 --><div class="tab_content"><div class="tab_content_item"><!-- 也可以用无序列表实现 --><div class="col_210"><ul><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</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="bottom_line"><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="bottom_line"><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><!-- 3楼-生活用品 --><div class="shenghuo w"><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></ul></div></div><div class="box_bd"><!-- 与tab_list对应，利用js可以进行切换 --><div class="tab_content"><div class="tab_content_item"><!-- 也可以用无序列表实现 --><div class="col_210"><ul><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</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="bottom_line"><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="bottom_line"><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><!-- 家用电器模块 end --></div><!-- 楼层区 end --><!-- 底部模块 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div><h4>极速物流</h4><p>急速物流，急速送达</p></div></li><li><h5></h5><div><h4>无忧售后</h4><p>7天无理由退换货</p></div></li><li><h5></h5><div><h4>特色服务</h4><p>私人定制家电套餐</p></div></li><li><h5></h5><div><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="copyright"><p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</p><p>京ICP备08001421号 | 京公网安备110108007702</p></div></div></div></footer><!-- 底部模块 end -->
</body></html>

3.2 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: 30px;line-height: 30px;background-color: #f1f1f1;
}.shortcut li {float: left;
}.shortcut .fr ul li:nth-child(even) {width: 1px;height: 11px;background-color: #666;margin: 9px 15px;
}.arrow-icon::after {content: '\e91e';margin-left: 6px;font-family: 'icomoon';
}/* header 头部模块 */
.header {position: relative;height: 105px;
}.logo {position: absolute;top: 25px;width: 171px;height: 61px;/* background-color: blue; */
}.logo a {display: block;width: 171px;height: 61px;/* 隐藏文字方法1 font-size: 0;*//* 隐藏文字方法2 */text-indent: -9999px;overflow: hidden;background: url(../images/logo.png) no-repeat;}.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;color: #fff;
}.hotwords {position: absolute;top: 66px;left: 346px;
}.hotwords a {margin: 0 10px;
}.shopcar {position: absolute;top: 25px;right: 62px;width: 140px;height: 36px;line-height: 36px;text-align: center;background-color: #f7f7f7;border: 1px solid #dfdfdf;
}.shopcar::before {content: '\e93a';font-family: 'icomoon';color: #d94f4f;margin-right: 5px;
}.shopcar::after {content: '\e920';font-family: 'icomoon';font-size: 10px;margin-left: 10px;
}.count {position: absolute;top: -5px;left: 105px;height: 14px;line-height: 14px;padding: 0 7px;border-radius: 7px 7px 7px 0;background-color: #e60012;color: #fefefe;
}.nav {height: 45px;border-bottom: 2px solid #b1191a;
}.nav .dropdown {float: left;width: 210px;height: 45px;background-color: #b1191a;
}.nav .navitems {float: left;
}.dropdown dt {width: 210px;height: 45px;line-height: 45px;text-align: center;color: #fff;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: 0 10px;
}
.dropdown dd ul li::after {position: absolute;top: 1px;right: 10px;font-family: 'icomoon';content: '\e920';/* ?能用定位尽量不用浮动，浮动会改变布局 *//* float: right; */font-size: 14px;color: #fff;
}
.dropdown dd ul li:hover {background-color: #fff;
}
.dropdown dd ul li:hover a {color: #b1191a;
}
.dropdown dd ul li a {font-size: 14px;color: #fff;
}
.navitems ul li {float: left;margin-left: 10px;
}
.navitems ul li a{display: block;height: 45px;line-height: 45px;padding: 0 25px;font-size: 16px;color: #333
}
.navitems ul li a:hover {color:#c81623
}
/* 底部模块 */
.footer {height: 415px;background-color: #f5f5f5;/* ?为什么不在mod_service设置上下内边距为30px */padding-top: 30px;
}
.mod_service {height: 80px;border-bottom: 1px solid #ccc;}
.mod_service ul li {float: left;width: 240px;height: 50px;padding-left: 35px;/* background-color: pink; */
}
/* ?没有实现文字与图片居中 */
.mod_service ul li h5 {float: left;width: 50px;height: 50px;background-color: blue;margin-right: 8px;
}
.mod_service ul li h5:nth-child(1){  display: inline-block;background: url('../images/icons.png') no-repeat -252px -2px;
}
.mod_service ul li div {display: inline-block;vertical-align: middle;
}
.mod_service ul li:nth-child(2) h5{background: url('../images/icons.png') no-repeat -255px -54px;
}
.mod_service ul li:nth-child(3) h5{background: url('../images/icons.png') no-repeat -257px -106px;
}
.mod_service ul li:nth-child(4) h5{background: url('../images/icons.png') no-repeat -258px -157px;
}
.mod_service ul li:nth-child(5) h5{background: url('../images/icons.png') no-repeat -257px -208px;
}
/* 不起效果 */
/* .mod_service ul li div {margin-left: 8px;
} */
.mod_service ul li h4 {font-size: 14px;color: #333;}
.mod_service ul li p {font-size: 12px;color: #666;
}
.mod_help {height: 188px;padding-top: 20px;padding-left: 40px;border-bottom: 1px solid #ccc;
}
.mod_help dl {float: left;width: 200px;}
.mod_help dl:last-child {width: 100px;text-align: center;
}
.mod_help dt {font-size: 16px;color: #333;margin-bottom: 12px;
}
.mod_help dd {font-size: 12px;color: #666;
}
.mod_copyright {height: 120px;padding-top: 20px;text-align: center;
}
.links {margin-bottom: 12px;font-size: 12px;
}
.mod_copyright .links a {border-right: 1px solid #ccc;padding: 0 15px;
}
.mod_copyright .links a:last-child {border: none;
}
.mod_copyright .copyright {line-height: 20px;font-size: 12px;
}

3.3 index.css

.main {width: 980px;height: 455px;margin-left: 220px;margin-top: 10px;
}
.focus {float: left;width: 720px;height: 455px;
}
.newsflash {float: right;width: 250px;height: 455px;
}
.news {height: 165px;border: 1px solid #e4e4e4;/* background-color: pink; */
}
.news_hd {height: 33px;line-height: 33px;padding: 0 15px;border-bottom: 1px dotted #e4e4e4;
}
.news_hd h5 {float: left;font-size: 14px;/* font-weight: 400; */color: #333;
}
.news_hd a {font-family: 'icomoon';float: right;
}
.news_bd {padding: 5px 15px 0;
}
.news_bd ul li {height: 24px;line-height: 24px;
}
.news_bd ul li a {font-size: 12px;/* 文本溢出时用省略号显示 */ white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.lifeservice {overflow: hidden;height: 209px;border: 1px solid #e4e4e4;border-top: 0;/* background-color: purple; */
}
.lifeservice ul {width: 252px;
}
.lifeservice ul li {position: relative;float: left;width: 63px;height: 71px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;
}
.lifeservice ul li:nth-child(2) {position: relative;
}
.lifeservice ul li i {display: inline-block;width: 21px;height: 25px;margin-top: 12px;/* 配合js使用精灵图更方便 */background: url(../images/icons.png) no-repeat -18px -16px;
}
/* 将hot模块定位到右上角,也可以用精灵图实现 */
.hot {position: absolute;top: 0;right: 0;
}
.jian {width: 12px;height: 12px;line-height: 12px;color: #fff;font-size: 12px;background-color: green;
}
/* 三角 */
.sanjiao1,
.sanjiao2 {float: left;width: 0;height: 0;border-width: 3px 6px 0 0;border-style: solid;border-color: transparent;border-top-color: green;
}
.sanjiao2 {        border-width: 3px 0 0 6px;
}
.bargain {margin-top: 6px;
}
.recom {height: 163px;margin-top: 12px;background-color: #ebebeb;
}
.recom_hd {float: left;width: 206px;height: 163px;background-color: #5c5251;text-align: center;padding-top: 30px;
}
.recom_bd {float: left; height: 163px;
}
.recom_bd ul li {position: relative;float: left;
}
/* 防止上传的图片大小不符合要求而影响布局 */
.recom_bd ul li img {width: 248px;height: 163px;
}
/* -n+3只选择前三个元素 */
.recom_bd ul li:nth-child(-n+3):after {content: '';position: absolute;top: 10px;right: 0;width: 1px;height: 143px;background-color: #ddd;
}
.floor .w {margin-top: 30px;
}
.box_hd {height: 30px;border-bottom: 2px solid #c81623;
}
.box_hd h3{float: left;font-size: 18px;color: #c81623;font-weight: 400;
}
.tab_list {float: right;
}
.tab_list ul li {float: left;line-height: 30px;
}
.tab_list ul li a {padding: 0 15px;
}
.box_bd {height: 361px;background-color: #fff;
}
.tab_content_item>div {float: left;height: 361px;
}
.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: 32px;text-align: center;line-height: 32px;margin-right: 10px;border-bottom: 1px solid #ededed;
}
/* ul没有高度设置外边距无效 */
.col_210 img {margin-top: 25px;
}
.col_329 {width: 329px;
}
.col_221 {width: 221px;border-right: 1px solid #ededed;
}
.col_219 {width: 219px;
}
.bottom_line {/* 一般情况下，a包含有宽度的盒子，需要转换为块级元素 */display: block;border-bottom: 1px solid #ededed;
}

第四章手机页(list)代码

4.1 list.html

<!DOCTYPE html>
<html lang="zh-CN">
<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><!-- 网站说明 --><meta name="description"content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" /><!-- 关键字 --><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="#">请登录</a> &nbsp; <a href="register.html" 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"><!-- SEO优化，h1标签是为了提权 --><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><div class="sec_kill"><img src="images/secKill.png" alt=""></div><!-- search模块 --><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><!-- 热词模块 --><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="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="#">女鞋</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 --><div class="w sk_container"><div class="sk_hd"><img src="images/bg_03.png" alt=""></div><div class="sk_bd"><ul class="clearfix"><li><img src="upload/phone.png" alt="">         <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5><div class="sk_goods_price"><em><span>￥</span>6088</em><del>￥6988</del></div><div class="sk_goods_progress">已售87%<span class="sk_box"><span class="sk_box_background"></span></span>剩余<span class="style_red">29</span>件</div><div class="sk_buy">立即抢购</div></li><li><img src="upload/phone.png" alt="">         <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5><div class="sk_goods_price"><em><span>￥</span>6088</em><del>￥6988</del></div><div class="sk_goods_progress">已售87%<span class="sk_box"><span class="sk_box_background"></span></span>剩余<span class="style_red">29</span>件</div><div class="sk_buy">立即抢购</div></li><li><img src="upload/phone.png" alt="">         <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5><div class="sk_goods_price"><em><span>￥</span>6088</em><del>￥6988</del></div><div class="sk_goods_progress">已售87%<span class="sk_box"><span class="sk_box_background"></span></span>剩余<span class="style_red">29</span>件</div><div class="sk_buy">立即抢购</div></li><li><img src="upload/phone.png" alt="">         <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5><div class="sk_goods_price"><em><span>￥</span>6088</em><del>￥6988</del></div><div class="sk_goods_progress">已售87%<span class="sk_box"><span class="sk_box_background"></span></span>剩余<span class="style_red">29</span>件</div><div class="sk_buy">立即抢购</div></li><li><img src="upload/phone.png" alt="">         <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5><div class="sk_goods_price"><em><span>￥</span>6088</em><del>￥6988</del></div><div class="sk_goods_progress">已售87%<span class="sk_box"><span class="sk_box_background"></span></span>剩余<span class="style_red">29</span>件</div><div class="sk_buy">立即抢购</div></li><li><img src="upload/phone.png" alt="">         <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5><div class="sk_goods_price"><em><span>￥</span>6088</em><del>￥6988</del></div><div class="sk_goods_progress">已售87%<span class="sk_box"><span class="sk_box_background"></span></span>剩余<span class="style_red">29</span>件</div><div class="sk_buy">立即抢购</div></li><li><img src="upload/phone.png" alt="">         <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5><div class="sk_goods_price"><em><span>￥</span>6088</em><del>￥6988</del></div><div class="sk_goods_progress">已售87%<span class="sk_box"><span class="sk_box_background"></span></span>剩余<span class="style_red">29</span>件</div><div class="sk_buy">立即抢购</div></li><li><img src="upload/phone.png" alt="">         <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5><div class="sk_goods_price"><em><span>￥</span>6088</em><del>￥6988</del></div><div class="sk_goods_progress">已售87%<span class="sk_box"><span class="sk_box_background"></span></span>剩余<span class="style_red">29</span>件</div><div class="sk_buy">立即抢购</div></li><li><img src="upload/phone.png" alt="">         <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5><div class="sk_goods_price"><em><span>￥</span>6088</em><del>￥6988</del></div><div class="sk_goods_progress">已售87%<span class="sk_box"><span class="sk_box_background"></span></span>剩余<span class="style_red">29</span>件</div><div class="sk_buy">立即抢购</div></li><li><img src="upload/phone.png" alt="">         <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5><div class="sk_goods_price"><em><span>￥</span>6088</em><del>￥6988</del></div><div class="sk_goods_progress">已售87%<span class="sk_box"><span class="sk_box_background"></span></span>剩余<span class="style_red">29</span>件</div><div class="sk_buy">立即抢购</div></li></ul></div></div><!-- 列表页主体模块 end --><!-- 底部模块 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div><h4>极速物流</h4><p>急速物流，急速送达</p></div></li><li><h5></h5><div><h4>无忧售后</h4><p>7天无理由退换货</p></div></li><li><h5></h5><div><h4>特色服务</h4><p>私人定制家电套餐</p></div></li><li><h5></h5><div><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="copyright"><p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</p><p>京ICP备08001421号京公网安备110108007702</p></div></div></div></footer><!-- 底部模块 end --></body>
</html>

4.2 list.css

/* 列表页专有的css */
/* 子元素有浮动且line-height超过父元素高度会导致下一行显示异常，需要去除 */
.nav {overflow: hidden;
}
.sec_kill {position: absolute;top: 40px;left: 185px;border-left: 1px solid #c81523;padding-left: 13px;
}
.sk_list {float: left;
}
.sk_list ul li {float: left;line-height: 45px;padding: 0 30px;
}
.sk_list ul li a {font-size: 16px;  font-weight: 700;color: #000;
}
.sk_con {float: left;
}
.sk_con ul li {float: left;/* 让sk_con与sk_list的文字底部对齐 */line-height: 48px;padding: 0 20px;
}
.sk_list ul li a {font-size: 14px;
}
.sk_con ul li:last-child a::after {content: '\e91e';font-family: 'icomoon';
}
/* 列表页主体模块 */
.sk_container {margin-bottom: 25px;
}
.sk_hd {margin-bottom: 25px;
}
.sk_bd ul li {float: left;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;
}
.sk_bd ul li h5 {padding: 0 12px 6px;font-size: 14px;font-weight: 400;color: #666;
}
.sk_goods_price {padding: 6px 12px;
}
.sk_goods_price em {font-size: 22px;font-weight: 700;color: #c81523;
}
.sk_goods_price em span {font-size: 14px;
}
.sk_goods_price del {font-size: 14px;color: #a4a4a4;
}
.sk_goods_progress {padding: 0 12px 6px;font-size: 14px;color: #666;
}
.sk_goods_progress .sk_box {display: inline-block;width: 132px;height: 12px;margin: 0 3px;border: 1px solid #c81523;border-radius: 6px;
}
.sk_box_background {/* 注意这里不能用inline-block，因为行内块元素除了左右有缝隙，上下也有 */display: block;width: 87%;height: 100%;border-radius: 6px 0 0 6px;background-color: #c81523;
}
.sk_buy {width: 100%;height: 49px;line-height: 49px;font-size: 20px;text-align: center;background-color: #c81523;color: #fff;
}

第五章注册页(register)代码

5.1 register.html

<!DOCTYPE html>
<html lang="zh-CN"><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><!-- 注册页面的信息不希望被看到，不需要做SEO优化 --><!-- 网页图标 --><link rel="shortcut icon" href="favicon.ico"><!-- 初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 注册页样式文件 --><link rel="stylesheet" href="css/register.css"><!-- 注册页样式文件 --><!-- <link rel="stylesheet" href="css/common.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="test.php"><ul><li><label for="phone_number">手机号 ：</label><input type="text" id="phone_number" class="inp"><span class="error"><i class="error_icon"></i> 手机号码格式不正确，请重新输入</span></li><li><label for="code">短信验证码 ：</label><input type="text" id="code" class="inp"><span class="success"><i class="success_icon"></i> 验证码正确</span></li><li><label for="password">登录密码 ：</label><input type="password" id="password" class="inp"><span class="error"><i class="error_icon"></i> 密码不能少于6位数，请重新输入</span></li><li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em></li><li><label for="confirm">确认密码 ：</label><input type="password" id="confirm" class="inp"><span class="error"><i class="error_icon"></i> 密码不一致，请重新输入</span></li><li class="agree"><input type="checkbox" name="" id=""> 同意协议并注册 <a href="#">《品优购用户协议》</a></li><li class="btn"> <input type="submit" value="完成注册"></li></ul></form></div></div><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"><p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</p><p>京ICP备08001421号京公网安备110108007702</p></div></div></div></footer></div>
</body></html>

5.2 register.css

.w {width: 1200px;margin: 0 auto;
}
header {height: 84px;border-bottom: 2px solid #c81523;
}
.logo {/* 不用margin防止出现外边距塌陷 */padding-top: 16px;
}
.registerarea {height: 525px;margin-top: 20px;border: 1px solid #dfdfdf;
}
.registerarea h3 {height: 42px;line-height: 42px;background-color: #ececec;font-size: 18px;font-weight: 400;padding: 0 10px;
}
.login {float: right;font-size: 14px;
}
.login a {color: #c81523;
}
.reg_form {width: 600px;margin: 50px auto;
}
.reg_form ul li {margin-bottom: 20px;
}
.reg_form ul li label {display: inline-block;width: 90px;text-align: right;
}
.reg_form ul li .inp {width: 240px;height: 37px;border: 1px solid #dfdfdf;
}
.error {font-size: 12px;color: #c81523;
}
.error_icon,
.success_icon {display: inline-block;width: 20px;height: 20px;vertical-align: middle;margin-top: -2px;background: url(../images/error.png) no-repeat;
}
.success {font-size: 12px;color: #40b83f;
}
.success_icon {background: url(../images/success.png) no-repeat;
}
.safe {padding-left: 176px;font-size: 12px;color: #b2b2b2;
}
.safe em {padding: 0 10px;color: #fff;
}
.ruo {background-color: #de1111;
}
.zhong {background-color: #40b83f;
}
.qiang {background-color: #f79100;
}
.agree {padding: 10px 0 0 100px;
}
.agree input {vertical-align: middle;
}
.agree a {color: #1ba1e6;
}
.btn {padding: 20px 0 0 120px;
}
.btn input {width: 200px;height: 34px;background-color: #c81623;font-size: 14px;color: #fff;
}
.mod_copyright {height: 120px;padding-top: 20px;text-align: center;
}
.links {margin-bottom: 12px;font-size: 12px;
}
.mod_copyright .links a {border-right: 1px solid #ccc;padding: 0 15px;
}
.mod_copyright .links a:last-child {border: none;
}
.mod_copyright .copyright {line-height: 20px;font-size: 12px;
}

第六章将网站上传到服务器

在三维空间注册账户——激活FTP获得主机名、用户名、密码——用cutftp软件上传网站

【HTML+CSS】代码：品优购网站相关推荐

HTML5期末大作业：品优购网站设计——品优购 (3页) HTML+CSS+JavaScript 大学生网购网页作品商城网页设计作业模板学生网页制作源代码下载
HTML5期末大作业:品优购网站设计--品优购 (3页) HTML+CSS+JavaScript 大学生网购网页作品商城网页设计作业模板学生网页制作源代码下载常见网页设计作业题材有个人. 美食. ...
HTML和CSS实现品优购首页
HTML和CSS实现品优购首页效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-CN"><h ...
CSS 8 品优购项目
目录 1.品优购项目规划 1.1网站制作流程 1.2品优购项目整体介绍 1.3品优购项目的学习目的 1.4开发工具以及技术栈小总结 1.5品优购项目搭建工作. 1.5.1创建文件夹 1.5.2创建 ...
HTML+CSS实现品优购登录界面
HTML+CSS实现品优购登录界面效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="en"><hea ...
17天代码品优购_品优购(IDEA版)-第一天
品优购(IDEA版)-第一天品优购IDEA版应该是2019年的新项目.目前只有视频.资料其他都还是旧的. 1.学习目标 1:了解电商行业特点以及理解电商的模式 2:了解整体品优购的架构特点 3:能够 ...
基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现（计算机毕业设计）
HTML5期末大作业:电商网站设计--仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计 ...
【HTML CSS】PC端品优购项目效果图和代码
素材及代码品优购首页品优购列表页品优购注册页 [index.html] <!DOCTYPE html> <html lang="zh-CN">& ...
综合案例：品优购项目（品优购项目流程，SEO优化，TDK三大标签，代码）后期逐步优化
品优购项目流程 SEO优化 SEO(Search Engine Optimization)汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式. SEO 的目的是对网站进 ...
【前端】CSS（十一）PC端品优购项目（下）
1. 品优购列表页制作 1.1 品优购列表页制作准备工作 1.列表页面是新的页面,我们需要新建页面文件 list.html . 2.因为列表页的头部和底部基本一致,所以我们需要把首页中的头部和底部的结 ...

【HTML+CSS】代码：品优购网站

第一章文件夹结构

第二章初始化CSS代码

2.1 base.css

第三章首页(index)代码

3.1 index.html

3.2 common.css

3.3 index.css

第四章手机页(list)代码

4.1 list.html

4.2 list.css

第五章注册页(register)代码

5.1 register.html

5.2 register.css

第六章将网站上传到服务器

【HTML+CSS】代码：品优购网站相关推荐

最新文章

热门文章

【HTML+CSS】代码：品优购网站

第一章 文件夹结构

第二章 初始化CSS代码

2.1 base.css

第三章 首页(index)代码

3.1 index.html

3.2 common.css

3.3 index.css

第四章 手机页(list)代码

4.1 list.html

4.2 list.css

第五章 注册页(register)代码

5.1 register.html

5.2 register.css

第六章 将网站上传到服务器

【HTML+CSS】代码：品优购网站相关推荐

最新文章

热门文章

第一章文件夹结构

第二章初始化CSS代码

第三章首页(index)代码

第四章手机页(list)代码

第五章注册页(register)代码

第六章将网站上传到服务器