div实现简单的页面布局

最新推荐文章于 2024-04-26 15:21:52 发布

wondering_cat

最新推荐文章于 2024-04-26 15:21:52 发布

阅读量1w

点赞数 18

分类专栏：前端文章标签：布局 css html div

本文链接：https://blog.csdn.net/wondering_cat/article/details/78481765

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

摘要：使用html和css实现简单的旅游网站布局，从而熟练地运用css样式，达到美观的布局效果。

HTML代码：

<!DOCTYPE html>
<html>
  <head>
    <title>a.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="./login.css">
	
  </head>
  
  <body>
  <!-- 整体外层容器 -->
  	<div id="container">
  	<!-- banner条 -->
  		<div id="banner">
  			<img alt="新疆风光" src="images/1.jpg"
  			 style="width: 780px;height:150px;">
  		</div>
  		<!-- 导航条 -->
  		<div id="globallink">
  			<ul>
  				<li><a href="#">首页</a></li>
  				<li><a href="#">新疆简介</a></li>
  				<li><a href="#">风土人情</a></li>
  				<li><a href="#">资源下载</a></li>
  			</ul>
  		</div>
  		<!-- 左侧栏 -->
  		<div id="left">
  			<div id="weather">
  				<h3>天气查询</h3>
  				<ul>
  					<li>乌鲁木齐   雷阵雨</li>
  					<li>吐鲁番   阵雨</li>
  					<li>呼和浩特   多云</li>
  				</ul>
  			</div>
  			<div id="today">
  				<h3>今日推荐</h3>
  				<ul>
  					<li><a href="#"><img src="images/55.jpg" style="width:150px;height:50px;"></a></li>
  					<li><a href="#">河流</a>
  					<li><a href="#"><img src="images/55.jpg" style="width:150px;height:50px;"></a></li>
  					<li><a href="#">河流</a>
  					<li><a href="#"><img src="images/55.jpg" style="width:150px;height:50px;"></a></li>
  					<li><a href="#">河流</a>
  				</ul>
  			</div>
  		</div>
  		<!-- 中间内容栏 -->
  		<div id="middle">
  			middle
  		</div>
  		<!-- 右侧栏 -->
  		<div id="right">
  			right
  		</div>
  		<!-- 脚注栏 -->
  		<div id="footer">
  			footer
  		</div>
  	</div>
  </body>
</html>

.css样式

body{
	background:#2286c6;
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	font-family: Arial; 
}
#container{
	margin: 0px auto;
	width:780px;
	height: 600px;
	text-align: left;
	background: #123456;
}
#banner{
	margin: 0px;
	padding: 0px;
	background: #778899;
	height: 150px;
	width:100%;
}
#globallink{
	margin: 0px;
	padding: 0px;
	
}
#globallink ul{
	list-style-type: none;
	padding: 0px;
	margin: 0px;	
}
#globallink ul li{
	float: left;
	text-align: center;
	width: 195px;
}
#globallink ul li a{
	display: block;
	padding: 9px 6px 11px 6px;
	margin: 0px;
	background: url("images/aa.jpg") no-repeat;
}
#globallink a:link,#globallink a:visited{
	color: #004a87;
	text-decoration: underline;
}
#globallink a:hover{
	color: #ffffff;
	text-decoration: none;
	background: url("images/b.jpg") no-repeat;
}

#left{
	width: 200px;
	height: 370px;
	background: white;
	margin: 0px;
	padding: 0px 0px 5px 0px;
	color: #181cff;
	float: left;
}
#weather{
	background: url("images/index.png") no-repeat;
	margin: 0px 5px 0px 5px;
}
#weather h3{
	font-size: 12px;
	padding: 24px 0px 0px 74px;
	margin: 0px;
}
#weather ul{
	list-style-type: none;
	margin: 8px 5px 0px 5px;
	padding: 10px 0px 8px 5px;
}
#weather ul li{
	padding: 1px 0px 0px 1px;	
}

#today{
	background: #5ea6eb;
	margin: 0px 5px;
	padding: 0px 0px 10px 0px;
}

#today h3{
	color: #003973;
	font-size: 12px;
	background: #abc url("images/55.jpg");
	padding: 4px 0px 2px 15px;
	margin: 0px 0px 5px 0px;
}
#today ul{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
#today ul li{
	text-align: center;
	padding: 0px;
}
#today ul li img{
	border: 1px solid #ffffff;
	margin: 8px 0px 0px 0px;
}
#today a:link,#today a:visited{
	color: #004a87;
	text-decoration: underline;
}
#today a:hover{
	color: #ffffff;
	text-decoration: none;
	background: url("images/b.jpg") no-repeat;
}


#middle{
	width: 400px;
	height: 370px;
	background: blue;
	margin: 0px 2px;
	padding: 0px 0px 5px 0px;
	color: #d8ecff;
	float: left;
}
#right{
	width: 176px;
	height: 370px;
	background: pink;
	margin: 0px;
	padding: 0px 0px 5px 0px;
	color: #d8ecff;
	float: left;
}
#footer{
	width: 100%;
	height: 30px;
	background: yellow;
	margin: 0px;
	padding: 1px 0px;
	color: black;
	float: left;
	clear: both;
}

达成效果：

本例中只完成了container、banner、globallink和left这几个模块，其他样式的写法与已写的大致相同。

wondering_cat

关注

18
点赞
踩
82

收藏

觉得还不错? 一键收藏
0
评论
div实现简单的页面布局

摘要：使用html和css实现简单的旅游网站布局，从而熟练地运用css样式，达到美观的布局效果。HTML代码： a.html <img alt="新疆风光" src="images/1.jpg" style="width: 780px;heigh
复制链接

扫一扫

专栏目录