1 本节目标

• 独立完成项目首页制作
• 独立完成项目列表页制作
• 独立完成项目注册页制作
• 将项目网站部署上线

2 项目规划

2.1 网站制作流程

2.2 项目整体介绍

• 项目名称：小王优品铺
• 项目描述：小王优品铺是一个电商网站，我们要完成PC端首页、列表页、注册页面的制作。

2.3 开发工具以及技术栈

2.3.1 开发工具

• VScode、Photoshop、Microsoft Edge。

2.3.2 技术栈

• 利用HTML5+CSS3手动布局，可大量使用H5新增标签和样式。
• 采取结构与样式相分离，模块化开发。

2.4 项目搭建工作

• 创建如下文件夹：
  
• 创建如下文件：
  
• 模块化开发：将一个项目按照功能划分。具有重复使用、更换方便等优点。
• 有些样式和结构在很多页面都会出现，比如页面头部和底部，可以把这些结构和样式单独作为一个模块，然后重复使用，最典型的应用是common.css公共样式。
• common.css公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。
  

2.5 网站favicon图标

• favicon.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。

2.5.1 制作favicon图标

• 将项目图标切成png。
• 利用第三方网站把png图片转换为ico图标，比如比特虫

2.5.2 favicon图标放到网站根目录下

2.5.3 HTML页面引入favicon图标

• <link rel="shortcut icon" href="favicon.ico" />
  

2.6 网站TDK三大标签SEO优化

• SEO优化汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。
• 目的是对网站进行深度的优化，从而帮助网站获取免费的流量，进而在搜索引擎上提升网站的排名，提高网站的知名度。
• 页面必须有三个标签用来符合SEO优化。
  

2.6.1 title网站标题

• 具有不可替代性，是我们内页的第一个重要标签，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。
• 建议：网站名(产品名)+网站的介绍(尽量不要超过30个汉字)

2.6.2 description网站说明

• 简要说明我们网站是做什么的。
  

2.6.3 keywords关键词

• keywords是页面关键词，是搜索引擎的关注点之一。
• 最好限制为6~8个关键词，关键词之间用英文逗号隔开，采用关键词1,关键词2的形式。
  

3 项目首页制作

• 开始制作首页的头部和底部的时候，根据模块化开发，样式要写到common.css里面。
  

3.1 常用模块类名命名

3.2 项目首页快捷导航shortcut制作

3.3 项目首页header制作

3.3.1 LOGO SEO优化

• logo里面首先放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要。
• h1里面再放一个链接，可以返回首页的，把logo的背景图片给链接即可。
• 为了搜索引擎收录我们，我们链接里面要放文字(网站名称)，但是文字不要显示出来。
  方法一：text-indent(文本缩进)移到盒子外面(text-indent:-9999px)，然后overflow:hidden(溢出隐藏和清除浮动)。(淘宝的做法)
  方法二：直接给font-size: 0;就看不到文字了。(京东的做法)
• 最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了。

3.4 项目首页nav导航制作

3.5 项目首页footer底部制作

• 3.2 ~ 3.5书写的是模块化中的公共部分。

3.6 项目首页main主体模块制作

• main主体模块是index里面专有的，注意需要新的样式文件index.css。
  

3.7 项目首页recom推荐模块制作

3.8 项目首页guess猜你喜欢模块制作

3.9 项目首页fun有趣模块制作

3.10 项目首页floor楼层区制作

• 注意这个floor，不要给高度，内容有多少，算多少。
• 第一楼是家用电器模块：里面包含两个盒子。

3.10.1 项目首页家用电器模块制作

• 手机通讯模块及电脑办公模块同理。

3.10.2 Tab栏原理——布局需求

3.11 项目base.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;
}

3.12 项目common.css代码

