品优购项目html+css-----初学者，一名毕业三年的女程序媛面试头条经验

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：docs.qq.com/doc/DSmRnRG…

2、字体图标

它在一定程度上减少了过度使用图片导致的资源占用问题，图片失真问题，通过代码的方式让图标更加轻量化，同时也提高了项目的运行性能哦

使用方法：

1）下载字体图标网站：icomoon.io || 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 挤到下面去了

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隐藏掉多余的部分

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 部分代码

注册

html

确认注册

详情页面

手机介绍是通过嵌套li做的

html