怎么在heml5里面添加css3菜单栏

 我来答
育知同创教育
2017-06-25 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部

给你个例子

<title>div css3 侧边菜单导航栏-www.codesc.net</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "微软雅黑";}
.demo{margin:60px auto;width:720px;}
.navbox{float:left;}
ul.nav{width:200px;padding:60px 0 60px 0;background:url() no-repeat;}
ul.nav li{margin:5px 0 0 0;}
ul.nav li a{
    background:#cbcbcb url() no-repeat;color:#174867;padding:7px 15px 7px 15px;width:100px;display:block;text-decoration:none;
    -webkit-transition:all 0.3s ease-out;
    -moz-transition:all 0.3s ease-out;
    -o-transition:all 0.3s ease-out;
    -webkit-box-shadow:2px 2px 4px #888;
    -moz-box-shadow:2px 2px 4px #888;
    -o-box-shadow:2px 2px 4px #888;
}
ul.nav li a:hover{background:#ebebeb url() no-repeat;color:#67a5cd;padding:7px 15px 7px 30px;}
</style>
<div class="demo">
    <div class="navbox">
        <ul class="nav">
            <li><a href="#">XHTML</a></li>
            <li><a href="#">C++</a></li>
            <li><a href="#">Mootools</a></li>
            <li><a href="#">HTML5</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Ajax</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">Perl</a></li>
        </ul>
    </div>
    <div class="navbox">
        <ul class="nav">
            <li><a href="#">XHTML</a></li>
            <li><a href="#">HTML5</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Ajax</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
    <div class="navbox">
        <ul class="nav">
            <li><a href="#">XHTML</a></li>
            <li><a href="#">HTML5</a></li>
            <li><a href="#">CSS</a></li>
        </ul>
    </div>
</div>
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式