夜光带你走进前端工程师（十三）

夜光序言：

你和我都是孤独的鬼，有一张伪善的嘴。

你和我都是孤独的鬼，承受着满身疲惫。

夜光带你走进前端工程师（十三）

正文：

高级操作：

width：100%

每个里面都要有10px距离，如何设置：

.tit{
    padding-bottom: 8px;
    border-bottom: 1px solid darkred;
    position: relative;
    margin-bottom: 10px; //在tit中设置即可
}

夜光带你走进前端工程师（十三）

图片左浮动

<div class="jj_c">
   <img src="新潮03.jpg" height="160">
    <p>
        我店布料全部来自正规的渠道，以最直接有效的方式送达商家手里，
        避免了中间过多的流通环节。
        并且本店一直是以薄利多销为原则，
        在有合理利润的基础下将
        尽最大可能让利给大家，所以才会比其他供应商便宜许多
    </p>
    <p>
        新潮的服务宗旨是用心服务，以诚待人!坐落于国际布料中心<a>5C113</a>
    </p>
    <p>多选用优质的混纺面料,而纯棉、纯毛、纯丝、纯麻等天然面料因为有着易皱、易变形等天然面料的缺点，已经沦为一般布料，较少作为高档服装用料。混纺面料有着天然面料吸汗透气、柔软舒服的特点，又吸收了化纤面料结实耐穿、垂悬挺括、光泽好颜色鲜亮等优点，每年有大量的高档优质混纺面料被开发出来。有时，穿著纯皮革制作的服装，也是允许的。一般服装面料分为二大系列：
        梭织面料：主要用于服装的外衣和衬衣。
        针织面料：服装的内衣和运动系列服装，但由于科技的发展，针织布也向厚重、挺括发展，逐渐使针织内衣外化，针织面料梭织做法，成为外衣的补充。
    </p>
</div>

如何设置字体样式：帅气

运用这个来设置：灵活思考

.jj_c p{

}

夜光带你走进前端工程师（十三）

text-indent:缩进

夜光带你走进前端工程师（十三）

利用css 调用背景图片来定义【夜光】

.xw_c li{
    list-style: none;
    height: 24px;
    line-height: 24px;
}               //创新列表样式
.xw_c h3{
    font-weight: normal;
}            //不用加粗对吧
.xw_c a{
    color: #616161;
    text-decoration: none;
}               //列表里面的超链接

夜光带你走进前端工程师（十三）

如何解决这个问题？帅气

运用位置：position

.xw_c li{
    list-style: none;
    height: 24px;
    line-height: 24px;
   position: relative;
}
.xw_c span{
    position: absolute;
    right:0;
    bottom: 0;
    font-size: 12px;
    color: #888888;
}

//引用了span

position: relative;

position: absolute; //超帅气，嘿嘿

.xw_c li{
    list-style: none;
    height: 24px;
    line-height: 24px;
    position: relative;
    padding-left: 15px;
    background: url("list_bg.jpg") no-repeat left;
}

夜光带你走进前端工程师（十三）

这个如何解决：高度不足

设置height

找到图片，原来高度66px.<img src="新潮05.jpg" width="120px" height="66px">

那么变为76px 因为padding

夜光带你走进前端工程师（十三）

如何解决？用浮动

.xw_c li img{
float: left;
margin: 0 10px 10px 0; //这个是关键
}

夜光带你走进前端工程师（十三）

一个字体：12px 两个字体：24px

夜光带你走进前端工程师（十三）

<li class="a">
    <a href="">
        <div>
            <img src="新潮05.jpg" width="100px" height="66px">
        </div>
        <h3>新潮新品布料涤纶系列</h3>
        <p>
            新潮布行乐意为您提供高质量服务
        </p>
        <span>2018-4-8</span>
    </a>
</li>

Css:

.xw_c p{
    font-size: 12px;
    color: black;
    text-indent: 24px;
}

<div class="chanpin z">
    <div class="tit">
        <img src="chanpin.jpg">
        <span><a href="">More</a></span>
    </div>
    <div class="cp_c">
        <ul>
            <li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a></li>
            <li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a></li>
            <li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a></li>
            <li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a></li>
            <li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a></li>
            <li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a></li>
            <li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a></li>
            <li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a></li>
            <li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a></li>
            <li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a></li>
            <li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a></li>
            <li><a href=""><img src="新潮01.jpg" width="151px" height="96px"></a></li>
        </ul>
    </div>
</div>

夜光带你走进前端工程师（十三）

还需要修改样式：实现效果飞跃

夜光带你走进前端工程师（十三）

.cp_c{

}
.cp_c li{
    float: left;
    list-style: none;
    margin: 0 10px 10px 0;
}

//但是还存在问题最下面两个

找到第六个，第十二个

.cp_c li{
    float: left;
    list-style: none;
    margin: 0 10px 10px 0;
}
.cp_c li.mr_0{
    margin-right: 0;
}

.cp_c{

}
.cp_c li{
    float: left;
    list-style: none;
    margin: 0 10px 10px 0;
    width: 151px;
    height: 96px;
    overflow: hidden;     //列表来个·效果
}
.cp_c li.mr_0{
    margin-right: 0;
}
.cp_c image{
    float: left;        //图片来个左浮动·效果
}