品优购项目html+css
作为一个初学者，品优购项目通过简单的hml+css完成的几个页面，包括：首页面、登录页面、注册页面、手机页面、详情页面。下面是该项目的总结
一、本项目在网页中经常用到的内容
1、 ico图标，显示浏览器中的网页图标和收藏图标
只需要在地址的后面添加shortcut icon就可以啦
然后添加在html的head里面
如果需要照顾兼容性就把图片放在根目录下
<!-- 在网页左侧显示 -->
<link rel="icon" href="./images/favicon.ico" type="image/x-icon" />
<!-- 在收藏夹显示 -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
2、字体图标
它在一定程度上减少了过度使用图片导致的资源占用问题，图片失真问题，通过代码的方式让图标更加轻量化，同时也提高了项目的运行性能哦
使用方法：
1）下载字体图标网站：https://icomoon.io || http://www.iconfont.cn/
2）下载完成后要把 fonts文件夹放在根目录中
3）在需要使用图标的样式里添加（但是通过小编的亲测：还是直接引入包里面的style.css 来的实在)
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?8dli9h');
src: url('fonts/icomoon.eot?8dli9h#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?8dli9h') format('truetype'),
url('fonts/icomoon.woff?8dli9h') format('woff'),
url('fonts/icomoon.svg?8dli9h#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
font-family: 'icomoon';
content: '';
字体图标的优点：
- 可以做和图片一样可以做的事情，改变透明度…
- 本质是文字，可以随意改变颜色，跟文字所拥有的属性一样
- 体积小，携带的信息并没有削弱
- 几乎支持所有的浏览器、移动端必备的东西
效果展示：
index
本页面用到的知识点：
1）定位 position
2）浮动 float
3) 结构伪类选择器 nth-child（n）、nth-of-type(n)
4）伪元素选择器 :before{ }、::after{ }
5）精灵图 可以减少浏览器的请求次数
左侧全部商品分类部分代码如下：
.dt 内容是全部商品分类，然后把这个盒子的宽高设置跟父亲一样，这样就把 .dd 挤到下面去了
<div class="dropdown">
<div div class="dt">全部商品分类</div>
<div class="dd">
<ul>
<li>
<a class="a" href="">家用电器</a>
</li>
<li>
<a href="phone.html">手机、</a>
<a href="">数码、</a>
<a class="a" href="">通信</a>
</li>
<li>
<a href="">电脑、</a>
<a class="a" href="">办公</a>
</li>
<li>
<a href="">家居、</a>
<a href="">家具、</a>
<a href="">家装、</a>
<a class="a" href="">厨具</a>
</li>
<li>
<a href="">男装、</a>
<a href="">女装、</a>
<a href="">童装、</a>
<a class="a" href="">内衣</a>
</li>
<li>
<a href="">个户化妆、</a>
<a href="">清洁用品、</a>
<a class="a" href="">宠物</a>
</li>
<li>
<a href="">鞋靴、</a>
<a href="">箱包、</a>
<a href="">珠宝、</a>
<a class="a" href="">奢侈品</a>
</li>
<li>
<a href="">运动户外、</a>
<a class="a" href="">钟表</a>
</li>
<li>
<a href="">汽车、</a>
<a class="a" href="">汽车用品</a>
</li>
<li>
<a href="">母婴、</a>
<a class="a" href="">玩具乐器</a>
</li>
<li>
<a href="">食品、</a>
<a href="">酒类、</a>
<a href="">生鲜、</a>
<a class="a" href="">特产</a>
</li>
<li>
<a class="a" href="">医药保健</a>
</li>
<li>
<a href="">图书、</a>
<a href="">音箱、</a>
<a class="a" href="">电子书</a>
</li>
<li>
<a href="">彩票、</a>
<a href="">旅行、</a>
<a href="">充值、</a>
<a class="a" href="">票务</a>
</li>
<li>
<a href="">理财、</a>
<a href="">众筹、</a>
<a href="">白条、</a>
<a class="a" href="">保险</a>
</li>
</ul>
</div>
</div>
css部分
.nav .dropdown {
float: left;
}
.nav .dropdown .dt {
height: 44px;
width: 210px;
text-align: center;
line-height: 44px;
color: #fff;
background-color:#b1191a ;
}
.nav .dropdown .dd {
width: 210px;
height: 466px;
background-color: #c81623;
}
.nav .dd li {
height: 31px;
line-height: 31px;
padding-left: 8px;
font-size: 14px;
}
.nav .dd li a {
color: rgb(240, 215, 215);
}
.nav .dd li:hover {
background-color: #fff;
}
.nav .dd li:hover a {
color:red;
}
右边栏的定位html
- 给L1、L2、L3 宽度给243但是里面装不开里面的四个小li
- 可以让L1里面的ul宽度为245就可以装下四个小li
- L1盒子overflow隐藏掉多余的部分
<div class="t3">
<ul>
<li class="l1">
<ul>
<li>
<div>花费</div>
</li>
<li class="jp">
<div>机票
<div class="jian">减</div>
</div>
</li>
<li>
<div>电影票</div>
</li>
<li>
<div>游戏</div>
</li>
</ul>
</li>
<li class="l2">
<ul>
<li>
<div>彩票</div>
</li>
<li>
<div>加油卡</div>
</li>
<li>
<div>酒店</div>
</li>
<li>
<div>火车票</div>
</li>
</ul>
</li>
<li class="l3">
<ul>
<li>
<div>中筹</div>
</li>
<li>
<div>理财</div>
</li>
<li>
<div>礼品卡</div>
</li>
<li>
<div>白条</div>
</li>
</ul>
</li>
</ul>
</div>
css
使用精灵图
.PK .pk2 .t3 .l1 li {
background: url(../images/icons.png);
}
.PK .pk2 .t3 .l1 li:nth-child(1) {
background-position:0 0;
}
.PK .pk2 .t3 .l1 li:nth-child(2) {
background-position: -60px 0;
}
.PK .pk2 .t3 .l1 li:nth-child(3) {
background-position: -121px 0;
}
.PK .pk2 .t3 .l1 li:nth-child(4) {
background-position: -181px 0;
}
.PK .pk2 .t3 .l2 li {
background: url(../images/icons.png);
}
.PK .pk2 .t3 .l2 li:nth-child(1) {
background-position: 0 -72px;
}
.PK .pk2 .t3 .l2 li:nth-child(2) {
background-position: -60px -72px;
}
.PK .pk2 .t3 .l2 li:nth-child(3) {
background-position: -125px -72px;
}
.PK .pk2 .t3 .l2 li:nth-child(4) {
background-position: -188px -72px;
}
.PK .pk2 .t3 .l3 li {
background: url(../images/icons.png);
}
.PK .pk2 .t3 .l3 li:nth-child(1) {
background-position: 0 -145px;
}
.PK .pk2 .t3 .l3 li:nth-child(2) {
background-position: -63px -145px;
}
.PK .pk2 .t3 .l3 li:nth-child(3) {
background-position: -125px -145px;
}
.PK .pk2 .t3 .l3 li:nth-child(4) {
background-position: -188px -145px;
}
登录
用了新增的表单属性，方便
required
placeholder
autofocus
autocomplete
multiple
html 部分代码
<div class="lon">
<div class="in"></div>
<input type="text" name="username" id="" placeholder="用户名" required>
</div>
<div class="lon">
<div class="in in2"></div>
<input type="text" name="password" id="" placeholder="密码" required>
</div>
<div class="m">
<div class="z">
<input type="checkbox" name="" id="">
自动登录
</div>
<div class="y">
<a href="#">忘记密码？</a>
</div>
</div>
<div class="deng">
<button>登录</button>
</div>
<div class="re" >
<a href="register.html">立即注册</a>
</div>
注册
html
<form action="#" class="register">
<div>
手机号：<input type="tel" name="" id="" required > <span style="color: red; font-size: 12px;">*手机号码格式不对</span><br>
</div>
<div>
短信验证码： <input type="text" name="" id=""><br>
</div>
<div>
登录密码： <input type="password" name="" id=""> <span style="color: red;font-size: 12px; ">*密码不少于6位数</span>
</div>
<div class="sigin">
<ul>
安全程度
<li>强</li>
<li>中</li>
<li>弱</li>
</ul>
</div>
<div >
确认密码： <input type="password" name="" id=""> <span style="color: red ; font-size: 12px;">*密码不一致请重新输入密码</span>
</div>
<div class="z">
<input type="checkbox" name="" id="">
同意协议并注册
<a href="#">《阅读用户协议》</a>
</div>
<button>确认注册</button>
</form>
详情页面
手机介绍是通过嵌套li做的
html
<div class="you4">
<ul>
<li class="l1">
<ul>
<li>选择颜色</li>
<li>金色</li>
<li>银色</li>
<li>黑色</li>
<li>玫瑰色</li>
</ul>
</li>
<li class="l2">
<ul>
<li>选择版本</li>
<li>公开版</li>
<li>移动4G</li>
</ul>
</li>
<li class="l3">
<ul>
<li>选择容量</li>
<li>18G</li>
<li>64G</li>
<li>128G</li>
</ul>
</li>
<li class="l4">
<ul>
<li>购买方式</li>
<li>官方标配</li>
<li>移动优惠购</li>
<li>电信优惠购</li>
</ul>
</li>
<li class="l5">
<ul>
<li>套 装</li>
<li>保护套装</li>
<li>充电套装</li>
</ul>
</li>
<li class="l6">
<ul>
<li class="tu">
<ul>
<li>1</li>
<li>+</li>
<li>-</li>
</ul>
</li>
<li>加入购物车</li>
</ul>
</li>
</ul>
</div>
css
.you4 {
width: 546px;
height: 255px;
border-top: 1px solid gainsboro;
border-bottom: 1px solid gainsboro;
padding-top: 10px;
}
.you4 li {
overflow: hidden;
}
.you4 .l1 li:nth-child(n+2),
.you4 .l2 li:nth-child(n+2),
.you4 .l3 li:nth-child(n+2),
.you4 .l4 li:nth-child(n+2),
.you4 .l5 li:nth-child(n+2) {
float: left;
width: 86px;
height: 42px;
background-color: #f7f7f7;
margin-right: 10px;
text-align: center;
line-height: 42px;
margin-bottom: 8px;
}
.you4 .l1 li:nth-child(1),
.you4 .l2 li:nth-child(1),
.you4 .l3 li:nth-child(1),
.you4 .l4 li:nth-child(1),
.you4 .l5 li:nth-child(1) {
float: left;
width: 86px;
height: 42px;
font-size: 15px;
margin-right: 10px;
text-align: center;
line-height: 42px;
}
.you4 .l1 li:nth-child(2) {
border: 1px dashed black;
}
.you4 .l1 li:nth-child(5) {
border: 1px solid #c81623;
}
.you4 .l2 li:nth-child(3) {
border: 1px solid #c81623;
}
.you4 .l3 li:nth-child(3) {
border: 1px solid #c81623;
}
.you4 .l4 li:nth-child(2) {
border: 1px solid #c81623;
}
.you4 .l6 li:nth-child(1) {
float: left;
width: 50px;
}
.you4 .l6 .tu {
margin-left: 20px;
}
.you4 .l6 li:nth-child(2) {
float: left;
width: 110px;
height: 50px;
text-align: center;
line-height: 50px;
background-color:#b1191a;
color: #f1f1f1;
margin-left: 20px;
}
.you4 .l6 li:nth-child(1) li:nth-child(1) {
float: left;
width: 30px;
height: 50px;
text-align: center;
line-height: 50px;
border: 1px solid rgb(151, 151, 147);
}
.you4 .l6 li:nth-child(1) li:nth-child(2),
.you4 .l6 li:nth-child(1) li:nth-child(3) {
float: right;
width: 20px;
height: 25px;
background-color: #f1f1f1;
border: 1px solid gray;
color: black;
}
.you4 .l6 li:nth-child(1) li:nth-child(2) {
margin-top: -50px;
line-height: 25px;
border-bottom: 0;
border-left: 0;
}
.you4 .l6 li:nth-child(1) li:nth-child(3) {
margin-top: -25px;
text-align: center;
border-left: 0;
}
遇到的问题：
- 图标与文字对其的问题：vertical-align：middle；
- 由于上盒子产生大小从而产生的边距的问题。解决问题就是给nav添加overflow：hidden；
扫一扫
2524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
