<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网站首页</title> <link rel="stylesheet" href="../css/text.css"> </head> <body> <div class="right"> <tr> <html> <head> <meta content="text/html" charset="UTF-8"> <title>HTML设置图片为页面背景</title> </head> <body background="../../前端5/4.jpg" style="background-repeat:no-repeat; background-attachment:fixed; background-size:150% 150%; "> </body> </html> </tr> </div> <img src="../..前端7/4.jpg" width="100"> <div class="main"> <div class="left"> <div class="main-title"style="color:#000000"> <h3>欢迎大家来到河源</h3> <div class="content"> <div class="banner" id="banner"> <img src="../..前端7/1.jpg" width="100%" alt=""> </div> <div class="menu"> <ul class="center"> <li><a href="index.html">主页</a></li> <li><a href="about.html">历史</a></li> <li><a href="dishes.html">美食</a></li> <li><a href="landmark.html">地标</a></li> </ul> </div> <div class="bar"style="color:#000000;"> <h2>河源主页</h2> </div> </div> <div class="cs"> <div class="v"> <img src="../..前端7/5.jpg" width="100%" /> </div> <div class="cs1"> <div class="v1"> <img src="../..前端7/2.jpg" style="width:450px;height:300px;margin-left:590px;margin-top:200px;" /> </div> <div class="bs" style=margin-left:-50px;width:600px;margin-top:-470px;>河源市位于广东省东北部、东江中上游，面积1.58万平方公里，下辖五县一区，户籍人口373万人。河源是岭南文化发祥地和中国革命策源地之一。具有2300多年悠久历史和厚重文化的客家古邑，是客家人开发岭南最早的地区，是原中央苏区和革命老区。河源是广东省重要的生态屏障和饮用水源地。全市森林覆盖率达74.6%，东江、新丰江两条河流纵贯全境，有新丰江水库和枫树坝水库两个广东第一和第二大的水库，被授予“中国优质饮用水资源开发基地”称号。河源是“中国优秀旅游城市”。生态环境优良，空气质量、水环境质量等常年保持优级水平，是全省唯一无酸雨的地级市，拥有一大批生态和文化旅游景点，河源的恐龙蛋化石馆藏量被载入吉尼斯世界纪录，被授予“中华恐龙之乡”称号。河源是生态宜居城市。先后被评为“国家园林城市”“国家卫生城市”“全国双拥模范城”“全国生态环境保护最佳范例”、“国家级生态保护与建设示范区”，目前正在全力创建“全国文明城市”。 <br> 河源好吃的特色美食有：牛角粽；咸香鸭；龙川牛筋糕；松丸子；客家酿三宝；上汤桂花鱼；盐焗鸡；和平柿饼；河源酸萝卜；天光牛肉等。 </div> </div> <div class="clear"></div> <div class="mar"> <marquee onMouseOut="this.start()" onMouseOver="this.stop()"> <img src="../..前端7/6.jpg" width="200" height="140"> <img src="../..前端7/7.jpg" width="200" height="140"> <img src="../..前端7/8.jpg" width="200" height="140"> <img src="../..前端7/9.jpg" width="200" height="140"> <img src="../..前端7/10.jpg" width="200" height="140"> <img src="../..前端7/27.jpg" width="200" height="140"> <img src="../..前端7/28.jpg" width="200" height="140"> <img src="../..前端7/29.jpg" width="200" height="140"> </marquee> </div> </div> </div> <div class="end"> </div> </div> </div> </body> </html> </div> </div> </div>
css样式
@charset "utf-8"; /* CSS Document */ ul,li,h1,h2,h3,p { padding: 0; margin: 0; list-style: none } a { text-decoration: none; color: #000 } html { background-size: contain; } body { width: 1200px; margin: 0px auto; line-height: 21px; } .clear { clear: both } .menu li { list-style: none } .banner { position: relative } .banner img { display:block; } .more{ background:#666699; color:#fff; display:inline-block; padding:0 15px; margin-top:10px;} .menu { background:#004080; clear: both; height: 60px; width: 100%; } .menu li a { color: #fff; display: block } .menu li { text-align: center; display: inline-block; line-height:60px; float: left; width: 25%; text-align: center; font-size: 24px; } .content { font-size: 14px; width: 100% } .index { font-size: 18px; line-height: 32px; height: 190px; float: left; width: 96%; padding: 2% } .mr { display: inline-block; padding: 10px 30px; color: #fff; margin-top: 20px; } .end { clear: both; background:#004080; color: #fff; padding:10px 0; font-size: 16px; text-align: center; } .pad { padding: 20px 70px; display: block } .main { margin: 20px 40px; color:#FFF; } .cs { margin: 30px 40px; font-size: 16px; line-height: 30px } .index img { margin-right: 50px } .index h3 { font-size: 24px; margin-bottom: 20px; font-weight:normal } .index{ margin:10px 0} .index .fr { margin-right: 0; margin-left: 20px } .cs { position: relative } .cs .v { position: absolute; right:0; top:0; width:450px; } .cs .bs { margin-right: 450px; padding: 15px; } .mar{ margin-top: 80px; padding:20px} .fl { float: left } .fr { float: right } .forma { display: block; width: 600px; margin: 50px auto; font-size: 18px; padding: 0 0px; padding-bottom: 0px; } .forma .input { margin-top: 20px; } .es { padding: 25px; height: 50px; vertical-align: middle; width: 30px } .forma .input span { vertical-align: top; font-size: 20px; margin-right: 20px; display: inline-block; text-align: left; height: 50px; line-height: 50px; display: block; } .forma .input .phone { width: 100%; font-size: 15px; height: 40px; line-height: 40px; background: #eee; border:#999 solid 1px; text-indent: 20px; padding: 0 0px; } .btn { background:#FF6633; color: #fff; width: 100%; line-height: 50px; font-size: 18px; border: none; margin-top: 30px; } .banner { position: relative; clear: both } .bar { background:#f6f6f6 } .bar h2 { height: 70px; position: relative; line-height: 68px; padding:0 30px; font-size: 24px; font-weight: normal } .info { line-height: 30px } .news { width: 1100px; margin: 0 auto; font-size:18px; line-height:32px }.news img{ display:inline-block} .about { margin:30px; } .about .word { float:left; width:70%; font-size:15px; line-height:30px; color:#FFF; } .about .pic { float:right; width:25%; } .about .pic img { width:100%; display:block; } .tab_nr { width:100%; color:#FFF; } .tab_nr img { max-width:100%; display:block; height:245px; } .tab_nr h3 { color:#6FF; font-size:18px; margin:10px 0; } .tab_nr span { font-weight:bold; font-size:16px; color:#FF6; margin-top:10px; display:block; } .tab_nr th { font-size:20px; padding:20px 0; background:#ccc; }
