学习笔记-DEMO:静态导航栏

最新推荐文章于 2022-08-24 18:45:15 发布

ZixiangLi

最新推荐文章于 2022-08-24 18:45:15 发布

阅读量631

点赞数

分类专栏： CSS 文章标签： css 导航

本文链接：https://blog.csdn.net/ZixiangLi/article/details/53132686

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html内容：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="1.2.css" />
  <title>lizixiang的网页</title>
</head>
<body>
  <div class="nav">
  <div class="web">web教程</div>
  <ul>
    <li><a href="http://www.w3school.com.cn/html/index.asp">HTML</a></li>
    <li><a href="http://www.w3school.com.cn/css/index.asp">CSS</a></li>
    <li><a href="http://www.w3school.com.cn/js/index.asp">JavaScript</a></li>
    <li><a href="http://www.w3school.com.cn/jquery/index.asp">jQuery</a></li>
    <li><a href="http://www.runoob.com/nodejs/nodejs-tutorial.html">Node.js</a></li>
    <li><a href="http://www.runoob.com/angularjs/angularjs-tutorial.html">angular.js</a></li>
    <li><a href="http://www.runoob.com/react/react-tutorial.html">React</a></li>
    <li><a href="http://www.runoob.com/ajax/ajax-tutorial.html">AJAX</a></li>
  </ul>
</div>
</body>
</html>

css内容：

div.web
{
	font-size: 20px;
	width: 200px;
	background-color: skyBlue;
	text-align: center;
	padding: 2px;
	margin: 2px;
}
ul
{
	list-style-type: none;
	margin: 0px;
	padding: 5px 0 0 0;
}

a:link,a:visited
{
	display: block;
	text-decoration: none;
	text-align: center;
	background-color:lightBlue; 
	color: red;
	width: 80px;
	padding: 2px;
	margin: 2px;
}
a:hover,a:active
{
	background-color: purple;
}
.nav
{
	border:5px solid lightGrey;
	width: 210px;
}
li
{
	margin: 5px;
}