前言 : 根据我们在上一节课的学习（可查看零基础带你入门前端一）我们进行学以致用吧！
小米顶部导航栏
知识点一：当我们用ul 写好的无序列表，可用如下代码去掉小圆点
<ul style = "list-style:none">//列表样式为无
知识点二: id选择器：#id名（id选择器在前面定义一个id 后面写样式的时候一定要加＃加id标签名）
<ul id = "list">
#list{
list-style:none;
}
知识点三：标签选择器 ： 标签名直接加花括号
<li>haha</li>
li{
font-size:30px;
}
知识点四：a 标签的使用：用来点击后跳转到相关的页面
<a href = "http://www.baidu.com">百度</a>
<a href = "../a.html">a.html</a>
注：
1，href后面写链接或者写路径跳转到其他页面
2，http 和 https 和ftp以及flie写链接的时候一定要写上
3, 页面出现404表示资源未找到；页面出现303表示资源原本确实存在但被临时改变了位置；页面出现500表示服务器出现问题
4，target返回进行点击
知识点五： hover：当鼠标滑上去的时候，对应的字体颜色会发生变化
li:hover{
color:red;
background-color:black;//背景为黑色当鼠标滑上去变成红色
}
知识点六： img:插入图片
<img src = "pages/haha.jpg" alt = "haha">
注：
1，img是一个单标签
2，src 英文为source图片的源地址 也可理解为表示图片的当前路径 如：. / 表示当前目录下 . . / 表示退一层到上一目录里
3，alt 图片的占位符，当我们加载不出图片的时候，可用alt提示图片的内容
4，处理图片的时候，一般只写高度或宽度，同时写可能导致图片进行变形
知识点七： link标签
注 : 结构和样式进行相分离。而结构就是主要写页面的详情信息就是熟知的html，而样式就是主要写文字的大小 颜色 位置等 就是熟知的css文件
link标签就是桥：用来链接html与css文件
<link rel = "stylesheet" href = "xwq.css">//stylesheet是层叠样式表 href指对应的样式在xwq.css文件里
知识点八： 整个页面处于居中的位置
首先：
*{
// * 是通配符 是所有选择器权重最低
margin:0;
padding:0;
}//用来清除所有标签的内外边距
.top{
height:40px;//设置高度
margin:0 auto;//margin 两值分别表示垂直方向与水平方向 auto表示自动切换
}
这种也是清除所有的内外边距，代码是不允许出现
body{
margin：0;
}
知识点九： 文字居中
ul{
height:40px;//设置父元素的行高为40px
line-height:40px;//单行文字的高度与行高一样则居中
}
小米顶部导航栏
注意特点：
1，把整个页面进行放大和缩小，整个内容都处于居中的
2，当鼠标滑上去会发生颜色的变化
3，当点击小米商城的时候，页面就会跳转到小米商城的整个页面
布局
首先，顶部导航栏的黑色背景作为一个容器用div包裹起来，高度是40px,背景为黑色
其次，整体文章内容居中作为一个容器
再其次，左边的小米商城以及MIUI一大部分作为一个容器用div包裹起来 字体为白色 居中
最后，右边的登录以及注册作为一个容器用div包裹起来
html的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xwq</title>
<link rel = "stylesheet" href = "three.css">
</head>
<body>
<div class = "topbar">
<div class = "top">
<div class = "list">
<a href = "#">小米商城</a>//#表示点击无效
<a href = "#">MIUI</a>
<a href = "#">lOT</a>
<a href = "#">云服务</a>
<a href = "#">金融</a>
<a href = "#">有品</a>
<a href = "#">小爱开放平台</a>
<a href = "#">企业团购</a>
</div>
<div class= "right">
<a href = "#">登录</a>
<a href = "#">注册</a>
</div>
</div>
</div>
</body>
</html>
CSS代码
*{
margin:0;
padding:0;
}
.topbar{
height:40px;
blackground-color:black;
}
.topbar a{
text-decoration:none;//去掉文字的下划线
line-height:40px;
font-size:12px;
color:white;
}
.top{
height:40px;
margin:0 auto;
}
.list a{
margin-right:10px;
margin: 0 10px;
float:left;
}
.list a:hover{
color:#ddd;
}
.right{
float:right;
margin-right:50px;
}
.right a{
margin-left:10px;
}
显示为：
关注我，下次继续完善小米页面！
完结
最近很喜欢一句话
三书六礼 鸿雁为信 一生 一世 一双人