学习的快1个月的前端，做出了个惨不忍赌的东西，心疼啊。代码贴出来如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" type="text/css" href="index.css"> 7 <script src="jquery-2.2.0.min.js"></script> 8 <script src="APP.js"></script> 9 </head> 10 <body> 11 <div class="header"> 12 <div class="header-left"><img src="img/002.jpg"> 13 <div> 14 <a href="#" style="color:#633;font-weight: bold ;text-decoration: none;">蜗斯电子商务</a><br/> 15 <a href="#" style="color:#633;font-weight: bold;text-decoration: none;">worthsotl.com.cn</a> 16 </div> 17 </div> 18 <div class="header-right"> 19 <ul> 20 <li><a href="#"><img src="img/ditu.png">站点地图</a></li> 21 <li><a href="#"><img src="img/lianxi.png">联系我们</a></li> 22 <li><a href="#"><img src="img/dizhi.png">首页</a></li> 23 </ul> 24 </div> 25 </div> 26 <div class="main"> 27 <div class="xian"></div> 28 <div class="main-left"> 29 <ul class="left-ul"> 30 <li style="border-bottom:1px #666 dashed ;font-size: large;"><a href="#">关于蜗斯</a></li> 31 <li style="border-bottom:1px #666 dashed;font-size: large;"><a href="#">产品服务</a></li> 32 <li style="border-bottom:1px #666 dashed;font-size: large;"><a href="#">解决方案</a></li> 33 <li style="border-bottom:1px #666 dashed;font-size: large;"><a href="#">技术支持</a></li> 34 <li style="border-bottom:1px #666 dashed;font-size: large;"><a href="#">用户社区</a></li> 35 <li style="border-bottom:1px #666 dashed;font-size: large;"><a href="#">用户实例</a></li> 36 <li style="border-bottom:1px #666 dashed;font-size: large;"><a href="#">下载中心</a></li> 37 <li style="border-bottom:1px #666 dashed;font-size: large;"><a href="#">联系方式</a></li> 38 </ul> 39 </div> 40 <div class="right-img"><img src="img/001.jpg ;" style="width: 591px;"></div> 41 <div class="leftmiddlemain"> 42 <div class="wenzi">公司简介</div> 43 <div class="details"><img class="gif" src="img/006.jpg"> 44 <p>部门预算编制系统是为配合部门预算改革，细化预算编制，规范预算管理而研制的专用软件。利用其所属…… </p> 45 <p>部门预算编制系统是为配合部门预范预算管理而研制范预算管理而研制 46 范预算管理而研制范预算管理而研制范预算管理而研制 47 范预算管理而研制范预算管理而研制范预算管理而研制范预算管理而研制 48 范预算管理而研制范预算管理而研制范预 49 算管理而研制范预算管理而研制范预算管理而研制算改革，细 50 化预算编制，规范预算管理而研制的专用软件。利用其所属…用其 51 所属… 52 </p> 53 </div><br/> 54 <div class="blackxian"></div> 55 <div class="details"><img src="img/007.jpg">部门预算编制系统是为配合部门预算改革，细化预算编制，规范预算管理而研制的专用软件。利用其所属 56 部门预算编制系统是为配合部门预算改革，细化预算编制，规范预算管理而研制的专用软件化预算编制，规范 57 化预算编制，规范化预算编制，规范化预算编制，规范化预算编制，规范化预算编制，规范化预算编制，规范化预算编制，规范化预算编制，规范 58 化预算编制，规范化预算编制，规范化预算编制，规范化预算编制，规范化预算编制，规范 59 >></div> 60 </div> 61 <div class="rightmiddlemain"> 62 <table border="0px solid #ffffff"> 63 <th><p style="font-size: 30px">产品支持</p></th> 64 <th><p style="font-size: 30px">公司简介</p></th> 65 <th><p style="font-size: 30px">技术顾问</p></th> 66 <tr> 67 <td><img src="img/003.jpg"></td> 68 <td><img src="img/004.jpg"></td> 69 <td><img src="img/005.jpg"></td> 70 </tr> 71 <tr> 72 <td> 73 <p><a href="#">企业简介</a></p> 74 <p><a href="#">企业简介</a></p> 75 <p><a href="#">企业简介</a></p> 76 <p><a href="#">企业简介</a></p> 77 <p><a href="#">企业简介</a></p> 78 <p><a href="#">企业简介</a></p> 79 <p><a href="#">企业简介</a></p> 80 <p><a href="#">企业简介</a></p> 81 <p><a href="#">企业简介</a></p> 82 </td> 83 <td> 84 <p><a href="#">企业简介</a></p> 85 <p><a href="#">企业简介</a></p> 86 <p><a href="#">企业简介</a></p> 87 <p><a href="#">企业简介</a></p> 88 <p><a href="#">企业简介</a></p> 89 <p><a href="#">企业简介</a></p> 90 <p><a href="#">企业简介</a></p> 91 <p><a href="#">企业简介</a></p> 92 <p><a href="#">企业简介</a></p> 93 </td> 94 <td> 95 <p><a href="#">企业简介</a></p> 96 <p><a href="#">企业简介</a></p> 97 <p><a href="#">企业简介</a></p> 98 <p><a href="#">企业简介</a></p> 99 <p><a href="#">企业简介</a></p> 100 <p><a href="#">企业简介</a></p> 101 <p><a href="#">企业简介</a></p> 102 <p><a href="#">企业简介</a></p> 103 <p><a href="#">企业简介</a></p> 104 </td> 105 </tr> 106 </table> 107 <br/> 108 <div class="rimg"><img src="img/008.jpg"></div> 109 <div class="rw">① 集中征收 以大厅征收为主，所有的征收业务包括申报、开票、缴纳、票据缴销、会计核算都在大厅完成。 110 ② 分散征收 大厅征收和远程独立征收点（房产市场、房管局、代征单位）相结合的票据缴销、会计核算统一由契税所管理。 111 ③ 县乡统一征收 县级建立中心数据库进行大厅征收，各财政所为远程开票点实现网络征收，县级财政统一管理票据和核算。</div> 112 </div> 113 <div class="footer">Copyright© 1994-2008 蜗斯技术有限公司</div> 114 </div>
下面是插入的Css样式
1 *{ 2 margin:0; 3 padding:0; 4 } 5 body{ 6 background-color: #FFFFFF; 7 font-family: 宋体; 8 font-size:12px; 9 } 10 .header{ 11 margin:50px auto; 12 width:75%; 13 } 14 .header-left{ 15 background-image: url("img/002.jpg"); 16 position: relative; 17 top:30px; 18 background-repeat: no-repeat; 19 } 20 .header li { 21 list-style-type: none; 22 float: right; 23 position: relative; 24 bottom:-10px; 25 } 26 ul a:link,a:visited{ 27 font-weight: bold; 28 color:#000; 29 padding: 6px; 30 text-decoration: none; 31 } 32 ul a:hover,a:active{ 33 color: #ff0000 34 } 35 .main{ 36 position: relative; 37 width:75%; 38 margin:0 auto; 39 } 40 .xian{ 41 background-image: url("img/xian.png"); 42 width:100%; 43 height: 5px; 44 position: absolute; 45 top: -15px; 46 } 47 .left-ul{ 48 background: darkgrey; 49 width:38%; 50 } 51 .main-left li{ 52 list-style-type: none; 53 margin: 4px; 54 padding: 4px; 55 text-align: center; 56 } 57 .right-img{ 58 position: relative; 59 top: -271px; 60 float: right; 61 margin:0 auto; 62 } 63 .leftmiddlemain{ 64 width: 38%; 65 height: 50px; 66 background-color: yellow; 67 } 68 .wenzi{ 69 line-height:50px; 70 color: black; 71 text-align: center; 72 font-size: 30px; 73 font-weight: bold; 74 } 75 .details{ 76 font-family: 黑体; 77 font-size: medium; 78 } 79 .gif{ 80 float: left; 81 } 82 .blackxian{ 83 width:100%; 84 height: 5px; 85 background-color: dimgrey; 86 } 87 .rightmiddlemain{ 88 float: right; 89 } 90 91 table{ 92 float: right; 93 position: absolute; 94 top: 273px; 95 left: 468px; 96 } 97 th p{ 98 background: yellow; 99 } 100 td a:link,a:visited{ 101 text-decoration: none; 102 color: dimgray; 103 } 104 td a:hover,a:active{ 105 color: #000; 106 } 107 .rimg{ 108 position: absolute; 109 top: 550px; 110 left: 410px; 111 } 112 .rw{ 113 position: absolute; 114 top: 700px; 115 left: 412px; 116 } 117 .footer{ 118 width: 100%; 119 position: absolute; 120 top: 765px; 121 clear: both; 122 background-color: #999999; 123 text-align: center; 124 }
最后就是效果展示了
