DIVCSS 第十一章 CSS 构造颜色、背景与图像

[复制链接]
ARCHY明星会员实名认证 发表于 2012-10-26 11:08:49 [DIVCSS] 显示全部楼层 |阅读模式 上一主题 下一主题

马上注册,一起探讨正确快速的建站方法

您需要 登录 才可以下载或查看,没有帐号?快速注册

x
一、设定颜色
1、红色的几种合法定义;
  1. #f00;
  2. #ff0000;
  3. Red;
  4. Rgb(255,0,0);
  5. Rgb(100%,0%,0%);
复制代码
2、十六进制三元组
第一个字节:红色的值;
第二个字节:绿色的值;
第三个字节:蓝色的值;
简化写法:#cccccc 可写成#ccc
#ff6633 可以写成#f63。

3、使用17 种具名颜色

黑色(black) 000000
藏蓝色(navy) 000080
绿色(green) 008000
海蓝色(teal) 008080
银色(silver) 0c0c0c
蓝色(blue) 0000ff
酸橙色(lime) 00ff00
浅绿色(aqua) 00ffff
绛紫色(maroon) 800000
紫色(purple) 800080
橄榄绿(olive) 808000
灰色(gray) 808080
红色(red) ff0000
紫红色(fuchsia) ff00ff
黄色(yellow) ffff00
橙色(orange) ffa500
白色(white) ffffff

二、背景使用

1、背景图象渐变的制作
  1. Body {
  2. Background: #ccc url(bg.gif) rpeat-x;
  3. }
复制代码
此背景图需要是一个渐变的图片,并且可以和背景色#CCC完美融合。

2、给一个区块加上一个背景
  1. #branding {
  2. Width: 700px;
  3. Height: 200px;
  4. Background: url(branding.gif) no-repeat;
  5. }
复制代码
这个在之前的第三章 CSS背景与列表讲过,这里不细说,只做演示代码。

3、给标题加上一个小图标
  1. H1 {
  2. Padding-left: 20px;
  3. Background: url (bullet.gif) no-repeat left center;
  4. }
复制代码
如果希望使用百分比而不使用关键字,则0 50%这样就实现了垂直居中,这个例子我们经常在实际中使用,比如常见的列表的数字或者箭头。

4、圆顶角
  1. <div class=”box”>
  2. <h2>Headline</h2>
  3. <p>Content</p>
  4. </div>
  5. .box {
  6. Width: 418px;
  7. Background: #ccc url(bottom.gif) no-repeat left bottom;
  8. }
  9. .box h2 {
  10. Background:url(top.gif) no-repeat left top;
  11. }
复制代码
如果不希望碰到边界,加上填充。
  1. .box h2 {
  2. Padding:10px 20px 0 20px;
  3. }
  4. .box p {
  5. Padding:0 20px 10px 20px;
  6. }
复制代码
这个是比较简单的加圆角,直接使用圆角的背景图片来实现,比如要做宽窄屏切换,就需要做3个图层左中右来组合成完整的圆角页面。

5、简单的CSS 阴影效果
  1. <div class="wrapper">
  2. <img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" />
  3. </div>
  4. .wrapper {
  5. background: url(images/shadow.gif) no-repeat bottom right;
  6. clear: right;
  7. float: left;
  8. position: relative;
  9. margin: 10px 0 0 10px;
  10. }
  11. .img-wrapper img {
  12. display: block; /*这个属性到列表再进行解释*/
  13. margin: -5px 5px 5px -5px;
  14. position: relative;
  15. }
复制代码
第十章 CSS 构造列表与导航

15天学习DIV+CSS教程汇总




上一篇:什么是404错误
下一篇:第十二章 CSS 构造超链接

大神点评6

醉如轮回bdz 发表于 2012-11-3 13:51:20 [DIVCSS] 显示全部楼层
谢谢楼主啊!
海阔天空 发表于 2012-11-3 13:51:20 [DIVCSS] 显示全部楼层
顶也~……  
zhide 发表于 2012-11-3 13:51:20 [DIVCSS] 显示全部楼层
我好想升级  
神州8号 发表于 2012-11-3 13:51:20 [DIVCSS] 显示全部楼层
不错哈,支持下了!
jingjinxin 发表于 2012-12-15 10:44:15 [DIVCSS] 显示全部楼层
好贴,学习了!感谢楼主分享。
362938688 发表于 2014-11-28 15:10:36 [DIVCSS] 显示全部楼层
使用17 种具名颜色
www.bjhxjp.org|做网站|清洗烟道|
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

快速回复 返回顶部 返回列表