2021-07-29

最新推荐文章于 2022-04-13 16:00:34 发布

lu2211866078

最新推荐文章于 2022-04-13 16:00:34 发布

阅读量118

点赞数 1

本文链接：https://blog.csdn.net/lu2211866078/article/details/119202266

版权

       首先非常感谢老师辛苦做出来的视频
           复习web第一天
           今天的内容
   1.了解什么是web前端

   2.
学习盒模型

2.简单的例子
   关于盒模型background,width.height,border属性的使用
   <!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           div{
               width: 200px;
               height: 200px;
               background-color: aquamarine;
               border-left-color: #CD5C5C;
               border-left-width: 3px;
               border-left-style: dashed;
           }
       </style>
   </head>
   <body>
       <div></div>
   </body>
</html>

3.盒模型padding margin属性的使用

换行
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	div{
	width: 300px;
	height: 300px;
	background-color: #FF1493;
	/* 创造IE盒模型创造怪异盒模型 */
	box-sizing: border-box;

	/* 设置四个方向 */
	padding: 20px;
	/* 第一个值代表上下第二个值代表左右 */
	/* padding: 20px 100px; */
	/* 从上开始顺时针设置 */
	/* padding: 10px 20px 30px 40px; */

	/*
	分别设置padding
	padding-left、right、top、bottom
	*/
	/* padding-left: 100px; */

	/*
	正常盒模型：设置padding和border会让元素变大
	IE盒模型：设置padding和border不会让元素变大会压缩内容区域
	*/
	margin-left: 200px;
	border: 100px solid aquamarine;
	}
	</style>
	</head>
	<body>
	<div>
	你好吗
	</div>
	</body>
	</html>

4.奥运五环的案例

换行
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	div{
	width: 200px;
	height: 200px;
	border: 10px solid red;
	border-radius: 50%;
	}
	#black{
	border-color: black;
	margin-top: -220px;
	margin-left: 220px;
	}
	#green{
	border-color: green;
	margin-top: -220px;
	margin-left: 440px;
	}
	#yellow{
	border-color: yellow;
	margin-top: -110px;
	margin-left: 110px;
	}
	#blue{
	border-color: blue;
	margin-top: -220px;
	margin-left: 330px;
	}
	</style>
	</head>
	<body>
	<div></div>
	<div id="black"></div>
	<div id="green"></div>
	<div id="yellow"></div>
	<div id="blue"></div>
	</body>
	</html>

总结

昨天学习的内容算是基础，有效的复习了以前的知识，发现了很多以前没注意到的细节

lu2211866078

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-29

首先非常感谢老师辛苦做出来的视频复习web第一天今天的内容 1.了解什么是web前端 2.学习盒模型2.简单的例子关于盒模型background,width.height,border属性的使用 <!DOCTYPE html><html> <head> <meta charset="utf-8"> &...
复制链接

扫一扫