css怎么实现横向导航和竖向导航栏

小编给大家分享一下css怎么实现横向导航和竖向导航栏，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

站在用户的角度思考问题，与客户深入沟通，找到榕江网站设计与榕江网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站制作、网站设计、企业官网、英文网站、手机端网站、网站推广、域名申请、虚拟空间、企业邮箱。业务覆盖榕江地区。

一、竖向导航

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<style>

ul{

list-style-type:none;

margin:0;

padding:0;

}

display:block;

background-color:green;

color:white;

width:80px;

text-align:center;

padding:4px;

text-decoration:none;

}

a:hover,a:active{

background-color:#98bf21;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

运行结果：

2345截图20180821104848.png

二、横向导航：

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<style>

ul{

list-style-type:none;

margin:0;

padding:0;

overflow:hidden;

}

li{

float:left;

}

display:block;

background-color:pink;

color:white;

width:80px;

text-align:center;

padding:4px0px;

text-decoration:none;

}

a:hover,a:active{

background-color:gray;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

css怎么实现横向导航和竖向导航栏

以上是“css怎么实现横向导航和竖向导航栏”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

网页标题：css怎么实现横向导航和竖向导航栏
网页URL：https://www.cdcxhl.com/article8/phojop.html

成都网站建设公司_创新互联，为您提供网站设计公司、定制开发、网站策划、企业建站、网站设计、网站维护

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容