Html 练习题 Day_01_流量调查表总页面流量9756488,46776686,7538087 共计来访97656,855-程序员宅基地

技术标签： html

练习1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>看不见的完美硬币 ：细节的负担</h1>
		<p><h2>创新公司皮克斯的启示</h2></p>
		<hr />
		<img src="book.jpg" width="200px" height="230px"/>
		<p><i>细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。</i></p>

<p><i>但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。</i></p>

<p><i>怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</i></p>
<b>看不见的完美硬币：细节的负担</b>
<p>在皮克斯，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事，但是在皮克斯，设计师们一个个都是完美主义者，细节显然成了皮克斯的负担。这样的太过于重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡特姆做出了明智的决策。</p>
<p>皮克斯有一个现象，被我们的制片人叫作“看不见的完美硬币（the perfect coin）”，这个词指代的是皮克斯制作人员对细节的精益求精。有时候，被我们的制片人凯瑟琳•萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节，也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。凯瑟琳是《怪兽电力公司》一片的制作人员，影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏中，好奇的小布第一次来到麦克和萨里的公寓，还在蹒跚学步的小婴儿四处探索起来。两个怪物想要制止她，而她还是一步步走到了两摞高高堆起的CD旁，“别乱动！”麦克大喊起来，可是小女孩还是从90多张CD盒摞成的“高塔”底部抽出一张， CD全部倒塌散落在了地板上。麦克抱怨道：“哎，那些CD都是按字母顺序排列好的！”小女孩摇摇摆摆地走开了。这幕场景前后不到3秒钟，观众们只能够看到几个CD盒而已，但皮克斯的制作人员不仅为每一个CD盒制作了封面，还使用了可计算物体在运动时渲染效果变化的着色器。</p>
<p>“你能看到所有CD盒吗？看不到。”萨拉菲安接着说，“把所有CD盒全部设计一遍，这工作有意思吗？其实挺有意思的。我们还真有几位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚，所以就任劳任怨地把每张CD都雕琢了一番。也许，这其中的乐趣只有当事人才能体会吧。”</p>
	</body>
</html>

效果图

练习2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2>音乐排行榜</h2>
		<ol type="1">
			<li><a href="#">潇洒走一回</a> <img src="pic1.png" /></li>
			<li><a href="#">偏偏喜欢你</a> <img src="pic1.png" /></li>
			<li><a href="#">酒干倘卖无</a> <img src="pic1.png" /></li>
			<li><a href="#">不说再见</a>&nbsp;&nbsp;&nbsp; <img src="pic1.png" /></li>
			<li><a href="#">舍不得你</a>&nbsp;&nbsp;&nbsp; <img src="pic1.png" /></li>
			<li><a href="#">请跟我来</a>&nbsp;&nbsp;&nbsp; <img src="pic1.png" /></li>
		</ol>
	</body>
</html>

效果图

练习3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2>流量调查表</h2>
		<table   border="1px" width="350px" height="40px">
			<tr align="center">
				<td>总页面流</td>
				<td>共计来访</td>
				<td>会员</td>
				<td>游客</td>
			</tr>
			<tr align="center">
				<td>9756488</td>
				<td>97656</td>
				<td>7538087</td>
				<td>43364677</td>
			</tr>
			<tr align="center">
				<td>46776686</td>
				<td>85544</td>
				<td>69357</td>
				<td>568787</td>
			</tr>
			<tr align="center">
				<td>7538087</td>
				<td>546774</td>
				<td>476897</td>
				<td>334545</td>
			</tr>
			<tr align="center">
				<td>平均每人浏览</td>
				<td colspan="3">1.58</td>				
			</tr>
		</table>
	</body>
</html>

效果图

练习4

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="header.jpg" />
		<p><a href="#"><u>登录</u></a>|
		<a href="#"><u>阿里巴巴首页</u></a>|
		<a href="#"><u>客服中心</u></a>|
		<img src="icon1.bmp" />
		<a href="#"><u>提意见</u></a><br /></p>
		如需要帮助，请咨询	<img src="icon2.bmp" />或拨打400-800-1688
		<p>电子邮箱：<input type="email" maxlength="11"/></p>
		<p>会员登录名：<input type="text" name="name"/></p>
		<p>密码：<input type="password"name="pswd"/></p>
		<p>再次输入密码：<input type="password"name="zpswd"/></p>
		<p>会员身份：<input type="radio" name="majia" checked="checked"/>买家
			        <input type="radio" name="majia" />卖家
			        <input type="radio" name="majia" />两者都是
		</p>
		<p>验证码：<input type="text" name="yzm"/>
		<img src="verycode.gif" /><a href="#">看不清楚换一张</a></p>
	    <p><img src="btn_reg.gif" /></p>
		<textarea rows="8px" cols="40px">
			阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")，您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：Alibaba.com.cn、alibaba.cn、1688.com，下同），所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。
		</textarea><br />
		<a href="#"><u>阿里巴巴版权所有2015-2018著作权与商标声明</u></a>|
		<a href="#"><u>法律声明</u></a>|
		<a href="#"><u>服务条款</u></a>|
		<a href="#"><u>隐私声明</u></a>|
		<a href="#"><u>联系我们</u></a>|
		<a href="#"><u>网站题图</u></a>|
		<a href="#"><u>产品体验中心</u></a>|<br /><br />
		<a href="#"><u>阿里巴巴集团：阿里巴巴网络-中国 国际站 全球速卖通 日文站 中国万网</u></a>|
		<a href="#"><u>淘宝网</u></a>|
		<a href="#"><u>支付宝</u></a>|
		<a href="#"><u>中国雅虎</u></a>|
		<a href="#"><u>雅虎口碑网</u></a>|
		<a href="#"><u>阿里软件</u></a>|
		<a href="#"><u>阿里妈妈</u></a>|
		<a href="#"><u>集团研究中心</u></a>|
		
	</body>
</html>

效果图

本文链接：https://blog.csdn.net/Natsu_xia/article/details/106242705

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次，点赞7次，收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案，在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建：添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体，挺好看的。注重颜值的网站都会使用，例如知乎：font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--method将表单中的数据传送给服务器处理，get方式直接显示在url地址中，数据可以被缓存，且长度有限制；而post方式数据隐藏传输，_html表单的处理程序有那些

PHP设置谷歌验证器（Google Authenticator）实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证（即Google Authenticator服务）后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次，点赞5次，收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节，实现了多层数据的堆叠，为用户提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制（CoW）策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的，不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次，点赞27次，收藏13次。网络拓扑结构是指计算机网络中各组件（如计算机、服务器、打印机、路由器、交换机等设备）及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式，也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数，兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次，点赞5次，收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时，通常的做法是：new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的，而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠，也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑，需要做一些额外的特殊处理，笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数，一劳永逸，避免每次ne_date.prototype 将所有 ios