9月6日知识总结-CSDN博客

本文链接：https://blog.csdn.net/jjj53/article/details/100587530

今天学了 1./* 行内元素/块级元素 /
/ 行内元素：img/input/a/span /
/ a/span等行内元素不能设置宽高 /
/ 块级元素：div/ul/li/ol/p/form/table /
/ display:none/block/inline/inline-block /
2./ 盒模型：width/height/border/margin/padding /
/ border-bottom /
3./ bottom: 0;定位头部
position:fixed（固定定位：相对于浏览器定位）
position:relative(相对定位，相对于该元素该在的位置)
position:(绝对定位，相对于该元素)
position:absolute*/

Document

首页
- 1111
- 2222
- 3333
新闻
- 1111
- 2222
- 3333
地图
- 1111
- 2222
- 3333

```

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	  <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* 盒模型：width/height/border/margin/padding */
        /* border-bottom */
        /* .box{
            width:100px;
            height:100px;
            border-bottom:2px solid red;
            border-top:2px double yellow;
            border-left:2px dotted green;
            border-right:2px dashed yellow;
            padding: 20px 50px 10px;
            margin:100px auto;
            padding(内边距，盒子边缘与内容之间的距离)
            
            
        } */
            
        body{
            background-color:#008000;
        }
        .box{
            width: 1160px;
            height: 60px;
            padding: 20px;
            font-size: 0px;
            background-color:#FF0000;
            margin: 100px auto;
        }
        .box div{
            width: 230px;
            height: 60px;
            display: inline-block;
            background-color: #ccc;
            border-right:2px solid #FF00FF;
        }
        .box .last{
            border-right: none;
        }
  </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="last"></div>
    </div>
    	</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动float</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;/*去点*/
        }
        body{
            background-color:#bbb;/*背景颜色*/
        }
        .headerwrap{
        	width: 100%;
        	position: fixed;
        	/* bottom: 0;定位头部 
        	  position:fixed（固定定位：相对于浏览器定位）
        	 position:relative(相对定位，相对于该元素该在的位置)
        	 position:(绝对定位 ，相对于该元素)
        	 position:absolute*/
        	
            background-color:#fff;/*头部颜色*/
        }
        .header{
            width: 1200px;
            height: 80px;
            margin: 0 auto;
        }
        .rvel{
        	width: 100px;
        	height: 100px;
        	position: relative;
        	right: 100px;
        	top: 50;
        	background-color: #000000 ;
        }
        .abso{
        	width: 458px;
        	height: 279px;
        	position: relative;

margin: 0 auto 400px;
border: 1px solid red;        	
        }
       
        .abso p{
        	width: 100%;
        	height: 50px;
        	position: absolute;
        	bottom: 0;
        	background-color: blue ;
        	transition: 1s;
        	display: none;
        	
        }
        
         .abso:hover p{
        	display: block;
        	
        }
        .goTop
        {
        	width: 30px;
        	height: 30px;
        	border: 1px solid #ccc;
        	background-color: #fff;
        	color: blue;
        	position: fixed;
        	right: 0;
        	top: 300px;
        	font-size: 20px;
        	text-align: center;
        	line-height: 30px;
        	cursor: progress;
        	}
        	.goTop li:hover{
        		color:blue;
        		background: green;
        		
        	}
        .logo{
            width: 150px;
        }
        .nav{
            float: right;
        }
        .nav li{
            float: left;
            margin-right: 20px;
            line-height: 80px;
        }
        .nav li a{
            color: #000;
        }
    </style>
</head>
<body>
    <!-- 文档流：普通流/浮动流/定位流 -->
    <div class="headerwrap">
    	<ul>
    		<li> 1111</li>
    		<li> 1111</li>
    		<li>1111</li>
    		<li>1111</li>
    		<li>1111</li>
    		<li>1111</li>
    		<li>1111</li>
    		<li>1111</li>
    		
    	</ul>
    	
        <div class="header">
<ul>
	
</ul>
            <img class="logo" src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
            <ul class="nav">
                <li>
                    <a href="">百度首页</a>
                </li>
                <li>
                    <a href="">消息</a>
                </li>
                <li>
                    <a href="">日历</a>
                </li>
                <li>
                    <a href="">设置</a>
                </li>
                <li>
                    <a href="">用户名</a>
                </li>
            </ul>
        </div>
    </div>
     <div style="height: 1000px;"></div>    
    <div class="goTop">
    	<div class="rvel"></div>
    	<li><a href="9.html" style="text-decoration: none;">^</a></li>
    </div>
    
    	<div class="abso">
    	<img src="../img/news.jpg" alt="" />
    	
    </div>
    
</html>

Document

首页
- 1111
- 2222
- 3333
新闻
- 1111
- 2222
- 3333
地图
- 1111
- 2222
- 3333

```

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	  <style>
        *{
            padding: 0;
            margin: 0;
        }
        /* 盒模型：width/height/border/margin/padding */
        /* border-bottom */
        /* .box{
            width:100px;
            height:100px;
            border-bottom:2px solid red;
            border-top:2px double yellow;
            border-left:2px dotted green;
            border-right:2px dashed yellow;
            padding: 20px 50px 10px;
            margin:100px auto;
            padding(内边距，盒子边缘与内容之间的距离)
            
            
        } */
            
        body{
            background-color:#008000;
        }
        .box{
            width: 1160px;
            height: 60px;
            padding: 20px;
            font-size: 0px;
            background-color:#FF0000;
            margin: 100px auto;
        }
        .box div{
            width: 230px;
            height: 60px;
            display: inline-block;
            background-color: #ccc;
            border-right:2px solid #FF00FF;
        }
        .box .last{
            border-right: none;
        }
  </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="last"></div>
    </div>
    	</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动float</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;/*去点*/
        }
        body{
            background-color:#bbb;/*背景颜色*/
        }
        .headerwrap{
        	width: 100%;
        	position: fixed;
        	/* bottom: 0;定位头部 
        	  position:fixed（固定定位：相对于浏览器定位）
        	 position:relative(相对定位，相对于该元素该在的位置)
        	 position:(绝对定位 ，相对于该元素)
        	 position:absolute*/
        	
            background-color:#fff;/*头部颜色*/
        }
        .header{
            width: 1200px;
            height: 80px;
            margin: 0 auto;
        }
        .rvel{
        	width: 100px;
        	height: 100px;
        	position: relative;
        	right: 100px;
        	top: 50;
        	background-color: #000000 ;
        }
        .abso{
        	width: 458px;
        	height: 279px;
        	position: relative;

margin: 0 auto 400px;
border: 1px solid red;        	
        }
       
        .abso p{
        	width: 100%;
        	height: 50px;
        	position: absolute;
        	bottom: 0;
        	background-color: blue ;
        	transition: 1s;
        	display: none;
        	
        }
        
         .abso:hover p{
        	display: block;
        	
        }
        .goTop
        {
        	width: 30px;
        	height: 30px;
        	border: 1px solid #ccc;
        	background-color: #fff;
        	color: blue;
        	position: fixed;
        	right: 0;
        	top: 300px;
        	font-size: 20px;
        	text-align: center;
        	line-height: 30px;
        	cursor: progress;
        	}
        	.goTop li:hover{
        		color:blue;
        		background: green;
        		
        	}
        .logo{
            width: 150px;
        }
        .nav{
            float: right;
        }
        .nav li{
            float: left;
            margin-right: 20px;
            line-height: 80px;
        }
        .nav li a{
            color: #000;
        }
    </style>
</head>
<body>
    <!-- 文档流：普通流/浮动流/定位流 -->
    <div class="headerwrap">
    	<ul>
    		<li> 1111</li>
    		<li> 1111</li>
    		<li>1111</li>
    		<li>1111</li>
    		<li>1111</li>
    		<li>1111</li>
    		<li>1111</li>
    		<li>1111</li>
    		
    	</ul>
    	
        <div class="header">
<ul>
	
</ul>
            <img class="logo" src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
            <ul class="nav">
                <li>
                    <a href="">百度首页</a>
                </li>
                <li>
                    <a href="">消息</a>
                </li>
                <li>
                    <a href="">日历</a>
                </li>
                <li>
                    <a href="">设置</a>
                </li>
                <li>
                    <a href="">用户名</a>
                </li>
            </ul>
        </div>
    </div>
     <div style="height: 1000px;"></div>    
    <div class="goTop">
    	<div class="rvel"></div>
    	<li><a href="9.html" style="text-decoration: none;">^</a></li>
    </div>
    
    	<div class="abso">
    	<img src="../img/news.jpg" alt="" />
    	
    </div>
    
</html>