淘宝布局经验总结

淘宝首页布局要点概括

1.头部信息:里面的小图标引用是外部的文字,放在span标签中,文字有链接的放在a标签中,没有的放在span标签中。
在这里插入图片描述
对于这样的布局:采用,右边图片右浮动(脱离文档流),h3和p标签依次顶到原位,这样的布局结构更加简单。
在这里插入图片描述这种左中右结构,且中间位于整体body中间的话,采用这样的布局:
先写左边设为左浮动,再写右边设为右浮动,再写中间部分,它两都脱离的文档流,自然中间的部分回归原来文档流的位置。淘宝布局经验总结_第1张图片
中间的部分:先分为上中下三部分:
上:使用ul li,这里有一个渐变的背景色使用的是css3中的background-image:linear-graident(to right,起始颜色,结束颜色);还有一个border-radius:分为四个值,从左上角开始,顺时针赋值。
中间:先分为左右两部分,右边就是一个button按钮,左边又分为左边(input,div(span(放大镜),span(文字))和右边(相机部分),由于input标签和两个div的位置是重叠的所以肯定会用到定位,他们的父级为position:relative;div:position:absolute;使用left和top定位,这时发现div在input的上面使得光标不能在被覆盖地区使用,则使用层级使得input也为绝对定位i,设置层级放在div的上面,把背景颜色设为透明,下面的div的内容就显示出来了。
右侧相机也是absolute,设置right来定位,记得去掉input的outline:none;
再右侧就是一个button记得去掉border:0px;
下:简单的a标签,设置宽高,行高,hover等。
淘宝布局经验总结_第2张图片
这里有一个hover的效果,用到伪类和绝对定位
方式:li a:hover::before{
content="";
background-image:url();
width:;/图片的大小/
height:;
position:relative;
top:-height;
left:50%;/juzhong/
margin-left:width/2;
}

填充渐变的背景色

这个是css3中的属性:支持情况IE9+
background-image: linear-gradient(to right,#ff9000,#ff5000);//从左到右
background-image: linear-gradient(135deg,#ff9000,#ff5000);/表示渐变的角度,90度偏45度,一个对角线的渐变/
解决兼容问题
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffff9000’,endColorstr=’#ffff5000’,GradientType=1); */
/上述使用的IE的滤镜来实现渐变,应为IE10以下不支持CSS3/

伪类

例:a:after
一个冒号表示伪类(IE8-兼容)
a::after
两个冒号表示伪元素,是css3的标准(IE8以上兼容)
只有兼容有区别,用法没有区别

一个a标签内的文字以空格为换行

a标签的属性:
word-break: keep-all;
在这里插入图片描述
想让一段文字只展示两行,那么就设置行高是宽度的一半;

怪异盒模型:

box-sizing: border-box;
设置它之后,给margin还是padding后它的可见范围不会改变
vertical-align: middle;/行内元素并列时对齐/
子元素都为行级元素,且涉及到间隔问题,由于折行的原因会产生空格,则给他们的父级的font-size:0px; 就可以消除,如果有需要,再重新再子元素中设置font-size的值。

最终展示形式为:(两行或多行以上的li)
想要居中,而且并列起来,形成多行,则不适用浮动,先让父级text- align:center;然后使li元素变为line-block;
如果li有设置margin-bottom的值,一般最后一行的li都不需要,则让他们的父元素overflow:hidden;即可。
标题标签默认有加粗的效果
table的一个属性

table-layout: fixed**;/选择列宽的计算方式,根据表格宽度,自动计算列宽,均分整个表格的宽度/

这里使用的是一个雪碧图,使图标和背景放在一起,通过定位,优点:减少多张图片的加载
例:
background:#ffe4dc url("…/images…") 0 -572px no-repeat;
第一参数为背景颜色,第二个表示雪碧图的地址,第三个表示相对于这个元素的左边的值,第四个表示雪碧图距离上边线的距离,图片往上走是负值,忘左走是负值。
淘宝布局经验总结_第3张图片
/方法一:这里引用的是td里面的特性,表格的特性就是自动垂直居中/
display:table-cell;/先转为table-cell元素/
vertical-align: middle;/利用垂直居中的属性/
/方法二:这里用的是弹性盒模型,水平平分,垂直居中,兼容情况IE10+/
/* display: flex;
justify-content: space-evenly;
align-items: flex-end;

transition:background-color 0.3s;/css3中的背景颜色的过渡时间

/ width:calc(100% - 190px)*; 可以用于计算的一个方法,兼容情况:IE9+*/


这里的下边框

 

CSS

    .img2Box .picTitle .line{
    height:3px;
    background-color:#ff1648;
    position: relative;
}
.img2Box .picTitle .line span{
    height:3px;
    background-color:black;
    position: absolute;
    left:0px;
    width:87px;
}

你可能感兴趣的:(每天一个知识点,丰富我的大前端)