Web前端页面设计（成都某校简要设计）

最新推荐文章于 2024-07-03 23:56:01 发布

爱吃鸡爪zi

最新推荐文章于 2024-07-03 23:56:01 发布

阅读量515

点赞数 3

文章标签：前端学习

本文链接：https://blog.csdn.net/weixin_74197037/article/details/134516874

版权

一、实验目的和要求

掌握CSS盒子模型的样式和对齐设计；
掌握CSS复合选择器和新型选择器的使用；
掌握position定位和display属性设置；

4.掌握弹性盒布局和浮动定位等常用页面布局设计。

二、实验原理及内容

为csxhuhomepage.html添加CSS样式，设计实现西华大学计算机与软件工程学院主页导航栏的多级菜单，除了本实验明确要求的设置之外，页面效果应尽可能与计算机与软件工程学院首页导航栏一致，见图1，主要要求：

设置导航栏菜单横向分布，当鼠标经过导航栏主菜单项时，显示相应的二级子菜单，一、二级菜单的菜单项宽度一致，见图1；
导航菜单和展示图应能随浏览器窗口宽度自适应变化，但应能确保导航栏主菜单项始终单行横向分布，并且导航栏一级、二级菜单项中的超链接文本应能始终单行显示且宽度一致，见图2和图3；
鼠标经过导航项目时（包括一二级菜单），背景色渐变；
不能更改HTML文本，包括不能添加任何类名和ID属性！

友情提示：推荐使用弹性盒布局设计导航栏；二级菜单的显示与隐藏display属性；二级菜单的定位采用position定位。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>西华大学</title>
<style>
body{ 
	font-size:18px;
	color:white;	
	background-color:#651110;
}
a{
    text-decoration: none;
	color:#e6dede;
}
hr{
    height:1px;
	border:none;
	margin:0 auto;
    background-color:#490404;
}
.container{
	
	border-radius: 15px;
}
.menu-item>a{
    color:white;
	position: relative;
}

ul,li,div{
	box-sizing:border-box;/*便于对齐，免受个类型元素padding不一致的影响*/
}

.first_nav{
	height: 25px;
	border: rgb(201, 196, 196) solid 1px;
	background-color: rgb(38, 34, 34);
	color: rgba(245, 248, 246, 0.868);
	
}
.span_1{
	color: whitesmoke;
	float: left;
	margin: 10px 10px 0px 0px;
	margin-left: 35px;
	margin-top: 0px;
}
.span_2{
margin-right: 25px;
float: right;
font-style: italic;
font-size: 15px;


}
.logo{
	position: relative;
	text-align: center;
	
}
#bg{
	background-color: rgb(172, 145, 145);
}
.nav{
	/* border: 1px solid black; */
	margin-top: 5px;
	text-align: center;
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; 
	margin-right: 30px;
}

.menu-item{
	display: flex;
    justify-content: space-around;
	display: inline-block;
	position: relative;
    flex-grow: 1; /* 自适应填充剩余空间 */
	border: solid 1px white;
	border-top: none;
	border-bottom: none;
}

.sub-menu{
    display: none;
    position: absolute;
    top: 100%;
    left: 50%; /* 设置二级菜单相对于父级元素水平居中 */
    transform: translateX(-50%); /* 使用transform属性进行微调，使其完全水平居中 */
    background-color: rgba(0, 0, 0, 0.9);
    list-style: none;
    padding: 0;
    z-index: 1;
}

.menu-item:hover .sub-menu{
	display: block;
    background-color: #9a8e8e;
    padding: 0px; 
	width:10em;
}

.menu-item a:hover{
	background-color: rgba(117, 117, 117, 0.642);
}
</style>
</head>
<body>
<div class="container">
		
	
<header>
<div class="first_nav">
	<div class="span_1"><a href="#">学生</a></div>
	<div class="span_1"><a href="#">教师</a></div>
	<div class="span_1"><a href="mailto:jsjsj@mail.xhu.edu.cn">书籍邮箱</a></div>
	<div class="span_1"><a href="mailto:jsjsj@mail.xhu.edu.cn">院长邮箱</a></div>
	<div class="span_2">
		<input type="text" placeholder="搜索框">官微：img&nbsp;&nbsp;&nbsp;官博：img
	</div>
</div>
</header>
<div id="logo" class="logo"><img src="../实验/实验3题目/实验3题目/images/tubiao.png"></div>
<hr/>
<ul class="nav" type="none">
	<li class="menu-item"><a href="">首页</a></li>
	<!-- 首页，课程建设没有二级导航-->
	<li class="menu-item"><a href="#">学院概况</a>
		<ul class="sub-menu">   
		  <li><a href="http://cs.xhu.edu.cn/1684/list.htm" target="new">学院概况</a></li>		  
		  <li>组织结构</li>		  
		  <li>系部</li>		  
		  <li>办公室</li>
		  <li>实验中心</li>
		</ul>
	</li>
	<li class="menu-item"><a href="#">新闻公告</a>
		<ul class="sub-menu">   
		  <li>新闻</li>		  
		  <li>公告</li>		  
		</ul>
	</li>
	<!-- 其他菜单项同上 -->
    <li class="menu-item"><a href="http://www.xhu.edu.cn">人才培养</a>
		<ul class="sub-menu">   
		  <li>本科培养</li>
		  <li>研究生培养</li>
		  <li>硕士点</li>
		</ul>
	</li>
	<li class="menu-item"><a href="http://www.xhu.edu.cn">师资队伍</a>
		<ul class="sub-menu">   
		  <li>教学团队</li>		  
		  <li>教学名师</li>		  
		  <li>教授</li>		  
		  <li>副教授</li>
		  <li>硕士生导师</li>
		</ul>
	</li>
	<li class="menu-item"><a href="http://www.xhu.edu.cn">学科与研究</a>
		<ul class="sub-menu">   
		  <li>科学研究</li>		  
		  <li>学科建设</li>		  
		</ul>
	</li>

	<li class="menu-item"><a href="http://www.xhu.edu.cn">党建之窗</a>
		<ul class="sub-menu">   
		  <li>党建动态</li>		  
		  <li>工作问答</li>		  
		  <li>组织机构</li>		  
		  <li>组织发展</li>
		</ul>
	</li>
	<li class="menu-item"><a href="http://www.xhu.edu.cn">招生就业</a>
		<ul class="sub-menu">   
		  <li>就业信息</li>		  
		  <li>本科招生</li>		  
		  <li>研究生招生</li>		  
		  <li>优秀校友</li>
		  <li>优秀研究生</li>
		</ul>
	</li>
	<li class="menu-item"><a href="http://www.xhu.edu.cn">学生工作</a>
	   <ul class="sub-menu">   
		  <li>学生新闻</li>		  
		  <li>公示</li>		  
		  <li>优秀学子风采</li>		  
		</ul>
	</li>
	<li class="menu-item"><a href="http://www.xhu.edu.cn">课程建设</a>
	</li>
</ul>
<div id="bg" class="logo" ><img src="../实验/实验3题目/实验3题目/images/bg.png"  style="height: 600px; max-height: 800px;" ></div>
</div>
</body>
</html>

ok，其中的图片路径是需要自己添加的，本爪子就交给你们啦！

效果如下：