main主体模块制作
概览
HTML
对于边框超出，可以使用overflow：hidden来隐藏
<!-- 首页专有 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>
<p>机票</p>
</li>
<li>
<i></i>
<p>电影票</p>
</li>
<li>
<i></i>
<p>游戏</p>
</li>
<li>
<i></i>
<p>彩票</p>
</li>
<li>
<i></i>
<p>加油卡</p>
</li>
<li>
<i></i>
<p>酒店</p>
</li>
<li>
<i></i>
<p>火车票</p>
</li>
<li>
<i></i>
<p>众筹</p>
</li>
<li>
<i></i>
<p>理财</p>
</li>
<li>
<i></i>
<p>礼品卡</p>
</li>
<li>
<i></i>
<p>白条</p>
</li>
</ul>
</div>
<div class="bargain">
<img src="upload/bargain.png" alt="">
</div>
</div>
</div>
</div>
<!-- 首页专有 main end-->
CSS
.main {
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;
}
.lifeservice {
overflow: hidden;
height: 209px;
border: 1px solid #e4e4e4;
border-top: 0;
}
.lifeservice ul {
width: 252px;
}
.lifeservice ul li {
float: left;
width: 63px;
height: 70px;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
text-align: center;
}
.lifeservice ul li i {
display: inline-block;
height: 28px;
width: 24px;
margin-top: 12px;
background: url(../images/icons.png) no-repeat -17px -15px;
}
.bargain {
margin-top: 5px;
}
.news-hd {
height: 33px;
border-bottom: 1px dotted #e4e4e4;
padding: 0 14px;
line-height: 33px;
}
.news-hd h5 {
float: left;
font-size: 14px;
}
.news-hd .more {
float: right;
}
.news-hd .more::after {
font-family: 'icomoon';
content: '\e920';
}
.news-bd {
padding: 5px 15px 0;
}
.news-bd ul li {
height: 24px;
line-height: 24px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
推荐模块
HTML
<!-- 推荐模块start -->
<div class="w recom">
<div class="recom-hd">
<img src="images/recom.png" alt="">
</div>
<div class="recom-bd">
<ul>
<li><img src="upload/recom_03.jpg" alt=""></li>
<li><img src="upload/recom_03.jpg" alt=""></li>
<li><img src="upload/recom_03.jpg" alt=""></li>
<li><img src="upload/recom_03.jpg" alt=""></li>
</ul>
</div>
</div>
<!-- 推荐模块end -->
CSS
为防止后续上传图片大小不一，因此需要把图片大小定死。
/* 推荐模块 */
.recom {
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;
}
.recom-bd ul li:nth-child(-n+3)::after {
position: absolute;
content: '';
top: 10px;
right: 0;
width: 1px;
height: 145px;
background-color: #ddd;
}
楼层区域模块
概览
HTML
<!-- 楼层区域制作 start -->
<div class="floor">
<!-- 家用电器 -->
<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.png" alt=""></a>
</div>
<div class="col_329">
<a href="#"><img src="upload/floor-1-b01.png" alt=""></a>
</div>
<div class="col_221">
<a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a>
<a href="#"><img src="upload/floor-1-3.png" alt=""></a>
</div>
<div class="col_221">
<a href="#"><img src="upload/floor-1-4.png" alt=""></a>
</div>
<div class="col_219">
<a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a>
<a href="#"><img src="upload/floor-1-6.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 楼层区域制作 end -->
CSS
/* 家用电器模块 */
.box_hd {
height: 30px;
border-bottom: 2px solid #c81623;
}
.box_hd h3 {
float: left;
font-size: 18px;
color: #c81623;
font-weight: normal;
}
.tab_list {
float: right;
line-height: 30px;
}
.tab_list ul li {
float: left;
}
.tab_list ul li a {
margin: 0 15px;
}
.floor .w {
margin-top: 30px;
}
.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 li {
float: left;
width: 85px;
height: 34px;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 33px;
margin-right: 10px;
}
.col_210 ul {
padding-left: 12px;
}
.col_329 {
width: 329px;
height: 361px;
}
.col_221 {
width: 221px;
height: 361px;
border-right: 1px solid #ccc;
}
.col_219 {
width: 219px;
height: 361px;
}
.bb {
border-bottom: 1px solid #ccc;
display: block;
}
列表页制作·样式修改
概览
HTML
<!-- 头部模块 start -->
<header class="header w">
<!-- logo模块 -->
<div class="logo">
<h1>
<a href="index.html" title="品优购商城">品优购商城</a>
</h1>
</div>
<!-- 列表页的秒杀 -->
<div class="sk">
<img src="images/sk.png" alt="">
</div>
<!-- 搜索模块 -->
<div class="search">
<input type="search" 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>
<!-- 头部模块 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-->
CSS
/* 列表页专有css */
.nav{
overflow: hidden;
}
.sk {
position: absolute;
left: 190px;
top: 40px;
padding: 3px 0 0 14px;
border-left: 1px solid #c81523;
}
.sk_list {
float: left;
}
.sk_con {
float: left;
}
.sk_list ul li {
float: left;
}
.sk_list ul li a {
display: block;
text-align: center;
line-height: 47px;
padding: 0 30px;
font-size: 16px;
font-weight: 700;
color: #000;
}
.sk_con ul li {
float: left;
}
.sk_con ul li a {
display: block;
text-align: center;
line-height: 49px;
padding: 0 20px;
font-size: 14px;
}
.sk_con ul li:last-child a::after {
font-family: 'icomoon';
content: '\e91e';
}
列表页制作·主体
HTML
记得要清除浮动。
<!-- 列表页主体部分 start -->
<div class="w sk_container">
<div class="sk_hd">
<img src="upload/bg_03.png" alt="">
</div>
<div class="sk_bd">
<ul class="clearfix">
<li><img src="upload/list.jpg" alt=""></li>
<li><img src="upload/list.jpg" alt=""></li>
<li><img src="upload/list.jpg" alt=""></li>
<li><img src="upload/list.jpg" alt=""></li>
<li><img src="upload/list.jpg" alt=""></li>
<li><img src="upload/list.jpg" alt=""></li>
<li><img src="upload/list.jpg" alt=""></li>
<li><img src="upload/list.jpg" alt=""></li>
<li><img src="upload/list.jpg" alt=""></li>
<li><img src="upload/list.jpg" alt=""></li>
</ul>
</div>
</div>
<!-- 列表页主体部分 end -->
CSS
.sk_bd ul li {
overflow: hidden;
float: left;
margin-right: 13px;
width: 290px;
height: 460px;
border: 1px solid transparent;
}
.sk_bd ul li:nth-child(4n) {
margin-right: 0;
}
.sk_bd ul li:hover {
border: 1px solid #c81523;
}
注册页面
HTML
<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_from">
<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="password" class="inp">
<span class="error">
<i class="error_icon"></i>
密码不一致，请重新输入
</span>
</li>
<li class="agree"><input type="checkbox">同意协议并注册
<a href="#">《知晓用户协议》</a>
</li>
<li>
<input type="submit" value="提交注册" class="btn">
</li>
</ul>
</form>
</div>
</div>
<footer>
<div class="mod_copyright">
<div class="links">
关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
</div>
<div class="copyright">
地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br />
京ICP备08001421号京公网安备110108007702
</div>
</div>
</footer>
</div>
CSS
.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: normal;
}
.login {
float: right;
font-size: 14px;
}
.login a {
color: #c81523;
}
.reg_from {
width: 600px;
margin: 50px auto;
}
.reg_from ul li {
margin-bottom: 20px;
}
.reg_from ul li label {
display: inline-block;
width: 88px;
text-align: right;
}
.reg_from 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;
color: #fff;
}
.ruo {
background-color: #de1111;
}
.zhong {
background-color: #f79100;
}
.qiang {
background-color: #40b93f;
}
.argee {
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 70px;
}
.mod_copyright {
text-align: center;
padding-top: 20px;
}
.links {
margin-bottom: 15px;
}
.link a {
margin: 0 3px;
}
.copyright {
line-height: 20px;
}
Web服务器
服务器（我们也会称之为主机)是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的版务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。
Web 服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览;可以放置数据文件，让全世界下载。
以下服务器我们主要指的是Web服务器。
根据服务器在网络中所在的位置不同，又可分为本地服务器和远程服务器。
远程服务器
本地服务器主要在局域网中访问，如果想要在互联网中访问，可以把品优购网站上传到远程服务器。
远程服务器是通常是别的公司为我们提供的一台电脑（主机），我们只要把网站项目上传到这台电脑上，任何人都可以利用域名访问我们的网站了。
总结
至此，该练习已完毕，全部代码、素材请见：品优购.zip
476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
