码迷,mamicode.com
首页 > Web开发 > 详细

前端学习之静态网页的制作

时间:2018-05-09 01:15:52      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:博文   round   长江   span   ext   padding   asp   date   tle   

本篇博文静态网页的制作取材于长江大学审计处网页。采用的基本知识有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()+"日&nbsp;"+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>


整个页面的效果如下:
技术分享图片

 

 


 

前端学习之静态网页的制作

标签:博文   round   长江   span   ext   padding   asp   date   tle   

原文地址:https://www.cnblogs.com/doctorXiong/p/9011799.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!