/* 声明字体图标 这里一定要注意路径的变化 */
@font-face {font-family: "iconfont"; /* Project id 3740750 */src: url('../fonts/iconfont.woff2?t=1667895447697') format('woff2'),url('../fonts/iconfont.woff?t=1667895447697') format('woff'),url('../fonts/iconfont.ttf?t=1667895447697') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}/* 版心 */
.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: '';font-family: "iconfont";margin-left: 6px;
}/* header头部模块 */
.header {/* 父相 */position: relative;height: 105px;
}
.logo {/* 子绝 */position: absolute;top: 25px;width: 254px;height: 65px;
}
.logo a{display: block;width: 254px;height: 65px;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 {/* 因为input和button是行内元素,期间有空隙,要想消除空隙,则让input和button浮动 */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;top: 25px;right: 60px;width: 140px;height: 35px;line-height: 35px;text-align: center;border: 1px solid #dfdfdf;background-color: #f7f7f7;
}
.shopcar::before {content: '\eeba';font-family: "iconfont";margin-right: 3px;color: #b1191a;font-size: 13px;
}
.shopcar::after {content: '\e9ed';font-family: "iconfont";margin-left: 10px;
}
.count {/* 子绝 */position: absolute;top: -5px;/* 不写right是因为当加入购物车数量很多时，靠右边移 */left: 105px;height: 14px;/* 如果不写,则会继承父亲的行高35px,出现字体显示不全的问题,故重新设置行高 */line-height: 14px;color: #fff;background-color: #b1191a;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 {width: 210px;height: 465px;color: #fff;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;content:'\e9ed';font-family: "iconfont";color: #fff;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底部模块 */
.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: 240px;height: 50px;padding-left: 35px;
}
.mod_service ul li h5 {float: left;width: 50px;height: 50px;margin-right: 8px;
}
.mod_service ul li:first-child h5 {background: url(../images/icons.png) no-repeat -252px -3px;
}
.mod_service ul li:nth-child(2) h5 {background: url(../images/icons.png) no-repeat -254px -53px;
}
.mod_service ul li:nth-child(3) h5 {background: url(../images/icons.png) no-repeat -256px -105px;
}
.mod_service ul li:nth-child(4) h5 {background: url(../images/icons.png) no-repeat -257px -156px;
}
.mod_service ul li:last-child h5 {background: url(../images/icons.png) no-repeat -256px -208px;
}
.service_txt h4 {font-size: 14px;margin-top: 3px;
}
.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: 110px;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;
}

3.13 项目首页代码

