序
最近在一个特殊时期，由于一个偶然的学习前端的机会，我在短时间内完成了HTML5+CSS3，进入了JS的学习。我觉得学的太快对我来说不是好事，所以暂停了JS的学习，打算完成一两个实践项目。第一个项目是在Suning.cn官网使用纯H5+C3制作页面。
一.准备工作
1.结构分析
我把整个页面分成7块，导航栏，中间5块，页面底部。当然，这不是绝对的。在我们需要的时候会随时调整。
2.图片材料
保存苏宁首页截图，以后用ps测量切片。
把苏宁的网站上的一些图片撕下来。
在阿里巴巴矢量图标库中寻找一些需要的矢量图标。
(没有设计真的很难。)
二、导航栏的制作
1.框架分析
先分析结构，结构可以分为左右两个区域。
所以我们可以把这两个区域放在一个容器里。先写HTML框架，再写CSS样式。HTML相当于我们大楼的四梁八柱，人体的骨架是主题结构，CSS相当于装饰品，有血有肉。
导航栏分为两级菜单，我们只做一级菜单，也就是鼠标不上移时看到的。
对于某些选项，当鼠标向上移动时，会显示下拉菜单，所以我在li标签中嵌入了div标签。为了不使代码冗余，我只复制了一部分代码。
& ltdiv class = & # 34导航& # 34；& gt & lt；div class = & # 34nav _ left & # 34& gt & lt；ul & gt & lt；李& gt & lt；div & gt & lt；a href = & # 34#"& gt网站导航
2.接下来，我们消除一些标签的默认样式，并添加样式以达到所需的效果。
1.消除标签的默认样式。
*{margin: 0;padding: 0;} ul{list-style: none;} img{display: block;} h1,h2,h3{font-size: 16px;font-weight: normal;} a{text-decoration: none;color: #333333;} //链接的样式 body{font-family: Arial;} // 字体设置 .l{float: left;} //左浮动 .r{float: right;} //右浮动 .clear::after{content: "";display: block;clear: both;} // 清除浮动
* {边距:0；填充:0；}
ul{list-style:无；}
img { display:block；}
h1，h2，H3 { font-size:16px；字体粗细:正常；}
a { text-decoration:none；颜色:# 333333；}//链接的样式
正文{ font-family:Arial；}//字体设置
。l { float:left；}//左浮动
。r{float:右；}//右浮动
。clear::after { content:& # 34；"；显示:块；明确:两者都有；}//清除浮动
2.给每个区域起个名字，方便选择器选择。
3.添加CSS样式
1)首先我想横向排列选项，用左浮动。
.nav .nav_left ul li { float: left; }
。导航。nav _ left ul Li {
float:left；
}
2)容器的制造
用PS测量容器的高度和宽度。我们将其设置为自适应。添加背景色后，添加下边框，1px。
。container_fluid { 宽度:100%； 背景:# f5f5f5 border-bottom:1px # eeeeee solid； }3)使菜单级别
菜单分为两部分:左div设置左浮动，li设置左浮动，右div设置右浮动，li设置左浮动(如果这里设置了右浮动，第一个li标签在最右边)。
4)在菜单的每一项之间保持相应的距离。
它可以通过测量或感觉来调整，如边距、填充。在左侧菜单中，我为每个li设置了固定的宽度，另一个li中的div居中。另一方面，根据div内容设置右菜单以适应。为了不让div靠在一起，我加了填充。
#头。导航。nav _ left ul Li { float:left； 宽度:104px 身高:33px font-size:14px； } #head。导航。nav _ left ul Li div { text-align:center； }5)调整字体大小和颜色。
根据“设计稿”调整字体大小和颜色。
#头。nav span { font-size: 10px。 color:# cfcad 8； }6)添加一个矢量图标
下载完矢量图标后，在引用的时候一定要注意路径。矢量图标是一种字体，所以你可以用字体大小、颜色来调整大小和颜色。
通过向span标签添加选择器来引入。
& lt李& gt & lt；div & gt & lt；a href = & # 34#"& gt网站导航。iconfont图标-ai-向下箭头& # 34；& gt& lt/span>。& lt/a & gt； & lt；/div & gt； & lt；/李& gt7)设置悬停属性。
菜单选项，当我们向上移动鼠标时，字体会变色，背景会变成白色，会出现一个二级菜单。我们只做一种字体，背景变色。
#头。导航。nav _ left ul Li:hover { background-color:white； } #头。导航。nav_left ul阿利:hover { color:# ff 6600； }经过这个设置，我们发现悬停时所有选项的背景都发生了变化，但是没有二级菜单的选项背景颜色没有变化。我们可以再次添加hover，设置原来的背景色来覆盖当前的hover，已经达到了想要的效果。
#头。导航。导航_右ul。no _ hover:hover { background-color:# f5f 5 f 5； }或者这个效果可以通过伪类选择器来实现(虽然我对选择器的用法不太熟悉)
3.摘要
1.在制作导航栏的过程中，出现了很多小问题，比如div标签的重叠。我的解决方案是删除div标签的固定宽度，将其设置为adaptive，将宽度添加到其父容器li标签中，并将div居中。还有一些语法的用法细节。
2.在添加样式的过程中，选择器的使用方式多种多样，在不同的标签上添加选择器可以达到同样的效果。但是由于选择器使用不熟练，有些样式直接加到标签上，非常不合格。在真实的开发过程中，CSS和HTML必须分开编写，方便代码维护。
3.手征性应该在制作导航栏的过程中设置，但是手征性是在添加了A链接后默认出现的。
4.导航栏的制作已经告一段落。我只做了一级菜单，二级菜单会在页面完成后再做。
