HTML+CSS设计简单导航栏

柔情只为你懂 2024-02-18 11:27 41阅读 0赞

## 1 运行效果 ##

![c659f520fc444382934249a6189b1719.png][]

## 2 资源图片 ##

### 2.1 logo.png ###

![5e317b12aaa74180a307fdaad3a232bf.png][]

### 2.2 nav\_bg.png ###

![cb7d4ae3237f417f8da17d656cabedfa.png][]

### 2.3 nav\_hover\_bg.png ###

![d0669447459c4920abd56f2affe7d9cb.png][]

## 3 运行代码 ##

### 3.1 HTML ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<link href="css/web.css" type="texts" rel="stylesheet"/>
    		<title></title>
    	</head>
    	<body>
    		<div class="nav">
    			<div>
    			<div class="nav_content">
    				<img src="img/nav_bg.png" width="1600px" height="105px"/>
    				<div class="nav_logo">
    				<a href="#" title="返回网站首页">
    				
    				<span><img src="img/logo.png" title="重工软件学院" width="408px" height="104px" alt="重工软件学院"/> </span>
    				</a>
    				<ul class="nav_ul">
    					<li>
    						<a href="#" title="网站首页">网站首页</a>
    					<>
    					<li>
    						<a href="#" title="学院介绍">学院介绍</a>
    					<>
    					<li>
    						<a href="#" title="院系展示">院系展示</a>
    					<>
    					<li>
    						<a href="#" title="师生介绍">师生风采</a>
    					<>
    				</ul>
    				</div>
    				</div>
    			</div>
    		</div>
    	</body>
    <ml>

### 3.2 css代码 ###

*{
    	margin:0;
    	padding:0;
    }
    
    .nav ul,li{
    	list-style: none;
    }
    
    a{
    	text-decoration: none;
    }
    
    a.clears{
    	clear: both;
    	height: 0;
    	line-height: 0;
    	font-size: 0;
    	overflow: hidden;
    }
    body{
    	font-family: Arial, Helvetica, sans-serif,Verdana, Geneva, Tahoma, sans-serif,"微软雅黑","宋体";
    }
    
    .nav{
    	clear: both;
    }
    .nav_content{
    	float: left;
    }
    	
    /* 设置ul的主体样式 */
    
    .nav_logo{
    	position: absolute;
    	top: 0%;
    	left: 10%;
    }
    
    .nav_ul{
    	float: right;
    	}
    	
    .nav_ul>li{
    	float: left;
    }
    
    /* 未点击的样式 */
    .nav_ul>li>a{
    	text-align: center;
    	/* 字体居中 */
    	color: #ffffff;
    	/* 字体颜色 */
    	font-size: 16px;
    	/* 字体大小 */
    	line-height: 104px;
    	height: 104px;
    	width: 151px; 
    	display: inline-block;
    	padding-left: 46px;
    	padding-right:46px;
    	transition: all 0.2s;
    }
    
    /* 点击之后的样式 */
    .nav_ul>li>a:hover{
    	background-image: url(../img/nav_hover_bg.png);
    	background-position: 0px 0px;
    }
    
    @media screen and (max-width: 768px) {
      i, li {
        display: none;
      }
    }

[c659f520fc444382934249a6189b1719.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/4b5f93ad4997404b8c700e3e3992bc91.png
[5e317b12aaa74180a307fdaad3a232bf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/d8a547affc2248da9baab6c1c2e28cf7.png
[cb7d4ae3237f417f8da17d656cabedfa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/1b31bdec55d14840845f1aa7509cb1e0.png
[d0669447459c4920abd56f2affe7d9cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/2003ec0af07944398c8e39c5521d37d3.png