今天学习常用标签、定宽居中、固定位置、相对定位。
常用标签：
<html>
<head>
<meta charset="UTF-8">
<title>常用标签</title>
<style>
h1{
/*使文本居中*/
text-align: center;
}
h2{
text-align: center;
/*改变字体大小*/
font-size: 18px;
/*改变字体粗细 400 = normal*/
font-weight: 400;
color: #baa7a7;
}
.indent{
/*缩进两个字符*/
text-indent: 2em;
}
#image{
text-align: center;
}
#top{
float: right;
}
</style>
</head>
<body>
<!--h1~h6表示文章的各级标题 h标签有各自的文字大小 还有默认的上下边距及加粗效果-->
<h1>叶培建：中国计划2021年登陆火星</h1>
<h2>中国的第一次火星任务就直接进入火星大气</h2>
<!--<h3>叶培建：中国计划2021年登陆火星</h3>
<h4>叶培建：中国计划2021年登陆火星</h4>
<h5>叶培建：中国计划2021年登陆火星</h5>
<h6>叶培建：中国计划2021年登陆火星</h6>-->
<div> 2016-03-04 15:19:28 来源: 上海证券报·中国证券网(上海)</div>
<p> （原标题：卫星专家叶培建：中国计划2021年登陆火星）</p>
<!-- 　 指的是中文空格 使用它可以解决对齐错乱的问题-->
<p>　　中国证券网讯 中国准备在2020年发射火星探测器，次年登陆火星。这是3月4日全国政协会间，卫星专家叶培建委员透露的。</p>
<!--time定义日期或时间-->
<p class="indent">据科技日报<time>3月4日</time>消息，中国将在第一次火星任务就实现进入火星大气，释放探测器和巡视火星。这与美国、苏联、欧洲、印度都不同。</p>
<p id="image">
<!--img定义图片 属性：src指的是图片来源
alt表示图片无法显示时显示替代的文字
title表示图片的标题 当鼠标指针移动到图片时 会显示文字-->
<img src="mars1.jpg" alt="红色的高原" title="外星人">
</p>
<p class="indent">叶培建说，由于火星每过二十八个月才接近地球，发射窗口有限，2018年窗口来不及赶上，但2020年可以。</p>
<p class="indent">中国火星进入器、探测器的大小和结构，与先前登月的嫦娥和月兔相似，又有不同。目前，包括通讯、着陆以及应付火星极端环境的各项技术准备都在进行。</p>
<p class="indent">从地球飞向火星需要几个月，叶培建说，他们希望在中国共产党建立一百周年时成功。</p>
<p class="indent">从正式宣布加入混改试点到现在不到1年的时间，中国联通的股价将近翻倍。期间还传出BAT有可能入局，股价一度涨停。可见业界对中国联通混改的期待。</p>
<p class="indent">但是，三大运营商中最为羸弱的中国联通会因为这次混改让整个通信市场改天换日吗？BAT的入局能够改变中国联通备受诟病的“体制”？中国联通会因此走向完全的市场化？混改的这次模板能否继续复制？</p>
<p class="indent">处于市场下坡路的“通信企业”也许亟需一些民资进入来让市场“活”起来，但这样的尝试以前也有过，2013年底中国的通信市场就迎来了民资的进入——虚拟运营商。从这两年虚商的发展情况来看，情况并不乐观。</p>
<p class="indent">垄断领域的混改一直是最难啃的硬骨头，电信行业成为了第一批混合所有制改革的试点，而中国联通又被从三大运营商中选出来，成为首家进行混合所有制改革的运营商。</p>
<p class="indent">按照混合所有制改革的目标要求，是为了让国企在改革中能够增加竞争力和活力，更是为了企业打造一个符合现代企业治理的有竞争力，能够培养竞争力和创新力的治理体制。</p>
<p class="indent">
<!--使用a标签超链接跳转到另一个页面 默认在本窗口中打开 target=“_blank”在新窗口中打开-->
来自：<a href="http://www.163.com" target="_blank">网易新闻</a>
<a href="#" id="top">返回顶部</a>
<!--使用href="#id"可以实现页面跳转-->
</p>
</body>
</html>
定宽居中：
<html>
<head>
<meta charset="UTF-8">
<title>定宽居中</title>
<style>
body{
/*清除页面边距 页面默认带有8px的外边距*/
margin: 0;
/*外边距
四个值：上右下左
三个值：上 左右 下
两个值：上下 左右*/
/*padding: 50px;*/
}
div{
/*定宽*/
width: 800px;
background-color: red;
/*居中*/
margin:0 auto;
height: 100px;
}
</style>
</head>
<body>
<div>
定宽居中定宽居中定宽居中定宽居中定宽居中定宽居中定宽居中定宽居中定宽居中定宽居中定宽居中定宽居中
</div>
</body>
</html>
固定位置：
<html>
<head>
<meta charset="UTF-8">
<title>固定位置</title>
<style>
body{
margin: 0;
}
#nav{
/*margin: 0 auto;*/
background-color: red;
width: 100%;
/*使用position能够起到固定位置的作用，但定宽居中失效*/
position: fixed;
top: 0;
}
#nav div{
/*使用嵌套div同时实现固定位置 和定宽居中
外层的div负责固定位置
内层的div负责定宽居中*/
width: 800px;
height: 100px;
background-color: blue;
margin: 0 auto;
}
#main{
width: 800px;
height: 2000px;
background-color: palegreen;
margin: 100px auto 0;
}
</style>
</head>
<body>
<div id="nav">
<div>
固定位置-导航条
</div>
</div>
<div id="main">
内容区
</div>
</body>
</html>
相对定位：
<html>
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
/*使用标签在上级标签中的顺序作为选择器 不论类型*/
span:nth-child(1){
/*相对定位*/
position: relative;
top: 10px;
left: 10px;
/*相对定位是使标签偏离原来的位置
相对于精细纠正标签的位置*/
}
</style>
</head>
<body>
<span>文字一</span>
<span>文字二</span>
<span>文字三</span>
<span>文字四</span>
</body>
</html>
