淘宝布局经验总结

最新推荐文章于 2021-08-09 14:22:51 发布

韭菜小姐

最新推荐文章于 2021-08-09 14:22:51 发布

阅读量877

点赞数 1

分类专栏：每天一个知识点，丰富我的大前端文章标签： css

本文链接：https://blog.csdn.net/weixin_44368573/article/details/101727335

版权

每天一个知识点，丰富我的大前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

淘宝首页布局要点概括

1.头部信息：里面的小图标引用是外部的文字，放在span标签中，文字有链接的放在a标签中，没有的放在span标签中。
在这里插入图片描述
对于这样的布局：采用，右边图片右浮动（脱离文档流），h3和p标签依次顶到原位，这样的布局结构更加简单。
这种左中右结构，且中间位于整体body中间的话，采用这样的布局：
先写左边设为左浮动，再写右边设为右浮动，再写中间部分，它两都脱离的文档流，自然中间的部分回归原来文档流的位置。在这里插入图片描述
中间的部分：先分为上中下三部分：
上：使用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等。
在这里插入图片描述
这里有一个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;
第一参数为背景颜色，第二个表示雪碧图的地址，第三个表示相对于这个元素的左边的值，第四个表示雪碧图距离上边线的距离，图片往上走是负值，忘左走是负值。
在这里插入图片描述
/方法一：这里引用的是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+*/

这里的下边框

 <div class="line">
                       <span></span>
     </div>

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;
}