html+css设计页面

最新推荐文章于 2024-05-31 12:55:05 发布

姓蔡小朋友

最新推荐文章于 2024-05-31 12:55:05 发布

阅读量1.3k

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_53881899/article/details/127473669

版权

效果图：

在这里插入图片描述

html:

<!doctype html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8">
		<meta name="keywords" content="中国出版协会">
		<meta name="description" content="中国出版协会">
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<title>中国出版协会简化网站</title>
	</head>
	<body>
		<div class="body-top"  ">
			<div class="header" >
				<div class="logo">
				<div id="nav_wrap" >
					<div id="nav" >
						<ul class="clearfix">
							<li><span class="v">
							<a href="http://www.pac.org.cn" target="_blank">首页</a>
							<span class="cut_line">|</span></span>
							</li>
							<li><span class="v">
								<a href="#">协会概况</a></span>
								<span class="cut_line">|</span>
								<div class="kind_menu" style="left: 40px ">
									<a href="#">协会简介</a><span>|</span>
									<a href="#">大事记</a><span>|</span>
									<a href="#">协会章程</a><span>|</span>
									<a href="#">协会领导</a><span>|</span>
									<a href="#">组织机构</a><span>|</span>
									<a href="#">历史沿革</a><span>|</span>
								</div>
							</li>
							<li><span class="v">
								<a href="#">新闻公告</a></span>
								<span class="cut_line">|</span>
								<div class="kind_menu" style="left:40px">
								<a href="#">协会动态</a><span>|</span>
								<a href="#">行业动态</a><span>|</span>
								</div>
							</li>
							<li><span class="v">
								<a href="#">领导讲话</a><span class="cut_line">|</span></span>
							</li>
							<li><span class="v">
								<a href="#">政策法规</a></span><span class="cut_line">|</span>
								<div class="kind_menu" style="left: 40px">
									<a href="#">政策发布</a><span>|</span>
									<a href="#">法律法规</a><span>|</span>
								</div>
							</li>
							<li><span class="v">
								<a href="#">工作简报</a></span><span class="cut_line">|</span>
								<div class="kind_menu" style="left: 40px">
								</div>
							</li>
							<li><span class="v">
								<a href="#">评奖表彰</a></span><span class="cut_line">|</span>
								<div class="kind_menu" style="left: 40px">
								</div>
							</li>
							<li><span class="v">
								<a href="#">会员服务</a></span><span class="cut_line">|</span>
								<div class="kind_menu" style="left: 40px">
									<a href="#">会员单位</a><span>|</span>
									<a href="#">会员动态</a><span>|</span>
									<a href="#">申请入会</a><span>|</span>
									<a href="#">会员变更</a><span>|</span>
									<a href="#">会员风采</a><span>|</span>
									<a href="#">行业维权</a><span>|</span>
									<a href="#">行业自律</a><span>|</span>
									<a href="#">建言献策</a><span>|</span>
								</div>
							</li>
							<li><span class="v">
								<a href="#">教育培训</a></span><span class="cut_line">|</span>
								<div class="kind_menu" style="left: 40px">
								</div>
							</li>
							<li><span class="v">
								<a href="#">外事</a></span><span class="cut_line">|</span>
								<div class="kind_menu" style="left: 40px">
								</div>
							</li>
							<li><span class="v">
								<a href="#">专家访谈</a></span><span class="cut_line">|</span>
								<div class="kind_menu" style="left: 40px">
								</div>
							</li>
							<li><span class="v">
							<a href="#">展会</a></span><span class="cut_line">|</span>
								<div class="kind_menu" style="left: 40px">
								</div>
							</li>
							<li><span class="v">
								<a href="#">行业研究</a></span>
								<div class="kind_menu" style="left: 40px">
									<a href="#">高端视点</a><span>|</span>
									<a href="#">理论专题</a><span>|</span>
									<a href="#">调研报告</a><span>|</span>
									<a href="#">在线调研</a><span>|</span>
								</div>
							</li>
						</ul>
					</div><!--nav-->
				</div><!--nav_wrap-->
			</div>
		</div>
	</div>
	<div class="changeDiv">
		<a href="#"><img src="images/20150213112820232.jpg" width="960" height="198" alt="中国出版年会召开" /></a>
	</div>
	<div class="footer">
		<div>
			<p>Web开发基础 2021-2022第一学期模拟考试<p>
<p>学生姓名：XXX 班级：XXX 学号：XXXXXXXX<p>
		</div>
	</body>
</html>

css:

/* 网站：中国出版协会简化网站 
   样式表文件名：pac.css
   应用对象：中国出版协会.hmtl
*/
body{
	color: #010101;
	background: #fff;
    margin-top: 0px; 
	margin-left: 0px; 
	margin-right: 0px;
	}
body, html{ 
	font: 12px/1.5 tahoma, arial, sans-serif;
	display: block;
	}
.body-top{
	height: 297px;
	background: url("../images/b1.jpg");
	}
.header,.header .logo{
	width: 960px;
	margin: 0 auto;
    height: 297px;
	background: url("../images/b2.jpg") no-repeat center;
	}
/*New Nav Style*/
#nav ul{
	margin:0px;
	padding:0px;
	}
#nav li{ 
	text-align:center;
	font-size:14px;
	font-weight:700;
	}
#nav_wrap {
	width: 960px;
	overflow: hidden;
	padding-top: 223px;
	}
#nav{
	height: 69px;
	width: 960px; 	
	margin: 0 auto;
	padding:0px 5px;
    position: relative;
	}
#nav li {
	float: left;
	list-style: none;
	}
#nav li .v a{
	padding: 0 4px;
	height: 39px;
	line-height: 33px;
	display: block;
	color: #0d2972;
	float: left;
	}
#nav li .v a:hover{
	color: #d62e38;
	text-decoration: none;
	}
#nav .kind_menu {
	height: 30px; 
	width: 880px; 
	top: 26px;
	left: 70px; 
	line-height: 30px;
    vertical-align: middle; 
	position: absolute; 
	padding-top: 18px;  
	font-weight: normal; 
    color: #152026; 
	font-size: 12px;
	text-align: left; 
	display:none; /* 初始不显示 */
	}
#nav .kind_menu a {
	color: #152026;
	text-align: center;
	padding: 0 10px; 
	font-family: Arial, Helvetica, sans-serif;
	}
#nav .kind_menu a:hover {
	text-decoration: none;
	}
#nav .kind_menu span {
	font-size: 10px; 
	color: #cecece; 
	line-height: 30px;
	}
.cut_line{
	padding-top: 4px;
	display: inline-block;
	font-size: 14px;}
/* 鼠标滑过时显示二级菜单  */
#nav ul li:hover .kind_menu{
	display:block;
	left:100px;
	} 
.changeDiv{
	text-align:center;
	}
.footer{
	text-align:center;
	}	
img{
	border:0px;
}