模仿京东页面

最新推荐文章于 2022-08-02 14:14:44 发布

zerobaek

最新推荐文章于 2022-08-02 14:14:44 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：项目京东

本文链接：https://blog.youkuaiyun.com/zerobaek/article/details/97401576

css样式总结

尽量不要使用通配符清除样式，要清除样式在boby标签选择器里面清除，因为通配符会影响子类继承父类的样式
导航栏可以用无序列表来做

不定宽高的元素，可以使用min-width、min-height
关于伪元素与使用伪元素的元素盒子，伪元素使用定位的时候，元素盒子会作为父元素，伪元素只能使用绝对定位

文本不换行，多余字用省略号代替，涉及三个属性white-space、text-overflow、overflow

<li class="news_list_li">
    <a href="" class="new_list_a">
        <span class="news_tag">最新</span>
        小米10：骁龙865+四摄+升降屏+100W快充，价香
    </a>
</li>

.news_list_li{
    max-width: 160px;
    height: 16px;
    line-height: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #999;
    margin-bottom: 6px;
}

border属性的应用：画三角形

<div class="bor"></div>

.bor{
    border-width: 100px 100px 100px 100px;
    border-style: solid;
    border-color: red blue green black;
    width: 0px;
    height: 0px;
    margin: 100px auto;
}