仿京东页面(笔记)
初始化:
不用通配符:加载慢
outline-style:没有外面的绿边框
textarea {
resize:none; } //不可改变输入框
img {
vertical-align:middle;
} //去掉图片低侧默认的三像素
i,s,em //这些小标签没有语义化,写在一些小的地方,比较简便
{
font-style:normal; //去掉倾斜等
text-decoration: none; //去掉下划线和删除线
}
.w 版心
i em
u ins
s del
权限:
标签 1
.nav(类选择器) 10
# kkk(ID选择器) 100
<div height=100> 1000
!important 1/0
如果浏览器里面全部,或者大部分的字体是一样的话,可以在body里面设置:
导航栏
1.先写注释
2.子元素会继承父元素的行高
3.行高和高度一致的时候,文字居中
4.字体:400 normal
700 bold
5.无论是 写html还是css 都要注释开始和结束:
6.小三角:
①为什么用: 加载速度快
②注意子绝父相:
绝对的不一样 一个是.send 一个是.fore
所以分开写
③ <i>有高宽,<s>没有 他们都是相对于nav-send 定位
④ <i>定位左右和上下, <s>在<i>里面, <s>只要定位上下
7.写css的时候,引用的标签不要超过3个
8.<!-- -->标签不是在sublime里面的
9.
这里的竖线有很多方法做,其中包括以前用的边框,这里用的是创造一个<li class="shu">标签
10.字体可以继承
11.在<span>里面, 用背景插入购物车的精灵图(设置宽和高 )
banner和search:
初始化那里写了版心,这里就多次调用就行了
1.[ctrl]+[shift]+[space] 直接跳到下一行
2. 父元素没有设置高,被子元素撑开
3.text-indent:-5000px; 设置背景,然后用这个将文字移除
4.为什么 search-input 那里要设置宽高
5.
这里有两处细节需要注意
6. a链接和文本输入框 鼠标放上去的话 都是会变化的
但是 button不是 ,所以用一个cursor: pointer 来实现这一变化
7.父元素用了text-align:center 子元素的文字会居中对齐
8. search-car
search-car 里面
1.text-align:center
2.line-height的设置 使得子元素的文本上下左右读对其
3.border
这里用了 精灵图,文字,还有背景的定位
border-radium: 7px 7px 7px 0; 使其变成圆角
宽高的一半(圆胖的) 50% 0.5em(字号的一半)
标准流的文字不会被浮动遮挡(半托表)
9.一个盒子中的盒子要么都浮动,要么都不浮动
清除浮动的目的是:清除子盒子浮动而父盒子高度为0造成的影响:
额外标签法 添加一个额外的div标签 然后css里面写上clear:both;
overfloat: hidden 一般不用,离开父元素的区域后会被隐藏
.clearfix:after{
centent:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
zoom:1;为了兼容IE
}
双伪类:
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
第一种会增加不必要的标签
第二种有可能会隐藏内容 原理是它触动了一个BFC(block formating context )的一个独立的渲染区域
第三种 应该尽量使用
第四种 是第三种的改良,但是不严谨
shortcut部分
1.又高度会被撑破,没有高度会被撑开
2.浮动的元素无论是否在同一个盒子都会相互影响 不要让浮动的盒子超出父盒子
3.既可以用div套div,也可以ul(ol)套li,再或者dl(definition list),dt,dd
4.div:hover a {} 鼠标放在div上面,a连接变色
5.保存图片的方法: 审查元素,右键在新页面中打开,右键保存
6.吸色的话可以用火狐或者chrome的插件,或者截图后用firework
footer部分
1.缩小时候图片位置跟着动:
用定位 left:50% 然后将每张图片用margin-left: -604px -302px 302px
2.
这里设置字体大小后,通过line-height来取代padding
3.什么时候用padding不用margin?
1.需要使用背景图的时候
2.会出现外边距合并或者margin塌陷的时候用padding
3.行内元素上下只能设置padding不能设置margin 行内元素没有上下margin
4.需要点击的时候
5.看需求 多数情况下 都可以用
4.加版心.w 和 clearfix
5.
main部分:
main-slide:
一整张图片:
float
清除浮动
里面用子绝父相放进去 用了left:50%+ margin-left:-66px调整
其次,这里使用了一个border-radius:50% 将其变为圆角
添加了一个current的类(其实也是为了后面js做准备)
然后设置背景色为红色
注意一个问题:
行内元素设置行高的时候用font: 700 16px/32px microsoft-yahei可能会出问题 比如a,span
解决方法:
1.继承行高
2.分开写 line-height,color,font-size
这里可以用ul以及table,但是table通常里面只是放文字
重点:
1.利用margin-top:-1px和margin-right:-1px 消去重复的边界
2.一行显示4个框框的方法:
将li的父盒子宽度设置大于四个盒子的大小,然后四个li就能float进去,然后再在某个有边框的元素里面使用overfloat:hidden样式 (京东的网页就是这么干的)
精灵图复习:
原理
1.width:25px height:25px;
2.background: url(../images/fly.png) no-repeat;
利用级联样式表的层叠性:
把原来的i(通用)里面的background的url保持不变,然后写一个权重更高的去覆盖(i .main-news-top-icon2)里面的background-positon
a连接要变成块级元素才能设置宽高
today部分
这个会转的钟用的就是css3的内容
父盒子高度为0,子盒子不占位置(浮动了),下面的东西就会上来
解决方法:给盒子设置高度,或者清除浮动
抠图
注意覆盖的问题
代码复用性和函数抽象
width:200% 父盒子宽度的2倍
子盒子继承父盒子的属性(包括宽度)
margin里面有auto的时候,要有宽度
层级的问题:
标准流<浮动<定位(加一个position:relative)
不管是标准流和浮动流:后面的层级大于前面的
另外,
1.元素设置了position属性后,这个定位元素的z-index就会自动生效,此时它的z-index值就是默认的auto,也就是0。
2.层级不取小数
3.层级一样,后面的盒子比前面的盒子的层级高
4.浮动或者标准流的盒子,后面的盒子比前面的层级高
父盒子高度为零,子盒子不占位置
实现方法:
1.float
2.position
用z-index的时候,记得前面加position:relative