​​导航栏制作_块元素​​

1.分析盒子个数

一共三个盒子：外部一个nav，中间一个nav-con，nav-con里面是ul

2.使用emmet快速创建基本内容

3.Css初始化

4.css调整布局

分析盒子：主要分析四点：（1）盒子的高度和宽度（2）盒子的边框（3）盒子的位置（4）盒子里面的内容（如背景）

盒子1：nav

高度：55px 宽度：auto

盒子的边框：只有上边框，使用fx可以分析出上边框为1px solid #bbb

盒子的位置：随意

盒子的背景：使用的图片nav_png

盒子2：nav-con

高度：55px 宽度980px

边框：无

位置：在nav居中显示

Margin用来设置盒子与盒子的举例

Padding用来设置盒子里面内容的距离边框的距离

盒子3：ul

盒子的大小：和nav-con 一样大

盒子的位置：就是nav-con的位置

盒子边框：无

盒子里面的内容：font: 12px simsun;

Li:

大小：使用a撑开

位置：li是行元素，要使用浮动使其能够一行显示，当然也可以把它转为行内块元素

a:

大小：两边设置padding撑开 由于a是块元素没法设置大小，需要变为行内块

位置：li决定

边框：使用背景：nav-bg-line，使其拥有边框

内容：文字上下左右居中，字体font: 700 12px/55px 宋体; color: #000;

涉及到的知识点

5.emmet快捷键：

emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。

html:

5.1.1生成结构的快捷键：

！+ tab,可以生成html5的结构代码。

5.1.2生成id名和类名

标签名.类名#id名+tab

没有标签名.类名+tab ==>div

5.1.3生成同级元素：

标签名+标签名+标签名 “+”tab

5.1.4生成子类标签

标签名>子标签名>子标签名>子标签名+tab

标签名>子标签名>子标签名>子标签名^^子标签名+tab

5.1.5带固定数量的标签:

ul>li*5+tab

5.1.6带有序号名称

ul>li.abc$*3 + tab

5.1.7生成带有内容的标签：

ul>li>a{item}*5

这个例子快速创建为

nan>nan-con>ul>li*6>a[#]

6.css初始化

腾讯：

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word}

7.Fireworks的基本使用

新建文件 ctrl+n

打开文件 ctrl+o

调出和隐藏标尺 ctrl+r

清除辅助线： 视图---辅助线----清除辅助线

放大镜 z 放大镜状态下alt+鼠标左键 缩小

抓手 快捷键 空格

测量距离 ★先拉出2根辅助线

★切换到指针工具​​导航栏制作_块元素_02​​

★将光标放到2根辅助线之间，按住shift键

8.块元素和行元素

◆块元素

典型代表： div,p,h1-h6,li,.....

★独占一行

★可以设置宽高

★没有定义宽度时，宽度为父集元素的宽度

◆行内元素

典型代表：span,a,strong,em,del......

★在一行显示

★不能直接设置宽高

★宽高为内容撑开的宽高

◆行内块元素

典型代表:img,input

★在一行上显示

★可以设置宽高

8.1元素转换

display:block; 行内转块

Display:inline; 块转行内

Display:inline-block; 块或行内转行内块

9.行高

◆浏览器默认文字大小

浏览器默认文字大小：16px

行高：是基线与基线之间的距离

行高=文字高度+上下边距

通过行高，使文字上下居中

10伪链接类

a:link{属性:值;} 链接默认状态 a{属性:值;}是一样的

a:visited{属性:值;} 链接访问之后的状态

a:hover{属性:值;} 鼠标放上去显示的状态

a:active{属性:值;} 链接激活的状态

:focus{属性:值;} 获取焦点

注意:如果四个链接伪类都使用，按顺序书写。

11选择器的类型

◆交集选择器

标签+类(id)选择器{属性:值;}

特点:即是某个标签，而且这个标签调用了类（id）选择器

◆后代选择器

选择器+空格+选择器{属性:值;}

后代选择器的基本要求：包含(嵌套)关系。

特点: 父在前,子在后。

无限制隔代。

只要能代表这个标签，可以是标签选择器、类选择器、id选择器自由组合。

◆子代选择器

选择器>选择器{属性:值;}

特点：选择的是直接下一代.

◆并集选择器

选择器+,+选择器+,+选择器{属性:值;}

12.浮动

float: left | right

特点：

★元素浮动之后不占据原来的位置（脱标）

★浮动的盒子在一行上显示

★行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block;）

12.1浮动的作用

◆文本绕图

◆制作导航

◆网页布局

13盒子模型