您的位置：首页 > Web前端 > CSS

Html与CSS快速入门02-HTML基础应用

2016-07-26 11:08 956 查看

这部分是html细节知识的学习。

<head>
<meta charset="utf-8">
<title>图片应用</title>
<style type="text/css">
div.imageleft {
float: left;
clear: all;
text-align: center;
font-size: 10px;
font-style: italic;
}
body{ background: #ffffff url("..\\public\\images\\mn002.jpg") no-repeat top right; }
</style>
</head>
<body>
<div class="imageleft">
<a href="http://www.ctrip.com"> <img src='..\public\images\mn001.jpg' alt='测试图片'></a>
</div>
<section>
<header>测试地图映射</header>
<div style="text-align:center">点选地区获取更多信息
<br/>
<img src="..\public\images\timezonemap.png" usemap="#timezonemap" style="border:none; width:977px;height:498px " alt="世界时区地图"></div>
<map name="timezonemap">
<area shape="poly" coords="233,0,233,20,225,22,225,101,216,121,212,154,212,167,212,181,222,195,220,209,226,214,226,234,232,252,224,253"
href="http://en.wikipedia.org/wiki/eastern_time_zone" alt="Eastern" title="Eastern">
<area shape="rect" coords="1,73,74,163" href="http://en.wikipedia.org/wiki/Alaska" alt="Alaska" title="Alaska">
</map>
</section>
</body>

View Code
Tip:红眼，red—eye phenomenon，用频闪光，在室内或夜间对人物进行彩色摄影时，瞳孔被拍成红色的现象。"红眼"现象的产生是由于闪光灯的闪光轴与镜头的光轴距离过近，在外界光线很暗的条件下人的瞳孔会相应变大，当闪光灯的闪光透过瞳孔照在眼底时，密密麻麻的微细血管在灯光照应下显现出鲜艳的红色所反射回来，在眼睛上形象"红点"的自然现象，就是"红眼"。

颜色

这部分内容比较多，因为涉及简单的颜色搭配和选择，提高一下艺术素养，也是必须的哦。通常来说，颜色选择的最佳实践如下所示：

使用自然的调色板，这并不以为着使用土色调，而是要使用在生活中（如逛街）自然看到的颜色，而不是会导致眼睛受损的超亮颜色。

使用较小的调色板，不需要使用15种不同的颜色，通常只需要3，4种主色，和几个补色即可。

考虑访问者的统计数据，通过统计数据，了解目标群体，比如年轻人、老年人、女性等。

Web设计中常见的配色方案为：

类似色，使用色轮上彼此相邻的颜色，比如黄色和绿色，其中一种是主色，其相邻的颜色可以丰富显示效果。

补色，使用色轮上彼此相对的颜色，比如暖色（红色）和冷色（绿色）。

三色，使用色轮上间隔相等的三种颜色，可以提供平衡感。

在CSS中，通常的颜色包括如下17种:浅绿色、黑色、蓝色、紫红色、灰色、绿色、石灰色、茶色、深蓝色、橄榄色、橙色、紫色、红色、银色、凫蓝色、白色和黄色。英文表述的有，azure,bisque,cornflowerblue,darksalmon.firebrick,honeydew,lemonchiffon,papayawhip,peachpuff,saddlebrown,thistle,tomato,wheat,whitesmoke。十六进制代码可以产生1600万种可能的颜色，即RGB(255,255,255)，其颜色格式#rrggbb，其中ff表示完全亮度，cc表示80%亮度，99表示60%亮度，66表示40%亮度，33表示20%亮度，00表示不包含该颜色成分。

参考资料：

梅洛尼. HTML与CSS入门经典(第9版) [M]. 北京:人民邮电出版社, 2014.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航