前端联系6

要点：元素的横向排列采用浮动，一般之后要清除浮动,不然它脱离文档流之后会影响之后的元素（claer:both）
　　图片和文字在一起的因为图片采用了左浮动，脱离了文档流，导致之后的文字紧随其后
　　最下面的图片排列看似难，其实很简单，因为img在li标签里面，让li标签全部向左浮动，形成，
　　然后给li添加 margin-right:12px;,这时候会会形成，
　　可以看出，第6个li和第12个li由于宽度不够，到最下面去了，此时可以把它两个的margin-right设置成0，使其刚好嵌入，会有误差（右间距），但是可以将其精确到最小
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    /*网站的初始化*/
    *{
        padding:0;
        margin:0;
    }
    ul,li{
        list-style: none;
    }    
    body{
        font-family: "Microsoft YaHei";
        background-color: #f1f1f1;
        font-size: 14px;
    }
    img{
        border:0;
    }
    /*页面样式*/
    /*top样式*/
    .top{

    }
    .top-top{
        background-color: #000;
        color:#d8d8d8;
        padding:3px;
    }

    .top-top div{
        width: 960px;
        margin:0 auto;
    }
    .top-logo{
        width: 960px;
        margin:0 auto;
        margin-top: 10px;
    }

    .top-logo .tel{
        font-size: 24px;
        line-height: 80px;
    }
    
    .logo img{
        height: 80px;
    }
    .search{
        margin-top: 21px;
        margin-right: 20px;
    }
    .search input{
        height: 40px;
        border:1px solid #2E8B57;
        padding-left: 10px;
        width:320px;
        border-radius: 3px 0 0 3px;
        font-size: 18px;
    }
    .search input:focus{ /*:focus 选择器用于选取获得焦点的元素。*/
        outline: none;
        /*outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用*/
    }
    .search button{
        height: 42px;
        background-color: #2E8B57;
        border:0;
        font-size: 18px;
        padding-left: 10px;
        padding-right: 10px;
        color:white;
        border-radius: 0 3px 3px 0;
    }
    .top-nav{
        margin-top: 10px;
        background-color:     #2E8B57;
        padding: 5px;
    }
    .top-nav ul{
        width: 960px;
        margin:0 auto;        
    }
    .top-nav ul li{
        float:left;
        margin-right: 70px;
        color:white;
        text-align: center;
    }
    .top-nav ul li a{
        color:white;
        font-size: 18px;
    }    
    .top-nav ul li a:hover{
        color:yellow;
        background-color: green;
        padding-top: 5px;
        padding-bottom: 5px;
    }    
    /*content样式*/
    .content{
        width: 960px;
        margin:0 auto;    
    }
    .con-top img{
        width: 100%;
    }
    .con-middle{
        margin-top: 10px;
    }
    .c-m-l{
        width: 550px;
        height: 300px;
        
    }

    .c-m-r{
        width: 400px;
    }

    .c-m-l .title{
        background: url('xinwen.jpg') no-repeat;
        height: 47px;
        border-bottom: 1px solid darkred;
    }
    .c-m-l .title a{
        margin-top: 20px;
    }
    .c-m-l .con{
        margin-top: 10px;
    }
    .c-m-l .con img{
        float: left;
        margin:5px 10px 5px 0;
    }

    .c-m-l,.c-m-r p{
        text-indent: 30px;
        color:#616161;
        line-height: 25px;
    }
    .c-m-r .title{
        background: url('xinwen.jpg') no-repeat;
        height: 47px;
        border-bottom: 1px solid darkred;
    }
    .c-m-r .title a{
        margin-top: 20px;
    }
    .c-m-r .con{
        margin-top: 10px;
    }
    .c-m-r .con img{
        float: left;
        margin:5px 10px 5px 0;
    }
    .c-m-r .con h4{
        color:#616161;
    }
    .c-m-r .con-b ul li{
        height: 33px;
        line-height: 33px;
    }

    .c-m-r .con-b ul li a span{
        float: right;
    }
    .c-m-r .con-b ul li a{
        color:#616161;
        font-size: 16px;
    }
    .con-bottom{
        margin-top: 10px;
    }
    .con-bottom .title{
        background: url('xinwen.jpg') no-repeat;
        height: 47px;
        border-bottom: 1px solid darkred;        
    }
    .con-bottom .title a{
        margin-top: 20px;    
    }

    .con-bottom ul li{
        float: left;
        margin-right: 12px;
        margin-top: 6px;
    }
    .con-bottom ul li img{
        width: 150px;
    }

    /*footer样式*/
    .footer{

    }


    /*公共的属性*/
    .left{
        float: left;
    }
    .right{
        float: right;
    }
    .clear{
        clear: both;
    }
    a{
        text-decoration :none;
    }
    
