品优购的简单介绍

本次的项目我们要结合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="data: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；

登录页和注册页很相似，在注册的基础上可以删除和增加一些需要的部分

一个简单的品优购项目----html+css相关推荐

品优购项目html+css+js
品优购项目html+css+js 跟着pink老师学前端,第一个完成的项目,总共有三个页面,分别是index.html.list.html和detail.html,下面是该项目的一些总结,最后有源码呦 ...
品优购项目的制作——知识分享
目录前言一.首页 1.基本的布局 2.版心部分 3.主要内容模块二.注册页面三.产品列表页面四.产品详情页面总结前言品优购项目是一个需要糅杂大量HTML5+CSS3知识点的网站项目,一 ...
14.------------------------------------------------------------------------------【PC端品优购项目】
文章目录 [PC端品优购项目]前端小抄(14) 电商-主页电商-分类列表页电商-注册页一.品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 ...
品优购项目学习---基本概述(简略)
做项目期间看不懂的可以查阅标记有注的这些部分的内容一定会有你的需要的答案哦如果没有那小卓这边建议可以直接私信小卓小卓一定尽力提供最优解释哈等第二遍做的时候进行梳理注: CS ...
「学习笔记」品优购项目-上（页面公共部分）
「学习笔记」品优购项目-上品优购项目-上目标品优购项目规划网站制作流程品优购项目介绍品优购项目的学习目的开发工具以及技术栈开发工具技术栈品优购项目搭建工作创建的文件夹如下(称为项 ...
Web前端开发——品优购项目(上)
品优购项目介绍项目名称:品优购项目描述:品优购是一个电商网站,我们要完成 PC 端首页.列表页.注册页面的制作主页列表页注册页品优购项目的学习目的电商类网站比较综合,里面需要大量的布局技 ...
css三角形之美与品优购项目
CSS三角形之美 div{width: 0;height: 0;line-height:0;font-size: 0;border-top: 10px solid red;border-right:1 ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
品优购项目笔记（十四）：微信支付
品优购项目笔记(十四) 订单订单三张表关系提交订单二维码介绍优势容错级别 qrious二维码生成插件微信支付微信支付流程项目支付流程生成支付链接查询是否支付成功订单订单三张表 ...
CSS 8 品优购项目
目录 1.品优购项目规划 1.1网站制作流程 1.2品优购项目整体介绍 1.3品优购项目的学习目的 1.4开发工具以及技术栈小总结 1.5品优购项目搭建工作. 1.5.1创建文件夹 1.5.2创建 ...

一个简单的品优购项目----html+css

品优购的简单介绍

一、在本次项目使用到的相关小点

1、精灵图

2、字体图标

二、效果展示

1、品优购首页index.html

2、商品列表页

3、注册页

4、商品详情页

一个简单的品优购项目----html+css相关推荐

最新文章

热门文章

一个简单的品优购项目----html+css

品优购的简单介绍

一、在本次项目使用到的相关小点

1、精灵图

2、字体图标

二 、效果展示

1、品优购首页index.html

2、商品列表页

3、注册页

4、商品详情页

一个简单的品优购项目----html+css相关推荐

最新文章

热门文章

二、效果展示