2020-11-26

最新推荐文章于 2024-09-25 11:34:48 发布

繁星为礼

最新推荐文章于 2024-09-25 11:34:48 发布

阅读量86

点赞数

文章标签： html

本文链接：https://blog.csdn.net/keqiguan/article/details/110203951

版权

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>

       <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>
       
       <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>