面向对象方法及软件工程实验一

代码链接:https://gitee.com/GjqDream/html_learning/tree/master

网页截图:

代码:

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8" />
 6     <title>
 7         个人简介
 8     </title>
 9     <style>
10         header {
11             text-align: center;
12             font-size: 150%;
13         }
14         body {
15             background-image: url('source/image/Star.jpg');
16 
17         }
18         div.Contact,
19         nav {
20             text-align: center;
21         }
22 
23         hr {
24             background-color: #395d7d;
25             height: 2px;
26             border: none;
27             /*去边框*/
28         }
29 
30         p {
31             color:dodgerblue;
32             display: inline;
33         }
34     </style>
35 </head>
36 
37 <body>
38     <audio controls="controls" autoplay="autoplay">
39         <source src="source/music/Home.mp3" type="audio/mpeg" />
40     </audio>
41     <header>
42         <h1 style="color:skyblue">欢迎来到耿嘉祺的个人主页</h1>
43     </header>
44     <hr /><br />
45     <nav>
46         <strong style="color:blueviolet">导航栏:</strong>
47         <a href="source/BasicInfo.html" target="_blank" style="color:blueviolet"><strong>基本信息</strong></a> |
48         <a href="source/Hobby.html" target="_blank" style="color:blueviolet"><strong>兴趣爱好</strong></a>
49     </nav>
50     <br />
51     <div class="Contact">
52         <img src="source/image/QQ.png" width="30px" height="30px" />
53         <p><strong>1491063607</strong></p>&emsp;
54         <img src="source/image/Tel.png" width="30px" height="30px" />
55         <p><strong>18515989698</strong></p>&emsp;
56         <img src="source/image/Mail.png" width="30px" height="30px" />
57         <a href=mailto:1491063607@qq.com style="color: dodgerblue">Send email to me</a>
58     </div>
59 </body>
60 
61 </html>
 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8" />
 6     <title>基本信息</title>
 7     <style>
 8         body {
 9             background-image: url('image/Info.jpg');
10             text-align: center;
11         }
12 
13         table.Information {
14             color:darkturquoise;
15         }
16         a {
17             text-decoration: none;
18         }
19     </style>
20 </head>
21 
22 <body>
23     <br />
24     <div>
25         <img src="image/Avatar.png" width="300" height="300" />
26         <br />
27         <br />
28         <table class="Information" align="center" border="1">
29             <tr>
30                 <th colspan="5" width="500">基本信息</th>
31             </tr>
32             <tr>
33                 <td>姓名</td>
34                 <td>年龄</td>
35                 <td>性别</td>
36                 <td>家乡</td>
37                 <td>学历</td>
38             </tr>
39             <tr>
40                 <td>耿嘉祺</td>
41                 <td>19</td>
42                 <td></td>
43                 <td><a href="https://www.amap.com/search?query=%E5%8C%97%E4%BA%AC&city=630100&geoobj=101.652573%7C36.551228%7C102.015122%7C36.700567&zoom=12" target="_blank" style="color:blueviolet">北京</a></td>
44                 <td>本科</td>
45             </tr>
46         </table>
47         <img src="image/School.png" width="260" height="260" />
48     </div>
49 
50 </body>
51 
52 </html>
 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="UTF-8" />
 6     <title>兴趣爱好</title>
 7     <style type="text/css">
 8         body {
 9             background-image: url('image/Hobby.jpg')
10         }
11     </style>
12 </head>
13 
14 <body>
15     <audio controls="controls" autoplay="autoplay">
16         <source src="music/Hobby.mp3" type="audio/mpeg" />
17     </audio>
18 
19     <table align="center" border="2">
20         <tr>
21             <th colspan="3">学习新的编程语言</th>
22         </tr>
23         <tr>
24             <td><a href="http://www.cplusplus.com/" target="_blank"><img src="image/C.png" width="320" height="230" /></a></td>
25             <td><a href="https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html" target="_blank"><img src="image/Java.png" width="320" height="230" /></a>&emsp;</td>
26             <td><a href="https://www.python.org/" target="_blank"><img src="image/Python.png" width="320" height="230" /></a></td>
27         </tr>
28     </table>
29     <br />
30     <table align="center" border="2">
31         <tr>
32             <th colspan="3">游戏</th>
33         </tr>
34         <tr>
35             <td><a href="https://pvp.qq.com/" target="_blank"><img src="image/WZ.jpg" width="320" height="230" /></a></td>
36             <td><a href="https://www.origin.com/hkg/zh-tw/store/apex/apex" target="_blank"><img src="image/APEX.jpg" width="320" height="230" /></a></td>
37             <td><a href="https://www.pubg.com/" target="_blank"><img src="image/PUBG.jpg" width="320" height="230" /></a></td>
38         </tr>
39     </table>
40 </body>
41 
42 </html>

 

posted @ 2019-03-15 13:52  Qi-BJ  阅读(241)  评论(0编辑  收藏  举报