放效果图总是违禁，这次就不放了。
可以自己运行一下代码试试看看效果。
效果和书上是一样的。
目录
1.站点信息：
2.HTML代码（已排雷）
3.css代码
1.站点信息：
2.HTML代码（已排雷）
<!DOCTYPE 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; }
