web前端 css学校官网（导航栏）

最新推荐文章于 2024-04-03 23:00:31 发布

Asitpun

最新推荐文章于 2024-04-03 23:00:31 发布

阅读量434

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/Asitpun/article/details/131135637

版权

该代码示例展示了如何使用HTML和CSS创建一个导航栏，包含主菜单项和下拉子菜单。导航栏的背景、字体颜色和大小可自定义。当鼠标悬停在主菜单项上时，有过渡效果改变颜色和背景，并显示下拉菜单。此外，还演示了如何设置不同链接状态的样式，如链接、已访问、悬停和活动状态的颜色及下划线。同时，文章也涉及到列表的边框设置、元素的绝对定位以及阴影效果的实现。

摘要由CSDN通过智能技术生成

如图所示，主要有两部分构成导航栏主页

导航栏大纲部分由三个div容器构成，分别控制背景导航栏宽高，以及字体颜色大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>学校官网</title>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}

			.background {
				background-color: #9a3032;

			}

			.line {


				width: 1200px;
				height: 30px;

				margin: auto;
			}

			.line>div {
				float: left;
				margin-left: 65px;
				line-height: 30px;

			}

第二部分是由图片排列以及伪元素构成并调整与第一部分的绝对位置关系

同时做文字悬停过渡效果

.line>div:hover {
				color: #9a3032;
				transform: 0.3s;
				background-color: white;
				height: 30px;

			}

			.piter>ul>li::before {
				content: "";
				display: inline-block;
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background-color: #9a3032;
			}

			ul>li {
				color: black;
				line-height: 20px;
				margin-left: 0px;
				list-style: none;

			}

			.piter>* {
				float: left;
				margin-top: 0px;
				width: 70px;

			}

			.piter {
				background-color: white;
				width: 70px;
				display: none;
				padding: 10px;
				position: absolute;
			}

			.line>div {
				position: relative;
			}

			.line>div:hover>.piter {
				display: block;
			}

			.new_piter>img {
				width: 100%;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="background">
			<div class="line">
				<div>首页</div>
				<div>学校概况
					<div class="piter">
						<img src="./img/微信图片_20230606145536.png" alt="no">
						<ul>
							<li>学校简介</li>
							<li>校长寄语</li>
							<li>学校领导</li>
							<li>学校风光</li>
							<li>学校标识</li>
						</ul>
					</div>
				</div>
				<div>组织机构
					<div class="piter">
						<img src="./img/微信图片_20230606145536.png" alt="no">
						<ul>
							<li>党群机构</li>
							<li>行政部门</li>
							<li>二级学院</li>
							
						</ul>
					</div>
				</div>
				<div>党群工作
					<div class="piter">
						<img src="./img/微信图片_20230606145536.png" alt="no">
						<ul>
							<li>党建工作</li>
							<li>团委工作</li>
							<li>工会工作</li>
							
						</ul>
					</div>
				</div>
				<div>教育学习
					<div class="piter">
						<img src="./img/微信图片_20230606145536.png" alt="no">
						<ul>
							<li>学校简介</li>
							<li>校长寄语</li>
							<li>学校领导</li>
							<li>学校风光</li>
							<li>学校标识</li>
						</ul>
					</div>
				</div>
				<div>校园生活
					<div class="piter">
						<img src="./img/微信图片_20230606145536.png" alt="no">
						<ul>
							<li>学校简介</li>
							<li>校长寄语</li>
							<li>学校领导</li>
							<li>学校风光</li>
							<li>学校标识</li>
						</ul>
					</div>
				</div>
				<div>学生服务
					<div class="piter">
						<img src="./img/微信图片_20230606145536.png" alt="no">
						<ul>
							<li>学校简介</li>
							<li>校长寄语</li>
							<li>学校领导</li>
							<li>学校风光</li>
							<li>学校标识</li>
						</ul>
					</div>
				</div>
				<div>招生就业
					<div class="piter">
						<img src="./img/微信图片_20230606145536.png" alt="no">
						<ul>
							<li>学校简介</li>
							<li>校长寄语</li>
							<li>学校领导</li>
							<li>学校风光</li>
							<li>学校标识</li>
						</ul>
					</div>
				</div>
				<div>人才招聘</div>
			</div>
			<div class="new_piter">
				<img src="./img/微信图片_20230606173734.png" alt="">


				<img src="./img/微信图片_20230606173744.png" alt="">
			</div>
		</div>
	</body>
</html>

作业：练习

第四次作业
6.修改a链接的不同状态的样式link时字体为绿色取消下划线，hover时字体红色带下划线，visited字体为黑色，ative时字体为黄色
7.给第二个ol中所有子项带边框（提示：通配符）
8.让第二个ol中的div变为绝对定位，并底边对齐。
9.将最后一个div制作为一个带有阴影效果的按钮。
10.p标签省略号

运行结果如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div:nth-child(1){
			width: 100px;
			height: 100px;
			border: 1px  solid red;
			border-bottom-right-radius: 20%;
			border-top-left-radius: 20%;
		}
		body>:nth-child(3){
			width: 100px;
			height: 100px;
			
			border-left: 2px solid salmon;
			border-top: 3px solid darkblue;
		}
		body>:nth-child(2){
			display:block;
			width: 100px;
			height: 100px;
			border: 3px  rebeccapurple;
			text-align: center;
			line-height: 100px;
			
			
		}
		ol>li{
			list-style: none;
			
		}
		body>:nth-child(4)>li::before{
			content: "";
			display: inline-block;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: red;
		}
		#item1{
			float: left;
			margin-left: 30px;
		}
		.ul_first>:nth-child(even){
			padding: 10px;
			margin: 10px;
			border: 1px solid blue ;
			
		}
		
		.qiti:link{
			color: green;
			text-decoration: underline;				
		}
		.qiti:visited{
			color: bisque;
		}
		.qiti:hover{
			color: red;
			text-decoration: underline;	
		}
		
		.qiti:active{
			color: yellow;
			
		}
		ol>*{
			border: 1px solid;
		}
		.qiti{
			position: absolute;
			bottom: 0px;
		}
		.ol_second{
			position: relative;
		}
		body>div:nth-of-type(3){
			text-shadow: 10px 2px 3px rebeccapurple;
			
		}
		p{
			width: 100px;
			height: 100px;
		   text-overflow:ellipsis;
		   overflow: hidden;
		   
		   
		}
		</style>
	</head>
	<body>
		<div></div>
		<span><b><i><u>哈哈哈哈</u></i></b></span>
		<div>
		  <span></span>
		</div>
		<ol class="ol_first">
			<li id="item1">子项1</li>
			<li id="item2">子项2</li>
			<li id="item3">子项3
				<ul class="ul_first">
					<li id="item21">子项21</li>
					<li id="item22">子项22</li>
					<li id="item23">子项23</li>
				</ul>
			</li>
		</ol>
		<ol class="ol_second">
			<li>子项31</li>
			<li>子项32</li>
			<div class="qiti"><a href="#">div33</a></div>
			这是一个a链接
		</ol>
		<div>button</div>
		<p>2131231231212312312312312</p>
	</body>
</html>