</style>
<body>
    <div class="top">
        <div class="top-top">
            <div>
                <span class="left">设为首页   收藏本站</span>
                <span class="right">2016年2月2日 多云</span>
                <div class="clear"></div>
            </div>
        </div>

        <div class="top-logo">
            <div class="logo left">
                <img src="http://img0.imgtn.bdimg.com/it/u=161448140,3544711672&fm=26&gp=0.jpg" alt="">
            </div>

            <div class="tel right">
                tel:400-000-000
            </div>
            <div class="search right">
                <form action="">
                    <table cellpadding="0" cellspacing="0">
                        
                            <td><input type="text" name="keyword"></td><td><button>搜&nbsp;&nbsp;索</button></td>
                        
                    </table>
                </form>
            </div>
            <div class="clear"></div>
        </div>

        <div class="top-nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <li><a href="#">首页</a></li>
                <div class="clear"></div>
            </ul>
        </div>        
    </div>

    <div class="content">
        <div class="con-top">
            <img src="https://imgsa.baidu.com/forum/w%3D580/sign=a42d3150dc58ccbf1bbcb53229dabcd4/4c43f350352ac65c07cbfe91f6f2b21191138a4e.jpg" alt="">
        </div>

        <div class="con-middle">
            <div class="c-m-l left">
                <div class="title"><a href="#" class="right">More</a></div>
                <div class="con">
                    <img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt="">
                    <p>    泰牛程序员是北京每学教育科技有限公司旗下教育品牌，公司专门致力于培养高素质软件开发人才，培养能干活，干好活的一流的软件人才，解决IT企业最热门技术的难点。整合了国内众多知名软件企业的资源，并邀请到任跨国公司和国内大中型企业架构师，系统分析师、企业培训师组成自己的精英团队。 </p>
                    <p>    什么都不会没关系，想跳槽想加薪都可以，提升自己更不在话下。 只要你愿意，绝对为你找到一份相当靠谱的工作！我奋斗、我最棒、我能行！ 
                    那么多的梦想，你不想实现？买的起大奔的人会天天挤公交吗？ 想成为成功人士，脑袋里必须要有知识。一切不以要付出为目的的梦想都是耍流氓！ </p><p>    课程全面覆盖市场需求、学习作业快速批改、保就业、班主任助教全程跟踪。 你看，离你完成梦想的道路是不是近了很多。 </p>
                </div>
            </div>

            <div class="c-m-r right">
                <div class="title"><a href="#" class="right">More</a></div>
                <div class="con">
                    <img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt="">
                    <h4> PHP工程师之HTML+CSS基础入门</h4>
                    <p>    泰牛程序员是北京每学教育科技有限公司旗下教育品牌，公司专门致力于培养高素质软件开发人才... </p>
                    <div class="clear"></div>
                    
                </div>

                <div class="con-b">
                  <ul>
                    <li><a href="#">这是帖子2121212 <span>2018-1-1</span></a></li>
                    <li><a href="#">这是帖子2121212 <span>2018-1-1</span></a></li>
                    <li><a href="#">这是帖子2121212 <span>2018-1-1</span></a></li>
                    <li><a href="#">这是帖子2121212 <span>2018-1-1</span></a></li>
                    <li><a href="#">这是帖子2121212 <span>2018-1-1</span></a></li>
                    <li><a href="#">这是帖子2121212 <span>2018-1-1</span></a></li>
                  </ul>
                </div>
            </div>    

            <div class="clear"></div>    
        </div>

        <div class="con-bottom">
            <div class="title"><a href="#" class="right">More</a></div>

            <div class="middle">
                <ul>
                    <li><a href="#"><img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt=""></a></li>
                    <li><a href="#"><img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt=""></a></li>
                    <li><a href="#"><img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt=""></a></li>
                    <li><a href="#"><img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt=""></a></li>
                    <li><a href="#"><img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt=""></a></li>
                    <li style="margin-right:0;"><a href="#"><img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt=""></a></li>
                    <li><a href="#"><img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt=""></a></li>
                    <li><a href="#"><img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt=""></a></li>
                    <li><a href="#"><img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt=""></a></li>
                    <li><a href="#"><img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt=""></a></li>
                    <li><a href="#"><img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt=""></a></li>
                    <li style="margin-right:0;"><a href="#"><img src="https://imgsa.baidu.com/forum/w%3D580/sign=5764b79e5c0fd9f9a0175561152cd42b/fc46a3014a90f603cf1104a53412b31bb251edf0.jpg" alt=""></a></li>                    
                </ul>
            </div>
        </div>        
    </div>

    <div class="footer">

    </div>        
</body>
</html>
posted @ 2019-01-22 12:08 cl94 阅读(141) 评论(0) 收藏举报
刷新页面返回顶部
cl94

前端联系6

公告
