css样式表，选择器；内外边距，元素转化；浮动总结——2019-3-13 22:00:00

今天的课程主要内容

css样式表，常用选择器

css层叠样式表:内联>内部>外部

css常用选择器：标签选择器，id,class等。

类选择器；单类，多类（类之间用空格隔开）；class="one two"

选择器分组：之间用“逗号”隔开； h1, .class,#id ;

派生选择器：后代选择器- div span ; div下面的所有span , 子元素选择器 div>span div的子集中的span

内外边距，元素之间的转化

padding: 两个值-上下：左右三个值上/左右/下四个值：上右下左；magin同上

单边距：padding-left 等 ; magin同上

块级、行内、行内块元素相互转换：块级-display:block 行内：display:inline 行内块：display:inline-block

浮动

float : left / right

浮动的框可以水平方向移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

浮动使元素的位置与文档流无关，因此不占据空间。

使用完浮动后要注意清除浮动 clear : both

优酷模块练习

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        li{list-style: none;float: left}
        a{text-decoration: none;color: #000;}
        .clear{clear: both} /**/
        .mr{margin-right: 10px;}
        .l{float: left} /* 左浮动 */


        a span{margin-top: 5px}
        li small{margin-top: 2px;}

        .conts{
            width: 1740px;
            margin: 0 auto;
        }
        .cont{width: 100%;
            margin-top: 20px;
        }

        .cont-ul{line-height: 70px;}
        .hot-tv img{width: 240px;height: 360px;}

        .tab li{margin-right: 20px;}

        .tv-tab img{width: 240px;height: 135px;}
        .tv-tab img:hover{box-shadow: 0px 2px 20px skyblue}

        .tv-show .tv-tab{margin-bottom: 15px;}

    </style>
</head>
<body>
<div class="conts">
    <div class="cont">
        <div class="cont-ul">
            <h2>正在热播</h2>
        </div>
        <ul class="hot-tv">
            <li class="mr">
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C774CC7859B5D335803D155?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>

            <li class="mr">
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>

            <li class="mr">
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>

            <li class="mr">
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>

            <li class="mr">
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>

            <li class="mr">
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>

            <li >
                <a href="">
                    <img src="http://r1.ykimg.com/050E00005C346D1C859B5E79630A6226?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                    <span>看中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </li>
        </ul>
        <div class="clear"></div>
    </div>

    <div class="cont">
        <div class="cont-ul">
            <h2 class="l mr">聚集 ></h2>
            <ul class="tab l">
                <li><a href="">最新</a></li>
                <li><a href="">大陆</a></li>
                <li><a href="">日韩</a></li>
                <li><a href="">热播</a></li>
            </ul>
            <div class="clear"></div>
        </div>
        <div class="tv-show">
            <div class="big-show l mr">
                <a href="">
                    <img src="http://ykimg.alicdn.com/develop/image/2019-02-13/ed026566424880372286e5d5bafbf28c.jpg"><br>
                    <span>看中国：宁夏</span>
                </a><br>
                <small>低调的宁夏 没了四级</small>
            </div>
            <ul class="tv-tab l">
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国：宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国：宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国：宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国：宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li>
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国：宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
            </ul>

            <ul class="tv-tab l">
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国：宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国：宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国：宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国：宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
                <li >
                    <a href="">
                        <img src="http://ykpic.alicdn.com/haitun-image/prod/compress/20190103/01ceb88d2d75f7e8fff266316808b974.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_100/sharpen,100"><br>
                        <span>看中国：宁夏</span>
                    </a><br>
                    <small>低调的宁夏 没了四级</small>
                </li>
            </ul>

        </div>
    </div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：

在布局中会用到很多重复的，我们可以一次搞个可以复用的布局，这样会很省事。

用了浮动过后要清除浮动

一些常用的样式可以定个类，例如左浮动 .l{ float:left }

实例

相关文章