HTML练习
练习1
1 2 <!DOCTYPE html> 3 4 <html> 5 6 <head> 7 8 <meta charset="UTF-8"> 9 10 <title></title> 11 12 </head> 13 14 <body> 15 16 <h1>看不见的完美硬币 ：细节的负担</h1> 17 18 <p><h2>创新公司皮克斯的启示</h2></p> 19 20 <hr /> 21 22 <img src="book.jpg" width="200px" height="230px"/> 23 24 <p><i>细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。</i></p> 25 26 27 28 <p><i>但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。</i></p> 29 30 31 32 <p><i>怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</i></p> 33 34 <b>看不见的完美硬币：细节的负担</b> 35 36 <p>在皮克斯，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事，但是在皮克斯，设计师们一个个都是完美主义者，细节显然成了皮克斯的负担。这样的太过于重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡特姆做出了明智的决策。</p> 37 38 <p>皮克斯有一个现象，被我们的制片人叫作“看不见的完美硬币（the perfect coin）”，这个词指代的是皮克斯制作人员对细节的精益求精。有时候，被我们的制片人凯瑟琳•萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节，也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。凯瑟琳是《怪兽电力公司》一片的制作人员，影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏中，好奇的小布第一次来到麦克和萨里的公寓，还在蹒跚学步的小婴儿四处探索起来。两个怪物想要制止她，而她还是一步步走到了两摞高高堆起的CD旁，“别乱动！”麦克大喊起来，可是小女孩还是从90多张CD盒摞成的“高塔”底部抽出一张， CD全部倒塌散落在了地板上。麦克抱怨道：“哎，那些CD都是按字母顺序排列好的！”小女孩摇摇摆摆地走开了。这幕场景前后不到3秒钟，观众们只能够看到几个CD盒而已，但皮克斯的制作人员不仅为每一个CD盒制作了封面，还使用了可计算物体在运动时渲染效果变化的着色器。</p> 39 40 <p>“你能看到所有CD盒吗？看不到。”萨拉菲安接着说，“把所有CD盒全部设计一遍，这工作有意思吗？其实挺有意思的。我们还真有几位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚，所以就任劳任怨地把每张CD都雕琢了一番。也许，这其中的乐趣只有当事人才能体会吧。”</p> 41 42 </body> 43 44 </html>
效果图
练习2
1 2 <!DOCTYPE html> 3 4 <html> 5 6 <head> 7 8 <meta charset="UTF-8"> 9 10 <title></title> 11 12 </head> 13 14 <body> 15 16 <h2>音乐排行榜</h2> 17 18 <ol type="1"> 19 20 <li><a href="#">潇洒走一回</a> <img src="pic1.png" /></li> 21 22 <li><a href="#">偏偏喜欢你</a> <img src="pic1.png" /></li> 23 24 <li><a href="#">酒干倘卖无</a> <img src="pic1.png" /></li> 25 26 <li><a href="#">不说再见</a> <img src="pic1.png" /></li> 27 28 <li><a href="#">舍不得你</a> <img src="pic1.png" /></li> 29 30 <li><a href="#">请跟我来</a> <img src="pic1.png" /></li> 31 32 </ol> 33 34 </body> 35 36 </html>
效果图
练习3
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <title></title> 10 11 </head> 12 13 <body> 14 15 <h2>流量调查表</h2> 16 17 <table border="1px" width="350px" height="40px"> 18 19 <tr align="center"> 20 21 <td>总页面流</td> 22 23 <td>共计来访</td> 24 25 <td>会员</td> 26 27 <td>游客</td> 28 29 </tr> 30 31 <tr align="center"> 32 33 <td>9756488</td> 34 35 <td>97656</td> 36 37 <td>7538087</td> 38 39 <td>43364677</td> 40 41 </tr> 42 43 <tr align="center"> 44 45 <td>46776686</td> 46 47 <td>85544</td> 48 49 <td>69357</td> 50 51 <td>568787</td> 52 53 </tr> 54 55 <tr align="center"> 56 57 <td>7538087</td> 58 59 <td>546774</td> 60 61 <td>476897</td> 62 63 <td>334545</td> 64 65 </tr> 66 67 <tr align="center"> 68 69 <td>平均每人浏览</td> 70 71 <td colspan="3">1.58</td> 72 73 </tr> 74 75 </table> 76 77 </body> 78 79 </html>
效果图
练习4
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <title></title> 10 11 </head> 12 13 <body> 14 15 <img src="header.jpg" /> 16 17 <p><a href="#"><u>登录</u></a>| 18 19 <a href="#"><u>阿里巴巴首页</u></a>| 20 21 <a href="#"><u>客服中心</u></a>| 22 23 <img src="icon1.bmp" /> 24 25 <a href="#"><u>提意见</u></a><br /></p> 26 27 如需要帮助，请咨询 <img src="icon2.bmp" />或拨打400-800-1688 28 29 <p>电子邮箱：<input type="email" maxlength="11"/></p> 30 31 <p>会员登录名：<input type="text" name="name"/></p> 32 33 <p>密码：<input type="password"name="pswd"/></p> 34 35 <p>再次输入密码：<input type="password"name="zpswd"/></p> 36 37 <p>会员身份：<input type="radio" name="majia" checked="checked"/>买家 38 39 <input type="radio" name="majia" />卖家 40 41 <input type="radio" name="majia" />两者都是 42 43 </p> 44 45 <p>验证码：<input type="text" name="yzm"/> 46 47 <img src="verycode.gif" /><a href="#">看不清楚换一张</a></p> 48 49 <p><img src="btn_reg.gif" /></p> 50 51 <textarea rows="8px" cols="40px"> 52 53 阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")，您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：Alibaba.com.cn、alibaba.cn、1688.com，下同），所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。 54 55 </textarea><br /> 56 57 <a href="#"><u>阿里巴巴版权所有2015-2018著作权与商标声明</u></a>| 58 59 <a href="#"><u>法律声明</u></a>| 60 61 <a href="#"><u>服务条款</u></a>| 62 63 <a href="#"><u>隐私声明</u></a>| 64 65 <a href="#"><u>联系我们</u></a>| 66 67 <a href="#"><u>网站题图</u></a>| 68 69 <a href="#"><u>产品体验中心</u></a>|<br /><br /> 70 71 <a href="#"><u>阿里巴巴集团：阿里巴巴网络-中国 国际站 全球速卖通 日文站 中国万网</u></a>| 72 73 <a href="#"><u>淘宝网</u></a>| 74 75 <a href="#"><u>支付宝</u></a>| 76 77 <a href="#"><u>中国雅虎</u></a>| 78 79 <a href="#"><u>雅虎口碑网</u></a>| 80 81 <a href="#"><u>阿里软件</u></a>| 82 83 <a href="#"><u>阿里妈妈</u></a>| 84 85 <a href="#"><u>集团研究中心</u></a>| 86 87 88 89 </body> 90 91 </html>
效果图
