2019/9/7 HTML复习回顾

最新推荐文章于 2024-07-17 21:55:35 发布

chengxunai

最新推荐文章于 2024-07-17 21:55:35 发布

阅读量121

点赞数

本文链接：https://blog.csdn.net/chengxunai/article/details/100594666

版权

subMenu复习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			a{
				text-decoration: none;
				/*用标签选择器把下划线都去掉*/
			}
			/*行内元素：全都聚在一行/块级元素：独占一行*/
			/*行内元素:img/input/a/span*/
			/*a/span等行内元素不能设置宽高*/
			/*块级元素:div/ul/li/ol/p/form/table*/
			/*display：none/block/inline*/
			.nav{
				font-size: 0px;
				/*把打代码时候换行留的空格去掉 但是里面的字体也都去掉了 所以要在li里面设置字体大小*/
			}
			.nav>li{
				font-size: 16px;
				display: inline-block;
				vertical-align: top;/*垂直对齐方式*/
				width: 100px;
				height: 30px;
				margin-right: 2px;
				background-color:beige ;
				text-align: center;
				line-height: 30px;
				color: black;
			}
			.subNav{
				display: none;
				/*隐藏二级标题*/
			}
			.nav li:hover .subNav{
			display: block;	/*当鼠标划过一级标题中li的时候二级标题出现*/
			color: #fff;
			background-color: lightblue;
			}
			.subNav li:hover{
			color: #fff;
			background-color: plum;
			}
		</style>
	</head>
	<body>
		<span style="display: block;width: 100px; background-color: red;">DD</span>
		<!--把行内元素转换成块元素了才把背景颜色宽度100px变成红色 行内元素变块元素 display：block-->
		<ul class="nav">
			<li>
				首页
				<ul class="subNav">
				<li>000</li>
				<li>000</li>
				<li>000</li>
			</ul>
			</li><!--图片中的小空格是因为打代码的时候的换行-->
		<li>
			新闻
			<ul class="subNav">
				<li>111</li>
				<li>111</li>
				<li>111</li>
			</ul>
		</li>
		<li>
			地图
			<ul class="subNav">
				<li>222</li>
				<li>222</li>
				<li>222</li>
		</ul>
		</li>
		</ul>
	</body>
</html>

box复习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-color: gray;
			}
			/*盒模型:width/height/border/margin：盒子与盒子之间的间距/padding：盒子内内容之间的间距*/
			/*border-bottom 只写下边框*/
			.box{
				width: 100px;
				height: 100px;
				border-bottom: 5px solid yellow;
				border-top: 5px solid yellowgreen;/*solid单线*/
				border-left: 5px double lightblue;/*double双线*/
				border-right: 5px dashed red;/*dashed虚线*/
				padding: 20px;/*内边距20px 让字体不贴着边框 加了内边距后方框的大小宽度变成了150px 内边距左右各20px+宽度100px+框两边各5px*/
				margin:0 auto;/*四个数的时候上右下左，三个数的时候数值意思是上 左右 下，两个数的意思是 上下 左右。*/
				margin-top:100px;/*盒子的上下左右都加了100px*/
				
			}
			.box1{
				width: 1160px;
				height: 60px;
				padding: 20px;
				background-color: white;
				margin: 100px auto 100px;
				font-size: 0px;
				}
			.box2{
				width: 230px;
				height: 60px;
				display:inline-block;
				background-color: pink;
				border-right:2px solid red;
				font-size: 16px;
			}	
			.box1 .last{
				border-right: none;
			}
		</style>
	</head>
	<body>
		<div class="box">
			马上周末了，好开心！！！<!--默认时字体是贴着边框的边的-->
		</div>
		<div class="box">
			马上周末了，好开心！！！<!--默认时字体是贴着边框的边的-->
		</div>
		<div class="box1">
			<div class="box2">1</div>
			<div class="box2">2</div>
			<div class="box2">3</div>
			<div class="box2">4</div>
			<div class="box2 last">5</div>
		</div>
	</body>
</html>

