h5+css 水平菜单制作

雨点打透心脏的1/2处 2022-09-23 03:40 258阅读 0赞

## 水平菜单制作 ##

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>导航菜单</title>
    <style type="text/css"> *{ margin:110; padding:100; font-size:14px;} ul{ list-style:none;} a{ color:#333;text-decoration:none} .nav li{ float:left;} .nav li a{ display:block; text-align:center; height:30px; line-height:30px; width:100px; background-color:#efefef;} .nav li a:hover{ background-color:#F60; color:#fff} </style>
    
    </head>
    <body>
    
    <ul class="nav">
        <li><a href="#">首　　页</a></li>
        <li><a href="#">新闻快讯</a></li>
        <li><a href="#">产品展示</a></li>
        <li><a href="#">售后服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    
    </body>
    </html>

效果图：  
![这里写图片描述][20160703111821910]

[20160703111821910]: /images/20220721/fe6350e49cf6403fa6899e929acbb98b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，258人围观）

还没有评论，来说两句吧...

相关阅读

相关利用H5的css3制作动画

CSS3 弹跳动画出现弹跳效果 @keyframes bounceIn{ 0% { opacity: 0;

Myth丶恋晨/ 2022年10月01日 06:47/ 0 赞/ 290 阅读

相关 CSS制作水平垂直居中对齐

CSS制作水平垂直居中对齐 http://www.w3cplus.com/css/vertically-center-content-with-css

怼烎@/ 2022年09月25日 10:21/ 0 赞/ 323 阅读

相关 h5+css 菜单导航---改变宽度

菜单导航—改变宽度 1、使用javascript脚本实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

Dear 丶/ 2022年09月23日 03:42/ 0 赞/ 212 阅读

相关 h5+css 伸缩菜单---改变高度

伸缩菜单—改变高度 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://

亦凉/ 2022年09月23日 03:42/ 0 赞/ 223 阅读

相关 h5+css 圆角菜单

圆角菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

- 日理万妓/ 2022年09月23日 03:40/ 0 赞/ 212 阅读

相关 h5+css 水平菜单制作

水平菜单制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

雨点打透心脏的1/2处/ 2022年09月23日 03:40/ 0 赞/ 259 阅读

相关 h5+css 垂直导航菜单

垂直导航菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

矫情吗；*/ 2022年09月23日 03:39/ 0 赞/ 252 阅读

相关使用css+js制作水平菜单

![Image 1][] 当鼠标移到一级菜单上 ![Image 1][] ![Image 1][] <!DOCTYPE html PUBLIC "-//W3

我会带着你远行/ 2022年08月10日 10:59/ 0 赞/ 229 阅读

相关 CSS-制作左侧菜单

CSS\-制作左侧菜单全部代码如下： ![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1] ![这里写图片描述][Sou

ゞ浴缸里的玫瑰/ 2022年06月11日 04:46/ 0 赞/ 489 阅读

相关纯css制作三级菜单

![20170307091332300][] 一.注意点： 1.选择器的使用 ①element1>element2：如果元素element2不是父元素element1的直

小灰灰/ 2021年09月12日 01:36/ 0 赞/ 442 阅读