上节课复习：
1、基本选择器
.类名- 类选择器
标签名-标签选择器
* -通配符选择器
2、组合选择器
选择器 选择器 -后代选择器
选择器>选择器 -儿子选择器
选择器+选择器 -兄弟选择器
选择器~选择器 -毗邻兄弟选择器
3、交集、并集选择器
选择器选择器：input.inp1
选择器,选择器：input,.inp1
4、属性选择器
[属性名]
[属性名=值] : [class="inp1"]
[属性名^=值]
[属性名$=值]
[属性名*=值]
input[属性名*=值]
5、序列选择器
p:first-child
p:last-child
:nth-child(n)
p:first-of-type
:last-of-type
:nth-of-type(n)
7、伪类选择器
a:link
a:hover
a:visited
a:active
input:focus
6、伪元素选择器
div:before {
content:"";
color:red;
}
div:after {
content:"";
color:red;
}
p:first-letter {
}
<div>
<h1></h1>
<a href=""></a>
</div>
今日内容：
1、样式/属性设置
字体样式
文本样式
背景
2、盒子模型
3、网页布局
标准流
浮动流
定位流
1.字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font: lighter italic 20px "Microsoft Himalaya";
}
</style>
</head>
<body>
<p>一行白鹭上青天</p>
</body>
</html>
2.文本属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
text-indent: 10px;
}
</style>
</head>
<body>
<div>
你好啊阿斯
</div>
</body>
</html>
3.背景属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 600px;
height: 600px;
background-color: red;
background-image: url("bg.jpg");
background-size: 100px 100px;
background-repeat: no-repeat;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
}
.box2 img {
width: 100px;
}
.box3 {
width: 200px;
height: 2000px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
<p>123213123123123</p>
</div>
<div class="box2">
<img src="timg.jpg" alt="">
<p>123123123123123</p>
</div>
<div class="box3"></div>
</body>
</html>
4.练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 960px;
height: 720px;
background-image: url("img/bg1.jpg");游戏背景
background-size: 960px 720px;
}
.box2 {
width: 960px;
height: 720px;
background-image: url("img/ksyx.png");开始游戏
background-repeat: no-repeat;
background-position: center bottom;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
5.练习2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header {
width: 960px;
height: 118px;
background-image: url("img/dht.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="header">
</div>
</body>
</html>
6.练习3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 86px;
height: 28px;
background-image: url("img/jlt.png");
background-position: -425px -100px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
7.盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.sp1 {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
.sp2 {
width: 200px;
height: 200px;
background-color: green;
display: inline-block;
}
p span {
color: red;
}
</style>
</head>
<body>
<div class="box1"></div>
<span class="sp1">你好</span>
<span class="sp2">你好</span>
<p>你好<span>egon</span></p>
</body>
</html>
8.边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: yellow;
border: 1px dotted red;
border-radius: 50%;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box1">1111</div>
</body>
</html>
9.内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 150px;
height: 150px;
}
.box1 {
box-sizing: border-box;
border: 1px solid red;
padding-top: 50px;
}
.box2 {
width: 100px;
border: 1px solid green;
padding-left: 50px;
}
.box3 {
border: 1px solid blue;
padding-right: 50px;
}
.box4 {
border: 1px solid yellow;
padding-bottom: 50px;
}
.box5 {
box-sizing: border-box;
border: 1px solid aqua;
padding: 50px;
}
.boxx {
width: 20px;
height: 20px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="boxx"></div>
</div>
<hr>
<div class="box2">
22222
</div>
<hr>
<div class="box3">
333
</div>
<hr>
<div class="box4">
4444
</div>
<hr>
<div class="box5">
5555
</div>
</body>
</html>
10.外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 150px;
height: 150px;
}
.box1 {
border: 1px solid red;
margin-bottom: 70px;
padding-top: 30px;
padding-left: 30px;
box-sizing: border-box;
}
.box2 {
border: 1px solid green;
margin-top: 60px;
}
.box3 {
border: 1px solid blue;
display: inline-block;
margin-right: 50px;
}
.box4 {
border: 1px solid yellow;
display: inline-block;
margin-left: 50px;
}
.box5 {
border: 1px solid grey;
}
.boxx {
width: 20px;
height: 20px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="boxx"></div>
</div>
<div class="box2">
22222
</div>
<div class="box3">
333
</div>
<div class="box4">
4444
</div>
<div class="box5">
5555
</div>
</body>
</html>
11.盒子居中与内容居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 600px;
background-color: red;
text-align: center;
line-height: 25px;
padding-top: 250px;
padding-bottom: 250px;
box-sizing: border-box;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
</div>
</body>
</html>
12.防止文字溢出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎界面</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
word-break: break-all;
}
.box1 {
background-color: red;
}
.box2 {
background-color: green;
}
.box3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">
<p>asdfasdfsadfasdfasdfasdfad sfasdfsadasDSfafsafaasdfasdfasfdqwerqwerwqersdfqerwrsdf你好我的啊啊啊啊啊啊啊啊啊啊啊啊</p>
</div>
<div class="box2">遗憾白鹭上青天两个黄鹂鸣翠柳啊哈哈哈
</div>
<div class="box3">我是12312312312312312312312312312312312312312312312312312312312我
</div>
</body>
</html>