学生实践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>