第七章上机练习1

最新推荐文章于 2021-02-27 11:02:52 发布

「已注销」

最新推荐文章于 2021-02-27 11:02:52 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36074134/article/details/52859763

本文提供了一个使用HTML和CSS进行网页布局的具体实例，包括顶部区域的背景颜色设置、导航栏的样式定义及链接效果等。通过这个实例，读者可以了解如何实现网页的基本布局和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"> 
.div1 {
	background-color:#666;
	height:87px;
	width: 870px;
	
}
   .left{ float:left;}
   .right{ float:right;}
  
  .div2{
	  padding-left:0px;
	background-color:#000;
	height:25px;
	width: 870px;
	
	font-weight: bold;
	  }
  li{
	  text-align: center;		
	  border:#000 thin solid;
	  list-style-type:none;
	  float:left;
	  width:80px;
	  display:block;
	  }
	  ul{
		  margin:0px 0px;
		 padding:0px 0px;
		  }
		a{
			display:block;
			text-decoration:none;
			color:#FFF;
			background:url(../forumMenuBg.gif) 0px 0px no-repeat;
		}
		a:hover{
			display:block;
	background:url(../forumMenuBg.jpg) repeat-x;
		
			
			
			}
</style>
</head>
 
<body>
 <div class="div1">
 <img class="left" src="../forumLogo.jpg"/>
 <img class="right"  src="../forumLogo_r.jpg"/>
 </div>
 <div class="div2">
 <ul>
 <li><a href="#">首 页</a></li>
 <li><a href="#">青鸟知识库</a></li>
 <li><a href="#">青鸟论坛</a></li>
 <li><a href="#">学员问答</a></li>
 <li><a href="#">青鸟圈子</a></li>
 <li><a href="#">实时课堂</a></li>
 <li><a href="#">客户端下载</a></li>
 <li><a href="#">帮助中心</a></li>
 </ul>
 </div>
</body>
</html>