HTML第四章作业
2024-10-21 03:20:33
学生实践4.1.3
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>iPhone8红色特别版</title>
6 <link type="text/css" rel="stylesheet" href="style.css"/>
7 </head>
8
9 <body>
10 <div>
11 <h1>iPhone 8, 现更以红色呈现。</h1>
12 <h3><span>特别版</span></h3>
13 <p>
14 <a href="#">进一步了解 ></a>
15 <a href="#">购买 ></a>
16 </p>
17 <p>
18 <img src="img/iphone8.png"/>
19 </p>
20 </div>
21 </body>
22 </html>
学生实践4.2.4
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>电脑分类</title>
6 <link type="text/css" rel="stylesheet" href="4.2.4.css"/>
7 </head>
8
9 <body>
10 <div id="menuList">
11 <!--第一行：标题-->
12 <div id="title">电脑分类</div>
13 <!--第二行：电脑整机-->
14 <div class="menultem">电脑整机</div>
15 <table class="menultem">
16 <tr>
17 <td><a href="#">笔记本</a></td>
18 <td><a href="#">轻薄本</a></td>
19 <td><a href="#">游戏本</a></td>
20 </tr>
21 <tr>
22 <td><a href="#">台式机</a></td>
23 <td><a href="#">一体机</a></td>
24 <td><a href="#">服务器</a></td>
25 </tr>
26 </table>
27 <!--第三行：电脑配件-->
28 <div class="menultem">电脑配件</div>
29 <table class="menultem">
30 <tr>
31 <td><a href="#">处理器</a></td>
32 <td><a href="#">显示器</a></td>
33 <td><a href="#">主机箱</a></td>
34 </tr>
35 <tr>
36 <td><a href="#">内存条</a></td>
37 <td><a href="#">硬盘</a></td>
38 <td><a href="#">主板</a></td>
39 </tr>
40 </table>
41 <!--第四行：外设产品-->
42 <div class="menultem">外设产品</div>
43 <table class="menultem">
44 <tr>
45 <td><a href="#">摄像头</a></td>
46 <td><a href="#">手写板</a></td>
47 <td><a href="#">鼠标垫</a></td>
48 </tr>
49 <tr>
50 <td><a href="#">键盘</a></td>
51 <td><a href="#">鼠标</a></td>
52 <td><a href="#">音响</a></td>
53 </tr>
54 </table>
55 </div>
56 </body>
57 </html>
学生实践4.3.5
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>最新资讯</title>
6 <style type="text/css">
7 #container ul li a {
8 color: black;
9 text-decoration: none;
10 font-size: 12px;
11 }
12 #container ul li:hover a {
13 color: red;
14 }
15 #container ul li img{
16 height: 124px;
17 width: 152px;
18 display: none;
19 }
20 #container ul li:hover img{
21 display: block;
22 }
23 #container {
24 width: 250px;
25 }
26 #container ul li {
27 line-height: 25px;
28 }
29 </style>
30 </head>
31
32 <body>
33 <div id="container">
34 <h3>最新资讯</h3>
35 <div>
36 <ul>
37 <li>
38 <a href="#">诺基亚6正式发布！</a>
39 <img src="img/news_1.jpg"/>
40 </li>
41 <li>
42 <a href="#">BUY年，送360手机！</a>
43 <img src="img/news_2.jpg"/>
44 </li>
45 <li>
46 <a href="#">谁与争锋！iPad就送你</a>
47 <img src="img/news_3.jpg"/>
48 </li>
49 <li>
50 <a href="#">【调研】参加手机功能偏好调研！</a>
51 <img src="img/news_4.jpg"/>
52 </li>
53 <li>
54 <a href="#">艺术家的设计一般人看不懂！</a>
55 <img src="img/news_5.jpg"/>
56 </li>
57 <li>
58 <a href="#">报告显示Android设备比iPhone好！</a>
59 <img src="img/news_6.jpg"/>
60 </li>
61 </ul>
62 </div>
63 </div>
64 </body>
65 </html>
学生实践4.4.4
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>优选品牌</title>
6 <link type="text/css" rel="stylesheet" href="4.4.4.css"/>
7 </head>
8
9 <body>
10 <div id="container">
11 <div>优选品牌</div>
12 <table border="1">
13 <tr>
14 <td background="img/logo_1.jpg"><div>ThinkPad 专场</div></td>
15 <td background="img/logo_2.jpg"><div>惠普专场</div></td>
16 <td background="img/logo_3.jpg"><div>联想专场</div></td>
17 <td background="img/logo_4.jpg"><div>华硕专场</div></td>
18 </tr>
19 <tr>
20 <td background="img/logo_5.jpg"><div>机械革命专场</div></td>
21 <td background="img/logo_6.jpg"><div>戴尔专场</div></td>
22 <td background="img/logo_7.jpg"><div>英特尔专场</div></td>
23 <td background="img/logo_8.jpg"><div>西数专场</div></td>
24 </tr>
25 </table>
26 </div>
27 </body>
28 </html>
最新文章
- 不能链接云服务器mysql
- MVC：The name 'Scripts' does not exist in the current context
- 关于HTML5的拖拽
- hibernate常用配置
- jquery获取复选框（checkbox）的选中值（一组和单个）
- 【设计模式】工厂方法模式（Factory Method）
- Codeforces Round #335 (Div. 2) D. Lazy Student 贪心
- JAVA的对象和引用——一个真实遇到的问题
- Matlab spline
- Android的第二次增加SurfaceView基本使用
- hdu 2141 Can you find it?（二分查找变例）
- (4)Object对象的几个常用方法
- Scheme change not implemented
- nodejs简单数据迁移demo
- Android开发——绘图基础
- Alpha冲刺（8/10）
- 并查集（Union-Find）
- windows服务器自动删除日志文件
- leetcode983
- 计算平面面积和斜面面积-ArcGIS案例学习笔记