摘要：老师我有个问题，怎样让我案例里面的无序列表“实时热点”这几个字居背景中间？ 案例演示：https://code.sololearn.com/WLo5S5DF9L5S/#htmlcss基础应用css（层叠样式表，cascading style sheets）作用：html指定网页的内容，而css的作用就是布局和美化这些内容的显示样式。三种引入方式：1-内部：在<head>标签内
老师我有个问题，怎样让我案例里面的无序列表“实时热点”这几个字居背景中间？
案例演示：https://code.sololearn.com/WLo5S5DF9L5S/#html
css基础应用
css（层叠样式表，cascading style sheets）
作用：
html指定网页的内容，而css的作用就是布局和美化这些内容的显示样式。
三种引入方式：
1-内部：在<head>标签内部插入<style>标签，将css写在<style>标签内。如
<style type="text/css">
div{color:red}
<style>2-内联：直接在需要增加样式的元素标签内部书写css代码，如
<div style="color:red"> <div>
这种引入方式优先级最高
3-外部：将css代码单独放到一个css文件内，通过在<head>标签内用<link>标签引入该文件，如
<link rel="stylesheet" type="text/css" href="css文件的地址">
这种引用方式优先级最低，优点是便于维护代码，可以重复利用。
css选择器:
常用的css选择器有：标签选择器（标签名），类选择器（.），id选择器（#）。需要注意的是一个网页内id名是唯一的。
css属性有很多，其中本次课程主要学习了颜色，字体大小，行高，背景，链接，图片，缩进，高宽，边框，圆角，阴影，浮动等。
圆角：border-radius，其值可以是百分比，也可以是像素，如果要让一个边长100px正方形的盒子变成圆形，可以设置为border-radius: 50px;（即设置边长的一半50px为圆的半径）。
阴影：box-shadow，其值必须有两个：x轴偏移量，y轴偏移量。如果有三个像素值，则第三个值对应模糊距离，相应地，第四个像素值为阴影尺寸，阴影颜色默认为黑色，可以增加一个颜色值改变阴影的颜色，如果需要用内部阴影，加上inset值即可。
浮动：浮动可以将元素浮动在页面上，成为一个独立的块级框，浮动的元素会脱离文档流，也就是说这个浮动元素之后的其他元素的布局会忽略这个浮动的元素。
浮动有四个属性值，left，right，none，inherit，一般只用到前两个。
通常情况下元素添加浮动之后，需要清除浮动以免影响后面元素的布局。
清除浮动的简单方法：在结尾处添加一个空div标签，给其设置css属性:clear:both;
更多清除浮动的方法可以查看:http://www.cnblogs.com/nxl0908/p/7245460.html
通过学习和巩固，做了一个简单的类似百度的搜索主页。基本把学过的css都用上了。
代码部分：
<!DOCTYPE html>
<html>
<head>
<title>css基础（选择器，边距，边框，定位，浮动练习）做一个简单的百度首页导航</title>
<style>
* {
margin: 0 0;
}
.header {
width: 100%;
}
#logo {
margin-left: 10px;
box-shadow: 0px 0px 20px grey;
float: left;
width: 80px;
height: 40px;
border: 2px solid orange;
background: url(https://www.baidu.com/img/bd_logo1.png)no-repeat;
background-size: 100%;
}
.box {
margin: 0 auto;
width: 430px;
height: 40px;
border: 2px red solid;
margin-left: 84px;
float: left;
}
.nav {
list-style: none;
background: seagreen;
width: 80px;
height: 40px;
margin-right: 5px;
float: left;
}
ul li {
font-size: 19px;
color: white;
text-align: center;
border: 0px green solid;
border-radius: 40%;
box-shadow: 0px 10px 20px grey;
transition: 0.5s;
}
ul li:hover{
background: lightgreen;
color:blue;
box-shadow: 0px 10px 100px grey;
cursor: pointer;
}
p {
margin-top: 6px;
}
#signin{
color: white blue;
font-weight: bold;
text-align: center;
width: 50px;
height: 30px;
background: #FFA500;
float: right;
transition: 0.5s;
box-shadow: -10px 10px 5px #808080;
}
#signin:hover{
width:100px;
}
.clear{
clear:both
}
.box2{
margin: 0 auto;
border: 2px solid pink;
width: 1000px;
height: 900px;
}
.bgimg{
position: relative;
display: block;
margin: 200px auto;
width:260px;
height: 120px;
border: 1px solid #0000FF;
margin-bottom: 10px;
}
.search{
width: 800px;
height: 40px;
border: 0px solid white;
margin: 0 auto;
margin-bottom: 10px;
}
#ipt,#btn{
height: 34px;
}
#btn{
background: #E8E8E8;
color: #1B1B1B;
font-size: 20px;
float: right;
width: 150px;
height: 40px;
}
#ipt{
width:644px;
}
.content{
width: 1000px;
height: 460px;
background: #E8E8E8;
margin: 0 auto;
text-indent: 20px;
}
.news{
border: 2px solid blue;
width: 500px;
float: left;
}
.newsa{
text-decoration: none;
color: #1B1B1B;
}
.newimg{
margin-top: 10px;
margin-left: 20px;
width: 250px;
height: 150px;
box-shadow: 0px 0px 20px grey;
transition: 0.3s;
}
.newimg:hover{
transform: scale(1.1);
box-shadow: 0px 0px 60px grey;
}
.date{
color: grey;
}
.hot{
margin-right: 50px;
float: right;
}
#hotnow{
border: 1px solid #FF0000;
margin: 20px auto;
width: 150px;
color: #FF0000;
text-align: center;
background: #90EE90;
}
ol{
margin-top: 50px;
}
.list{
margin: 10px 0;
background: bisque;
color: black;
box-shadow: 3px 3px 5px #FFA500;
transition: 0.3s;
}
.list:hover{
background: coral;
cursor: pointer;
}
.bot{
width: 500px;
height: 50px;
margin: 0 auto;
margin-top: 150px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<div id="logo"></div>
<ul class="box">
<li class="nav">
<p>新闻</p>
</li>
<li class="nav">
<p>文库</p>
</li>
<li class="nav">
<p>贴吧</p>
</li>
<li class="nav">
<p>音乐</p>
</li>
<li class="nav">
<p>问答</p>
</li>
<div class="clear"></div>
</ul>
<div id="signin">登陆</div>
<div class="clear"></div>
</div>
<div class="box2">
<a href="https://www.baidu.com"><img class="bgimg" src="https://www.baidu.com/img/bd_logo1.png"></img></a>
<div class="search">
<input type="text" name="" id="ipt" placeholder="输入要查询的关键字" />
<button id="btn">百度一下</button>
</div>
<div class="content">
<div class="news">
<a class="newsa" href="">
<h2 class="title">台湾6.2级地震 杭州震感明显</h2>
<img class="newimg" src="https://www.baidu.com/img/bd_logo1.png"></img>
<p class="date">新浪新闻 11-20 23:00</p>
</a>
<hr>
<a class="newsa" href="">
<h2 class="title">华为重磅新机要来</h2>
<img class="newimg" src="https://www.baidu.com/img/bd_logo1.png"></img>
<p class="date">中国新闻网 11-12 11:06</p>
</a>
<hr>
</div>
<div class="hot">
<p id="hotnow">实时热点</p>
<ol>
<li class="list">排行列表</li>
<li class="list">排行列表</li>
<li class="list">排行列表</li>
<li class="list">排行列表</li>
<li class="list">排行列表</li>
<li class="list">排行列表</li>
<li class="list">排行列表</li>
<li class="list">排行列表</li>
<li class="list">排行列表</li>
</ol>
</div>
</div>
</div>
<hr>
<div class="bot">
<p><a href="#">设为首页</a> @2018 Baidu 使用百度前必读 <a href="#">意见反馈</a> 京ICP证123456号</p>
<p>京公网备案123456789350号</p>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-27 09:04:54
老师总结：文本居中：text-align：center，完成的不错，积累更多的知识点完成的更好！继续加油！
