标签：发电 color 元素 100px 朱一龙个 width background position 1.0
笔记：
1、html
| 标签 | 功能 |
|---|---|
| head | 头部 |
| title | 标题 |
| heaher | 页眉 |
| img | 图片 |
| ul | 无序列表 |
| body | 主体 |
| footer | 页脚 |
2、CSS
| 属性 | 值 |
|---|---|
| border-radius | 给边框添加圆角，（圆：50%） |
| display | 显示类型，inline：显示为行内元素；block：块级元素； |
| position | 定位，relative：相对定位；absolute：绝对定位 |
| background | 设置背景图片，图片的位置 |
| background-color | 背景颜色 |
3、相对定位：
每个元素在页面的文档流中都有一个自然位置，相对于此原始位置的对元素进行移动就是相对定位，且不影响周围的元素；
设置方法：
position：relative；
top/bottom/left/right:d;
d为希望元素从它的自然位置偏移的距离；
原始位置：
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
<body style="background-color:yellow" >
<div class="box1">
<p>box1</p>
</div>
<div class="box2">
<p>box2</p>
</div>
</body>
相对定位后：
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 50px;
left: 50px;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
4、绝对定位
对元素进行绝对定位，是指定它们相对于body或是最近的已定位祖先元素的精确位置，可以让元素脱离文档流。
绝对定位的元素不会在原先位置留下空白，其他元素不会环绕在它周围。
设置方法：
position：absolute；
top/bottom/left/right:d;
d：希望此元素相对于其祖先元素偏移的距离；
对希望成为绝对定位参照物的祖先元素添加 position：relative；如果不添加，则默认参照物是body；
不设置position：relative；
<style type="text/css">
.box2{
width: 200px;
height: 200px;
background-color: green;
}
.box1{
width: 100px;
height: 100px;
background-color: lightblue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<body style="background-color:yellow" >
<div class="box2">
<p>box1</p>
<div class="box1">
<p>box1</p>
</div>
</div>
</body>
设置position：relative；
<style type="text/css">
.box2{
width: 200px;
height: 200px;
background-color: green;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: lightblue;
position: absolute;
top: 100px;
left: 100px;
}
</style>
5、实例：朱一龙个站1.0
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>zhu</title>
<style type="text/css">
.tu1{
width:100px;
border-radius: 50%;
display: inline;
}
.box{
position: relative;
}
.box1{
font-size:40px;
background-color: orange;
width: 45px;
top: 10px;
left: 10px;
}
.box2{
position: absolute;
top: 2px;
left: 50px
}
.box21{
position: absolute;
top: 2px;
left: 250px;
}
</style>
</head>
<body background="zhuzhu1.jpg">
<header>
<img src="zhuzhu.jpg" class="tu1" />
<span style="font-size: 40px;">朱一龙个站</span>
</header>
<div class="box">
<div class="box1">
<p>基</br>本</br>信</br>息</p>
</div>
<div class="box2">
<ul>
<li>姓名：朱一龙</li>
<li>星座：白羊座</li>
<li>血型：O型</li>
<li>职业：演员</li>
<li>出生地：湖北武汉</li>
<li>出生日期：1988.04.16</li>
<li>身高体重：180cm 62kg</li>
<li>毕业院校：北京电影学院</li>
</ul>
</div>
</div>
<div class="box">
<div class="box1">
<p>影</br>视</br>作</br>品</p>
</div>
<div class="box2">
<h4>电影</h4>
<ul>
<li>《再生缘》</li>
<li>《抢来的新娘》</li>
<li>《血色深宅》</li>
<li>《血玉咒》</li>
<li>《胭脂劫》</li>
<li>《猎野人》</li>
<li>《偷窥者》</li>
<li>《战地情天》</li>
</ul>
</div>
<div class="box21">
<h4>电视剧</h4>
<ul>
<li>《大明嫔妃》</li>
<li>《王阳明》</li>
<li>《风雨梵净山》</li>
<li>《家宴》</li>
<li>《情定三生》</li>
<li>《萧十一郎》</li>
<li>《芈月传》</li>
<li>《边城浪子》</li>
</ul>
</div>
</div>
<footer>@小笼包</footer>
</body>
</html>
标签：发电,color,元素,100px,朱一龙个,width,background,position,1.0 来源： https://blog.csdn.net/weixin_44817017/article/details/89279012
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。