3.13.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="网上购物，网上商城手机，笔记本，电脑，MP3，CD，VCD，DV，相机，数码，配件，手表存储卡，京东" /><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" /><!-- 引入初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共样式文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入index.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="#">请登录</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"><h1><a href="#index.html" title="小王优品铺">小王优品铺</a></h1></div><!-- search搜索模块 --><div class="search"><!-- placeholder会在输入字段为空时显示,并会在字段获得焦点时消失 适用于input的text search url telephone email password属性 --><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="list.html">家用电器</a></li><li><a href="list.html">手机</a>、<a href="list.html">数码</a>、<a href="list.html">通信</a></li><li><a href="list.html">电脑</a>、<a href="list.html">办公</a></li><li><a href="list.html">家居</a>、<a href="list.html">家具</a>、<a href="list.html">家装</a>、<a href="list.html">厨具</a></li><li><a href="list.html">男装</a>、<a href="list.html">女装</a>、<a href="list.html">童装</a>、<a href="list.html">内衣</a></li><li><a href="list.html">个护化妆</a>、<a href="list.html">清洁用品</a>、<a href="list.html">宠物</a></li><li><a href="list.html">鞋靴</a>、<a href="list.html">箱包</a>、<a href="list.html">珠宝</a>、<a href="list.html">奢侈品</a></li><li><a href="list.html">运动户外</a>、<a href="list.html">钟表</a></li><li><a href="list.html">汽车</a>、<a href="list.html">汽车用品</a></li><li><a href="list.html">母婴</a>、<a href="list.html">玩具乐器</a></li><li><a href="list.html">食品</a>、<a href="list.html">酒类</a>、<a href="list.html">生鲜</a>、<a href="list.html">特产</a></li><li><a href="list.html">医药保健</a></li><li><a href="list.html">图书</a>、<a href="list.html">音像</a>、<a href="list.html">电子书</a></li><li><a href="list.html">彩票</a>、<a href="list.html">旅行</a>、<a href="list.html">充值</a>、<a href="list.html">票务</a></li><li><a href="list.html">理财</a>、<a href="list.html">众筹</a>、<a href="list.html">白条</a>、<a href="list.html">保险</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> 备战开学季 全民半价购数码啦啦啦</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><li><i></i><p>话费</p></li><li><i></i><span class="jian"><img src="data:images/jian.png" alt=""></span><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="data:images/recom.png" alt=""></div><div class="recom-bd"><ul><li><img src="upload/recom_01.jpg" alt=""></li><li><img src="upload/recom_02.jpg" alt=""></li><li><img src="upload/recom_03.jpg" alt=""></li><li><img src="upload/recom_04.jpg" alt=""></li></ul></div></div><!-- 推荐模块end --><!-- guess猜你喜欢模块start --><div class=" w guess"><div class="guess-hd"><h4>猜你喜欢</h4><a href="#">换一批</a></div><div class="guess-bd"><ul><li><a href="#"><img src="upload/guess-bd1.png" alt=""><p>阳光美包新款单肩包女包时尚子母包四件套女</p><span class="price">¥116.00</span></a></li><li><a href="#"><img src="upload/guess-bd2.png" alt=""><p>爱仕达&nbsp;&nbsp;30CM炒锅不粘锅NWG8330E电磁炉炒</p><span class="price">¥99.00</span></a></li><li><a href="#"><img src="upload/guess-bd3.png" alt=""><p>捷波朗 <br/>（jabra）BOOSI劲步</p><span class="price">¥245.00</span></a></li><li><a href="#"><img src="upload/guess-bd4.png" alt=""><p>欧普 <br /> JYLZ08面板灯平板灯铝</p><span class="price">¥238.00</span></a></li><li><a href="#"><img src="upload/guess-bd5.png" alt=""><p>三星 <br />（G5500）移动联</p><span class="price">¥6490.00</span></a></li><li><a href="#"><img src="upload/guess-bd6.png" alt=""><p>韩国所望 <br /> 紧致湿润精华露400ml</p><span class="price">¥649.00</span></a></li></ul></div></div><!-- guess猜你喜欢模块end --><!-- fun有趣模块start --><div class="w fun"><h4>小王博客-有趣区</h4><div class="interest"><div class="interest-conver"><img src="upload/interest.png" alt=""></div><div class="interest-things"><h5>好物推荐</h5><div class="thing1"><a href="#"><img src="upload/thing1.jpg" alt=""></a></div><div class="interest-thing2"><a href="#"><img src="upload/thing2.jpg" alt=""></a></div></div><div class="interest-brands"><h5>品牌小铺</h5><div class="brand1"><a href="#"><img src="upload/brand1.jpg" alt=""></a></div><div class="brand2"><a href="#"><img src="upload/brand2.jpg" alt=""></a></div><div class="brand3"><a href="#"><img src="upload/brand3.jpg" alt=""></a></div></div><div class="interest-brandArea"><ul><li><a href="#"><img src="upload/Area1.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area2.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area3.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area4.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area5.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area6.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area7.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area8.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area9.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area10.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area11.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area12.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area13.jpg" alt=""></a></li><li><a href="#"><img src="upload/Area14.jpg" alt=""></a></li></ul></div></div></div><!-- fun有趣模块end --><!-- floor楼层区域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></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="#">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.jpg" alt=""></a></div><div class="col_329"><a href="#"><img src="upload/floor-1-2.jpg" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor-1-3.jpg" alt=""></a><a href="#"><img src="upload/floor-1-4.jpg" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/floor-1-5.jpg" alt=""></a></div><div class="col_219"><a href="#"  class="bb"><img src="upload/floor-1-6.jpg" alt=""></a><a href="#"><img src="upload/floor-1-7.jpg" alt=""></a></div></div></div></div></div><!-- 2楼手机通讯模块 --><div class="w shouji"><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"><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-2-1.jpg" alt=""></a></div><div class="col_329"><a href="#"><img src="upload/floor-2-2.jpg" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor-2-3.jpg" alt=""></a><a href="#"><img src="upload/floor-2-4.jpg" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/floor-2-5.jpg" alt=""></a></div><div class="col_219"><a href="#"  class="bb"><img src="upload/floor-2-6.jpg" alt=""></a><a href="#"><img src="upload/floor-2-7.jpg" alt=""></a></div></div></div></div></div><!-- 3楼电脑办公模块 --><div class="w diannao"><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="#">DIY硬件</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="#">SSD硬盘</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-3-1.jpg" alt=""></a></div><div class="col_329"><a href="#"><img src="upload/floor-3-2.jpg" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="upload/floor-3-3.jpg" alt=""></a><a href="#"><img src="upload/floor-3-4.jpg" alt=""></a></div><div class="col_221"><a href="#"><img src="upload/floor-3-5.jpg" alt=""></a></div><div class="col_219"><a href="#"  class="bb"><img src="upload/floor-3-6.jpg" alt=""></a><a href="#"><img src="upload/floor-3-7.jpg" alt=""></a></div></div></div></div></div></div><!-- floor楼层区域end --><!-- footer底部模块start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>急速物流</h4><p>急速物流，急速送达</p></div></li><li><h5></h5><div class="service_txt"><h4>无忧售后</h4><p>七天无理由退换货</p></div></li><li><h5></h5><div class="service_txt"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li><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="#">211限时达</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></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></dl><dl><dt>特色服务</dt><dd><a href="#">夺宝岛</a></dd><dd><a href="#">DIY装机</a></dd><dd><a href="#">延保服务</a></dd><dd><a href="#">优品铺E卡</a></dd><dd><a href="#">优品铺通信</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="data: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">地址：陕西省西安市长安区西安财经大学 邮编：710100 电话：151-2973-6662 传真：000-00000000 邮箱: wangggyy2001@163.com <br />京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- footer底部模块end -->
</body>
</html>

