前端(塌陷)

高度塌陷

Snipaste_2018-08-12_18-26-01.png

解决高度塌陷

Snipaste_2018-08-12_18-26-42.png

解决高度塌陷2

Snipaste_2018-08-12_18-29-34.png

导航条

Snipaste_2018-08-12_18-28-33.png

清除浮动

Snipaste_2018-08-12_18-29-11.png

放假作业

1.开班计划

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开班计划</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font: 12px/1 宋体;
        }
        .box1{
            width: 300px;
            /*外边距  居中*/
            margin: 50px auto;
        }
        .box2{
            /*上边框 (solid  实线)*/
            border-top: 2px #52bbae solid;
            height: 36px;
            background-color: #f5f5f5;
            /*行内高度*/
            line-height: 36px;
            /*内边距*/
            padding:0px 20px 0px 16px;
        }
        .box2 a{
            /*向右浮动*/
            float: right;
            color: red;
        }
        .box2 h3:hover{
            /*向左浮动*/
            float:left;

            font: 10px '宋体';

            /*去掉项目符号*/
            list-style: none;
        }

        .box3 a{
            color: black;

            /*去除样式*/
            text-decoration: none;
            /*字号*/
            font-size: 12px;

        }
        .box3 a:hover{
            color: red; 
            /*为文本添加下划线*/
            text-decoration: underline;
        }
        .box3 h3{
            /*上外边距*/
            margin-top: 15px;
            /*下外边距*/
            margin-bottom: 15px;
        }
        .box3 ul{
            /*去掉项目符号*/
            list-style: none;
            /*下边框  虚线*/
            border-bottom:1px dashed #deddd9;
        }
        .box3 li{
            /*下外边距*/
            margin-bottom: 15px;
        }
        .box3 .red-font{
            color: red;
            /*字体加粗*/
            font-weight: bold;
        }
        .box3 .right{
            /*右浮动*/
            float: right;
        }
        .box3 .no-border{
            /*边框*/
            border: none;
        }

    </style>
</head>
<body> 
    <div class="box1">
        <div class="box2">
            <a href="#">18年面授开班计划</a>
            <h3>近期开班</h3>
        </div>
        <div class="box3">
            <h3><a href="#">人工智能+python-高薪就业班</a></h3>
            <ul>
                <li>
                    <a href="#">开班时间:<span class="red-font">2018-04-26</span></a>
                    <a class="right" href="# "><span class="red-font">预约报名</span></a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#">开班时间:<span class="red-font">2018-03-23</span></a>
                    <a class="right" href="#"><span class="red-font">无座,名额爆满</span></a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#">开班时间:<span>2018-01-23</span></a>
                    <a class="right" href="# "><span>开班盛况</span></a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#">开班时间:<span>2017-12-10</span></a>
                    <a class="right" href="# "><span>开班盛况</span></a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#">开班时间:<span>2017-11-18</span></a>
                    <a class="right" href="# "><span>开班盛况</span></a>
                </li>
            </ul>
        </div>
        <div class="box3">
            <h3><a href="#">Android开发+测试-高薪就业班</a></h3>
            <ul>
                <li>
                    <a href="#">开班时间:<span class="red-font">2018-04-26</span></a>
                    <a class="right" href="# "><span class="red-font">预约报名</span></a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#">开班时间:<span>2018-03-23</span></a>
                    <a class="right" href="#"><span>开班盛况</span></a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#">开班时间:<span>2018-01-23</span></a>
                    <a class="right" href="# "><span>开班盛况</span></a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#">开班时间:<span>2017-12-10</span></a>
                    <a class="right" href="# "><span>开班盛况</span></a>
                </li>
            </ul>
            
        </div>
        <div class="box3">
            <h3><a href="#">大数据软件开发-青芒工作室</a></h3>
            <ul class="no-border">
                <li>
                    <a href="#">开班时间:<span class="red-font">2018-04-26</span></a>
                    <a class="right" href="# "><span class="red-font">预约报名</span></a>
                </li>
            </ul>
            
            <ul>
                <li>
                    <a href="#">开班时间:<span>2018-01-23</span></a>
                    <a class="right" href="# "><span>开班盛况</span></a>
                </li>
            </ul>
            
        </div>
    </div>
</body>
</html>
Snipaste_2018-08-12_20-37-57.png

