CS两种图片文字常用布局

   <style>
        /* 初始化样式 */
*{
    margin:0;
    padding:0;
}

a{
    text-decoration:none;
}
li{
    list-style-type:none;
}
input,button{
   outline:none;
}
.l{
    float:left;
}
.r{
    float:right;
}

.c:after{
    clear:both;
    0;
    padding:0;
    content:"";
    display: block;
    visibility: hidden;
}

html,body{
    background:#ebf9f9;
    font-size: 12px;
}
/* 添加样式 */
#header .one{
    700px;
    height:200px;
     margin-top:20px;
}
    #header .two{
    700px;
    height:400px;
     margin-top:20px;
}

.one{
    background:#fff;
}
.two{
    background:#0f0;
}
.three{
    background:#00f;
}
.one .item{
    300px;
    padding:10px;
    margin:0px 10px;
    border:1px solid #09f;
}
.one .item>.r{/*必须使用子代选择器，使用后代选择器会有问题*/
    180px;
}
.one .item>.r h4{
    font-size:15px;
    padding:5px 0px;

}
.one .item>.r h4 a{
    color:#f00;
}
.one .item>.r p{
     line-height: 20px;
}


.two>ul>li{
       300px;
    padding:10px;
    margin:0px 14px;    
    border:1px solid #09f;

}
.two>ul>li img{
    margin-right:20px;
}
.two>ul>li h4{
    font-size:15px;
    padding:5px 0px;

}
.two>ul>li h4 a{
    color:#f00;
}


.two>ul>li  p{/*必须使用子代选择器，使用后代选择器会有问题*/
     line-height: 20px;
         height: 130px;
}
.two>ul>li>ul>li{
    50%;
  padding:10px 0px;
  border-bottom:1px solid orange;
}


        </style>
</head>
<body>
        <div id="header">
            <div class="one">
                <div class="item l c">
                      <div class="l">
                          <a href="">
                              <img  width="100" height="150"  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505811567722&di=3bc24854df872c12da92fc0c25f9da89&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2015%2F0313%2F0312qzmnjtxziphonebz1.jpg">
                          </a>
                      </div>
                      <div class="r">
                          <h4>
                              <a  href="">景甜</a>
                              <span class="r">气质美女</span>
                          </h4>
                          <p>气质美女的形象是知性，落落大方，为人处事，待人接物，不慌不忙，心态不骄不躁，宠辱不惊。闲看庭前花开花落，去留无意，漫望天际云卷云舒，，得之坦然，失之淡然，争其必然，顺其自然。</p>
                      </div>
                </div>
                 <div class="item l c">
                      <div class="l">
                          <a  href="">
                              <img  width="100" height="150"  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505811567722&di=3bc24854df872c12da92fc0c25f9da89&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2015%2F0313%2F0312qzmnjtxziphonebz1.jpg">
                          </a>
                      </div>
                      <div class="r">
                          <h4>
                              <a  href="">景甜</a>
                              <span class="r">气质美女</span>
                          </h4>
                          <p>气质美女的形象是知性，落落大方，为人处事，待人接物，不慌不忙，心态不骄不躁，宠辱不惊。闲看庭前花开花落，去留无意，漫望天际云卷云舒，，得之坦然，失之淡然，争其必然，顺其自然。</p>
                      </div>
                </div>
            </div>
            <div class="two">
               <ul>
                   <li class="l">
                        <a href="">
                              /*浮动img标签，可以消除inline,inline-block下的空白间距*/

                              <img class="l"  width="100" height="150"  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505811567722&di=3bc24854df872c12da92fc0c25f9da89&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2015%2F0313%2F0312qzmnjtxziphonebz1.jpg">
                          </a>
                           <h4>
                              <a  href="">景甜</a>
                              <span class="r">气质美女</span>
                          </h4>
                          <p>气质美女的形象是知性，落落大方，为人处事，待人接物，不慌不忙，心态不骄不躁，宠辱不惊。闲看庭前花开花落，去留无意，漫望天际云卷云舒，，得之坦然，失之淡然，争其必然，顺其自然。

                          </p>
                    <ul>
                  
                        <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                           <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                    </ul>
                
                   </li>
                         <li class="l">
                        <a href="">
                              <img class="l"  width="100" height="150"  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505811567722&di=3bc24854df872c12da92fc0c25f9da89&imgtype=0&src=http%3A%2F%2Fpic.ffpic.com%2Ffiles%2F2015%2F0313%2F0312qzmnjtxziphonebz1.jpg">
                          </a>
                           <h4>
                              <a  href="">景甜</a>
                              <span class="r">气质美女</span>
                          </h4>
                          <p>气质美女的形象是知性，落落大方，为人处事，待人接物，不慌不忙，心态不骄不躁，宠辱不惊。闲看庭前花开花落，去留无意，漫望天际云卷云舒，，得之坦然，失之淡然，争其必然，顺其自然。

                          </p>
                              <ul>
                  
                        <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                           <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                         <li class="l">
                            <a href="">永恒圣帝</a>
                            /千寻月
                        </li>
                    </ul>
                   </li>
               </ul>
               
            </div>
        </div>
        
</body>
</html>

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xingkongly/p/7552040.html