2020-12-03

最新推荐文章于 2024-09-23 17:12:42 发布

繁星为礼

最新推荐文章于 2024-09-23 17:12:42 发布

阅读量25

点赞数

文章标签： html

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

版权

12.3

今天，老高讲了一下其它选择器，包括分组选择器、后代选择器、通配符选择器，我们也知道了相关的作用，除此之外，老高还让我们模仿着做一下新浪的页面，自己做了一小点，做成之后感觉还挺有成就感的，也期待着能跟着老高继续后续的知识！

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           /*.a1{
               font-size: 36px;
           }
           #b1{
               font-size: 36px;
           }*/
           /*分组选择器:由一组选择器构成的一种选择器*/
           .a1,p{
               font-size: 36px;
           }
           /*后代选择器:父子选择器构成的一种选择器*/
           /*.a1{color: red;}*/
           /*body span{color: red;}*/
           html body .a1{
               color: red;
           }

           /*通配符选择器"*"*/
           /**{
               font-family: 华文彩云;
           }*/
           /*等价于html,head,meta,title,style,body,span,p{
           *    font-family: 华文彩云;
           }*/
           *{
               margin: 0;
               padding: 0;
           }
       </style>
   </head>
   <body>
       <span class="a1">河南郑州</span>
       <p id="b1">河南工业大学</p>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           *{
               margin: 0px;
               padding: 0px;
           }
           div{
               border: 1px solid red;
           }
           #header{
               padding-top: 20px;
               padding-bottom: 26px;
               width: 1200px;
               margin: 0px auto;
           }
           #header #logo a img{

               float: left;
           }
           #header #gjh{
               height: 47px;
               line-height: 47px;
               float: right;
           }
           #container{
               width: 1200px;
               margin: 0px auto;
           }
       </style>
   </head>
   <body>
       <div id="header">
           <div id="logo">
               <a href="http://www.sina.com.cn/" target="_blank"><img src="http://n.sinaimg.cn/tech/ir/imges/logo.png" alt="logo"></a>
           </div>
           <div id="gjh">国际化</div>
           <div style="clear: both;"></div>
       </div>
       <div id="container"">中部</div>
       <div id="footer">底部</div>
   </body>
</html>