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

html-css011

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

<div>

<ul>

<li>

漂亮的横排导航栏

</li>

<li>

漂亮的横排导航栏

</li>

<li>

漂亮的横排导航栏

</li>

<li>

漂亮的横排导航栏

</li>

<li>

漂亮的横排导航栏

</li>

</ul>

</div>

用CSS把LI左浮动

然后在去掉前面的点

想怎么漂亮怎么做

看你是直接在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里面不需做什么操作

div+css不仅起到网页布局制作的功能还能起到代码优化,怎样才能以最快的速度打开网页。

在用打开速度方面我们就要考虑到用背景定位技术,这样无论你制作的页面含有多少小图标或小图片都可以统一放在一个图片里,这样减少浏览器网客户端读取的次数。。参考:www.qq.com 你右击把qq网站的背景图片,凌晨一下,在看一下那个图片,就会明白了。

div+css布局制作网页时还要考虑到浏览器兼容性的问题。比如怎样兼容IE6、7、8、及火狐浏览器等常用浏览器。

其实网页制作布局还有很多,我只一些例子而已。

我是做网页制作布局的大家可以一起探讨一下啊。