css-summary2布局与选择器

最新推荐文章于 2022-08-16 17:04:39 发布

Asteroid 325

最新推荐文章于 2022-08-16 17:04:39 发布

阅读量125

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43846020/article/details/102757844

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

           **布局与选择器**

在这里插入图片描述

div容器特点：一个空div，默认宽度为100%,高度为0
在这里插入图片描述
当给容器中添加内容时，容器高度才不为0

<body>在一般情况下会有间隙与页面上下左右
所以：
<body style="margin:0;">
可以消除间隙

行高：
line-height行高，跟容器的距离保持一致=》垂直    

``
有些代码重复写，所以通过选择器将样式与标签内对应起来（id,class）
1.id选择器：id表示身份，在页面中元素的id不允许重复，因此id选择器只能选择单个元素
2.标签选择器：根据标签名称选择相应的而所有标签
3.   .nav类（别）选择器：选择拥有该类别的多个元素
4.   * 通用选择器，针对页面上所有的标签都生效

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   html{background-color:#ddd;
   
   }
   body{
    margin:0;
    
   }
   #navigation{
    height:80px;
    line-height: 80px;
    text-align:center;
    background-color:white;
    
   }
   #bottom{
    height:40px;
    line-height:40px;
    text-align:center;
    font-size:14px;
    color:gray;
    
    
   }
   .nav{
    text-decoration: none;
    color:black;
    margin:0 15px;
   }
   #banner img{
    width:100%;
    
   }
  </style>
 </head>
 <body>
  <div id="banner">
   <img  src="../imge/1223.jpg">
  </div>
  <div id="navigation">
   <a href="#" class="nav">首页</a>
   <a href="#" class="nav">关于王丽</a>
   <a href="#" class="nav">产品世界</a>
  </div>
  
  <div id="bottom">
    版权
  </div>
 </body>
</html>