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

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

网页截图:

面向对象方法及软件工程实验一_第1张图片

面向对象方法及软件工程实验一_第2张图片

面向对象方法及软件工程实验一_第3张图片

代码:

 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>1491063607strong>p>
54         <img src="source/image/Tel.png" width="30px" height="30px" />
55         <p><strong>18515989698strong>p>
56         <img src="source/image/Mail.png" width="30px" height="30px" />
57         <a href=mailto:[email protected] style="color: dodgerblue">Send email to mea>
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>19td>
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>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>

 

你可能感兴趣的:(面向对象方法及软件工程实验一)