本篇博文静态网页的制作取材于长江大学审计处网页。采用的基本知识有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>
整个页面的效果如下：
前端学习之静态网页的制作
原文地址：https://www.cnblogs.com/doctorXiong/p/9011799.html