最近处于一个分外的期间,由于一个有时的机会学习了前端,在很短的韶光内学完了HTML5+CSS3,进入了JS的学习,觉得到学习速率太快对我来说不是一件好事,于是我停息了JS的学习,打算完成一到两个项目实战。
第一个项目便是用纯H5+C3实现苏宁易购官网的页面制作。

一、准备事情

1、构造剖析

仿苏宁简单的html代码苏宁易购首页制造1 Angular

我将全体页面分为了7大块,导航栏,中间的5块内容,以及页面底部。
当然这并不是绝对的,在我们须要的时候随时会进行调度。

2、图片素材

将苏宁首页进行截图保存,将来用ps进行丈量,切片等。

将苏宁网页上的一些图片扒下来。

在阿里巴巴矢量图标库中探求一些须要的矢量图标。

(没有设计搞真难啊)

二、导航栏制作

1、框架剖析

首先剖析构造,可以分为两个区域左边和右边

因此我们可以将这两个区域放在一个容器之内。
先编写HTML框架,之后再编写CSS样式。
HTML相称于我们建筑的四梁八柱,人体的骨架,是主题构造,CSS相称于装饰品,血肉。

导航栏分为两级菜单,我们只做一级菜单,也便是鼠标没有移动上去的时候所看到的内容

对付一些选项来说,当鼠标移动上去的时候,会显示一个下拉菜单,以是我又在li标签内嵌套了div标签。
为了不使代码冗余,我只拷贝了一部分代码。

<div class="nav"> <div class="nav_left"> <ul> <li> <div> <a href="#">网站导航 </a> </div> </li> </ul> </div> <div class="nav_right"> <ul> <li> <a href="#">企业采购 </a> </li></ul> </div> </div>未添加任何css样式时候的导航栏左面区域

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;} // 打消浮动

2. 为每一个区域起一个名字,方便选择器进行选择。
3. 添加CSS样式1)首先我要让选项横向排列,采取左浮动

.nav .nav_left ul li { float: left;}

2)容器的制作

用PS丈量出容器高度,宽度我们设置成自适应,添加好背景色后,添加下边框,1px,

.container_fluid { width: 100%; background: #f5f5f5; border-bottom: 1px #eeeeee solid;}

3)令菜单水平

菜单分为旁边两块,左div设置左浮动,li设置左浮动,右div设置右浮动,li设置左浮动(如果此处设置右浮动,第一个li标签在最右边)。

4)使菜单的每一项之间保持相应的间隔

可以通过丈量或者觉得来进行调度,比如margin,padding。
左菜单我给每一个li设置了固定宽度,另li中的div进行居中。
而右菜单设置了根据div内容自适应,为了不使div紧挨在一块,我添加了padding。

#head .nav .nav_left ul li { float: left; width: 104px; height: 33px; font-size: 14px;}#head .nav .nav_left ul li div { text-align: center;}5)调度字体大小,颜色

根据“设计稿”进行字体大小,颜色的调度。

#head .nav span { font-size: 10px; color: #cfcad8;}

6)添加矢量图标

下载好矢量图标往后,进行引用,一定要把稳路径。
矢量图标是一种字体,因此可以用font-size ,color 进行大小颜色的调度

通过给span标签添加选择器进行引入。

<li> <div> <a href="#">网站导航 <span class="iconfont icon-ai-arrow-down"></span></a> </div> </li>

7)设置 hover 属性。

菜单的选项,当我们把鼠标移动上去的时候,字体会变色,并且背景会变革成白色,并涌现一个二级菜单。
我们只做一个字体,背景变色效果。

#head .nav .nav_left ul li:hover { background-color: white;}#head .nav .nav_left ul li a:hover { color: #ff6600;}

这么设置之后,我们创造所有的选项,当hover的时候背景都发生了变革,而没有二级菜单的选项的背景色并没有变革,我们可以再次添加hover,设置为原来的背景色对当前的hover覆盖,已达到我们想要的效果。

#head .nav .nav_right ul .no_hover:hover { background-color: #f5f5f5;}

或者也可以通过伪类选择器达到这一效果,(不过我对选择器的利用不熟习)

3、小结

1.在导航栏的制作过程中,涌现了许多的小问题,例如div标签的重叠问题。
我的办理办法便是删除div标签的固定宽度,设置为自适应,给他的父容器li标签加上了宽度,另div居中。
还有一些语法的利用细节。

2.在添加样式的过程中,选择器的利用办法是多样的,给不同的标签添加选择器都可以起到同样的效果。
但是由于选择器利用的不闇练,将一些样式直接加在了标签中,这是非常不合格的。
在真正的开拓过程当中,CSS和HTML一定是分开写的,这样便于代码的掩护。

3.在制作导航栏的过程中该当设置手性的,但是添加了a链接之后默认涌现了手性。

4.导航栏的制作就告一段落了。
我只制作了一级菜单,二级菜单的制作将会等到正在页面制作完成之后在进行制作。