CSS总结——导航栏

最新推荐文章于 2024-09-26 19:17:56 发布

卡夫卡的熊kfk

最新推荐文章于 2024-09-26 19:17:56 发布

阅读量635

点赞数

分类专栏： ——【B/S】

本文链接：https://blog.csdn.net/qsbbl/article/details/78619102

版权

——【B/S】专栏收录该内容

14 篇文章 2 订阅

订阅专栏

接上回书，html的作用是把内容写到网页上去；css的作用是对内容进行样式的修饰。

css，Cascading Style Sheets，层叠样式表。

css添加到HTML中的方式

内联样式：

解释：在本标签中加入css

代码展示：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

内部样式表：

解释：在本页面的<head>中加入css

代码展示：

外部引用：

解释：html，css各写在一个文件里，html通过一句代码实现对css的引用。

代码展示：

说明：

1、外部引用更常用，因为其解耦合的效果很明显。

2、三种方法的优先级为：内联样式>内部样式>外部样式

—————————————我是分割线———————————————

同样，小编晒几个例子，咱们一起来感受一下css。

栗子1号（垂直导航栏）

先来看实现的效果：

源代码展示：

HTML代码：

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>垂直导航栏</title>
<link rel="stylesheet" type="text/css" href="b.css">
</head>

<body>
<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#news">联系</a></li>
  <li><a href="#news">关于</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;heig :1000px;">
<h2>我是小仙女吗？</h2>
<h3>那是当然。</h3>
<p>啊哈哈哈哈哈佛阿苏广佛爱迪生广济南路大咖个奇偶的发掘和公婆东方丽景韩
立凯赤峰黄金广发华福递归和啊哈哈哈哈哈佛阿苏广佛爱迪生广济南路大咖个
奇偶的发掘和公婆东方丽景韩立凯赤峰黄金广发华福递归和
啊哈哈哈哈哈佛阿苏广佛爱迪生广济南路大咖个奇偶的发掘和公婆东方丽景韩立凯赤峰黄金广发华福递归和</p>
<p>啊哈哈哈哈哈佛阿苏广佛爱迪生广济南路大咖个奇偶的发掘和公婆东方丽景韩立凯赤峰黄金广发华福递归和</p>
<p>啊哈哈哈哈哈佛阿苏广佛爱迪生广济南路大咖个奇偶的发掘和公婆东方丽景韩立凯赤峰黄金广发华福递归和</p>
</body>
</html>

css代码：

body{
  margin:0;
}

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  width:25%;
  background-color:#f1f1f1;
  position:fixed;
  height:100%;
  overflow:auto;
}
li a{
  display:block;
  color:#000;
  padding:8px 16px;
  text-decoration:none;
}
li a.active{
  background-color:#4CAF50;
  color:white;
}
li a:hover:not(.active)
 background-color:#555;
 color:white;

栗子2号（水平导航栏）
要实现的效果：

源代码展示：

HTML中：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Levelcss.css">
</head>
<body>
<ul >
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
   <div class="dropdown"> 
     <a href="#" class="dropbtn" >关于</a>
	 <div class="dropdown-content">
	    <a href="#">链接1</a>
		<a href="#">链接2</a>
		<a href="#">链接3</a>
	  </div>
	</div>
</ul>

<div style="padding:0 16px;">
<h2>响应式导航栏实例</h2>
<p>在屏幕宽度小于600px时，会重置导航栏为垂直型</p>
</body>
</html>

css中：

body{margin:0;}

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  background-color:#333;
}

 li {float:left;}

 li a,.dropbtn{
  display:inline-block;
  color:white;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
}

 li a:hover,.dorpdown:hover.bropbtn {background-color:#111;}

li a.active{background-color:#4CAF50;}

.dropdown{
	display:inline-block;
}

.dropdown-content{
	display:none;
	position:absolute;
	background-color:#f9f9f9;
	min-width:160px;
	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
}
 
  .dropdown-content a{
	color:black;
	padding:12px 16px;
	text-decoration:none;
	display:block;	
}

.dropdown-content a:hover{background-color:#f1f1f1}

  
 .dropdown:hover .dropdown-content{/*点离前面的属性需要有空格*/
	display:block;
}

小结

对html和css的学习算是告一个段落了，在这个阶段的学习中更加明白了应该怎么去主动学习。加油。