摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="./static/css/index.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./static/css/index.css">
<title>小米商城</title>
</head>
<body>
<!--顶部信息区-->
<header role="header">
<!-- 加div是为了繁殖内部padding撑开父级容器-->
<div>
<h1>欢迎您</h1>
<nav role="user">
<ul>
<li>手机</li>
<li>电脑</li>
<li>净化器</li>
<li>内存卡</li>
<li>扫地机器人</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
/**************公共样式************/
* {
margin: 0;
padding: 0;
}
body {
background-color: #efefef;
}
li {
list-style-type: none; /*去掉列表前面的黑点*/
}
a {
color: green; /*给A标签内容一个颜色*/
text-decoration-line: none; /*去除下划线*/
}
a:hover { /*伪类鼠标经过效果*/
color: brown;
text-decoration-line: underline; /*添加下划线*/
}
/****** 顶部样式 *********/
header {
width: 100%;
background: linear-gradient(to top,lightgrey, #efefef); /*重上往下渐变颜色*/
border-bottom: 1px solid gray; /*添加一个边框以及颜色*/
overflow: hidden; /*包裹浮动容器*/
height: 60px;
}
header div {
width: 1200px; /*给整个headr里的div定一个款*/
margin: auto;/*居中*/
}
header div h1 {
float: left; /*给一个浮动方向*/
font-weight: lighter; /*字体格式*/
line-height: 60px; /*行高*/
margin-left: 20px; /*外边框距离*/
}
header div nav {
float:right; /*给一个左浮动方向*/
margin-right: 20px;
}
header div nav ul li {
float:left; /*给一个左浮动方向*/
padding-left: 30px; /*左内边距方向高度*/
line-height: 80px;
}
批改老师：灭绝师太批改时间：2018-12-26 09:18:00
老师总结：样式使用复合写法 就好了，比如：background-color换成 background，就一个导航的话你的代码繁琐了，能简写尽量简写，代码越简练越好！