3.13.2 项目index.css代码

/* main首页模块 */
.main {width: 980px;height: 455px;margin-left: 220px;margin-top: 10px;
}
.focus {float: left;width: 721px;height: 455px;
}
.newsflash {float: right;width: 250px;height: 455px;
}
.news {height: 165px;border:1px solid #e4e4e4
}
.news-hd {height: 33px;line-height: 33px;border-bottom: 1px dotted #e4e4e4;padding: 0 15px;
}
.news-hd h5 {float: left;font-size: 14px;
}
.news-hd .more {float: right;
}
.news-hd .more::after {font-family: "iconfont";content: '\e9ed';margin-left: 5px;
}
.news-bd {padding: 5px 15px 0;
}
.news-bd ul li {height: 24px;line-height: 24px;/* 让文本超出部分显示省略号 *//* 第一步，让超出部分隐藏 */overflow: hidden;/* 第二步，规定必须一行显示，不允许换行 */white-space: nowrap;/* 第三步，让超出的部分显示省略号 */text-overflow: ellipsis;
}
.lifeservice {height: 209px;border-left: 1px solid #e4e4e4;
}
.lifeservice ul li {float: left;width: 25%;height: 71px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;
}
.lifeservice ul li i {display: inline-block;width: 24px;height: 28px;margin-top: 12px;
}
.lifeservice ul li:first-child i{background: url(../images/icons.png) no-repeat -16px -15px;
}
.lifeservice ul li:nth-child(2) i {background: url(../images/icons.png) no-repeat -79px -15px;
}
.lifeservice ul li:nth-child(3) i {background: url(../images/icons.png) no-repeat -141px -17px;
}
.lifeservice ul li:nth-child(4) i {background: url(../images/icons.png) no-repeat -205px -15px;
}
.lifeservice ul li:nth-child(5) i {background: url(../images/icons.png) no-repeat -16px -86px;
}
.lifeservice ul li:nth-child(6) i {background: url(../images/icons.png) no-repeat -79px -86px;
}
.lifeservice ul li:nth-child(7) i {background: url(../images/icons.png) no-repeat -141px -86px;
}
.lifeservice ul li:nth-child(8) i {background: url(../images/icons.png) no-repeat -205px -86px;
}
.lifeservice ul li:nth-child(9) i {background: url(../images/icons.png) no-repeat -16px -157px;
}
.lifeservice ul li:nth-child(10) i {background: url(../images/icons.png) no-repeat -79px -157px;
}
.lifeservice ul li:nth-child(11) i {background: url(../images/icons.png) no-repeat -141px -157px;
}
.lifeservice ul li:last-child i {background: url(../images/icons.png) no-repeat -205px -157px;
}
.lifeservice ul li:nth-child(2) {position: relative;
}
.lifeservice ul li:nth-child(2) span {position: absolute;top: -3px;right: 0px;
}
.bargain {margin-top: 5px;
}/* 推荐模块 */
.recom {height: 163px;margin-top: 12px;background-color: #ebebeb;
}
.recom-hd {float: left;height: 163px;width: 205px;background-color: #5c5251;text-align: center;padding-top: 30px;
}
.recom-bd {float: left;
}
.recom-bd ul li {position: relative;float: left;
}
/* 强制性将上传的图片改为此大小 */
.recom-bd ul li img {width: 248px;height: 163px;
}
/* 选前3个 */
.recom-bd ul li:nth-child(-n+3)::after {content: '';/* after伪元素属于行内元素，没有大小，故我们应给他转换模式 但他又需要定位，故只需给他定位即可*/position: absolute;right: 0;top: 10px;width: 1px;height: 145px;background-color: #ddd;
}/* guess猜你喜欢模块 */
.guess {height: 266px;margin-top: 30px;
}
.guess-hd {height: 31px;
}
.guess-hd h4 {float: left;font-size: 18px;color: #333;font-weight: 400;
}
.guess-hd a {float: right;font-size: 12px;color: #666;margin: 8px 13px 10px 0;
}
.guess-hd a::after {content: '\e9e4';font-family: "iconfont";padding-left: 10px;
}
.guess-bd {height: 235px;border: 1px solid #ededed;
}
.guess-bd ul li {float: left;width: 200px;
}
.guess-bd ul li:last-child {width: 190px;
}
.guess-bd ul li img {margin: 20px 37px 10px;
}
.guess-bd ul li p {display: block;width: 205px;height: 35px;font-size: 12px;padding: 0 39px;border-right: 1px solid #ededed;
}
.guess-bd ul li:last-child p {border: 0;
}
.guess-bd ul li .price {display: block;width: 170px;font-size: 21px;color: #df3033;font-weight: 700;margin-left: 35px;margin-bottom: 12px;border-right: 1px solid #ededed;
}
.guess-bd ul li:last-child .price {border: 0;
}/* fun有趣模块 */
.fun {height: 437px;margin-top: 28px;
}
.fun h4 {font-size: 18px;color: #333;font-weight: 400;margin-bottom: 5px;
}
.fun .interest .interest-conver {float: left;
}
.fun .interest .interest-things {float: left;width: 227px;height: 405px;border: 1px solid #ededed;
}
.fun .interest .interest-things h5 {display: inline-block;width: 193px;height: 40px;border-bottom: 1px dashed #ededed;line-height: 40px;text-align: center;margin-left: 17px;font-size: 14px;color: #333;
}
.fun .interest .interest-things .thing1 {height: 207px;border-bottom: 1px solid #ededed;
}
.fun .interest .interest-things .thing2 {height: 158px;
}
.fun .interest .interest-brands {float: left;width: 403px;height: 405px;border: 1px solid #ededed;border-left: none;background-color: #f7f7f7;
}
.fun .interest .interest-brands h5 {display: inline-block;width: 367px;height: 40px;border-bottom: 1px dashed #ededed;line-height: 40px;text-align: center;margin-left: 20px;font-size: 14px;color: #333;
}
.fun .interest .interest-brands .brand1 {height: 207px;border-bottom: 1px solid #ededed;
}
.fun .interest .interest-brands .brand2 {float: left;/* width: 49%; */height: 158px;
}
.fun .interest .interest-brands .brand3 {float: left;height: 158px;width: 49%;border-left: 1px solid #ededed;
}
.fun .interest .interest-brandArea{float: left;width: 166px;height: 405px;border: 1px solid #ededed;
}
.fun .interest .interest-brandArea ul li {float: left;height: 7%;
}
.fun .interest .interest-brandArea ul li:nth-child(odd) {border-right: 2px dashed #efefef;
}
.fun .interest .interest-brandArea ul li:nth-child(-n+12) {border-bottom: 2px dashed #efefef;
}/* floor楼层区域模块 */
.floor .w {margin-top: 30px;
}
/* 1楼家用电器2楼手机通讯3楼电脑办公模块通用 */
.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;line-height: 30px;
}
.tab_list ul li {float: left;
}
.tab_list ul li a {margin: 0 15px;
}
.box_bd {height: 361px;
}
/* 亲儿子 */
.tab_list_item>div {float: left;
}
/* 此处先给出宽度,前面的调用即可 */
.col_210 {width: 210px;height: 361px;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;line-height: 33px;/* text-align: center; */margin-right: 10px;
}
.col_329 {width: 329px;
}
.col_221 {width: 221px;border-right: 1px solid #ccc;
}
.col_219 {width: 219px;
}
.bb {/* 一般情况下,如果a包含有宽度的盒子,那么a需要转换为块级元素 */display: block;border-bottom: 1px solid #ccc;
}

