一、复习
1.DOCTYPE 标签
DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的
文档类型定义(DTD)来解析文档。
2. CSS 选择器
<style>
div{
}
</style>
3. id 选择器
#idName{
}
<div id="idName"></div>
4. 类选择器
.className{
}
<div id="idName"></div>
二、内联 与 块
div 独占一行
属性设置
display: none;
display: block;
绿水字体格式,内联,行内,块控制
<!-- 2003内联——行内——块状.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
margin: auto;
}
/* 绿水字体控制,内联,块,字体格式 */
#yonge{
width: 200px;
height: 200px;
border: 1px solid gray;
float: left;
}
#lvshui{
color: green;
text-shadow: 1px 1px 1px red;
}
#yonge1{
width: 200px;
height: 200px;
border: 1px solid gray;
float: left;
}
#lvshui1{
color: green;
text-shadow: 1px 1px 1px red;
display: block;
width: 20px;
height: 20px;
border: 1px solid red;
}
#yonge2{
width: 200px;
height: 200px;
border: 1px solid gray;
float: left;
}
#lvshui2{
font-size: 40px;
color: green;
text-shadow: 1px 1px 1px red;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="yonge">
鹅鹅鹅<br>
曲项向天歌<br>
白毛浮<span id="lvshui">绿水</span><br>
红掌拨清波<br>
</div>
<div id="yonge1">
鹅鹅鹅<br>
曲项向天歌<br>
白毛浮<span id="lvshui1">绿水</span><br>
红掌拨清波<br>
</div>
<div id="yonge2">
鹅鹅鹅<br>
曲项向天歌<br>
白毛浮<span id="lvshui2">绿水</span><br>
红掌拨清波<br>
</div>
</body>
</html>
<!-- /* div 独占一行 */ -->
<!--
块状:block
行内:inline
-->
效果图:
三、 border-radius边框圆角画太极图
这是操作练习
<!-- 2001画太极图.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2001画太极图</title>
<style type="text/css">
div{
float: left;
}
#TaiJiTu{
width: 100px;
height: 100px;
border: 2px solid blue;
border-radius: 50px 40px 50px 30px;
}
#t0{
width: 100px;
height: 100px;
background: white;
border: 100px solid black;
border-radius: 150px;
}
#t1{
width: 100px;
height: 100px;
background: black;
border: 1px solid white;
border-radius: 150px;
}
#t2{
width: 300px;
height: 600px;
border: 1px solid black;
border-left: 300px solid black;
border-radius: 300px;
clear: left;
}
#t3{
width: 300px;
height: 600px;
border: 1px solid black;
border-left: 300px solid black;
border-radius: 300px;
}
#t3::before{
content: '';
display: block;
width: 100px;
height: 100px;
background: white;
border: 100px solid black;
border-radius: 150px;
margin-left: -150px;
}
#t3::after{
content: '';
display: block;
width: 100px;
height: 100px;
background: black;
border: 100px solid white;
border-radius: 150px;
margin-left: -150px;
}
</style>
</head>
<body>
<div id="TaiJiTu"></div>
<div id="t0"></div>
<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>
</body>
</html>
效果图:
四、相对定位和绝对定位
1. 相对定位:相对自己移动,不影响其他元素
2. 绝对定位:相对父元素的位置,相对其他元素最后加载,重叠放置
3. position: static;
position: relative; 相对定位
position: absolute; 绝对定位
position: fixed;
<!-- 2002相对定位和绝对定位.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2002相对定位和绝对定位.html</title>
<style type="text/css">
div{
width: 300px;
height: 100px;
}
#t1{
background: red;
/*margin-top: 50px;*/
position: relative;
top: 50px;
left: 100px;
/* 相对定位:相对自己移动,不影响其他元素 */
/*
position: static;
position: relative; 相对定位
position: absolute; 绝对定位
position: fixed;
*/
border: 1px solid blue;
}
#t2{
background: pink;
}
#t3{
background: blue;
}
#common{
width: 600px;
height: 500px;
background: orange;
}
#t11{
background: red;
position: absolute;/* 绝对定位:相对父元素的位置,相对其他元素最后加载,重叠放置 */
top: 450px;
left: 30px;
z-index: 1;/* 层叠层次,数字越大,越在上层 */
border: 1px solid blue;
}
#t22{
background: pink;
position: absolute;
top: 470px;
left: 50px;
border: 1px solid black;
}
#t33{
background: blue;
position: absolute;
top: 490px;
left: 70px;
border: 1px solid yellow;
}
</style>
</head>
<body>
<h3>相对定位</h2><hr>
<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>
<h3>绝对定位</h3><hr>
<div id="common"></div>
<div id="t11">01绝对定位:通过改变 z-index:1 提高了层叠层次。比默认的都高!</div>
<div id="t22">02绝对定位</div>
<div id="t33">03绝对定位</div>
</body>
</html>
效果图:
每日总结:
1.应该早点睡觉,白天困一点没有效率,还不如早点睡养好明天的精神
2.实际进度和自己预想的相差太多,调整一下
3.死磕,从容。