2020-11-26

11.26

        今晚,老高给我们讲了浮动(重点),还讲了一下表的格式,制作表格是要注意height和line-height相同,最后呈现出来就在列的中间,还有自己选择字体,同时,上节课还讲了选择器的类别以及作用,浮动时换行空格的消去老高也讲了一下,另外,还带领我们模仿了一下新浪,收获还行!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            span{
                border: 1px solid red;
                /*font-style: italic;
                font-weight: bolder;
                font-size: 36px;
                font-family: "宋体","华文彩云";*/
                font: 12px "宋体";
                /*
                 * a、顺序font-style、font-weight、font-size、font-family
                 * b、必须有font-size、font-family所选择的,如上面的"36px、华文彩云"
                 */
            }
            p{
                border: 1px solid dodgerblue;
                width: 100px;
                height: 50px;
                /*line-height:50px
                 * font-size:12px
                 * font-family:"宋体";*/
                /*line-height不能和font一同使用,font字体大小/line-height值*/
            }
            .s{
                float: left;
            }
            #T:after{
                content: "";
                display: block;
                clear: left;
            }
        </style>
    </head>
    <body>
        <span>A</span>
        <span>A</span>
        <br /><br />
        <div id="T" style="border: 1px solid red;">
            <span class="s">B</span>
            <span class="s">B</span>
            <!--<div style="clear:left"></div>-->
        </div>    
        
        <p>河南工业大学</p>
        <div style="border-bottom: 1px solid dodgerblue;">郑州</div>
    </body>

</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*标签选择器*/
            span{
                background-color: red;
            }
            /*类选择器*/
            .text-center{
                text-align: center;
            }
            /*id选择器*/
            #indent{
                text-indent: 20px;
            }
        </style>
    </head>
    <body>
        <!--
            什么是选择器:
            选择器是浏览器过滤标签的一个匹配符
        -->
        <span>河南</span>
        <span>郑州</span>
        <div class="text-center">河南工业大学</div>
        <p class="text-center">郑州大学</p>
        <!--id标记属性值不能重复-->
        <input id="indent" />
        <input />
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul{
                /*list-style: decimal;
                list-style-image: url();
                list-style-position: inside;*/
                /*list-style:decimal  url()  inside;注意顺序不能改变*/
                list-style: upper-roman;
            }
            li{
                border: 1px solid deepskyblue;
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid deepskyblue;
                font: 25px/40px "宋体";
            }
            #last-li{
                list-style: none;
            }
            a{
                color: black;
                text-decoration: none;
            }
            #first-a{
                color: blue;    
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a id="first-a" herf="https://www.baidu.com">首页</a></li>
            <li><a href="https://www.baidu.com">公司概况</a></li>
            <li><a href="https://www.baidu.com">股票资讯</a></li>
            <li><a href="https://www.baidu.com">新浪动态</a></li>
            <li><a href="https://www.baidu.com">财务信息</a></li>
            <li><a href="https://www.baidu.com">投资者日</a></li>
            <li id="last-li"><a href="https://www.baidu.com">联系我们</a></li>
        </ul>
    </body>
</html>

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页