如何用DIV+CSS做漂亮的横排导航栏

html-css06

如何用DIV+CSS做漂亮的横排导航栏,第1张

先码好导航栏所需要的基本的HTML代码 这个就不必多说具体的代码如下: 横向导航栏 首页 导航1 导航2 导航3 导航4 导航5 导航6 测试结果应为下图(1) 下面我们通过CSS 来改变他的样式。 首先我们先让导航在浏览器的中间。不过在让他居中前得先设...

看你是直接在div里面做css格式还是额外调用css,建议是后者,这样看着比较简洁。

html引入外部css:

<link rel="stylesheet" href="文件路径/文件名.css">

比如你的html文件里有一个div模块

<div id ="daohang">

<div id = "daohang1" class =“geshi”>导航1</div>

<div id ="daohang2" class =“geshi”>导航2</div>

<div id ="daohang3" class =“geshi”>导航3</div>

</div>

在另外一个css文件里布置格式

#daohang{

height: 30px

background-color: white

border: solid 1px yellow

margin: 2px 0

line-height: 30px

.........

}

依次类推设置3个子div的格式。class用于设置3个子div的共同格式;

比如设置共同字体:

.geshi{

font-family: 微软雅黑

}

需要什么样的排版格式百度下怎么设置就行了 上面这个主要是框架,具体的格式就在css文件里面设置,什么颜色\背景\字体\位置等等都在css里设置就行,html的div里面不需做什么操作