float复习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>float浮动</title>
		<style>
			*{
				padding: 0;
				margin: 0;
				
			}
			li{
				list-style: none;
			}
			body{
				background-color: gainsboro;
			}
			.headerwrap{
				width: 100%;
				position: fixed;/*相对于浏览器定位 定位时默认是定位在顶部*/
				/*bottom: 0; 定位到底部*/
				/*top: 20px;定位到距离顶部20px*/
				background-color: #FFFFFF;
			}
			.header{
				width: 1200px;
				height: 80px;
				margin: 0 auto;
				
			}
			.logo{
				width: 150px;
			}
			.nav{
				float: right;
			}
			.nav li{
				float: left;/*浮动可以把块级元素转成行内块元素 能够让元素在一行内呆着/浮动有包裹性浮动了的元素不会再独占一行/向上性 只要上面还有位置他就会往上走/浮动的元素不重叠*/
				margin-right: 20px;
				line-height: 80px;
				cursor: pointer;/*鼠标经过的时候鼠标标志变成一个手指*/
			}
			h1{
				float: left;/*想要在一行只能浮动 不然会把下面的li挤出去*/
			}
			.nav li a{
				color: #000000;
			}
			.gotop{
				width: 30px;
				height: 30px;
				border: 1px solid #ccc;
				color: blue;
				position: fixed;/*相对于浏览器定位 定位时默认是定位在顶部 先设置成了相对定位 下面的top right就是相对定位的数值*/
				/*bottom: 0; 定位到底部*/
				top: 200px;/*这是相对定位 基于原始位置距离上面200px 原始位置下面的元素是不会上移的 原始位置的部分占用不会消失*/
				right: 0;
				background-color: #FFFFFF;
				font-size: 30px;
				text-align: center;
				line-height: 30px;
				cursor: pointer;
			}
			.gotop:hover{
				background-color: plum;
				color: white;
			}
			.abso{
				width: 150px;
				height: 113px;
				position: relative;
				margin: 0 auto 400px;
				border: 1px solid red;
				
			}
			.abso p{
				width: 100%;
				height: 50px;
				position: absolute;
				/*bottom: 0;*/
				bottom: -50px;
				background-color: rgba(888,123,123,0.5);/*框里有字的时候用rgba来调试透明度这样不会影响字体的透明度*/
				/*opacity: 0.5;透明度1是全实0是全透没了*/
				/*display: none;*/
				transition: 1s;
			}
			.abso:hover p{
				/*display: block;	*/
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<!--文档流：普通流/浮动流：浮动不会超出父元素/定位：脱离普通流 压在别人上面-->
		<div class="headerwrap">
			<!--这层写了一个百分百的白条框--> 
		<div class="header">
			<h1>
			<img src="https://www.baidu.com/img/bd_logo1.png"/ class="logo">
			</h1>
			<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 class="">
			<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>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<li>1111</li>
				<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>
		<div class="abso">
			<img src="img/1546003256604.jpeg"/ class="logo">
			<p>我好开心</p>
		</div>
		<div class="gotop">
			^
		</div>
	</body>
</html>

今日刘老师总结复习内容

盒模型
width
height
border : 1px solid red;
border-top
border-right
border-bottom
border-left
margin(外边距：盒子之间的距离)
margin-top
margin-right
margin-bottom
margin-left
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 : 元素不显示

浮动(float)
浮动可以把块级元素转成行内块元素能够让块元素在一行内呆着
包裹性：浮动有包裹性浮动了的元素不会再独占一行
向上性：只要上面还有位置他就会往上走
不重叠

定位（position）
position : fixed;(固定定位：相对于浏览器定位)
position : relative;(相对定位：相对于该元素自身所在的位置定位)
position : absolute;(绝对定位：相对于该元素有定位属性的父元素去定位，如果父元素都没定位属性，相对于body定位)
position : static;(不定位)

自我总结

今天上课的内容较多，重点难点主要是在定位，要想达到想要的效果就要选择适合的定位方式，这需要多多练习，在课堂上能跟上刘老师的节奏，讲课的速度适中，所以听起来也不费劲，讲了一些概念把以前的疑惑给解答了，以前上课老师并没有解释用法，只是一个劲的大家跟着打所以有点懵，我会继续加油的！

chengxunai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019/9/7 HTML复习回顾

subMenu复习<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> *{ padding: 0; margin: 0; } li{ list-styl...
复制链接

扫一扫