4 项目列表页制作

4.1 项目列表页制作准备工作

• 列表页面是新的页面，我们需要新建页面文件list.html。
• 因为列表页的头部和底部基本一致，所以我们需要把首页中的头部和底部的结构复制过来。
• 头部和底部样式也需要，因此list.html中还需要引用common.css。
• 需要新的list.css样式文件，这是列表页专门的样式文件。

4.2 项目列表页header和nav修改

4.3 项目列表页sk_container主体制作

4.4 项目列表页代码

4.4.1 项目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"><title>列表页-正品低价、品质保障！</title><!-- 网站说明 --><meta name="description"content="小王优品铺-专业的综合网上购物商城，销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品。便捷、诚信的服务，为您提供愉悦的网上购物体验！" /><!-- 关键词 --><meta name="keywords" content="网上购物，网上商城手机，笔记本，电脑，MP3，CD，VCD，DV，相机，数码，配件，手表存储卡，京东" /><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" /><!-- 引入初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共样式文件 --><link rel="stylesheet" href="css/common.css"><!-- 引入list.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="#" 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><!-- 列表页的秒杀模块 --><div class="sk"><img src="data:images/sk.png" alt=""></div><!-- search搜索模块 --><div class="search"><!-- placeholder会在输入字段为空时显示,并会在字段获得焦点时消失 适用于input的text search url telephone email password属性 --><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 --><!-- 列表页主体部分start --><div class="w sk_container"><div class="sk_hd"><img src="upload/bg_03.jpg" alt=""></div><div class="sk_bd"><ul><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li><li><a href="#"><img src="upload/list_01.jpg" alt=""></a><p>这是一段商品介绍这是一段商品介绍这是一段商品介绍这是一段商品介绍</p><div class="span"><div class="one_span"><i>￥</i>6666</div><!-- 使用del标签包裹的东西会自动带上删除线 --><del class="two_span">￥8888</del></div><div class="jindutiao"><span>已售87%</span><div class="jdt"><span></span></div><span>剩余<i class="style_red">29</i>件</span></div><div class="buy"><a href="#">立即抢购</a></div></li></ul></div></div><!-- 列表页主体部分end --><!-- footer底部模块start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5></h5><div class="service_txt"><h4>急速物流</h4><p>急速物流，急速送达</p></div></li><li><h5></h5><div class="service_txt"><h4>无忧售后</h4><p>七天无理由退换货</p></div></li><li><h5></h5><div class="service_txt"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li><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="#">211限时达</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></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></dl><dl><dt>特色服务</dt><dd><a href="#">夺宝岛</a></dd><dd><a href="#">DIY装机</a></dd><dd><a href="#">延保服务</a></dd><dd><a href="#">优品铺E卡</a></dd><dd><a href="#">优品铺通信</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="data: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">地址：陕西省西安市长安区西安财经大学 邮编：710100 电话：151-2973-6662 传真：000-00000000 邮箱: wangggyy2001@163.com <br />京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- footer底部模块end -->
</body>
</html>

