利用网页盒子做导航条

最新推荐文章于 2022-11-23 07:00:00 发布

海下千里

最新推荐文章于 2022-11-23 07:00:00 发布

阅读量769

点赞数 4

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_44602220/article/details/97397340

版权

本文介绍了如何制作网页导航条以及使用浮动布局调整页面。首先设置了基础框架，并添加了超链接，然后通过浮动元素来实现理想的页面效果，同时包含了标题、内容和图片的整合。

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

进行初步的导航条和网页盒子训练

设置基本框架条件
加入超链接
利用浮动调整页面
加入标题内容图片等

代码如下

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.nav{
			list-style: none;
			
			width: 1000px;
			background-color: powderblue;
			margin: 20px auto;
			overflow: hidden;
		}
		.nav li{
			float: left;
			width: 25%;
		}
		.nav a{
			display: block;
			width: 100%;
			text-align: center;
			padding: 5px 0;
			text-decoration: none;
			color: white;
			font-weight: bold;
		}
		.nav a:hover{
			background-color: red;
		}
		.d1{
			width: 1200px;
			height: 600px;
			background-color: gainsboro;
			margin: 0 auto;
		}
		.d2{
			width: 900px;
			height: 600px;
			background-color: white;
			float: left;
			
		}
		.d3{
			width: 200px;
			height: 550px;
			
			float: right;
			margin: 10px 40px;
		}
		.d4{
			width: 1200px;
			height:200px ;
			back