博客列表 >第三节课常用css选择器/元素的显示及内外边距/浮动-2019年3月13日22时00分

第三节课常用css选择器/元素的显示及内外边距/浮动-2019年3月13日22时00分

Morning的博客
Morning的博客原创
2019年03月14日 14:08:38735浏览

第三节课内容总结如下:

  1. css层叠样式表有三种书写方式:内联/内部/外部。

  • 内联样式 针对当前元素,

  • 内部样式表 针对当前单个文档,

  • 外部样式表 主要用于共享。优先级关系:内联>内部>外部。

  1. css选择器有很多种,常用以下几种:

  • 标记选择器即标签选择器,如body{ },直接使用标签名来定义样式 。

  • id选择器,以"#"来定义 特殊性:唯一,不能重复使用该id。

  • class选择器,以"."来定义 用于描述一组元素的样式 class可以在多个元素中使用。分为单类选择器和多类选择器,多类(元素的calss属性可能不止包含一个单词而是一串单词,各个单词之间用空格隔开)

  • 派生选择器:(通过元素文档中位置的上下文关系来定义样式 优点:使标记更加简洁),主要同个层级关系来确定元素

  • 子元素选择器:子选择器使用了大于号(子结合符),该选择器只作用于子元素 ,孙辈元素无效

  1. 内外边距:(margin\padding),一个值表示全部,两个值表示  (上下) ( 左右) ,三个值表示 (上)(左右)(下),四个值表示上右下左。margin:auto;居中显示

  2. 元素的显示 (行内\块级\行内块)(display:none\block\inline-block\inline)

  • 块级元素:能够识别宽高,独占一行,多个块状元素标签写在一起,默认排列方式为从上至下‘

  • 行内元素:设置宽高无效,对margin仅设置左右方向有效,上下无效,不会自动进行换行(span/b/..)

  • 行内块:行内块状元素综合了行内元素和块状元素的特性,但是各有取舍、不自动换行 能够识别宽高(img input)

  1. 块级、行内、行内块元素相互转换:使用display属性,inline:转换为行内元素;block:转为块元素(不常用);inline-block:转换为行内块状元素。display:none;不显示

  2. 浮动:float 属性实现元素的浮动, 属性值:left right。浮动的框可以水平方向移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。注意:浮动使元素的位置与文档流无关,因此不占据空间。注意清除浮动,很重要!!!

  3. 以下为作业部分,仿优酷首页电视剧展示列表,代码如下:

  4. 实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>优酷-这世界很酷</title>
        <link rel="icon" type="image/x-icon" href="static/images/1.ico">
        <style type="text/css">
    
            * {
                margin: 0;
                padding: 0;
            }
    
            li {
                list-style: none;
                float: left;
            }
    
            a{
                text-decoration: none;
                color: #333333;
            }
    
            .l{
                float: left;
            }
    
            .mr{
                margin-right: 10px;
            }
    
            .mt{
                margin-top: 18px;
            }
    
            .clear {
                clear: both;
            }
    
            .contents {
                width: 1740px;
                margin: 0 auto;
            }
    
            .contentTitle {
                line-height: 70px;
            }
    
            .content {
                width: 100%;
                margin-top: 20px;
            }
    
            .hot_tv img {
                width: 240px;
                height: 360px;
            }
    
            small{
                color: #999999;
            }
    
            .tab li{
                margin-left: 25px;
                font-size: 16px;
            }
    
            .tab_tv img{
                width: 240px;
                height: 135px;
            }
    
        </style>
    </head>
    <body>
    <div class="contents">
        <div class="content">
            <div class="contentTitle">
                <h2>正在热播</h2>
            </div>
            <ul class="hot_tv">
                <li class="mr">
                    <a href="">
                        <img src="static/images/a.jpg"><br>
                        <span>瞰中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 美了四季</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="static/images/b.jpg"><br>
                        <span>瞰中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 美了四季</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="static/images/c.jpg"><br>
                        <span>瞰中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 美了四季</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="static/images/d.jpg"><br>
                        <span>瞰中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 美了四季</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="static/images/e.jpg"><br>
                        <span>瞰中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 美了四季</small>
                </li>
                <li class="mr">
                    <a href="">
                        <img src="static/images/f.jpg"><br>
                        <span>瞰中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 美了四季</small>
                </li>
                <li>
                    <a href="">
                        <img src="static/images/g.jpg"><br>
                        <span>瞰中国:宁夏</span>
                    </a><br>
                    <small>低调的宁夏 美了四季</small>
                </li>
            </ul>
            <div class="clear"></div>
        </div>
    
        <div class="content">
            <div class="contentTitle">
                <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>
                    <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="static/images/tv.jpg"><br>
                        <span>逆流而上的你</span>
                    </a><br>
                    <small>低调的宁夏 美了四季</small>
                </div>
                <ul class="tab_tv l">
                    <li class="mr">
                        <a href="">
                            <img src="static/images/tv1.jpg"><br>
                            <span>都挺好</span>
                        </a><br>
                        <small>姚晨郭京飞陷亲情旋涡</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="static/images/tv1.jpg"><br>
                            <span>都挺好</span>
                        </a><br>
                        <small>姚晨郭京飞陷亲情旋涡</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="static/images/tv1.jpg"><br>
                            <span>都挺好</span>
                        </a><br>
                        <small>姚晨郭京飞陷亲情旋涡</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="static/images/tv1.jpg"><br>
                            <span>都挺好</span>
                        </a><br>
                        <small>姚晨郭京飞陷亲情旋涡</small>
                    </li>
                    <li>
                        <a href="">
                            <img src="static/images/tv1.jpg"><br>
                            <span>都挺好</span>
                        </a><br>
                        <small>姚晨郭京飞陷亲情旋涡</small>
                    </li>
    
                </ul>
    
                <ul class="tab_tv l mt">
                    <li class="mr">
                        <a href="">
                            <img src="static/images/tv1.jpg"><br>
                            <span>都挺好</span>
                        </a><br>
                        <small>姚晨郭京飞陷亲情旋涡</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="static/images/tv1.jpg"><br>
                            <span>都挺好</span>
                        </a><br>
                        <small>姚晨郭京飞陷亲情旋涡</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="static/images/tv1.jpg"><br>
                            <span>都挺好</span>
                        </a><br>
                        <small>姚晨郭京飞陷亲情旋涡</small>
                    </li>
                    <li class="mr">
                        <a href="">
                            <img src="static/images/tv1.jpg"><br>
                            <span>都挺好</span>
                        </a><br>
                        <small>姚晨郭京飞陷亲情旋涡</small>
                    </li>
                    <li>
                        <a href="">
                            <img src="static/images/tv1.jpg"><br>
                            <span>都挺好</span>
                        </a><br>
                        <small>姚晨郭京飞陷亲情旋涡</small>
                    </li>
    
                </ul>
                <div class="clear"></div>
            </div>
        </div>
    
    </div>
    </body>
    </html>

    运行实例 »

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

    结果页面截图如下:

  5. 结果页面截图.png

  6. 总结:注意清除浮动,还有class的多类和单类的使用,可把某些样式写成单类,元素引用多类样式,使效果更简单更好。浮动时注意可浮动的大小,避免超出换行。






声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议