Web — 实现 Banner（插入图片） + Menu（插入导航栏）

最新推荐文章于 2023-03-31 00:05:42 发布

王睿丶

最新推荐文章于 2023-03-31 00:05:42 发布

阅读量4.1k

点赞数 5

文章标签： HTML 博客项目 Banner、Menu CSS 插入图片、导航栏

本文链接：https://blog.csdn.net/qq_27494201/article/details/101629356

版权

在这里插入图片描述

nice_twentyfour.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="box">
		<div id="banner">
			<img src="image/bg.jpg" alt="" title="标题图片">
		</div>
		<div id="menu">
			<ul>
				<li><a href="" title="">首页</a></li>
				<li><a href="" title="">相册</a></li>
				<li><a href="" title="">阳光生活</a></li>
				<li><a href="" title="">校园情缘</a></li>
				<li><a href="" title="">释放梦想</a></li>
				<li><a href="" title="">留言</a></li>

			</ul>
		</div>
		<div id="main">
			<div id="left">
				
			</div>

			<div id="right">
				
			</div>
		</div>
		<div id="footer">
			
		</div>
	</div>
</body>
</html>

style.css

*{
	margin: 0;
	padding: 0;
}
#box{
	width: 1024px;
	margin: 0 auto;
}

#banner{
	width: 1024px;
	height: 209px;
	background-color: #5ACF17;
}

#menu{
	width: 1024px;
	height: 50px;
	line-height: 50px;
	background-color: #1C8934;
}

#menu ul{
	float: right;
	list-style-type: none;
}

#menu ul li{
	float: left;
	margin-right: 20px;
}

#menu li a{
	text-decoration: none;
	color: #fff;
}

#main{
	width: 1024px;
	background-color: #F65771;
}

#left{
	float: left:;
	width: 250px;
	height: 800px;
	background-color: #318AF3;
}

#right{
	float: right;
	width: 974px;
	height: 800px;
	background-color: #green;
}

#footer{
	width: 1024px;
	height: 100px;
	background-color: orange;
}

beanner 背景图

在这里插入图片描述

王睿丶

关注

5
点赞
踩
37

收藏

觉得还不错? 一键收藏
打赏
0
评论
Web — 实现 Banner（插入图片） + Menu（插入导航栏）

nice_twentyfour.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link ...
复制链接

扫一扫