如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
html如何利用ul/li制作横向导航栏？css做导航
来源：互联网
2023-03-16 19:11:59 261
Dreamweaver制作横向的导航，怎么用ul li列表来制作呢？
工具/原料
- Dreamweaver CC2018
方法/步骤
新建一个html网页，在body中输入【ul> li>a href="#" target="_blank">首页/a>/li>/ul>】。保存后刷新网页可以看到无序列表已经由第一项了。
在ul中复制两个【li>a href="#" target="_blank">首页/a>/li>】，并把字分别修改成【简介】和【产品】。
在head中添加【style type="text/css">ul{list-style-type:none;}/style>】，这样就可以去掉无序列表前面的原点了。
因为是要做横向导航，所以要加入一个左浮动的代码【li{float: left;}】。保存后可以看到3个列表项已经水平排开了，但是文字都在一起，很难区分。
定义a标签样式【a{width: 80px; height: 20px;padding: 10px 0;text-align: center; background: #d4d4d4;display: block;}】。可以看到文字有距离了，但是文字是蓝色的，并且有下划线；三个列表项中间还没有空隙。
可以先添加一个右边距【margin-right: 5px;】，保存后可以看到，三个导航项已经有了一定的距离了。
然后加入以下代码【 color: #000000; text-decoration: none;】，定义字体为黑色，下划线去掉。这样就像导航了把~
最后我们还可以为导航项添加一个鼠标经过时换个颜色，这样更清晰【a:hover{
background: #ff0000;color: #ffffff;}】。好啦，就是这么简单，大家都会了吗？
注意事项
- 如果不添加float:left浮动，默认就是竖导航
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：button如何携带参数跳转页面 下一篇：php生成静态html文件
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 438 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)