一个简单的品优购项目—-html+css
品优购的简单介绍
本次的项目我们要结合html和css来实现品优购网上商城网站前台的部分页面。包括品优购网站首页、品优购商品列表页，商品详情页、品优购用户注册页和登录页，详情如下
一、在本次项目使用到的相关小点
1、精灵图
为了有效减少服务器接收和发送请求的次数，提高页面的加载速度
主要借助与背景位置实现--background-position，一般情况精灵图都是负值，x轴往右是正，左边是负值，右轴同理
使用方法：把要使用的一张大的背景图放在一个新建项目里面的一个图片文件夹里，然后用background-position来调用，或者使用background：url（）写它所在的位置
background: url(images/icons.png) no-repeat -19px -15px;2、字体图标
好处：轻量级：一个图标字体比一系列的图像小，一旦加载了，图标会马上渲染出来，减少了服务器请求
本质是文字，可以随意改变颜色、产生阴影、透明效果、旋转等,几乎支持所有的浏览器
使用方法：1）下载字体图标网站：https://icomoon.io || http://www.iconfont.cn/
2）下载完成后要把 fonts文件夹放在根目录中
3） 把下载包里面的fonts文件夹放在页面根目录下，再点开 style.css，把里面的字体文件通过css引入到页面中-在css样式中全局声明字体；再在解压的htnl标签内添加小图标在页面的html的标签里，然后在样式里添加font-family：‘icomoon’在字体图标库里引入icomoon
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?tomleg');
src: url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?tomleg') format('truetype'), url('fonts/icomoon.woff?tomleg') format('woff'), url('fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
给想要图标的选择器加
font-family: 'icomoon';
content: '';二 、效果展示
1、品优购首页index.html
首页用到的知识点，包括：定位、字体图标的引用、浮动float、精灵图的使用 、结构伪类选择器nth-child（n）、nth-of-type(n)
伪、伪元素选择器 :before{ }、::after{ }
分享一个右侧栏使用精灵图的效果
html部分：
<div class="news2">
<ul>
<li>
<i class="i1"></i>
<p>话费</p>
</li>
<li>
<i class="i2"></i>
<p>飞行</p>
</li>
<li>
<i class="i3"></i>
<p>影视</p>
</li>
<li>
<i class="i4"></i>
<p>游戏</p>
</li>
<li>
<i class="i5"></i>
<p>彩票</p>
</li>
<li>
<i class="i6"></i>
<p>加油</p>
</li>
<li>
<i class="i7"></i>
<p>租房</p>
</li>
<li>
<i class="i8"></i>
<p>公交车</p>
</li>
<li>
<i class="i9"></i>
<p>消费</p>
</li>
<li>
<i class="i10"></i>
<p>金融</p>
</li>
<li>
<i class="i11"></i>
<p>邮件</p>
</li>
<li>
<i class="i12"></i>
<p>书信</p>
</li>
</ul>css部分--使用精灵图
.news2 {
height: 209px;
border-top: 0;
border: 1px solid #e4e4e4;
}
.news2 ul {
width: 252px;
}
.news2 ul li {
float: left;
width: 63px;
height: 71px;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
text-align: center;
}
.news2 ul li .i1,
.news2 ul li .i2,
.news2 ul li .i3,
.news2 ul li .i4,
.news2 ul li .i5,
.news2 ul li .i6,
.news2 ul li .i7,
.news2 ul li .i8,
.news2 ul li .i9,
.news2 ul li .i10,
.news2 ul li .i11,
.news2 ul li .i12 {
display: inline-block;
width: 24px;
height: 28px;
margin-top: 12px;
}
.news2 ul li .i1 {
background: url(images/icons.png) no-repeat -19px -15px;
}
.news2 ul li .i2 {
background: url(images/icons.png) no-repeat -79px -19px;
}
.news2 ul li .i3 {
background: url(images/icons.png) no-repeat -141px -17px;
}
.news2 ul li .i4 {
background: url(images/icons.png) no-repeat -204px -18px;
}
.news2 ul li .i5 {
background: url(images/icons.png) no-repeat -15px -87px;
}
.news2 ul li .i6 {
background: url(images/icons.png) no-repeat -78px -87px;
}
.news2 ul li .i7 {
background: url(images/icons.png) no-repeat -143px -88px;
}
.news2 ul li .i8 {
background: url(images/icons.png) no-repeat -208px -88px;
}
.news2 ul li .i9 {
background: url(images/icons.png) no-repeat -15px -158px;
}
.news2 ul li .i10 {
background: url(images/icons.png) no-repeat -78px -159px;
}
.news2 ul li .i11 {
background: url(images/icons.png) no-repeat -141px -159px;
}
.news2 ul li .i12 {
background: url(images/icons.png) no-repeat -207px -160px;
}
.news2 p {
font-size: 14px;
color: #666;
}
2、商品列表页
<!-- nav模块 -->
<div class="nv">
<div class="w">
<div class="ms-list1">
<ul>
<li><a href="#">品优秒杀</a></li>
<li><a href="#">品优秒杀</a></li>
<li><a href="#">品优秒杀</a></li>
</ul>
</div>
<div class="ms-list2">
<ul>
<li><a href="#">女装</a></li>
<li><a href="#">女鞋</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">更多分类</a></li>
</ul>
</div>
</div>
</div>
<!-- 列表页主体模块 -->
<div class="w ms-main">
<div class="ms-hd">
<img src="upload/bg_03.png" alt="">
</div>
<div class="ms-bd">
<ul>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
<li>
<a href="shop-xiangq.html">
<img src="upload/list.jpg" alt="">
</a>
</li>
</ul>
</div>
</div>css样式
.ms {
position: absolute;
left: 190px;
top: 40px;
border-left: 1px solid #c81523;
padding: 2px 0 0 15px;
}
.nv {
height: 47px;
border-bottom: 1px solid #b119b1;
}
.ms-list1 {
float: left;
}
.ms-list1 ul li {
float: left;
}
.ms-list1 ul li a {
padding: 0 30px;
font-size: 16px;
color: #000;
font-weight: normal;
line-height: 47px;
}
.ms-list2 {
float: left;
}
.ms-list2 ul li {
float: left;
}
.ms-list2 ul li a {
font-size: 14px;
font-weight: normal;
line-height: 47px;
padding: 0 24px;
}
.ms-list2 ul li:last-child a::after {
content: 'e91e';
font-family: 'icomoon';
}
.ms-list2 ul li :hover {
color: #c81523;
cursor: pointer;
}
.ms-list2 ul li:nth-child(2) a {
color: #c81523;
}
/* <!-- 列表页主体模块 --> */
.ms-hd img {
vertical-align: middle;
}
.ms-bd ul li {
float: left;
width: 290px;
height: 460px;
border: 1px solid transparent;
overflow: hidden;
padding: 0px 2px;
margin-right: 13px;
}
.ms-bd ul li:nth-child(4n) {
margin-right: 0;
}
.ms-bd ul li :hover {
border: 1px solid #c81523;
}
.ms-bd ul::after {
content: '';
clear: both;
height: 0;
display: block;
}
</style>
3、注册页
html
<div class="w">
<!-- /* 品优购头部 */ -->
<header>
<div class="logo">
<a href="index.html">
<img src="images/logo.png" alt="">
</a>
</div>
</header>
<!-- /* 注册用户表 */ -->
<div class="bd">
<h3>
注册新用户
<div class="login">
我有账号，去
<a href="login.html"> 登录</a>
</div>
</h3>
<!-- /* 注册表单 */ -->
<div class="bd-form">
<form action="">
<ul>
<li>
<label for="">手机号:</label>
<input type="tel" class="tel" placeholder="请输入手机号" required autofocus>
<span class="error">
<i class="error-ico"></i>
手机号码格式不正确，请从新输入
</span>
</li>
<li>
<label for="">短信验证码:</label>
<input type="text" class="shuru" placeholder="请输入验证码">
<span class="success">
<i class="success-ico"></i>
短信验证码输入正确
</span>
</li>
<!-- 登录密码验证 -->
<li>
<label for="">登录密码:</label>
<input type="password" class="shuru" placeholder="请输入密码" required>
<span class="error">
<i class="error-ico"></i>
密码输入格式不正确，请重新输入
</span>
</li>
<!-- 安全程度 -->
<li class="safe">
安全程度
<span class="ruo">弱</span>
<span class="middle">中</span>
<span class="strong">强</span>
</li>
<!-- 确认密码 -->
<li>
<label for="">确认密码:</label>
<input type="password" class="shuru" placeholder="请再次输入密码" required>
<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="btn">
</li>
</ul>
</form>
</div>
</div>
</div>
</body>
4、商品详情页
html介绍
<!-- 详情页内容部分 -->
<div class="xq-content w">
<!-- 第一内容部分 -->
<div class="xq-content1">
<a href="#">手机、数码、通讯</a> >
<a href="#">手机</a> >
<a href="#">Apple苹果</a> >
<a href="#">iphone 6s plus系列</a>
</div>
<!-- 产品介绍 -->
<div class="product">
<div class="preview">
<div class="preview-img">
<img src="upload/s3.png" alt="">
</div>
<div class="preview-list">
<a href="#" class="arrow-prev"></a>
<a href="#" class="arrow-next"></a>
<ul>
<li><img src="upload/pre.jpg" alt=""></li>
<li><img src="upload/pre.jpg" alt=""></li>
<li class="li-red"><img src="upload/pre.jpg" alt=""></li>
<li><img src="upload/pre.jpg" alt=""></li>
<li><img src="upload/pre.jpg" alt=""></li>
</ul>
</div>
</div>
<!-- 产品详细介绍 -->
<div class="product-intro">
<div class="phone-name">
Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机
</div>
<div class="phone-news">
推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返
</div>
<div class="summary">
<dl class="summary_price">
<dt>价格</dt>
<dd>
<i class="price">￥5299.00 </i>
<a href="#">降价通知</a>
<div class="remark">累计评价612188</div>
</dd>
</dl>
<dl class="summary_promotion">
<dt>促销</dt>
<dd>
<em>加购价</em> 满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换 购热销商 详情 》
</dd>
</dl>
<dl class="summary_support">
<dt>支持</dt>
<dd>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</dd>
</dl>
<dl class="choose_color">
<dt>选择颜色</dt>
<dd>
<a href="#" class="current">玫瑰金</a>
<a href="#">金色</a>
<a href="#">白色</a>
<a href="#">土豪色</a>
</dd>
</dl>
<dl class="choose_version">
<dt>选择版本</dt>
<dd>
<a href="#" class="current">公开版</a>
<a href="#">移动4G</a>
</dd>
</dl>
<dl class="choose_type">
<dt>购买方式</dt>
<dd>
<a href="#" class="current">官方标配</a>
<a href="#">移动优惠购</a>
<a href="#">电信优惠购</a>
</dd>
</dl>
<div class="choose_btns">
<div class="choose_amount">
<input type="text" value="1">
<a href="#" class="add">+</a>
<a href="#" class="reduce">-</a>
</div>
<a href="#" class="addcar">加入购物车</a>
</div>
</div>
</div>
</div>注意：由于上盒子产生大小从而产生的边距的问题。解决问题就是给整个内容product添加overflow：hidden；
登录页和注册页很相似，在注册的基础上可以删除和增加一些需要的部分