9-6 h5 总结~导航~图片浮动~盒子列表

最新推荐文章于 2023-05-18 10:09:46 发布

小菜鸟码住

最新推荐文章于 2023-05-18 10:09:46 发布

阅读量201

点赞数

分类专栏： h5知识

本文链接：https://blog.csdn.net/hfyldx/article/details/100574414

版权

h5知识专栏收录该内容

19 篇文章 0 订阅

订阅专栏

总结
行内元素、块级元素
a/span等元素不能设置宽高
行内元素：input/a/span
块级元素：div/ul/li/ol/p/form/table
display:none/block/inline/inline-block
1.盒模型

width
height
boder:1px solid red;
margin
padding
border-right
border-bottom
border-left
margin(外边距）
padding（内边距）
padding:10px;四个方向一样
padding：20px 10px;上下/左右
padding：10px 20px 30px 上/左右/下
padding：10px 20px 30px 40px 上/右/下/左
display:block/inline/inline-block/none;
block:将元素转化成块级元素
inline:将元素转化成行内元素
inline-block:将元素转化成行内块元素
none:元素不显示
浮动
包裹性
向上性
不重叠
定位(position)
position:fixed;(固定定位：相对于浏览器定位）
position:relative;(相对定位：相对于该元素自身所在的位置）
position:absolute(绝对定位：相对于该元素有定位属性的父元素定位，如果父元素都没定位属性，相对于body定位）

代码如下

<style>
		*{
			padding: 0;
			margin: 0;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration:none;
		}
		.nav{
			font-size: 0px;
		}
		.nav>li{
			vertical-align:top;/*垂直顶对齐*/
			display: inline-block;/*导航隐藏和显示*/
			width: 100px;
			height: 30px;
			font-size: 20px;
			background: yellow;
			text-align: center;
			line-height: 30px;
			margin-right: 10px;
		}
		.nav a:hover{color:red;}
		
		.subNav{
			display: none;
			background-color:green;
		}
		.subNav li:hover{
			/*background-color: blue;*/
			color:blue;
		}
		.nav li:hover .subNav{
			display: block;
		}
		
		</style>
	</head>
	<body>
      <ul class="nav">
      	<li>
      		<a href="">首页</a>
      		<ul class="subNav">
      			<li>111</li>
      			<li>333</li>
      			<li>444</li>
      		</ul>
      	</li>
      	<li>
      		<a href="">新闻</a>
      		<ul class="subNav">
      			<li>111</li>
      			<li>333</li>
      			<li>444</li>
      		</ul>
      	</li>
      	<li>
      		<a href="">地图</a> 
      		<ul class="subNav">
      			<li>111</li>
      			<li>333</li>
      			<li>444</li>
      		</ul>
      	</li>
      </ul>

在这里插入图片描述
盒模型：width/height/border/margin/padding
代码如下

<style> 
        *{ 
            padding: 0; 
             margin: 0; 
        } 
     
         /* .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; 
            
        } */ 
       body{ 
            background-color:grey; 
        } 
        .box{ 
             width: 1160px; 
             height: 60px; 
             padding: 20px; 
             font-size: 0px; 
             background-color:white; 
             margin: 100px auto; 
        } 
         .box div{ 
             width: 230px; 
             height: 60px; 
             display: inline-block; 
            background-color:grey; 
             border-right:2px solid red; 
      } 
        .box .last{ 
             border-right: none; 
        } 
    </style> 
 </head> 
<body> 
     <div class="box">         
     	<div></div> 
        <div></div> 
        <div></div> 
        <div></div> 
        <div class="last"></div> 
    </div>

在这里插入图片描述
浮动
代码如下

<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-color:#bbb;
				height: 3000px;
			}
			.headerwrap{
				background-color: #fff;
				position: fixed;
				width: 100%;
				top:0;
				z-index: 1000;
				/*bottom: 0;*/
				/*top: 100px;*/
			}
			.header{
				width: 1200px;
				height: 80px;
				margin: 0 auto;
				background-color: #fff;
			}
			.nav{
				float: right;
			}
			.nav li{
				float: left;
				margin-left: 20px;
				line-height: 80px;
				
			}
			.nav a:hover{
				color: blue;
			}
			.nav li a{
					color: black;
				}
				
			.logle{
				width: 150px;
			}
			li{
				list-style: none;
			}
			.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: pointer;
			
			}
			.goTop:hover{
				background-color: blue;
				color: white;
			}
			.rela{
				width: 100px;
				height: 100px;
				background-color: red;
				top: 100px;
				position: absolute;
			}
			.abso{
				width: 450px;
				height: 279px;
				margin: 0 auto 400px;
				border: 2px solid blue;
				position: relative;
				overflow: hidden;/*溢出处理*/
			}
			.abso p{
				width: 100%;
				height: 50px;
				position: absolute;
				bottom:-50px;
				background-color:rgba(0,0,255,0.5);
				opacity:0.5;/*不透明度*/
				/*display: none;*/
				transition:1s;/*过度*/
			}
			.abso:hover p{
				/*display: block;*/
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<!--文档流：普通流/浮动流/定位流-->
		<div class="headerwrap">
		<div class="header">
			
			<img class="logle" src="https://www.baidu.com/img/bd_logo1.png">
			 <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="position: relative; height: 100px;margin-top:80px ;"
		<div class="rela">
			
		</div>
		<ul>
		<li>11</li>
		<li>11</li>
		<li>11</li>
		<li>11</li>
		<li>11</li>
		<li>11</li>
		</ul>
		
		<div class="abso">
			<p>下课了</p>
			<img src="img/news.jpg">
		</div>
		
		
		<div class="goTop">
			^
		</div>

在这里插入图片描述

小菜鸟码住

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9-6 h5 总结~导航~图片浮动~盒子列表

总结行内元素、块级元素a/span等元素不能设置宽高行内元素：input/a/span块级元素：div/ul/li/ol/p/form/tabledisplay:none/block/inline/inline-block1.盒模型widthheightboder:1px solid red;marginpaddingborder-rightborder-bottom...
复制链接

扫一扫

专栏目录