自学前端第一个入门项目——黑马品优购(HTML+CSS)静态项目
这是我在学完HTML和CSS后做的第一个项目。这个项目是模仿京东的电商网页项目，涉及4个页面,包括首页、秒杀页面、商品详情页面和注册页面，很适合在学完html+css后，当成一个用于巩固静态网页制作知识点的项目。
·
1.项目简介
1.1 简介
这是我在学完HTML和CSS后做的第一个项目。这个项目是模仿京东的电商网页项目，涉及4个页面,包括首页、秒杀页面、商品详情页面和注册页面，很适合在学完html+css后，当成一个用于巩固静态网页制作知识点的项目。
1.2项目参考
这个项目主要涉及PC端网页的一些常用标签（div、span、ul>li,dl>dt>dd、a、p、input）、css精灵图、伪类、盒子模型、浮动、清除浮动、过渡和定位以及字体图标等知识点以及轮播图与进度条的静态布局写法，没有涉及到flex布局、3d/2d转换、动画以及移动适配相关知识点。
黑马机构的pink老师的B站账号（黑马前端）的pink老师-PC端静态页面项目实战-品优购项目制作-持续更新，学习视频链接：(https://www.bilibili.com/video/BV1Pt411M749/?spm_id_from=333.999.0.0)
1.3项目素材资源
项目素材提取链接：
阿里云盘：
pinyougou素材
https://www.aliyundrive.com/s/G4bSE7vQz5v
点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。
在这个项目我采用vscode作为开发工具，pxcook和美图秀秀作为切图工具。博客里面的少量代码可能会和教学视频略有差别。官方给的遗漏素材均在上述素材资源链接中补充，使用时注意查看图片名称以及文件路径，再使用。
2.项目预览
1.首页
2.秒杀页面
3.商品详情页
4.注册页面
3.项目准备
1.新建和配置项目文件夹目录，并将素材中的fonts和ico文件复制
2.准备配置引入文件
（1）.准备基础css文件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
}
（2）新建html,并在html文件的head标签中引入相关文件
以首页为例
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 网站说明 -->
<meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电
脑家居百货、服饰服装、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务。为您提供愉悦的网
上购物体验！" />
<!-- 关键字 -->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机，数码，
配件，手表，存储卡，京东" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 引入初始化的css文件 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 引入公共样式的css文件 -->
<link rel="stylesheet" href="./css/common.css">
<!-- 引入字体图标 -->
<link rel="stylesheet" href="./fonts/font_3596448_gz63gnsef0s/iconfont.css">
<!-- 引入首页样式css文件 -->
<link rel="stylesheet" href="./css/index.css">
</head>
3.准备编写代码
4.项目代码
4.1.公共布局（首页、详情页、秒杀页）
4.1.1顶部快捷导航（shortcut）
图（顶部快捷导航）
html布局
<!-- 顶部快捷导航 -->
<div class="shortcut">
<div class="wrapper">
<div class="fl">
<ul>
<li> 品优购欢迎您！</li>
<li>
<a href="#"> 请登录</a>
<a href="register.html" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li> <a href="#">我的订单 </a></li>
<li class="spacer"></li>
<li>
<a href="#"> 我的品优购</a>
<i class="iconfont icon-arrow-down
"></i>
</li>
<li class="spacer"></li>
<li> <a href="#">品优购会员 </a></li>
<li class="spacer"></li>
<li> <a href="#"> 企业采购</a></li>
<li class="spacer"></li>
<li>
<a href="#">关注品优购</a>
<i class="iconfont icon-arrow-down
"></i>
</li>
<li class="spacer"></li>
<li>
<a href="#">客户服务 </a>
<i class="iconfont icon-arrow-down
"></i>
</li>
<li class="spacer"></li>
<li>
<a href="#">网站导航</a>
<i class="iconfont icon-arrow-down
"></i>
</li>
</ul>
</div>
</div>
</div>
<!-- 顶部快捷导航 -->
css样式
/* 公共样式 */
/* 准备工作 */
.fl{
float: left;
}
.fr{
float: right;
}
/* 版心 */
.wrapper{
width: 1200px;
margin: 0 auto;
}
/* 版心 */
.style_red{
color:#c81623 ;
}
/* 准备工作 */
/* 快捷导航 */
.shortcut{
height: 32px;
background-color: #f1f1f1;
line-height: 31px;
}
.shortcut li{
float: left;
}
.spacer{
width: 1px;
height: 12px;
margin: 9px 12px 0;
background-color: #666;
}
.fr .iconfont{
font-size: 16px;
line-height: 26px;
}
4.1.2首页头部（header）
图（首页头部）
html布局
<!-- 首页头部 -->
<div class="wrapper header">
<!-- logo -->
<div class="logo">
<h1><a href="index.html" title="品优购">品优购</a></h1>
</div>
<!-- logo -->
<!-- 搜索 -->
<div class="search">
<input type="text" class="text" value="搜索想要的">
<button class="btn">搜索</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="iconfont icon-cart-Empty"></i>
<span> 我的购物车</span>
<i class="iconfont icon-arrow-right"></i>
<i class="count">800</i>
</div>
<!-- 购物车 -->
</div>
<!-- 首页头部 -->
css样式
/* 头部 */
.header{
position: relative;
height: 109px;
/* background-color: skyblue; */
}
.header .logo{
position: absolute;
left: 0;
top: 25px;
width: 171px;
height: 56px;
/* background-color: chartreuse; */
}
/* logo */
.logo a{
display: block;
width: 171px;
height: 56px;
background-image: url(../img/logo.png);
background-repeat: no-repeat;
/* 搜索优化方法一 */
/* text-indent: -999px;
overflow: hidden; */
/* 搜索优化方法二 */
font-size: 0;
}
/* search */
.header .search{
position: absolute;
left: 341px;
top: 25px;
}
.search .text{
float: left;
padding-left: 10px;
width: 456px;
height: 32px;
border: solid 2px #b1191a;
color: #ccc;
}
.search .btn{
float: left;
width: 80px;
height: 32px;
background-color: #b1191a;
font-size: 16px;
color: #fff;
border: 0;
}
/* hotwords */
.header .hotwords{
position: absolute;
left: 356px;
top: 65px;
margin: 0 11px;
}
.hotwords a{
margin: 0 11px;
}
/* shopcar */
.header .shopcar{
position: absolute;
right: 63px;
top: 25px;
width: 140px;
height: 36px;
background-color: #f7f7f7;
border: solid 1px #dfdfdf;
text-align: center;
line-height: 36px;
font-size: 12px;
}
.shopcar .icon-cart-Empty{
color: #d84a4a;
}
.shopcar .icon-arrow-right{
margin-left: 5px;
}
.shopcar .count{
position: absolute;
/* 应该是左侧对齐，文字才能往右走显示 */
left: 100px; ;
top: -5px;
padding: 0 3px;
height: 14px;
line-height: 14px;
background-color: #e60012;
color: #fff;
border-radius: 7px 7px 7px 0;
}
4.1.3导航
html布局
<!-- 导航 -->
<div class="nav">
<div class="wrapper">
<div class="dropdown fl">
<div class="dt">全部商品分类</div>
<div class="dd" >
<ul>
<li class="menu_item">
<a href="list.html">家用电器</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="list.html"> 手机、</a>
<a href="list.html"> 数码、</a>
<a href="list.html"> 通信 </a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="list.html">电脑、</a>
<a href="list.html">办公</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="list.html">家居、</a>
<a href="list.html">家具、</a>
<a href="list.html">家装、</a>
<a href="list.html">厨具</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#">男装、女装、童装、内衣</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#"> 个户化妆、清洁用品、宠物</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#">鞋靴、箱包、珠宝、奢侈品</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#"> 运动户外、钟表</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#">汽车、汽车用品</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#"> 母婴、玩具乐器</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#"> 食品、酒类、生鲜、特产</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#"> 医药保健</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#">"图书、音像、电子书
>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#"> 彩票、旅行、充值、票务</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#">理财、众筹、白条、保险</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
</ul>
</div>
</div>
<div class="navitems fl">
<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>
css样式
.nav{
height: 45px;
border-bottom: 2px solid #b1191a;
}
/*左侧dropdown区域 */
.dropdown{
width: 209px;
height: 45px;
}
.dropdown .dt{
width: 100%;
height: 100%;
background-color: #b1191a;
text-align: center;
color: #fff;
line-height: 45px;
font-weight:700;
}
.dropdown .dd{
height: 455px;
background-color: #c81623;
padding-top: 1px;
}
.menu_item{
height: 31px;
line-height: 31px;
padding:0 10px;
margin-left: 1px;
transition: padding-left 0.5s;
}
.menu_item:hover{
background-color: #fff;
padding-left: 20px;
}
.menu_item a{
font-size: 14px;
color: #fff;
}
.menu_item i{
float: right;
font-size: 18px;
color: #fff;
}
/* 鼠标过li里边的a颜色变色 */
.menu_item:hover a{
color: #c81623;
}
/* 右侧：navitems */
.navitems{
padding: 0 11px;
}
.navitems li{
float: left;
}
.navitems li a{
display: block;
padding: 0 25px;
height: 45px;
line-height: 45px;
color: #333;
font-size: 16px;
}
.navitems li a:hover{
background-color: #c81623;
color: #fff;
}
4.1.4底部footer
html布局
<div class="footer">
<div class="wrapper">
<div class="mod_service">
<ul>
<li>
<i class="mod_service_common mod_service_zheng"></i>
<div class="title">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li><i class="mod_service_common mod_service_ji"></i>
<div class="title">
<h5>极速物流</h5>
<p>急速物流，急速送达</p>
</div>
</li>
<li><i class="mod_service_common mod_service_bao"></i>
<div class="title">
<h5>无忧售后</h5>
<p>7天无理由退换货</p>
</div>
</li>
<li>
<i class="mod_service_common mod_service_service"></i>
<div class="title">
<h5>特色服务</h5>
<p>私人定制家电套餐</p>
</div>
</li>
<li><i class="mod_service_common mod_service_help"></i>
<div class="title">
<h5>帮助中心</h5>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist mod_help_app">
<dt><a href="#">帮助中心</a></dt>
<dd><img src="./upload/屏幕截图 2022-09-15 193223.png" alt="">
<p>品优购客户端</p></dd>
</dl>
</div>
<div class="mod_copyright">
<p class="mod_copyright_link">
<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>
</p>
<p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
<br>
京ICP备08001421号京公网安备110108007702
</p>
</div>
</div>
</div>
css样式
/* 公共样式底部：footer */
.footer{
height: 387px;
background-color: #f5f5f5;
padding-top: 30px;
}
.footer .mod_service{
height: 110px;
border-bottom: 1px solid #ededed;
}
.mod_service li{
float: left;
width: 240px;
height: 110px;
/* background-color:brown; */
}
.mod_service_common{
float: left;
width: 50px;
height: 50px;
margin-left: 35px;
}
.mod_service_zheng{
background:url(../img/icons.png) no-repeat -255px -3px;
}
.mod_service .title{
float: left;
margin-left: 10px;
margin-top: 5px;
}
.mod_service_ji{
background:url(../img/icons.png) no-repeat -255px -55px;
}
.mod_service_bao{
background:url(../img/icons.png) no-repeat -257px -106px;
}
.mod_service_service{
background:url(../img/icons.png) no-repeat -257px -156px;
}
.mod_service_help{
background:url(../img/icons.png) no-repeat -258px -208px;
}
/* mod_help */
.mod_help{
height: 184px;
border-bottom: 1px solid #ededed;
}
.mod_helplist{
float: left;
width: 200px;
padding: 20px 0 0 50px;
}
.mod_helplist dt{
height: 25px;
font-size: 16px;
}
.mod_helplist dd{
height: 24px;
}
.mod_help_app img{
width: 95px;
height: 95px;
margin: 7px 0;
}
.mod_help_app dt, .mod_help_app p{
padding-left: 15px;
}
.mod_copyright {
text-align: center;
height: 100px;
}
.mod_copyright_link{
margin: 8px 15px 4px 15px;
}
.mod_copyright_info{
line-height:18px;
}
4.2 首页样式与布局
4.2.1轮播图与品优购快报及其下侧区域
html布局
<div class="wrapper">
<div class="main">
<!--左侧：轮播图 -->
<div class="focus fl">
<a href="#" class="arrow_l"> < </a>
<a href="#" class="arrow_r"> > </a>
<ul>
<li> <a href="#"><img src="./upload/focus1.png" alt=""></a></li>
</ul>
<ol class="circle">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- 右侧：品优购快报、生活服务 -->
<div class="newsflash fr">
<div class="news">
<div class="news_hd">
品优购快报
<a href="#">更多<i class="iconfont icon-arrow-right"></i></a>
</div>
<div class="news_bd">
<ul>
<li>[特惠]备战开学季 全民半价购数码</li>
<li>[特惠]备战开学季 全民半价购数码</li>
<li>[特惠]备战开学季 全民半价购数码</li>
<li>[特惠]备战开学季 全民半价购数码</li>
<li>[特惠]备战开学季 全民半价购数码</li>
</ul>
</div>
</div>
<div class="menu">
<ul>
<li>
<a href="#">
<i class="menu_ico menu_ico_huafei"></i>
<p>话费</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
</ul>
</div>
<div class="bargin">
<img src="./upload/bargain.png" alt="">
</div>
</div>
</div>
</div>
</div>
CSS样式
.main{
width: 980px;
height: 455px;
/* background-color: blue; */
margin-left: 219px;
}
.main .focus{
position: relative;
width: 720px;
height: 455px;
background-color: orchid;
}
.focus .arrow_l,.focus .arrow_r{
position: absolute;
top: 50%;
margin-top: -25px;
width: 30px;
height: 50px;
background-color:rgba(0,0,0, 0.4);
text-align: center;
line-height: 50px;
font-size: 30px;
}
.focus .arrow_r{
right: 0;
}
.circle {
position: absolute;
float: left;
left: 50px;
bottom: 10px;
}
.circle li{
float: left;
width: 8px;
height: 8px;
border-radius: 50%;
border: 8px solid rgba(255,255,255, 0.5);
margin-left: 10px;
cursor: pointer;
}
.circle .current{
background-color: #fff;
/* box-shadow: ; */
}
.main .newsflash{
width: 250px;
height: 455px;
}
.newsflash .news{
height: 163px;
border: 1px solid #e4e4e4;
}
.news .news_hd{
height: 32px;
padding: 0 17px;
font-size: 14px;
line-height: 32px;
border: 1px solid #ccc;
border-top: none;
}
.news_hd a{
float: right;
font-size: 12px;
margin-left: 9px;
}
.news_bd{
padding: 13px 0 0 17px;
}
.news_bd li{
margin-bottom: 5px 0;
height: 23px;
}
.newsflash .menu{
height: 208px;
border: 1px solid #e4e4e4;
border-top: none;
overflow: hidden;
}
/* 装不下 4个li? */
.menu ul{
width: 252px;
}
.menu li{
position: relative;
float: left;
width: 62px;
height: 71px;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
}
.menu li a{
display: block;
/* 解决外边距合并引起的塌陷问题 */
overflow: hidden;
height: 100%;
}
.menu li a p{
text-align: center;
}
.menu_ico{
display: block;
width: 24px;
height: 24px;
background-color: fuchsia;
margin: 10px auto;
}
.menu_ico_huafei{
background: url(../img/icons.png) no-repeat;
background-position: -17px -16px;
}
.menu_ico_jipiao{
background: url(../img/icons.png) no-repeat;
background-position: -78px -16px;
}
.menu li .jian{
position: absolute;
right: 0;
top: 0;
}
.menu li .jian img{
width: 17px;
height: 20px;
}
.newsflash .bargin{
height: 75px;
background-color: chartreuse;
margin-top: 8px;
}
/* 主体部分：首页轮播图、菜单 */
其中涉及轮播图的布局和样式如下：
html布局
<div class="focus fl">
<a href="#" class="arrow_l"> < </a>
<a href="#" class="arrow_r"> > </a>
<ul>
<li> <a href="#"><img src="./upload/focus1.png" alt=""></a></li>
</ul>
<ol class="circle">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
CSS样式
.main .focus{
position: relative;
width: 720px;
height: 455px;
background-color: orchid;
}
.focus .arrow_l,.focus .arrow_r{
position: absolute;
top: 50%;
margin-top: -25px;
width: 30px;
height: 50px;
background-color:rgba(0,0,0, 0.4);
text-align: center;
line-height: 50px;
font-size: 30px;
}
.focus .arrow_r{
right: 0;
}
.circle {
position: absolute;
float: left;
left: 50px;
bottom: 10px;
}
.circle li{
float: left;
width: 8px;
height: 8px;
border-radius: 50%;
border: 8px solid rgba(255,255,255, 0.5);
margin-left: 10px;
cursor: pointer;
}
.circle .current{
background-color: #fff;
/* box-shadow: ; */
}
4.2.2每日推荐
html布局
<!-- 每日推荐 -->
<div class="recom clearfix">
<div class="wrapper">
<div class="recom_hd">
<img src="./img/recom.png" alt="">
</div>
<div class="recom_bd">
<ul>
<li>
<a href="#">
<img src="./upload/recom_03.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./upload/recom_03.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./upload/recom_03.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./upload/recom_03.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 每日推荐 -->
css样式
.recom .wrapper{
display: flex;
margin-top: 20px;
height: 163px;
background-color: blue;
}
.recom_hd{
width: 200px;
height: 163px;
background-color: #5c5251;
}
.recom_hd img{
margin-top: 30px;
margin-left: 68px;
text-align: center;
}
.recom_bd{
width: 1000px;
height: 163px;
background-color: #ebebeb;
}
.recom_bd li{
float: left;
width: 250px;
height: 143px;
border-right: 1px solid #dddddd;
margin-top: 10px;
}
.recom_bd li img{
width: 240px;
height: 100%;
}
.recom_bd li:last-child{
border-right: none;
}
4.2.3 楼层区域
1.头部布局与样式
html布局
<div class="floor">
<div class="jiadian wrapper">
<div class="box-hd">
<h3>家用电器</h3>
<ul class="tab_list">
<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>
css样式
.box-hd{
display: flex;
justify-content: space-between;
margin-top: 30px;
border-bottom: 2px solid #c81623;
}
.box-hd h3{
height: 30px;
color: #c81623;
}
.tab_list{
display: flex;
line-height: 30px;
}
.tab_list li a{
margin:0 15px;
}
2.内容区域（由于内容区域涉及多个高度相同且内容和宽度不同的盒子，需要起不同的类名，进行布局，添加过渡效果，使用户点击页面向左移动）
html布局
<div class="box-bd">
<ul class="tab-con fl">
<li class="w209 fl">
<a href="#">
<ul class="tab-con_item ">
<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>
<img src="./upload/floor-1-1.png" alt="">
</li>
<li class="w329">
<a href="#">
<img src="./upload/floor-1-b01.png" alt="">
<!-- 轮播图 -->
<ol class="w329_showing">
<li class="current"></li>
<li></li>
<li></li>
</ol>
</a>
</li>
<li class="w218">
<a href="#">
<img src="./upload/floor-1-2.png" alt="">
<img src="./upload/floor-1-3.png" alt="">
</a>
</li>
<li class="w218 ">
<a href="#">
<img src="./upload/floor-1-4.png" alt="">
</a>
</li>
<li class="w220">
<a href="#">
<img src="./upload/floor-1-5.png" alt="">
<img src="./upload/floor-1-6.png" alt="">
</a>
</li>
</ul>
</div>
</div>
css样式
.box-bd{
height: 361px;
}
.box-bd li{
overflow: hidden;
}
.box-bd img{
transition: all 0.2s;
}
.box-bd img:hover{
margin-left: 20px;
}
.tab-con {
display: flex;
height: 360px;
}
.w209{
width: 209px;
background-color: #f9f9f9;
}
.w209 .tab-con_item{
height: 100px;
}
.tab-con_item li{
float: left;
width: 86px;
height: 32px;
border-bottom: 1px solid #ededed;
margin: 10px 0 0 13px;
text-align: center;
line-height: 32px;
}
.w209 img{
width: 209px;
height: 200px;
}
.w329{
position: relative;
width: 329px;
}
.w329_showing{
position: absolute;
left: 133px;
bottom: 16px;
width: 58px;
height: 10px ;
}
.w329_showing li{
float: left;
margin-left: 9px;
width: 10px;
height: 10px;
border-radius: 100%;
background-color:#3e3e3e;
cursor: pointer;
}
.w329_showing li.current{
background-color: #fff;
}
.w218{
width: 218px;
border: 1px solid #ededed;
}
.w220{
width: 220px;
border: 1px solid #ededed;
}
4.2.4电梯导航
涉及知识点：固定定位
本例固定定位步骤：
1.浏览器的一半，确定left值
2.版心一半+盒子大小+加外边距，确定margin-left值
HTML布局
<div class="fixtool">
<ul>
<li>家用电器</li>
<li>收集通讯</li>
<li>电脑办公</li>
<li>家居家具</li>
<li>生活用品</li>
<li>运动户外</li>
<li>汽车用品</li>
<li>食品酒类</li>
<li>医药保健</li>
<li>图书音像</li>
<li>金融彩票</li>
</ul>
</div>
CSS样式
.fixtool{
/* 固定定位步骤：浏览器的一半+版心一半+盒子大小+加外边距 */
position: fixed;
/* 浏览器一半 */
left: 50%;
/* top任意取值 */
top: 100px;
/* 版心一半+盒子大小+加外边距（需要用浏览器检查工具进行调试，确定margin-left):600+66+n */
margin-left: -677px;
width: 66px;
background-color: #fff;
}
.fixtool li:hover {
background-color: #c81623;
color: #fff;
}
.fixtool li{
width: 66px;
height: 32px;
text-align: center;
line-height: 32px;
}
4.3秒杀页面
4.3.1 准备工作
1.新建list.html和 list.css文件，并在list.html引入样式
<title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 网站说明 -->
<meta name="description" content="品优购商城-专业的综合网上购物商城，销售家电、数码通讯、电
脑家居百货、服饰服装、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务。为您提供愉悦的网
上购物体验！" />
<!-- 关键字 -->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机，数码，
配件，手表，存储卡，京东" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 引入初始化的css文件 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 引入公共样式的css文件 -->
<link rel="stylesheet" href="./css/common.css">
<!-- 引入字体图标 -->
<link rel="stylesheet" href="./fonts/font_3596448_gz63gnsef0s/iconfont.css">
<!-- 引入列表页样式css文件 -->
<link rel="stylesheet" href="./css/list.css">
2.从index.html中复制公共布局（快捷导航、首页头部、导航、底部）
<!-- 顶部快捷导航 -->
<div class="shortcut">
<div class="wrapper">
<div class="fl">
<ul>
<li> 品优购欢迎您！</li>
<li>
<a href="#"> 请登录</a>
<a href="#" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li> <a href="#">我的订单 </a></li>
<li class="spacer"></li>
<li>
<a href="#"> 我的品优购</a>
<i class="iconfont icon-arrow-down
"></i>
</li>
<li class="spacer"></li>
<li> <a href="#">品优购会员 </a></li>
<li class="spacer"></li>
<li> <a href="#"> 企业采购</a></li>
<li class="spacer"></li>
<li>
<a href="#">关注品优购</a>
<i class="iconfont icon-arrow-down
"></i>
</li>
<li class="spacer"></li>
<li>
<a href="#">客户服务 </a>
<i class="iconfont icon-arrow-down
"></i>
</li>
<li class="spacer"></li>
<li>
<a href="#">网站导航</a>
<i class="iconfont icon-arrow-down
"></i>
</li>
</ul>
</div>
</div>
</div>
<!-- 顶部快捷导航 -->
<!-- 首页头部 -->
<div class="wrapper header">
<!-- logo -->
<div class="logo">
<h1><a href="index.html" title="品优购">品优购</a></h1>
</div>
<!-- logo -->
<!-- 搜索 -->
<div class="search">
<input type="text" class="text" value="搜索想要的">
<button class="btn">搜索</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="iconfont icon-cart-Empty"></i>
<span> 我的购物车</span>
<i class="iconfont icon-arrow-right"></i>
<i class="count">800</i>
</div>
<!-- 购物车 -->
</div>
<!-- 首页头部 -->
<!-- 导航 -->
<div class="nav">
<div class="wrapper">
<div class="dropdown fl">
<div class="dt">全部商品分类</div>
<div class="dd" >
<ul>
<li class="menu_item">
<a href="list.html">家用电器</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="list.html"> 手机、</a>
<a href="list.html"> 数码、</a>
<a href="list.html"> 通信 </a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="list.html">电脑、</a>
<a href="list.html">办公</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="list.html">家居、</a>
<a href="list.html">家具、</a>
<a href="list.html">家装、</a>
<a href="list.html">厨具</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#">男装、女装、童装、内衣</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#"> 个户化妆、清洁用品、宠物</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#">鞋靴、箱包、珠宝、奢侈品</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#"> 运动户外、钟表</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#">汽车、汽车用品</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#"> 母婴、玩具乐器</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#"> 食品、酒类、生鲜、特产</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#"> 医药保健</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#">"图书、音像、电子书
>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#"> 彩票、旅行、充值、票务</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#">理财、众筹、白条、保险</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
</ul>
</div>
</div>
<div class="navitems fl">
<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>
<!-- 主体：轮播图 -->
<div class="wrapper">
<div class="main">
<!--左侧：轮播图 -->
<div class="focus fl">
<a href="#" class="arrow_l"> < </a>
<a href="#" class="arrow_r"> > </a>
<ul>
<li> <a href="#"><img src="./upload/focus1.png" alt=""></a></li>
</ul>
<ol class="circle">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- 右侧：品优购快报、生活服务 -->
<div class="newsflash fr">
<div class="news">
<div class="news_hd">
品优购快报
<a href="#">更多<i class="iconfont icon-arrow-right"></i></a>
</div>
<div class="news_bd">
<ul>
<li>[特惠]备战开学季 全民半价购数码</li>
<li>[特惠]备战开学季 全民半价购数码</li>
<li>[特惠]备战开学季 全民半价购数码</li>
<li>[特惠]备战开学季 全民半价购数码</li>
<li>[特惠]备战开学季 全民半价购数码</li>
</ul>
</div>
</div>
<div class="menu">
<ul>
<li>
<a href="#">
<i class="menu_ico menu_ico_huafei"></i>
<p>话费</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i class="menu_ico menu_ico_jipiao"></i>
<i class="jian">
<img src="./img/ico_jian.png" alt="">
</i>
<p>机票</p>
</a>
</li>
</ul>
</div>
<div class="bargin">
<img src="./upload/bargain.png" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- 公共样式底部：footer -->
<div class="footer">
<div class="wrapper">
<div class="mod_service">
<ul>
<li>
<i class="mod_service_common mod_service_zheng"></i>
<div class="title">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li><i class="mod_service_common mod_service_ji"></i>
<div class="title">
<h5>极速物流</h5>
<p>急速物流，急速送达</p>
</div>
</li>
<li><i class="mod_service_common mod_service_bao"></i>
<div class="title">
<h5>无忧售后</h5>
<p>7天无理由退换货</p>
</div>
</li>
<li>
<i class="mod_service_common mod_service_service"></i>
<div class="title">
<h5>特色服务</h5>
<p>私人定制家电套餐</p>
</div>
</li>
<li><i class="mod_service_common mod_service_help"></i>
<div class="title">
<h5>帮助中心</h5>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist mod_help_app">
<dt><a href="#">帮助中心</a></dt>
<dd><img src="./upload/屏幕截图 2022-09-15 193223.png" alt="">
<p>品优购客户端</p></dd>
</dl>
</div>
<div class="mod_copyright">
<p class="mod_copyright_link">
<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>
</p>
<p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
<br>
京ICP备08001421号京公网安备110108007702
</p>
</div>
</div>
</div>
<!--公共样式底部：footer -->
4.3.2 修改修改详情页的头部引入秒杀文字图片和修改导航样式与布局
- 修改详情页的头部引入秒杀文字图片
插入如下布局
<!-- 秒杀模块 -->
<div class="sk">
<img src="./img/sk.png" alt="">
</div>
<!-- 秒杀模块 -->
list.html首页头部布局为
<!-- 首页头部 -->
<div class="wrapper header">
<!-- logo -->
<div class="logo">
<h1><a href="index.html" title="品优购">品优购</a></h1>
</div>
<!-- logo -->
<!-- 秒杀模块 -->
<div class="sk">
<img src="./img/sk.png" alt="">
</div>
<!-- 秒杀模块 -->
<!-- 搜索 -->
<div class="search">
<input type="text" class="text" value="搜索想要的">
<button class="btn">搜索</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="iconfont icon-cart-Empty"></i>
<span> 我的购物车</span>
<i class="iconfont icon-arrow-right"></i>
<i class="count">800</i>
</div>
<!-- 购物车 -->
</div>
<!-- 首页头部 -->
秒杀文字图片css布局
.sk{
position: absolute;
left: 185px;
top: 43px;
width: 77px;
height: 33px;
text-align: center;
line-height: 33px;
border-left: 1px solid #b1191a;
padding: 5px 0 0 15px;
}
2.修改导航样式与布局
html布局
<!-- 导航 -->
<div class="nav">
<div class="wrapper">
<div class="sk_list fl">
<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="#">
<span>更多分类</span>
<span class="iconfont icon-arrow-down
"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 导航 -->
css样式
.sk_list li {
height: 45px;
float: left;
margin: 0 23px;
line-height: 45px;
}
.sk_list li a{
font-size: 16px;
font-weight: 700;
text-align: center;
color: #000;
}
.sk_con li a:hover{
color: #b1191a;
}
.sk_con li{
float: left;
margin: 0 20px;
line-height: 45px;
}
.sk_con li a{
font-size: 14px;
text-align: center;
font-weight: 700;
}
.sk_con li:hover{
color: #b1191a;
}
4.3.3详情页主体部分
总体布局
头部sk_hd
html布局
<div class="sk_hd">
<a href="index.html"><img src="./upload/bg_03.png" alt=""></a>
</div>
商品列表sk_bd
sk_bd总体布局预览
sk_bd每个li的html布局
<li class="sk_goods">
<img src="./upload/list.png" alt="">
<h5 class="sk_goods_title"><a href="detail.html">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</a>
</h5>
<p class="sk_goods_price"><em>￥6088</em> <del>￥6988</del></p>
<!-- 进度条 -->
<div class="sk_progress">
已售<em>87%</em>
<div class="sk_progress_time">
<div class="sk_progress_level"></div>
</div>
剩余<i>29</i>件
</div>
<a href="#" class="qianggou">立即抢购</a>
</li>
sk_bd的css样式
.sk_bd{
margin-top: 27px;
}
.sk_goods{
float: left;
position: relative;
width: 290px;
height: 460px;
border: solid 1px #fff;
margin: 0 12 0 15px;
}
.sk_goods:hover{
border: solid 1px #e12228;
}
.sk_goods_title{
margin-left: 13px;
font-size: 14px;
font-weight: 400;
color: #666666;
}
.sk_goods_price{
margin: 10px 15px;
}
.sk_goods_price em{
font-size: 22px;
color: #e60012;
font-weight: 700;
margin-right: 8px;
}
.sk_goods_price del{
font-size: 14px;
color: #a4a4a4;
font-weight: 700;
}
.sk_progress{
display: flex;
padding: 0 10px;
}
.sk_progress em,.sk_progress i{
color: #e12228;
}
/*进度条 */
.sk_progress_time{
display: inline-block;
width: 135px;
height: 15px;
border: 1px solid #e12228;
border-radius: 7px;
margin: 0 7px;
vertical-align: middle;
}
.sk_progress_level{
width: 87%;
height: 13px;
border-radius: 7px;
background-color: #e12228;
}
.qianggou{
position: absolute;
bottom: 0;
display: block;
width: 100%;
height: 51px;
line-height: 51px;
background-color: #b1191a;
text-align: center;
font-size: 20px;
color: #ffffff;
}
其中涉及到进度条的布局和样式
方法：通过利用子盒子覆盖父盒子来实现
进度条的HTML布局
<!-- 进度条 -->
<div class="sk_progress">
已售<em>87%</em>
<div class="sk_progress_time">
<div class="sk_progress_level"></div>
</div>
剩余<i>29</i>件
</div>
进度条的样式
.sk_progress_time{
display: inline-block;
width: 135px;
height: 15px;
border: 1px solid #e12228;
border-radius: 7px;
margin: 0 7px;
vertical-align: middle;
}
.sk_progress_level{
width: 87%;
height: 13px;
border-radius: 7px;
background-color: #e12228;
}
分页跳转
focus伪类知识点：鼠标放入盒子后，一点击执行focus中的属性
html布局
<!-- 分页跳转 -->
<div class="page">
<span class="page_num">
<a href="#" class="page_prev"> <<上一页</a>
<a href="#">1</a>
<a href="#" class="current">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#" class="dotted">...</a>
<a href="#" class="page_next"> 下一页>> </a>
</span>
<span class="page_skip">
共8页 到第
<input type="text">页
<button>确定</button>
</span>
</div>
<!-- 分页跳转 -->
css样式
/* 分页跳转 */
.page{
text-align: center;
/* 里面的文字内容，行内、行内块元素 都可以水平居中对齐 */
margin: 40px 0;
}
.page_num a{
display: inline-block;
width: 36px;
height: 36px;
font-size: 14px;
background-color: #f7f7f7;
text-align: center;
line-height: 36px;
border: 1px solid #a4a4a4;
}
.page_num .current,.page_num .dotted{
border: 1px solid transparent;
background-color: transparent;
}
.page .page_prev,
.page .page_next{
width: 83px;
}
.page_skip{
margin-left: 36px;
font-size: 14px;
}
.page_skip input{
width: 60px;
height: 36px;
border: 1px solid #a4a4a4 ;
background-color: #f7f7f7;
text-align: center;
line-height: 36px;
}
.page_skip input:focus{
width: 83px;
border: 1px solid skyblue;
}
.page_skip button{
width: 54px;
height: 36px;
border: 1px solid #a4a4a4 ;
background-color: #f7f7f7;
}
4.4商品详情页
4.4.1 准备工作
新建detail.html和detail.css文件，并引入样式，复制公共布局
<!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,相机，数码，
配件，手表，存储卡，京东" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 引入初始化的css文件 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 引入公共样式的css文件 -->
<link rel="stylesheet" href="./css/common.css">
<!-- 引入详情页css文件 -->
<link rel="stylesheet" href="./css/detail.css">
<!-- 引入字体图标 -->
<link rel="stylesheet" href="./fonts/font_3596448_gz63gnsef0s/iconfont.css">
</head>
<body>
<!-- 顶部快捷导航 -->
<div class="shortcut clearfix">
<div class="wrapper">
<div class="fl">
<ul>
<li> 品优购欢迎您！</li>
<li>
<a href="#"> 请登录</a>
<a href="#" class="style_red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li> <a href="#">我的订单 </a></li>
<li class="spacer"></li>
<li>
<a href="#"> 我的品优购</a>
<i class="iconfont icon-arrow-down
"></i>
</li>
<li class="spacer"></li>
<li> <a href="#">品优购会员 </a></li>
<li class="spacer"></li>
<li> <a href="#"> 企业采购</a></li>
<li class="spacer"></li>
<li>
<a href="#">关注品优购</a>
<i class="iconfont icon-arrow-down
"></i>
</li>
<li class="spacer"></li>
<li>
<a href="#">客户服务 </a>
<i class="iconfont icon-arrow-down
"></i>
</li>
<li class="spacer"></li>
<li>
<a href="#">网站导航</a>
<i class="iconfont icon-arrow-down
"></i>
</li>
</ul>
</div>
</div>
</div>
<!-- 顶部快捷导航 -->
<!-- 首页头部 -->
<div class="wrapper header">
<!-- logo -->
<div class="logo">
<h1><a href="index.html" title="品优购">品优购</a></h1>
</div>
<!-- logo -->
<!-- 搜索 -->
<div class="search">
<input type="text" class="text" value="搜索想要的">
<button class="btn">搜索</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="iconfont icon-cart-Empty"></i>
<span> 我的购物车</span>
<i class="iconfont icon-arrow-right"></i>
<i class="count">800</i>
</div>
<!-- 购物车 -->
</div>
<!-- 首页头部 -->
<!-- 导航 -->
<div class="nav">
<div class="wrapper">
<div class="dropdown fl">
<div class="dt">全部商品分类</div>
<div class="dd" style="display: none;" >
<ul>
<li class="menu_item">
<a href="#">家用电器</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#"> 手机、</a>
<a href="#"> 数码、</a>
<a href="#"> 通信 </a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#">电脑、</a>
<a href="#">办公</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#">家居、</a>
<a href="">家具、</a>
<a href="#">家装、</a>
<a href="#">厨具</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#">男装、女装、童装、内衣</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#"> 个户化妆、清洁用品、宠物</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#">鞋靴、箱包、珠宝、奢侈品</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#"> 运动户外、钟表</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#">汽车、汽车用品</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#"> 母婴、玩具乐器</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#"> 食品、酒类、生鲜、特产</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#"> 医药保健</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#">"图书、音像、电子书
>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item">
<a href="#"> 彩票、旅行、充值、票务</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
<li class="menu_item" >
<a href="#">理财、众筹、白条、保险</a>
<i class="iconfont icon-arrow-right
"></i>
</li>
</ul>
</div>
</div>
<div class="navitems fl">
<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>
</div>
<!--公共样式底部：footer -->
<div class="footer">
<div class="wrapper">
<div class="mod_service">
<ul>
<li>
<i class="mod_service_common mod_service_zheng"></i>
<div class="title">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li><i class="mod_service_common mod_service_ji"></i>
<div class="title">
<h5>极速物流</h5>
<p>急速物流，急速送达</p>
</div>
</li>
<li><i class="mod_service_common mod_service_bao"></i>
<div class="title">
<h5>无忧售后</h5>
<p>7天无理由退换货</p>
</div>
</li>
<li>
<i class="mod_service_common mod_service_service"></i>
<div class="title">
<h5>特色服务</h5>
<p>私人定制家电套餐</p>
</div>
</li>
<li><i class="mod_service_common mod_service_help"></i>
<div class="title">
<h5>帮助中心</h5>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist mod_help_app">
<dt><a href="#">帮助中心</a></dt>
<dd><img src="./upload/屏幕截图 2022-09-15 193223.png" alt="">
<p>品优购客户端</p></dd>
</dl>
</div>
<div class="mod_copyright">
<p class="mod_copyright_link">
<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>
</p>
<p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
<br>
京ICP备08001421号京公网安备110108007702
</p>
</div>
</div>
</div>
<!-- 公共样式底部：footer -->
4.4.2总体结构预览
其中商品简介为如下区域
商品详情为如下区域
4.4.3小导航布局与样式
html布局
<div class="crumb_wrap ">
<a href="#">手机、数码、通讯 </a>
<a href="#">手机</a>
<a href="#">〉Apple苹果 </a>
<a href="#">〉iphone 6S Plus系类</a>
</div>
样式
/* 详情页 */
.detail_container{
margin-top: 28px;
}
.crumb_wrap a{
margin-right: 10px;
}
4.4.4商品简介局域
左侧商品预览区及预览轮播图html布局和css样式（难点:底部箭头定位）
总体布局
html布局
<div class="preview_wrap fl ">
<div class="preview_img">
<img src="./upload/s3.png" alt="">
</div>
<!-- 轮播查看图:通过margin确定中间图片位置，利用定位确定箭头位置-->
<div class="preview_list">
<ul class="list_item">
<li class="current">
<a href="#" ><img src="./upload/pre_01.png" alt=""></a>
</li>
<li >
<a href="#"><img src="./upload/pre02.png" alt=""></a>
</li>
<li >
<a href="#"><img src="./upload/pre03.png" alt=""></a>
</li>
<li >
<a href="#"><img src="./upload/pre04.png" alt=""></a>
</li>
<li >
<a href="#"><img src="./upload/pre05.png" alt=""></a>
</li>
</ul>
<a href="#" class="arrow_prev"></a>
<a href="#" class="arrow_next"></a>
</div>
</div>
css样式
.preview_wrap{
width: 400px;
height: 590px;
border: solid 1px #ededed;
}
.preview_img{
height: 398px;
border: 1px solid #ededed;
background-color: orangered;
}
/* 轮播查看图 */
.preview_list{
position: relative;
height: 60px;
margin-top: 60px;
}
.list_item{
width: 320px;
height: 60px;
margin: 0 auto;
}
.list_item li{
float: left;
width: 56px;
height: 56px;
border: 2px solid transparent;
margin: 0 2px;
}
.list_item li.current{
border-color: #c81623;
}
.arrow_prev ,.arrow_next{
position: absolute;
top: 15px;
display: inline-block;
width: 22px;
height: 32px;
}
.arrow_prev{
left: 0;
background: url(../upload/pre_left.png) no-repeat;
}
.arrow_next{
right: 0;
background: url(../upload/pre_right.png) no-repeat;
}
右侧商品选购区域
总体布局
skull_name和news（商品标题）的html布局
<div class="skull_name">
Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机
</div>
<div class="news">
推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返
</div>
skull_name和news（商品标题）的css样式（合理利用高度剩余法，让文字对齐设置间距）
/* 商品物品信息 */
.skull_name{
height: 30px;
font-size: 16px;
font-weight: 700;
}
.news{
/* 高度剩余法，这样无需指定margin值 */
height: 32px;
color: #e12228;
}
summary（商品选购参数相关的）
html布局
<div class="summary">
<!-- 价格 -->
<dl class="summary_price">
<dt>
价 格
</dt>
<dd>
<i class="price">￥5299.00</i>
<a href="#">降价通知</a>
<i class="remark">累计评价612188</i>
</dd>
</dl>
<!-- 促销 -->
<dl class="summary_promotion">
<dt>
促 销
</dt>
<dd>
<em>加价购</em>
满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品 <a href="#">详情 》</a>
</dd>
</dl>
<!-- 支持 -->
<dl class="summary_support">
<dt>
支 持
</dt>
<dd>
以旧换新，闲置手机回收 4G套餐超值抢 礼品购
</dd>
</dl>
<!-- 配送 -->
<dl class="summary_address">
<dt>
配 送 至
</dt>
<dd>
<select >
<option>北京</option>
</select>
<select >
<option >海淀区</option>
<option >东城区</option>
<option >通州区</option>
</select>
有货 支持 99元免运费 |货到付款 |211限时达
<a href="javascript:;"><i class="iconfont icon-arrow-down
"></i></a>
<br>
由自营发货，并提供售后服务。11:00前完成下单，预计今天（08月10日）送达
</dd>
</dl>
<!-- 选择颜色 -->
<dl class="choose_color">
<dt>
选择颜色
</dt>
<dd>
<a href="javascript:;" class="current">金色</a>
<a href="javascript:;">黑色</a>
<a href="javascript:;">银色</a>
<a href="javascript:;">玫瑰金色</a>
</dd>
</dl>
<!-- 选择版本 -->
<dl class="choose_version">
<dt>
选择版本
</dt>
<dd>
<a href="javascript:;" class="current">公开版</a>
<a href="javascript:;">移动4G</a>
</dd>
</dl>
<!-- 选择容量 -->
<dl class="choose_memory">
<dt>
选择容量
</dt>
<dd>
<a href="javascript:;" class="current">16GB</a>
<a href="javascript:;" >64GB</a>
<a href="javascript:;">128GB</a>
</dd>
</dl>
<!--购买方式 -->
<dl class="choose_manner">
<dt>
购买方式
</dt>
<dd>
<a href="javascript:;" class="current">官方标配</a>
<a href="javascript:;" >移动优惠购</a>
<a href="javascript:;">电信优惠购</a>
</dd>
</dl>
<!-- 套装 -->
<dl class="choose_pack">
<dt>
套 装
</dt>
<dd>
<a href="javascript:;" class="current">保护套装</a>
<a href="javascript:;" >充电套装</a>
</dd>
</dl>
<!-- 购买方式 -->
<div class="choose_btn">
<div class="choose_amount">
<input type="text" value="1">
<a href="javascript:;" class="add">+</a>
<a href="javascript:;" class="reduce">-</a>
</div>
<a href="" class="addcar">加入购物车</a>
</div>
</div>
</div>
其中每个dl的布局样式基本相同第二个dl只需在第一个dl上略作微调，部分dl涉及到a标签，由于这个a选定后不跳转页面，所以将其href属性设置为href=“javascript:;”
第一个dl
<dl class="summary_price">
<dt>
价 格
</dt>
<dd>
<i class="price">￥5299.00</i>
<a href="#">降价通知</a>
<i class="remark">累计评价612188</i>
</dd>
</dl>
第二个dl
<dl class="summary_promotion">
<dt>
促 销
</dt>
<dd>
<em>加价购</em>
满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换
购热销商品 <a href="#">详情 》</a>
</dd>
</dl>
summary的css样式
.summary dl{
overflow: hidden;
}
.summary dt,
.summary dd
{
float: left;
}
.summary dd{
width: 718px;
}
/* 价格标题居中做法,给text-align:center;不生效*/
.summary dt{
width: 60px;
padding-left: 10px;
line-height: 36px;
}
.summary_price,.summary_promotion{
position: relative;
background-color: #fee9eb;
padding: 10px 0;
}
.summary_price .price{
font-size: 24px;
color: #e12228;
font-weight: 700;
}
.summary_price a{
color: #c81623;
}
.summary_price .remark{
position: absolute;
right: 11px;
top: 8px;
}
.summary_promotion dd{
width: 545px;
}
.summary_promotion em{
display: inline-block;
width: 40px;
height: 36px;
background-color: #c81623;
color: #fff;
text-align: center;
line-height: 36px;
}
.summary_support{
line-height: 36px;
}
.summary_address dd{
position: relative;
width: 425px;
line-height: 36px;
}
.icon-arrow-down {
position: absolute;
right: 0;
top: 0;
}
.choose_color a{
display: inline-block;
width: 82px;
height: 43px;
background-color: #f7f7f7;
border: solid 1px #ededed;
text-align: center;
line-height: 43px;
}
.summary a.current{
border: solid 1px #c81623;
}
.choose_version,.choose_color,.choose_memory ,
.choose_manner,
.choose_pack {
margin: 10px 0;
}
.choose_version a,
.choose_memory a,
.choose_manner a,
.choose_pack a
{
display: inline-block;
height: 34px;
padding: 0 15px;
margin-right: 8px;
background-color: #f7f7f7;
border: solid 1px #ededed;
text-align: center;
line-height: 34px;
}
.choose_btn{
margin-top: 20px;
}
.choose_amount{
position: relative;
float: left;
width: 51px;
height: 46px;
}
.choose_amount input{
width: 35px;
height: 46px;
border: 1px solid #ccc;
text-align: center;
line-height: 46px;
}
.choose_amount .add,.choose_amount .reduce{
position: absolute;
right: 0;
width: 17px;
height: 23px;
background-color: #f1f1f1;
text-align: center;
line-height:23px ;
border: 1px solid #ccc;
}
.choose_amount .add{
top: 0;
}
.choose_amount .reduce{
bottom: 0;
cursor: not-allowed;
}
.addcar{
display: inline-block;
margin-left: 10px;
width: 142px;
height: 46px;
background-color: #c81623;
text-align: center;
line-height: 46px;
color: #ffffff;
font-size: 18px;
border: solid 1px #ededed;
}
4.4.5商品详情区域
总体布局
左侧其他商品展示区域
总体布局
html布局
<div class="aside fl">
<!-- 商品分类/品牌切换 -->
<div class="tab_list">
<ul>
<li class="first_tab current">相关分类</li>
<li class="second_tab">推荐品牌</li>
</ul>
</div>
<!-- 商品分类列表-->
<div class="tab_content">
<ul class="tab-con_item ">
<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="#">iphone配件</a></li>
<li><a href="#">手机耳机</a></li>
<li><a href="#">平板电脑</a></li>
<li><a href="#">蓝牙耳机</a></li>
</ul>
<p>购买了此商品的用户还买了</p>
</div>
<div class="more_goods">
<ul>
<li>
<img src="./upload/goods.jpg" alt="">
<h5>Apple iPhone 13 (A2634) 128GB 星光色 支持移动联通电信5G 双卡双待手机</h5>
<div>￥5899</div>
<a href="#" class="goods_addcar">加入购物车</a>
</li>
</ul>
</div>
<div class="more_goods">
<ul>
<li>
<img src="./upload/goods.jpg" alt="">
<h5>Apple iPhone 13 (A2634) 128GB 星光色 支持移动联通电信5G 双卡双待手机</h5>
<div>￥5899</div>
<a href="#" class="goods_addcar">加入购物车</a>
</li>
</ul>
</div>
<div class="more_goods">
<ul>
<li>
<img src="./upload/goods.jpg" alt="">
<h5>Apple iPhone 13 (A2634) 128GB 星光色 支持移动联通电信5G 双卡双待手机</h5>
<div>￥5899</div>
<a href="#" class="goods_addcar">加入购物车</a>
</li>
</ul>
</div>
<div class="more_goods">
<ul>
<li>
<img src="./upload/goods.jpg" alt="">
<h5>Apple iPhone 13 (A2634) 128GB 星光色 支持移动联通电信5G 双卡双待手机</h5>
<div>￥5899</div>
<a href="#" class="goods_addcar">加入购物车</a>
</li>
</ul>
</div>
<div class="more_goods">
<ul>
<li>
<img src="./upload/goods.jpg" alt="">
<h5>Apple iPhone 13 (A2634) 128GB 星光色 支持移动联通电信5G 双卡双待手机</h5>
<div>￥5899</div>
<a href="#" class="goods_addcar">加入购物车</a>
</li>
</ul>
</div>
<div class="more_goods">
<ul>
<li>
<img src="./upload/goods.jpg" alt="">
<h5>Apple iPhone 13 (A2634) 128GB 星光色 支持移动联通电信5G 双卡双待手机</h5>
<div>￥5899</div>
<a href="#" class="goods_addcar">加入购物车</a>
</li>
</ul>
</div>
<div class="more_goods">
<ul>
<li>
<img src="./upload/goods.jpg" alt="">
<h5>Apple iPhone 13 (A2634) 128GB 星光色 支持移动联通电信5G 双卡双待手机</h5>
<div>￥5899</div>
<a href="#" class="goods_addcar">加入购物车</a>
</li>
</ul>
</div>
</div>
css样式
.detail{
margin-top: 20px;
margin-bottom: 50px;
}
.aside{
width: 210px;
border: solid 1px #dddddd;
}
.tab_list {
float: left;
width: 210px;
height: 35px;
overflow: hidden;
background-color: #f1f1f1;
border-bottom: solid 1px #dddddd;
}
.first_tab,.second_tab{
height: 35px;
text-align: center;
line-height: 35px;
}
.first_tab{
float: left;
border-right:solid 1px #dddddd;
width: 105px;
}
.second_tab{
float: right;
border-right:solid 1px #dddddd;
width: 105px;
}
.first_tab.current{
border-bottom: 0;
color: #c81623;
background-color: #fff;
}
.tab-con_item li{
float: left;
width: 86px;
height: 32px;
border-bottom: 1px solid #ededed;
text-align: center;
line-height: 32px;
margin: 10px 0 0 13px;
}
.tab_content p{
text-align: center;
border-bottom: 1px solid #000;
margin: 0 10px;
line-height: 40px;
}
.more_goods{
padding: 0 10px;
}
.more_goods li{
border-bottom: 1px solid #ccc;
}
.more_goods li h5{
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.more_goods div{
font-weight: 700;
margin: 10px 0;
}
.goods_addcar{
display: block;
width: 90px;
height: 28px;
background-color: #f7f7f7;
border: solid 1px #ddd;
margin: 10px auto;
text-align: center;
line-height: 28px;
}
右侧商品详情
总体布局
html布局
<div class="detail_content fr">
<!-- 商品详细内容标题与当前商品详细内容对应的标题-->
<div class="detail_title">
<ul>
<li><a href="javascript"class="current">商品介绍</a></li>
<li><a href="javascript">规格与包装</a> </li>
<li><a href="javascript">售后保障</a> </li>
<li><a href="javascript">商品评价</a> </li>
<li><a href="javascript">手机社区</a> </li>
</ul>
</div>
<!-- 当前商品详细内容对应的内容 -->
<div class="detail_tab_con">
<div class="item clearfix">
<!-- 商品参数 -->
<ul class="item_info">
<li> 分辨率：1920*1080(FHD)</li>
<li> 后置摄像头：1200万像素</li>
<li> 前置摄像头：500万像素</li>
<li> 核 数：其他</li>
<li> 频 率：以官网信息为准</li>
<li> 品牌： Apple ♥关注</li>
<li> 商品名称：APPLEiPhone 6s Plus</li>
<li> 商品编号：1861098</li>
<li> 商品毛重：0.51kg</li>
<li> 商品产地：中国大陆</li>
<li> 热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
<li> 系统：苹果（IOS）</li>
<li> 像素：1000-1600万</li>
<li> 机身内存：64GB</li>
<li class="more_para">
<a href="javascript:;">
查看更多
</a>
</ul>
<!-- 商品介绍图片 -->
<div class="detail_image">
<img src="./upload/detail_info.jpg" alt="">
<img src="./upload/detail_info.jpg" alt="">
<img src="./upload/detail_info.jpg" alt="">
</div>
</div>
</div>
</div>
css样式
.detail_content{
width: 979px;
border: solid 1px #dddddd;
}
.detail_title{
height: 41px;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
.detail_title a{
float: left;
height: 39px;
text-align: center;
line-height: 39px;
padding: 0 20px;
cursor: pointer;
}
.detail_title a.current{
background-color: #c81623;
color:#fff;
}
.item_info{
padding: 20px 0 0 20px;
}
.item_info li{
line-height: 22px;
}
.more_para {
float: right;
font-weight:700;
}
.more_para span{
position: absolute;
right: 0;
top: 0;
}
4.5注册页面
这个页面主要涉及表单相关知识点
4.5.1准备工作
引入样式和相应css文件
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>品优购-注册会员</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 引入初始化的css文件 -->
<link rel="stylesheet" href="./css/base.css">
<!-- 引入公共样式的css文件
<link rel="stylesheet" href="./css/common.css"> -->
<!-- 引入字体图标 -->
<link rel="stylesheet" href="./fonts/font_3596448_gz63gnsef0s/iconfont.css">
<!-- 引入公共样式的css文件 -->
<link rel="stylesheet" href="./css/common.css">
<!-- 引入注册样式css文件 -->
<link rel="stylesheet" href="./css/register.css">
</head>
复制首页index.html底部布局
<div class="footer">
<div class="wrapper">
<div class="mod_service">
<ul>
<li>
<i class="mod_service_common mod_service_zheng"></i>
<div class="title">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li><i class="mod_service_common mod_service_ji"></i>
<div class="title">
<h5>极速物流</h5>
<p>急速物流，急速送达</p>
</div>
</li>
<li><i class="mod_service_common mod_service_bao"></i>
<div class="title">
<h5>无忧售后</h5>
<p>7天无理由退换货</p>
</div>
</li>
<li>
<i class="mod_service_common mod_service_service"></i>
<div class="title">
<h5>特色服务</h5>
<p>私人定制家电套餐</p>
</div>
</li>
<li><i class="mod_service_common mod_service_help"></i>
<div class="title">
<h5>帮助中心</h5>
<p>您的购物指南</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist">
<dt><a href="#">购物指南</a></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 class="mod_helplist mod_help_app">
<dt><a href="#">帮助中心</a></dt>
<dd><img src="./upload/屏幕截图 2022-09-15 193223.png" alt="">
<p>品优购客户端</p></dd>
</dl>
</div>
<div class="mod_copyright">
<p class="mod_copyright_link">
<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>
</p>
<p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
<br>
京ICP备08001421号京公网安备110108007702
</p>
</div>
</div>
</div>
4.5.2总体布局
4.5.3注册页头部header区域
html布局
<div class="header">
<div class="logo">
<a href="index.html"><img src="./img/logo.png" alt=""></a>
</div>
</div>
css样式
.w{
width: 1200px;
margin: 0px auto;
}
.header{
margin-top: 20px;
border-bottom: 2px solid #b1191a;
height: 82px;
}
4.5.4注册表单registerarea区域
总体布局
注册标题区域
html布局
<!-- 注册区域标题 -->
<div class="registerarea_title">
<h3>注册新用户</h3>
<em>我有账号，去 <a href="#">登陆</a> </em>
</div>
css样式
.registerarea {
height: 520px;
margin-top: 21px;
background-color: #ffffff;
border: solid 1px #dfdfdf;
}
.registerarea_title{
height: 41px;
background-color: #ececec;
padding: 10px;
line-height: 41px;
}
.registerarea_title h3{
float: left;
font-size: 18px;
font-weight: 400;
margin-top: -5px;
}
.registerarea_title em{
float: right;
font-size: 14px;
}
.registerarea_title em a{
color: #c81623;
}
注册填写内容区域
<div class="reg_form">
<form action="">、
<ul>
<li>
<label for="tel">手机号</label>
<input type="text" class="inp" id="tel">
<span class="error">
<i class="error_ico"></i>
手机号码格式不正确，请从新输入
</span>
</li>
<li>
<label for="check_num">短信验证码</label>
<input type="text" class="inp" id="check_num">
</li>
<li>
<label for="log_pd">登陆密码</label>
<input type="text" class="inp">
<span class="success">
<i class="success_ico"></i>
密码符合要求
</span>
</li>
<li class="safe">
安全强度
<em class="ruo">弱</em>
<em class="zhong">中</em>
<em class="qiang">强</em>
</li>
<li>
<label for="ch_pd">确认密码</label>
<input type="text" class="inp" id="ch_pd">
<span class="error">
<i class="error_ico"></i>
密码不一致，请从新输入
</span>
</li>
<li class="agree">
<input type="checkbox">同意协议并注册 <a href="#">《知果果用户协议》</a>
</li>
<li>
<input type="submit" value="完成注册" class="over">
</li>
</ul>
</form>
</div>
css样式
.reg_form{
width: 600px;
height: 400px;
margin: 40px auto 0;
}
.reg_form li{
margin-top: 20px;
}
.reg_form label{
display: inline-block;
width: 100px;
height: 36px;
line-height: 36px;
text-align: right;
}
.reg_form .inp{
width: 238px;
height: 34px;
border: 1px solid #ccc;
margin-left: 10px;
}
.error{
color: #df3033;
margin-left: 10px;
}
.error_ico,.success_ico{
display: inline-block;
width: 20px;
height: 20px;
background: url(../img/error.png) no-repeat;
vertical-align: middle;
margin-top: -2px;
}
.success{
color:#40b83f ;
margin-left: 10px;
}
.success_ico{
background: url(../img/success.png) no-repeat;
}
.safe{
padding-left: 185px;
color: #b2b2b2;
}
.safe em{
padding: 0 12px;
}
.ruo{
background-color: #de1111;
}
.zhong{
background-color: #40b83f;
}
.qiang{
background-color: #f79100;
}
.agree{
padding-left: 100px;
}
.agree input{
margin-right: 5px;
width: 16px;
height: 15px;
vertical-align: middle;
}
.agree a{
color: #1ba1e6;
}
.over{
width: 200px;
height: 34px;
background-color: #c81623;
border: none;
color: #ffffff;
font-size: 14px;
margin:30px 0 0 130px ;
}
5.心得体会
通过这个项目，我加强巩固了html和css相关知识点，认识和了解到静态网页的开发流程以及一些特殊样式的写法，如轮播图和进度条。同时也让我认识到静态网页的编写的基本方法是：1.由外到内层层布局标签盒子，合理切图划分区域；2.合理编写样式（把相同的样式尽量整合，提高样式可复用性）。静态网页的基本知识并不难，难在实际应用中的标签合理布局和设置，后期多家模仿别人的网页布局即可。
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)