4.4.2 项目list.css代码

.nav {/* 溢出部分隐藏,否则会使下面的内容由于上面浮动,在其后正常显示 */overflow: hidden;
}
.sk {position: absolute;border-left: 1px solid #c81523;left: 260px;top: 40px;padding-left: 12px;
}
.sk_list {float: left;
}
.sk_list ul li {float: left;
}
.sk_list ul li a {display: block;line-height: 47px;padding: 0 30px;font-size: 16px;font-weight: 700;color: #000;
}
.sk_con {float: left;
}
.sk_con ul li {float: left;
}
.sk_con ul li a {display: block;/* 行高大于高度,字会偏下 */line-height: 49px;padding: 0 20px;font-size: 14px;
}
.sk_con ul li:last-child a::after{content: '\e9e8';font-family: "iconfont";
}.sk_container {margin-bottom: 280px;
}
.sk_bd {/* 清除浮动，防止下方li把footer压塌,因为没有给.sk_bd高度 */overflow: hidden;
}
.sk_bd ul li {float: left;width: 290px;height: 460px;border: 1px solid transparent;margin-right: 13px;margin-top: 30px;
}
.sk_bd ul li:nth-child(4n) {margin-right: 0;
}
.sk_bd ul li:hover {border: 1px solid #c81523;
}
.sk_bd ul li p {line-height: 22px;padding-left: 10px;font-size: 14px;
}
.span {display: inline-block;width: 290px;
}
.span .one_span {float: left;color: #e60012;font-size: 22px;font-weight: 700;margin: 0 12px;
}
.span .one_span i {font-size: 14px;
}
.span .two_span {float: left;color: #ababab;font-size: 13px;font-weight: 600;padding-top: 9px;
}
.jindutiao {padding-left: 10px;margin-bottom: 10px;
}
.jindutiao span {font-size: 14px;
}
.jindutiao span i {font-size: 16px;font-weight: 500;
}
.jdt {margin: 0 5px;display: inline-block;/* 使得三个行内元素垂直居中，与行内块一起用的 */vertical-align: middle;width: 132px;height: 11px;border: 1px solid #e12228;/* border-top: 1px solid #e12228;border-right: 1px solid #e12228;border-bottom: 1px solid #e12228; */border-radius: 22px;/* 删除圆圈以外的内部span的背景 */overflow: hidden;
}
.jdt span {display: block;height: 11px;width: 87%;background-color: #ed282e;
}
.buy {display: block;width: 289px;height: 45px;background-color: #b1191a;
}
.buy a {display: block;line-height: 45px;text-align: center;font-size: 20px;color: #fff;
}

5 项目注册页制作

5.1 项目注册页类名命名

• 新建注册页面register.html。
• 注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化。
  

