浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动布局</title>
<style>
#parent{
width: 408px;
border: solid 1px red;
margin: 0 auto;
overflow: hidden;
}
#parent .child{
width: 100px;
height: 100px;
border: dashed 1px #666;
float: left;
}
</style>
</head>
<body>
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<div>
今天的天气很好
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字环绕</title>
<style>
.news{
width: 416px;
border: solid 1px red;
overflow: hidden;
margin-bottom: 8px;
}
img{
width: 200px;
height: 200px;
}
p{
width: 200px;
padding: 0;
margin: 0;
margin-left: 8px;
margin-top: 8px;
margin-right: 8px;
}
.fl{
float: left;
}
.fr{
float: right;
}
</style>
</head>
<body>
<div class="news">
<img class="fl" src="imgs/img02.png" alt="">
<p class="fr"> h-shadow 取像素值,阴影的水平偏移距离
v-shadow 取像素值,阴影的垂直偏移距离
blur 取像素值,表示阴影的模糊程度,值越大越模糊
</p>
</div>
<div class="news">
<img class="fr" src="imgs/img02.png" alt="">
<p class="fl"> h-shadow 取像素值,阴影的水平偏移距离
v-shadow 取像素值,阴影的垂直偏移距离
blur 取像素值,表示阴影的模糊程度,值越大越模糊
</p>
</div>
</body>
</html>
定位布局–相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位</title>
<style>
div{
width: 100px;
height: 100px;
border: solid 1px red;
}
div:nth-child(2){
position: relative;
left: 8px;
}
div:nth-child(3){
position: relative;
top: 8px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
定位布局-绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
#parent{
width: 300px;
height: 300px;
border: solid 1px gold;
margin: 0 auto;
position: relative;
}
#parent>#child{
width: 300px;
height: 32px;
background-color: rgba(0, 0, 255, 0.5);
position:absolute;
bottom: 0px;
color: white;
text-align: center;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="parent">
<img src="imgs/img01.png" alt="">
<div id="child">这是一个美女图片</div>
</div>
</body>
</html>
定位布局 绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定定位</title>
<style>
*{
margin: 0;
padding: 0;
}
#top, #bottom{
text-align: center;
background-color: #01204f;
color: white;
padding: 10px 0px;
position: fixed;
width: 100%;
height: 25px;
}
#top{
top: 0;
}
#bottom{
bottom: 0;
}
#left, #right{
width: 80px;
height: 150px;
background-color: red;
}
#left{
position: fixed;
top: 180px;
left: 0;
}
#right{
position: fixed;
right: 0;
top: 180px;
}
</style>
</head>
<body>
<div id="top">
Web开发功能很强大啊!
</div>
<div id="left">
</div>
<div id="right">
</div>
<div id="bottom">
Web开发功能很强大啊!
</div>
<div style="margin-top: 45px;">
我是一个标题栏
</div>
<div style="height: 2000px;">
</div>
</body>
</html>