前言 : 根据我们在上一节课的学习(可查看零基础带你入门前端一)我们进行学以致用吧!
小米顶部导航栏
知识点一:当我们用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;
}
显示为:
关注我,下次继续完善小米页面!
完结
最近很喜欢一句话
三书六礼 鸿雁为信 一生 一世 一双人