第6章 HTML基础学习-CSS盒子模型和定位法-JS概述等

最新推荐文章于 2023-10-14 16:07:08 发布

violent_sunset

最新推荐文章于 2023-10-14 16:07:08 发布

阅读量167

点赞数

分类专栏： JAVA/JAVA SE 学习记录文章标签： HTML基础学习

本文链接：https://blog.csdn.net/qq_36346496/article/details/80369439

版权

JAVA/JAVA SE 学习记录专栏收录该内容

28 篇文章 0 订阅

订阅专栏

部分HTML代码：

03-css-box-model

02-no-full-setting.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			border:5px solid blue;
		}
		#mydiv{
			border:20px groove green;/*这是三个样式的缩写，主要是便捷*/
			padding:10px;
			display:inline-block;
			width:60px;
			height:60px;
			margin:20px;
			margin-right: 50px;
			/*margin-right: 30px;
			margin-top:30px;
			margin-left: 30px;
			margin-bottom: 30px;*/
		}
		#mydiv2{
			border-width:10px;
			border-style: groove;
			border-color:red;
			display:inline-block;
			
		}
	</style>
</head>
<body>
	<div id="mydiv">我是内容</div>
	<div id="mydiv2">我是隔壁内容</div>
</body>
</html>

03-box-default.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>box-default</title>
	<link rel="stylesheet" type="text/css" href="normalize.css">
	<style type="text/css">
		/*browser margin/padding resetting*//*
		*{
			margin:0px;
			padding:0px;

		}*/
		span{
			border:20px groove red;
		}
	</style>
</head>
<body>
	<!-- 不同的浏览器，对于相同的元素的默认的padding和magin都不尽相同，所以我们需要统一标准，这样才能拥有共同的开发基础，才能使你的界面在不同的浏览器中有同样的效果。 -->
	<span>我是内容</span>
</body>
</html>

04-rapid-setting.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>rapid-html</title>
	<style type="text/css">

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#mydiv{
			border:20px groove green;/*这是三个样式的缩写，主要是便捷*/
			padding:10px;
			display:inline-block;
			width:60px;
			height:60px;
		}
		#mydiv2{
			border-width:3px;
			border-style: groove;
			border-color:red;
			display:inline-block;
			
		}
	</style>
</head>
<body>
	<div id="mydiv">我是内容</div>
	<div id="mydiv2">我是隔壁内容</div>
</body>
</html>

#mydiv{border:3px solid red;width:100px;height:60px;border-width-left:6px;margin:6px 20px;display:inline;}</style></head><body><div id="mydiv">我是div</div><span>abcd</span><input type="radio" id="sex">男</body></html>

concept.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#mydiv{
			border:20px groove green;/*这是三个样式的缩写，主要是便捷*/
			padding:10px;
			display:inline-block;
			width:60px;
			height:60px;
		}
		#mydiv2{
			border-width:3px;
			border-style: groove;
			border-color:red;
			display:inline-block;
			
		}
	</style>
</head>
<body>
	<div id="mydiv">我是内容</div>
	<div id="mydiv2">我是隔壁内容</div>
</body>
</html>

04-cs-display

01-hide-show.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>rapid-html</title>
	<style type="text/css">
		#mydiv,#mydiv2{
			border:3px solid red;
			width:100px;
			height:60px;
			margin:6px 10px 20px 30px;
			display:inline-block;
		}
		/*display有如下这些属性:none(消失)|block|inline-block|initial|inherited|inline*/
		span{
			/*display:block;*/
			visibility:hidden;
		}
	</style>
</head>
<body>
	<!-- 默认情况下div是一个块元素。是会自动换行的。而inline元素不会自动换行。
	block元素：默认占满一行，及时不占满一行，也会换行，可以设置宽和高。
	inline元素：不会自动换行，不能设置宽高，他的宽和高是由内容决定的。能够包住内容就可以了。 -->
	<div id="mydiv">我是div</div>
	<div id="mydiv2">我是DIV</div>
	<span>abcd</span><input type="radio" id="sex">男
</body>
</html>

05-css-position

absolute-position.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>absolute position</title> 
	<style type="text/css">
		/*css reset*/
		*{
			margin:0px;
			padding:0px;
		}/*
		body{
			border:2px solid blue;
			height:500px;
		}*/

		/*任何一个网页元素在文档中根据其所在的情况，都有一个默认定位位置。我们称呼这个位置为在文档流中的位置*/
		span{
			display:inline-block;
			width:100px;
			height:60px;
			border:3px solid red;
		}
		/*绝对定位：
			要被定位的元素的某个顶点和其父亲的某个顶点做偏移
			如果父级元素不具备定位参考，就向更上一级元素进行查找，希望能找到具备定位参照的元素，如果找不到，就根据body做偏移。

			哪些元素具备定位参考：position元素设置：absolute relative
		*/
		#myspan{
			position:absolute;
			left:100px;
			top:100px;
		}
		#mydiv{
			position:absolute;
			height:400px;
			width:400px;
			border:2px solid red;
		}
	</style>
</head>
<body>
	<div id="mydiv">
		<span id="myspan">星期一</span>
	</div>
	
</body>
</html>

fixed-position.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>relative-position</title>
	<style type="text/css">
		*{
			margin:0px;
			padding:0px;

		}
		span{
			display:inline-block;
			border:3px solid red;
			height:60px;
			width:100px;
		}
		/*/相对定位：相对于*/
		#myspan2{
			position:fixed;
			right:10px;
			top:20px;
		}
		#myspan2>button{
			position:absolute;
			right:2px;
			top:2px;
		}
	</style>
	<script type="text/javascript">
		
		function closeDIV(){
			document.getElementById("myspan2").style.visibility="hidden";
		}
	</script>
</head>
<body>
	<span id="myspan1">星期一</span>
	<span id="myspan2">我是广告...<button οnclick="closeDIV();">X</button></span>
	<span id="myspan3">星期三</span>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
</body>
</html>

float-position.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		
		#content{
			width:100px;
			height:90px;
			text-align:center;
			color:#fff;
			background-color: blue;
			display: inline-block;;
			float:right;
			margin-left:20px;
		} 
	</style>
</head>
<body>	
	<div id="content">我是内容</div>
	<div style="border:2px solid red;">
		we should learn how to get on with others .where you are .....please.....we should learn how to get on with others .where you are .....please.....we should learn how to get on with
	</div>
	<div>
		where you are .....please.....we should learn how to get on with others .where you are .....please.....we should learn how to get on with others .where you are .....please.....we should learn how to get on with others. .where you are .....please.....we should learn how to get on with others .where you are .....please.....we should learn how to get on with others .where you are .....please.....we should learn how to get on with others .where you are .....please.....we should learn how to get on with others .where you are .....please.....we should learn how to get on with others .where you are .....please.....we should learn how to get on with others .where you are .....please.....we should learn how to get on with others .where you are .....please.....we should learn how to get on with others .where you are .....please.....
	</div>	
</body>
</html>

relative-position.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>relative-position</title>
	<style type="text/css">
		*{
			margin:0px;
			padding:0px;

		}
		span{
			display:inline-block;
			border:3px solid red;
		}
		/*/相对定位：相对于*/
		#myspan2{
			position:relative;
			left:10px;
			top:20px;
		}
	</style>
</head>
<body>
	<span id="myspan1">星期一</span>
	<span id="myspan2">星期二</span>
	<span id="myspan3">星期三</span>

</body>
</html>