一、作业内容
码云链接：https://gitee.com/zhrx-617/codes/zfu05ym8nt9jrld3kxeha20
二、截图
三、难点实现
1.鼠标悬停时图片会有变暗的提示效果
2.此网页的下半部分用盒子模型实现。
四、缺点
网页不美观，只能实现基本操作。
五、代码
源代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>̨家乡</title> <link rel="stylesheet" href="css/1.css" type="text/css" media="all" /> </head> <body> <center> <div id="background"> <div id="page"> <div id="header"> <div id="logo"> <a href="index.html"><img src="https://timgsa.baidu.com/timg?image&quality=80 &size=b9999_10000&sec=1553783627344&di=e1df0628a7f28555d98542f68 8fdd3c2&imgtype=0&src=http%3A%2F%2Fimgs.soufun.com%2Fnews%2F2015_11%2F13%2Fnews%2F1447397614858_000.jpg" alt="LOGO" height="100" width="320"></a> </div> <div id="navigation"> <ul> <li class="selected"><a href="index.html">首页</a></li> <li class="selected"><a href="xuzhi.html">须知</a></li> <li class="selected"><a href="meishi.html">̨美食</a></li> <li class="selected"><a href="jindian.html">景点</a></li> <li class="selected"><a href="ditu.html">地图</a></li> <li class="selected"><a href="wenhua.html">历史</a></li> </ul> </div> </div> <div id="contents"> <div id="adbox"> <img src="images/湖北欢迎.jpg" alt="Img"> <h1>̨湖 北</h1> <p> 湖北省，位于中国中部偏南、长江中游，洞庭湖以北，故名湖北，简称“鄂”，省会武汉。<br/> 湖北是承东启西、连南接北的交通枢纽，武汉天河国际机场是中国内陆重要的空港。长江自西向东，横贯全省1062公里。长江及其最大支流汉江，润泽楚天，水网纵横，湖泊密布，湖北省因此又称“千湖之省”。<br/> 湖北文化底蕴深厚，中华民族的始祖炎帝的故里在湖北。春秋战国时期的楚国在长达800多年的历史中，创造了楚文化。<br/> 湖北省位于长江中游，洞庭湖以北，故名湖北，简称鄂</P> </div> <div id="main"> <div class="box"> <div> <div> <ul> <li> <h4><a href=""></a></h4> <span>名人</span> <p>屈原，战国时期楚国人，芈姓，屈氏，名平，字原，以字行。浪漫主义诗人。著有《离骚》等。</p> <p>李时珍，字：东璧，时人谓之：李东璧。号濒湖。著有《本草纲目》等。</p> <p>汉世祖光武皇帝刘秀，字文叔，东汉王朝开国皇帝，中国历史上著名的政治家、军事家。 </p> <p>孟浩然，号孟山人，世称孟襄阳，唐代诗人，被誉为诗杰。孟浩然是田园隐逸派和山水行旅派代表人，其诗清淡自然，以五言古诗见长；代表作有《春晓》《过故人庄》《早寒江上有怀》《望洞庭湖赠张丞相》等。</p> <p> ...等 诸 多 著 名 人 物</p> </li> </ul> </div> </div> </div> </div> <div id="sidebar"> <div class="section"> <a href="https://baike.so.com/doc/322670-341779.html"><img src="images/rooms.png" alt="Img"></a> </div> <div class="section"> <a href="http://www.bytravel.cn/view/top10/index125.html"><img src="images/dive-site.png" alt="Img"></a> </div> </div> </div> </div> </div> <div id="footer"> <div> <p>̨页 数 ： 1 页 </p> </div> </div> </center> </body> </html> body { background: #ffb744 url(../images/bg-body.jpg) repeat left bottom; margin: 0; } #background { background: url(../images/bg-body.jpg) repeat-x center top; min-height: 1318px; } #page { width: 960px; margin: 0 auto; text-align:left; } img { border: 0; } #navigation li, #navigation li a:hover, #navigation li.selected a { background-image: url(../images/bg-menu.png); background-repeat: repeat-x; } #main div.box, #main div.box > div, #main div.box > div > div { background-image: url(../images/bg-box.png); background-repeat: no-repeat; } #header { margin-bottom: 20px; padding-top: 20px; } #logo { float: left; margin-bottom: 20px; margin-left: 49px; } #navigation { background: url(../images/bg-navigation.png) no-repeat; clear: both; height: 50px; width: 860px; margin: 0 auto; padding: 1px; } #navigation ul { display: inline-block; width: 860px; list-style: none; margin: 0; padding: 0; } #navigation li { float: left; background-position: 0 -118px; background-repeat: no-repeat; height: 49px; width: 94.5px; margin: 0; padding-left: 1px; text-align: center; fint-size:12px; } vigation li a { color: #fff; display: block; font: bold 12px/48px Arial, Helvetica, sans-serif; height: 49px; text-decoration: none; text-transform: uppercase; } #navigation li.selected a { background-position: 0 0; color: #e4e1bd; } #contents { display: inline-block; width: 865px; padding: 0 47px; } #contents h1 { color: #316e66; font: 26px/30px "Times New Roman", Times, serif; margin: 18px 0 20px; padding-left: 2px; text-transform: uppercase; } #contents div.body h1, #contents h2 { color: #316e66; font: 30px/30px "Times New Roman", Times, serif; margin: 0 0 18px; text-transform: uppercase; } #contents h2 { font-size: 22px; margin: 0 0 30px; } #contents h2 a { color: #2c9688; text-decoration: none; } #contents p { color: #5a4535; font-size: 15px; line-height: 30px; margin: 0; padding: 0 0 24px 2px; } #contents div.box { background-position: left bottom; margin-bottom: 20px; margin-left: 1px; padding: 0 0 6px; } #adbox { background: url(../images/bg-adbox.png) no-repeat left top; width: 852px; margin: 0 auto; padding: 4px 5px 18px; } #adbox p { font-size: 16px; } #main { float: left; min-height: 100px; width: 566px; } #main div.box { background-position: left bottom; margin-bottom: 12px; padding: 0 0 6px; } #main div.box h3 { color: #316e66; font-weight: normal; letter-spacing: 1px; border-bottom: 1px dotted #9c8964; margin: 0; padding: 0 0 12px; text-transform: uppercase; } #sidebar { float: right; height: auto; width: 285px; } #sidebar div.section > a:hover { filter:alpha(opacity=60); opacity: 0.6; }