5.2 项目注册页header头部制作

5.3 项目注册页registerarea制作

5.4 项目注册页footer制作

• 复制粘贴index.html与common.css相应的部分即可。

5.5 项目注册页代码

5.5.1 项目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><!-- 因为注册页很私密，所以不需要加SEO优化 --><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" /><!-- 引入初始化样式文件 --><link rel="stylesheet" href="css/base.css"><!-- 引入register.css文件 --><link rel="stylesheet" href="css/register.css">
</head>
<body><div class="w"><header><div class="logo"><a href="index.html"><img src="data:images/logo.png" alt=""></a></div></header><div class="registerarea"><h3>注册新用户<div class="login">我有账号，去<a href="#">登录</a></div></h3><div class="reg_form"><form action=""><ul><li><label for="">手机号：</label><input type="text" class="inp"><span class="error"><i class="error_icon"></i> 手机号码格式不正确，请重新输入</span></li><li><label for="">短信验证码：</label><input type="text" class="inp"><span class="success"><i class="success_icon"></i> 短信验证码输入正确</span></li><li><label for="">登录密码：</label><input type="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="">确认密码：</label><input type="text" 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><input type="submit" value="完成注册" class="btn"></li></ul></form></div></div><footer><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">地址：陕西省西安市长安区西安财经大学 邮编：710100 电话：151-2973-6662 传真：000-00000000 邮箱: wangggyy2001@163.com <br />京ICP备08001421号京公网安备110108007702</div></div></footer></div>
</body>
</html>

5.5.2 项目register.css代码

.w {width: 1200px;margin: 0 auto;
}
header {height: 84px;border-bottom: 2px solid #c81523;
}
.logo {padding-top: 13px;
}.registerarea {height: 522px;border: 1px solid #ccc;margin-top: 20px;
}
.registerarea h3 {height: 42px;border-bottom: 1px solid #ccc;background-color: #ececec;line-height: 42px;padding: 0 10px;font-size: 18px;font-weight: 400;
}
.registerarea h3 .login {float: right;font-size: 14px;
}
.registerarea h3 .login a {color: #c81523;
}
.reg_form {width: 600px;margin: 50px auto 0;
}
.reg_form ul li {margin-bottom: 20px;
}
.reg_form ul li label {display: inline-block;width: 88px;text-align: right;
}
.reg_form ul li .inp {width: 242px;height: 37px;border: 1px solid #ccc;
}
.error {color: #c81523;
}
.error_icon,
.success_icon {display: inline-block;/* 行内块元素与文字对齐居中 */vertical-align: middle;width: 20px;height: 20px;background: url(../images/error.png);margin-top: -2px;
}
.success {color: green;
}
.success_icon {background: url(../images/success.png);
}
.safe {padding-left: 170px;
}
.safe em {padding: 0 12px;
}
.ruo {background-color: #de1111;
}
.zhong {background-color: #f79100;
}
.qiang {background-color: #40b83f;
}
.agree {padding-left: 95px;
}
.agree input {vertical-align: middle;
}
.agree a {color: #1ba1e6;
}
.btn {width: 200px;height: 34px;background-color: #c81623;font-size: 14px;color: #fff;margin: 30px 0 0 100px;
}.mod_copyright {text-align: center;padding-top: 20px;
}
.links {margin-bottom: 15px;
}
.links a {margin: 0 3px;
}
.copyright {line-height: 20px;
}

6 域名注册与网站上传

6.1 什么是web服务器

• 将网站放入服务器，别人就可访问我们的网站了。
• 服务器是提供计算服务的设备，它也是一台计算机，在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、web服务器等。
• web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；可以放置数据文件，让全世界下载。
• web服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。

6.2 本地服务器

• 我们可以把自己电脑设置为本地服务器，这样同一个局域网的同学就可以访问你的网站了。

6.3 远程服务器

• 如果想要在互联网中访问，可以把网站上传到远程服务器。
• 远程服务器通常是别的公司为我们提供一台电脑(主机)，我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。

6.4 将自己的网站上传到远程服务器

• 免费的远程服务器：免费远程服务器
• 步骤：
  1>去免费空间网站注册账号。
  2>记录下主机名、用户名、密码、域名。
  3>利用cutftp软件上传网站到远程服务器。
  4>在浏览器中输入域名，即可访问我们的网站了。

实战项目——小王优品铺相关推荐

1. JAVA毕设项目小王防疫副食品配送商城（java+VUE+Mybatis+Maven+Mysql）

   项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...

