优客教育网页

最新推荐文章于 2024-07-31 18:12:12 发布

叙利亚逃兵

最新推荐文章于 2024-07-31 18:12:12 发布

阅读量402

点赞数 6

文章标签： html5

本文链接：https://blog.csdn.net/2302_80146850/article/details/135299377

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,inital-scale=1.0">
		<title>的优课教育网站首页</title>
		<link href="css/style05.css"type="text/css"rel="stylesheet"/>
	</head>
	<body>
		<div id="header">
			<ul class="nav">
				<li class="logo"><img src="images/logo.png"/></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>
		<div id="content">
			<div class="banner"><img src="images/banner.jpg"</div>
			<div class="style_bg">
				<div class="style">
					<dl>
						<dt class="left1"></dt><dd class="left2"><a href="#">大学专区</a></dd>
						<dt class="left3"></dt><dd class="left4"><a href="#">求职专区</a></dd>
					</dl>
					<dl>
						<dt class="center1"></dt><dd class="center2"><a href="#">高中专区</a></dd>
						<dt class="center3"></dt><dd class="center4"><a href="#">考证专区</a></dd>
					</dl>
					<dl class="third">
						<dt class="right1"></dt><dd class="rignt2"><a href="#">线上精品课专区</a></dd>
					</dl>
				</div>
			</div>
		</div>
		<h2>热门课程/Popular courses</h2>
		<div class="current">
			<dl>
				<dt class="match_1"></dt>
				<dd class="current01">软件工程师课程</dd>
				<dd class="current02"><a class="three" href="#">高级IT人才的捷径</a></dd>
			</dl>
			<dl>
				<dt class="match_2"></dt>
				<dd class="current01">Java课程</dd>
				<dd class="current02"><a class="three” href="#">工程师必修课程</a></dd>
			</dl>
			<dl>
				<dt class="match_3"></dt>
				<dd class="current01">Python课程</dd>
				<dd class="current02"><a class="three" href="#">热门行业新趋势</a></dd>
			</dl>
			<dl>
				<dt class="match_4"></dt>
					<dd class="current01">UI课程</dd>
					<dd class="current02"><a class="three" href="#">设计师必修课程</a></dd>
				</dl>
			</dl>
		</div>
	</div>
	<div id="footer">
	<p>Copyright © 2020-2030 Edu.com,All rights reserved.</p>
	<p>2020-2030,版权所有 优课网 00CP备 2222222222</p>
	</div>
</body>
</html>

css代码

*{margin: 0; padding: 0; list-style: none;}
body{
	background:#fff9ed;
	font-family: "微软雅黑";
	font-size: 14px;
	}
a:link,a:visited{text-decoration:none; color:#fff; font-size:16px;}
#header{
	width: 100%;
	height: 128px;
	background: url(../images/head_bg.jpg) repeat-x;
	border-bottom: 3px solic #d5d5d5;
}
.nav{
	width:980px;
	margin:0 auto;
}
li{float:left;}
li a{
	display:inline-block;
	height: 91px;
	width: 119px;
	text-align: center;
	line-height: 70px;
}
li a:hover{background: url(../images/xuanfu.png) center center;}
#content{
	width: 980px;
	margin: 0 auto;
}
.style_bg{
	width:908px;
	height:330px;
	background: #6dbf2d;
	padding:10px 36px 5px;
}
.style{
	width: 892px;
	height: 314px;
	background: #fff;
	padding:8px 10px 8px 6px;
}
.style dl{
	width: 279px;
	height: 313px;
	float:left;
	margin-left:4px;
}
.style .third{width:322px;}
.style dt,.style dd{float: left;}
.style .left1,.style .left3,.style .center1,.style .center3{width:162px;}
.style .left2,.style .left4,.style .center2,.style .center4,.style .right2{width:117px;}
.style .left1,.style .left2,.style .center1,.style .center2{ margin-bottom:8px;}
.style .left1{
	height:169px;
	background: url(../images/pic01.jpg) no-repeat;
}
.style .left2{
	height:169px;
	line-height:169px;
}
.style .left3{
	height:137px;
	background: url(../images/pic02.jpg) no-repeat;
	}
.style .left4{
	height:137px;
	line-height:137px;
	}
.style .center1{
	height:117px;
	background: url(../images/pic03.jpg) no-repeat;
}
.style .center2{
	height: 117px;
	line-height: 117px;
}
.style .center3{
	height: 188px;
	background: url(../images/pic04.jpg) no-repeat;
}
.style .center4{
	height: 188px;
	line-height: 188px;
}
.style .right1{
	width: 205px;
	height: 314px;
	background: url(../images/pic05.jpg) no-repeat;
}
.style .right2{
	height:314px;
	line-height:314px;
}
.style a{
	display:block;
	background: #f2f2f2;
	text-align:center;
	color:#333;
}
.style a:hover{background:#6dbf2d;}
h2{
	width:259px;
	height:45px;
	background:#6dbf2d;
	font-size:20px;
	font-weight:100;
	line-height:45px;
	text-align:center;
	color:#fff;
	margin-top:80px;
}
.current{
	width:958px;
	height:342px;
	background:#fff;
	border:1px solic #dcd2ba;
	padding:13px 0 0 20px;
}
.current dl{
	width:229px;
	height:330px;
	border:1px solic #dcd2ba;
	float:left;
	margin-right:5px;
}
.current dt{
	width:229px;
	height:212px;
	border-bottom:1px solic #dcd2ba;
}
.current01{
	width:229px;
	height:66px;
	background: #fff;
	line-height:66px;
	color:#7a7a7a;
	font-size:22px;
	text-align:center;
}
.current02{
	width:140px;
	height:38px;
	background:#6dbf2d url(../images/gouwu.jpg) left center no-repeat;
	margin:0 14px;
	line-height:38px;
	padding-left:60px;
	color:#fff;
}
.match_1{background: url(../images/match01.jpg) center center no-repeat;}
.match_2{background: url(../images/match02.jpg) center center no-repeat;}
.match_3{background: url(../images/match03.jpg) center center no-repeat;}
.match_4{background: url(../images/match04.jpg) center center no-repeat;}
.current a{display:inline-block; width:180px; height:38px;}
#footer{
	width:100%;
	height:103px;
	background:#020202;
	color:#fff;
	line-height:26px;
	text-align:center;
	padding-top: 50px;
	margin-top: 65px;
}

效果图