前端学习之静态网页的制作
Posted doctorxiong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习之静态网页的制作相关的知识，希望对你有一定的参考价值。
本篇博文静态网页的制作取材于长江大学审计处网页。采用的基本知识有html css js
只是初步实现了整个网页的代码编写 还需完善。
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>长江大学审计处</title> 6 <link rel="shortcut icon" type="image/x-icon" href="img/icon.jpg"/> 7 8 <style type="text/css"> 9 ul,li,a{ 10 list-style-type:none; 11 list-style-image: url(img/10.png); 12 margin:0px; 13 font-family: Arial; 14 font-size:12px; 15 line-height: 24px; 16 color:black; 17 text-decoration: none; 18 19 20 21 } 22 .style_li{ 23 list-style-type:none; 24 list-style-image: url(img/11.png); 25 margin:0px; 26 } 27 .style_li1{ 28 list-style-type:none; 29 list-style-image: url(img/12.png); 30 margin:0px; 31 } 32 span{ 33 font-size:16px ; 34 color:white; 35 } 36 37 38 </style> 39 </head> 40 <body bgcolor="#40e0d0"> 41 <table width="100%" height="35px" border="0" cellpadding="0" cellspacing="0" bgcolor="#1e90ff" valign="top"> 42 <tr> 43 <td align="center" ><font color="white">您好 欢迎您访问长江大学审计处！ 44 <span> 45 <script language="javascript" type="text/javascript"> 46 var d = new Date(); 47 var weekday = new Array(7); 48 weekday[0] = "星期日"; 49 weekday[1] = "星期一"; 50 weekday[2] = "星期二"; 51 weekday[3] = "星期三"; 52 weekday[4] = "星期四"; 53 weekday[5] = "星期五"; 54 weekday[6] = "星期六"; 55 var m = d.getMonth() + 1; 56 document.write("今天是"+d.getFullYear()+"年"+m+"月"+d.getDate()+"日 "+weekday[d.getDay()]); 57 </script> 58 </span> 59 </font> 60 </td> 61 </tr> 62 </table> 63 64 <table width="780" border="0" cellpadding="0" cellspacing="0"align="center" > 65 <tr> 66 <td> 67 <img src="img/bg.png" width="780" height="200"> 68 </td> 69 </tr> 70 </table> 71 72 <table width="780" bgcolor="#1e90ff" align="center"border="0" cellpadding="0" cellspacing="0"> 73 <tr> 74 <td height="35"align="center"><a href="http://sjc.yangtzeu.edu.cn/index.html"><span>首页</span></a></td> 75 <td height="35"align="center"style= color:white><a href="http://sjc.yangtzeu.edu.cn/news/BMGK/index.html"><span>部门概况</span></a></td> 76 <td height="35"align="center"><a href="http://sjc.yangtzeu.edu.cn/news/ZCFG/index.html"><span>政策法规</span></a></td> 77 <td height="35"align="center"><a href="http://sjc.yangtzeu.edu.cn/news/GZDT/index.html"><span>工作动态</span></a></td> 78 <td height="35"align="center"><a href="http://sjc.yangtzeu.edu.cn/news/SJZX/index.html"><span>审计咨询</span></a></td> 79 <td height="35"align="center"><a href="http://sjc.yangtzeu.edu.cn/news/XXYD/index.html"><span>学习园地</span></a></td> 80 </tr> 81 </table> 82 83 <table width="780" border="0" align="center" cellpadding="0" cellspacing="0"> 84 <tr> 85 <td valign="top" width="240" bgcolor="white"> 86 <table width="100%" border="0" cellspacing="0" cellpadding="0" > 87 <tr> 88 <td height="26" width="24" align="left"><img src="img/1.png" width="240" height="28"> </td> 89 </tr> 90 <tr> 91 <td><img src="img/2.jpg" width="240" height="184"></td> 92 </tr> 93 <tr> 94 <td><img src="img/1.png" width="240"></td> 95 </tr> 96 97 </table> 98 99 <table width="100%" border="0" cellspacing="0" cellpadding="0" align="left" > 100 <tr> 101 <td align="left"> 102 <ul> 103 <li><a href="#">审计法规制度汇编</a> </li> 104 <li><a href="#">中华人民共和国审计法</a></li> 105 <li><a href="#">审计法规制度汇编</a> </li> 106 <li><a href="#">审计法规制度汇编</a> </li> 107 <li><a href="#">中国内部审计序言</a> </li> 108 <li><a href="#">审计署关于内部审计工作</a> </li> 109 <li><a href="#">内部审计务实指南二号</a> </li> 110 </ul> 111 </td> 112 </tr> 113 </table> 114 115 </td> 116 117 <td valign="top" width="240" align="left" bgcolor="white"> 118 <table width="100%" border="0" cellspacing="0" cellpadding="0" > 119 <tr> 120 <td align="left" height="26" width="24"><img src="img/3.png" width="240" height="28"> </td> 121 </tr> 122 <tr> 123 <td> 124 <ul> 125 <li><font color="black"></font><a href="#">审计法规制度汇编</a> </li> 126 <li><a href="#">中华人民共和国审计法</a></li> 127 <li><a href="#">审计法规制度汇编</a> </li> 128 <li><a href="#">审计法规制度汇编</a> </li> 129 <li><a href="#">中国内部审计序言</a> </li> 130 <li><a href="#">审计署关于内部审计工作</a> </li> 131 <li><a href="#">内部审计务实指南二号</a> </li> 132 <li><a href="#">审计署关于内部审计工作</a> </li> 133 134 </ul> 135 136 </td> 137 </tr> 138 <tr> 139 <td><img src="img/4.png" width="240"></td> 140 </tr> 141 <tr> 142 <td> 143 <ul> 144 <li><a href="#">审计法规制度汇编</a> </li> 145 <li><a href="#">中华人民共和国审计法</a></li> 146 <li><a href="#">审计法规制度汇编</a> </li> 147 <li><a href="#">审计法规制度汇编</a> </li> 148 <li><a href="#">中国内部审计序言</a> </li> 149 <li><a href="#">审计署关于内部审计工作</a> </li> 150 <li><a href="#">内部审计务实指南二号</a> </li> 151 </ul> 152 153 </td> 154 </tr> 155 </table> 156 157 158 </td> 159 160 <td valign="top" bgcolor="white"> 161 <table valign="top" width="100%" border="0" cellspacing="0" cellpadding="0"> 162 <tr> 163 <td align="center" height="26" width="24"><img src="img/6.png" width="196" height="41"> </td> 164 165 </tr> 166 <tr> 167 <td> 168 <ul> 169 <li class="style_li1"><a href="#">2018审计公告1号</a> </li> 170 <li class="style_li1"><a href="#">2018审计公告2号</a> </li> 171 <li class="style_li1"><a href="#">2018审计公告3号</a> </li> 172 <li class="style_li1"><a href="#">2018审计公告4号</a> </li> 173 <li class="style_li1"><a href="#">2018审计公告5号</a> </li> 174 <li class="style_li1"><a href="#">2018审计公告6号</a> </li> 175 <li class="style_li1"><a href="#">2018审计公告7号</a> </li> 176 <li class="style_li1"><a href="#">2018审计公告8号</a> </li> 177 178 179 </ul> 180 </td> 181 </tr> 182 <tr> 183 <td align="center" height="26" width="24"><img src="img/5.png" width="196" height="39"> </td> 184 185 </tr> 186 <tr> 187 <td> 188 <ul> 189 <li class="style_li"><a href="http://cwc.yangtzeu.edu.cn/">财务处</a> </li> 190 <li class="style_li"><a href="#">长大在线</a> </li> 191 <li class="style_li"><a href="http://jwc.yangtzeu.edu.cn/">长江大学教务处</a> </li> 192 <li class="style_li"><a href="http://www.mof.gov.cn/index.htm">中华人民共和国财政部</a> </li> 193 <li class="style_li"><a href="http://www.audit.gov.cn/">中华人民共和国审计署</a> </li> 194 </ul> 195 </td> 196 </tr> 197 198 199 </table> 200 201 </td> 202 </tr> 203 </table> 204 205 <table width="100%" height="35px" border="0" cellpadding="0" cellspacing="0" bgcolor="#1e90ff" valign="top"> 206 <tr> 207 <td align="center" > 208 <font color="white"><span>版权所有： <a href="/yzadmin/login.asp" target="_blank"/>长江大学审计处</a></span> 209 <span>联系方式：8060070</span> 210 <span>技术支持：<a href="http://online.yangtzeu.edu.cn/index.html"target="_blank"/>长大在线</a></span> 211 </font> 212 </td> 213 </tr> 214 </table> 215 </body> 216 </html>
整个页面的效果如下：
以上是关于前端学习之静态网页的制作的主要内容，如果未能解决你的问题，请参考以下文章
html网页设计与制作：基于html设计整套招聘网站求职前端模板页面 静态网页HTML代码 学生网页课程设计期末作业下载...
html网页设计与制作：基于html设计整套招聘网站求职前端模板页面 静态网页HTML代码 学生网页课程设计期末作业下载