2. 小象优品凉经-图像算法实习生

   投完简历HR立刻加了微信通知面试,整体效率还是挺高的,面试官感觉也还是比较专业,共一面(技术面) 面试问题 1.自我介绍 2.问项目具体细节(视频行为识别方向),如模型结构,怎么提取时空特征,损失函数 ...

3. 深度解析：面试官问你项目经验到底能问多细？（附实战项目）

   马上年关了,很多准备拿完年终跑路的小伙伴们可以看过来啦,为年后跳槽做点准备:暂时不准备挪窝的也可以来看看,有备无患嘛 面试难点 其实面试同一个岗位的话,大家的基础知识技能都差不多,面试官一般都是通过你 ...

4. 零基础微信落地页小程序实战项目

   前言 微信小程序简单易上手,只要有一些编程基础,即可快速开发基本的项目. 本项目是常见的,商品广告落地页小程序.提供商品浏览,商品列表按钮,购买,微信授权,手机号绑定,验证码校验,用户协议,消息通知, ...

5. 哔哩哔哩-尚优品项目开发记录

   尚优品开发项目记录,本次记录仅当作个人总结 使用的编辑器为Vscode 版本为vue2 目前使用到的技术栈有 vue-router.vuex.axios element-ui 首先创建一个Vue2项目 ...

6. python有趣的小项目-有趣的十个Python实战项目，让你瞬间爱上Python！

   前言 Python 是一种极具可读性和通用性的编程语言.Python 这个名字的灵感来自于英国喜剧团体 Monty Python,它的开发团队有一个重要的基础目标,就是使语言使用起来很有趣.Pytho ...

7. VS2017学习C++基础十一（项目实战：小公主养成记）

   // chapter11a01.cpp : //项目实战:小公主养成记#include <iostream> #include <string> #include <ve ...

8. 微信原生小程序电商实战项目----附源码和分析

   项目地址:https://github.com/li1164267803/wechat-test-shopping 如果觉得对您有用,不忘记了给个 star 最近公司准备做小程序的项目,技术选型定为使 ...

9. 爆品铺货新出路？选品为王的电商APP如何高效拉新，实现GMV飙升

   这两年跨境"封号潮"频繁上演,这边亚马逊还没结束,那边PayPal又开始了.加强平台管控主要是为了打击"违规商家",降低消费者获得不良购物体验的可能性. 最倒霉 ...

10. （上）小程序从0快速入门到实战项目打造个性简历，让你轻松脱颖而出吸引面试官眼球（附源码）

    前言 分享之前我们先来认识一下小程序,官方定义的微信小程序是一种新的开放能力,开发者可以快速地开发一个小程序.更是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体 ...

最新文章

1. Omi框架学习之旅 - 插件机制之omi-touch 及原理说明
2. 深度学习 常用python操作（1）
3. Python3.7版本unittest框架添加用例的方法
4. Linux进程管理之ps的使用
5. matlab中degrees,Convert degrees-minutes-seconds to degrees
6. js 全屏 退出全屏
7. Qt中视图的缩放对应缩略图中矩形框的缩放
8. 是什么让程序员对工作失去了激情？
9. SAP License：EXCEL自定义函数 For SAP遗留资产折旧计算
10. 迈特斯机器人_WIE-R红外热像视频内窥镜
11. iOS底层探索之多线程(二)—线程和锁
12. 【深度学习】简单地利用keras做车标识别
13. web渗透测试入门01
14. [T-ARA][I'm so bad]
15. android手机内存单位 吉字节,内存容量单位换算(手机内存单位大小排列换算)
16. vi/vim显示行号
17. 打开360浏览器显示无法连接服务器错误,Win7系统360浏览器打开网页显示“网络连接错误，错误代码102”怎么办...
18. java 毫秒数一天_java用毫秒数做日期计算的一个踩坑记录
19. Google无法验证此账号归你所有解决方法
20. 将Clound compare以及一些mathLab 等源码,集成到我们vs上来并编译

热门文章

1. 基于Java的杨辉三角
2. idea上传新项目至svn仓库
3. 机器学习数据不平衡问题及其解决方法
4. 大厂“降本增效”后招聘要求，这项目经验和技术能力...，绝了
5. sakai mysql_sakai 开发环境搭建（一）
6. Maven下载和安装
7. 82_Linux检测指定ip指定端口是否开放
8. Word的样式库在 选项卡中_2分钟学会在Word中制作田字格 米字格 书法练字再也不用买本子了...
9. 华南理工大学 电力电子技术（王兆安） 期末复习笔记2 第三章第四章
10. 项目实战：Qt+OpenCV激光射击游戏（识别激光、识别圆）