2.翻页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻页</title>
    <style type="text/css">
        .clearfix:after{
            content: "";
             /*内联元素转换位块元素*/
            display: block;
            clear: both;
        }
        .clearfix{
            zoom: 1;
        }
        .i{
            width: 960px;
            height: 42px;
            border: 1px solid #d1d1dd;
            /*外边距*/
            margin: 0 auto;
        }
        .l{
            width: 550px;
            margin: 0 auto;
        }
        .l li{

            /*去掉项目符号*/
            list-style: none;
        }
        .l li a{
            float: left;
            /*内联元素转换位块元素*/
            display: block;

            /*去除样式*/
            text-decoration: none;
            font: 12px '雅黑';
            color: black;

            /*内边距*/
            padding: 5px 10px;

            margin-left: 8px;
            background: gold;
            margin-top: -8px;
        }
        .l li a:hover{
            background: red;
        }                   

    </style>
</head>
<body>
    <div class="i">
        <div class="l">
            <ul class="clearfix">
                <li>
                    <a href="#">上一页</a>
                </li>
                <li>
                    <a href="#">1</a>
                </li>
                <li>
                    <a href="#">2</a>
                </li>
                <li>
                    <a href="#">3</a>
                </li>
                <li>
                    <a href="#">4</a>
                </li>
                <li>
                    <a href="#" style="background: none;">...</a>
                </li>
                <li>
                    <a href="#">17</a>
                </li>
                <li>
                    <a href="#">18</a>
                </li>
                <li>
                    <a href="#">19</a>
                </li>
                <li>
                    <a href="#">20</a>
                </li>
                <li>
                    <a href="#">下一页</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>


Snipaste_2018-08-12_20-39-09.png

3.导航条

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>导航条</title>
    <style type="text/css">
        ul{
            margin: 0;
            padding: 0;
        }
        .box{
            width:960px;
            height: 40px;
            background-color: #55a8ea;

            /*边框  居中*/
            margin: 50px auto;
        }
        .box ul li{
            list-style-type: none;

            float: left;
            width: 100px;

            /*文字居中*/
            text-align: center; 
        }
        .box ul li a{
            /*去除样式*/
            text-decoration: none;
            color:  white;
            font-size:  14px;

            /*行内高度*/
            line-height: 40px;
                
        }
        .box ul li:hover{
            background-color: #00619f;  
        }
        .box1{
            /*图片  相对定位*/
            position: relative;

            /*图片的位置*/
            top: -10px; 
            left: -267px;
        }

    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="">首&nbsp;页</a></li>
            <li><a href="">网站建设</a></li>
            <li><a href="">程序开发</a></li>
            <li><a href="">网络营销</a></li>
            <img src="new.png" class="box1">
            <li><a href="">企业VI</a></li>
            <li><a href="">案例展示</a></li>
            <li><a href="">联系我们</a></li>
        </ul>
    </div>
</body>
<html>

Snipaste_2018-08-12_20-40-20.png

4.导航条2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            /*边框   实线*/
            border: 1px black solid;
            /*去掉项目符号*/
            list-style: none;
            width: 958px;
            /*外边距   居中*/
            margin: 48px auto;
            height: 40px;

        }
        .box li {
            /*外边距   上*/
            margin-top:6px;
            /*外边距   左*/
            margin-left: 10px;
            /*浮动*/
            float: left;

        }
        .box a {
            margin: 14px;
            /*文字居中*/
            text-align: center;
            /*内边距*/
            padding: 10px;
            /*去除样式*/
            text-decoration: none;
            color: #333;
            font-family: "微软雅黑";


        }
        .box a:hover{
            color: red
        }
    </style>
</head>
<body>
    <ul class="box">
        <li><a href="#">首页</a><li><li>|</li>
        <li><a href="#">网站建设</a><li><li>|</li>        
        <li><a href="#">程序开发</a><li><li>|</li>
        <li><a href="#">网络营销</a><li><li>|</li>        
        <li><a href="#">企业VI</a><li><li>|</li>
        <li><a href="#">案例展示</a><li><li>|</li>        
        <li><a href="#">联系我们</a></li><li></li>
    </ul>
</body>
</html>

Snipaste_2018-08-12_20-41-53.png

推荐阅读更多精彩内容

  • 解决塌陷 高度塌陷 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设...
    玄非氪命阅读 88评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,165评论 1 91
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 5,310评论 2 66
  • 无涯之塘阅读 160评论 0 2
  • 一.时间的分类 古希腊人认为时间有两个方面:钟表时间和沉浸时间。钟表时间即客观时间,是由钟表和日历来衡量的,比如每...
    晁逸兴阅读 959评论 0 2