css 定位
css 定位概念
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
1，相对定位
相对于一个元素的正常位置来对其定位。
2，绝对定位
使用绝对值来对元素进行定位。
3，浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
本节知识点练习作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
}
div.xddw{
position:relative;
bottom: 27px;
}
a.cdl{
font-size: 14px;
text-decoration: none;
margin-left: 5px;
margin-top: 3px;
margin-bottom: 3px;
color: darkgrey;
}
a.xddw2{
font-size: 16px;
color: black;
position: relative;
top: 54px;
text-decoration:;
}
</style>
</head>
<body>
<div style="border-bottom: 1px solid #cccccc;height:27px;">
<a href="" class="cdl">首页</a>
<a href="" class="cdl">新闻</a>
<a href="" class="cdl">找找看</a>
<a href="" class="cdl">学习计划</a>
</div>
<div class="xddw" style="height: 130px;width: 1000px;margin-right: auto;margin-left: auto;border-bottom: 1px solid #cccccc">
<a href="" class="xddw2">园子</a>
<a href="" class="xddw2">关注</a>
<a href="" class="xddw2">粉丝</a>
<a href="" class="xddw2">随便看看</a>
<a href="" class="xddw2">消息</a>
<p style="position: relative;top: 88px;font-size: 18px;"><strong>欢迎您，欲心！</strong></p>
<img src="jinritoutiao%20logo.png" alt="" style="height: 45px;position: absolute;left: 685px;top:50px">
<img src="bokeyuan%20logo.png" alt="" style="height: 50px;position: relative;left: 700px;top: 60px">
</div>
<div style="height: 160px;width: 1000px;margin-right: auto;margin-left: auto;">
<img src="bj.png" alt="" style="height: 160px;width: 1000px;">
</div>
<div style="height: 30px;width: 1000px;margin-left: auto;margin-right: auto;border-bottom: 3px solid black">
<img src="01.jpeg" alt="" style="height: 150px;position: absolute;bottom: 600px;left:500px;border-radius: 50%">
</div>
</body>
</html> 相关推荐
hellowzm 2020-10-12
云端漂移 2020-07-06
drdrsky 2020-06-13
AlisaClass 2020-06-05
vavid 2020-05-30
CSSEIKOCS 2020-05-19
Phoebe的学习天地 2020-05-09
sdbxpjzq 2020-05-04
e度空间 2020-04-30
淡风wisdon大大 2020-04-21
wangjie 2020-02-26
xiaohuli 2020-02-23
Phoebe的学习天地 2020-02-22
葉無聞 2020-02-03
liusure0 2020-01-11
wcssdu 2020-01-11
dazhifu 2020-01-02