归零——CSS学习-第五天

CSS学习

1、1em=1font-size，em单位是相对的，当你的字体是16px时，1em就相当于16px。
2、规范统一：当html的功能与css的功能相冲突时，一般以工作要求为准，只用一种
3、文件打包压缩到服务器二种方法：
▶︎将标签字母缩短
▶︎去除空格、回车

标签分类

1.行级元素（内联/inline-display：inline）
feature（特点）：内容决定元素所占位置，不可以通过CSS改变宽高
span，strong，em，a，del
2.块级元素（block-display：block）
feature：独占一行，可以通过CSS改变宽高
div，p，ul，li，ol，form，address
3.行级块元素（diaplay：inline-block）
feature：内容决定大小，可以改变宽高
img

凡是带有inline的元素都有文字特性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #news{
                border: 1px solid black;
                /*对齐方式*/
                text-align: center;
                height: 200px;
                line-height: 200px;
            }
            #newcon{
                border: 1px solid black;
                text-align: left;
                height: 200px;
                /*行高1.2倍*/
                line-height: 1.2em;
                /*文本缩进*/
                text-indent: 2em;       
            }
            div>del{
                /*除去删除线*/
                text-decoration: none;
            }
            /*模仿a标签*/
            div.a{
                /*添加下划线:overline上滑线*/
                text-decoration: underline;
                color: rgb(0,0,238);
                /*cursor: pointer小手，help问号，copy➕，等;*/
                cursor: w-resize;
            }
            /*伪类选择器之一*/
            a:hover{
                color: green;
                font-size: 18px;
                text-decoration: none;
            }
            /*一般开发上传到服务器时会压缩,导
             * 致显示样式与预期的不一样,这是由于压缩时去掉了回车,导致开始的图片排列改变了*/
            #img img{
                width: 200px;
                margin-left: 6px;
                
            }
        </style>
    </head>
    <body>
        <div id="news">新闻信息</div>
        <div id="newcon">
            百度新闻是包含海量资讯的新闻服务平台,真实反映每时每刻的新闻热点。
            您可以搜索新闻事件、热点话题、人物动态、产品资讯等,快速了解它们的最新进展。
        </div>
        <div id="">
            <del>原价50元</del>
            <span>原价50元</span>
            <br />
            <a href="">www.baidu.com</a>
            <span class="a">www.baidu.com</span>
        </div>
        <div id="img">
            <img src="http://b-ssl.duitang.com/uploads
                /item/201704/23/20170423162212_TrzFZ.thumb.700_0.jpeg" alt="" /><img src="http://b-ssl.duitang.com/uploads
                /item/201704/23/20170423162212_TrzFZ.thumb.700_0.jpeg" alt="" /><img src="http://b-ssl.duitang.com/uploads
                /item/201704/23/20170423162212_TrzFZ.thumb.700_0.jpeg" alt="" /><img src="http://b-ssl.duitang.com/uploads
                /item/201704/23/20170423162212_TrzFZ.thumb.700_0.jpeg" alt="" />
            
        </div>
    </body>
</html>

效果展示

效果图.gif

最后编辑于：2020.02.27 09:27:04