防CSDN首页菜单

最新推荐文章于 2024-06-12 16:13:31 发布

gz109

最新推荐文章于 2024-06-12 16:13:31 发布

阅读量513

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/gz109/article/details/8919244

版权

html/css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

先看效果

仿的@

下面看html的代码

<!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>ul菜单</title>
<style type="text/css">
.one{width:860px; height:30px; background-color:#b7151c;}/*设置大的DIV的背景颜色，宽度，高度*/
.one a{ 
display:block; /*设置A为块状*/
text-decoration:none;  /*去除A的下划线*/
line-height:30px;   /*设置A的行高*/
padding:0 10px 0 10px;   /*设置padding，上下为0，左右为10PX*/
color:#FFF;   /*设置A连接的字体为白色*/
font-weight:bold;  /*设置A的字体为粗体*/
}
.one a:hover{backgrount-color:#990005; background-color:#990005;}  /*鼠标经过的背景色为红色*/
.one ul{ list-style:none;} /*去除UL前面的点*/
.one li{ float:left;}	/*让LI靠左浮动*/
</style>

</head>

<body>
	<div class="one">
    	<ul>
        	<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>
            <li><a href="#">程序员杂志</a></li>
        	<li><a href="#">论坛</a></li>
        	<li><a href="#">博客</a></li>
        	<li><a href="#">下载</a></li>
        </ul>
    
    </div>

</body>
</html>

gz109

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防CSDN首页菜单

先看效果仿的@下面看html的代码ul菜单.one{width:860px; height:30px; background-color:#b7151c;}/*设置大的DIV的背景颜色，宽度，高度*/.one a{ display:block; /*设置A为块状*/text-decoration:none; /*去除A的下划线*/
复制链接

扫一扫

专栏目录