首先非常感谢老师辛苦做出来的视频
复习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> | |
总结
昨天学习的内容算是基础,有效的复习了以前的知识,发现了很多以前没注意到的细节