CSS3的应用-“优课教育”网站首页弄一个
咸蛋_dd
帮助1人
放效果图总是违禁，这次就不放了。
可以自己运行一下代码试试看看效果。
效果和书上是一样的。
目录
1.站点信息：
2.HTML代码（已排雷）
-
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<title>游客教育网站</title>
-
<link href="css/style.css" type="text/css" rel="stylesheet"/>
-
</head>
-
<body>
-
<div id="header">
-
<ul class="nav">
-
<li class="loge"><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="right2"><a href="#">线上精品课专区</a></dd>
-
</dl>
-
</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>
-
</div>
-
</div>
-
<div id="footer">
-
<p>Copyright © 2022-2030 Edu.com,All rights reserved.</p>
-
<p>2020-2030,版权所有 优客网 00CP备 222222222</p>
-
</div>
-
</body>
-
</html>
3.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:160px;
-
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:#6bdf2d;
-
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:#6dbf2b 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;
-
}
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhhaebfc
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13
