DIVCSS 第四章 CSS 边框border与边界padding和margin

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

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

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

x
今天的DIV+CSS基础内容:1、CSS 中边框border的使用,2、CSS 中边界padding和margin的使用。这2个基本在写CSS的时候都会用到,而且IE6的兼容性问题也大部分时候都是这2个因素导致。

一、CSS 中边框border的使用
属性名称 属性值 说明
border-color  十六进制 可依序设置上,右,下,左线颜色
英文名称 border-color:red(四边均为红色)
三原色 border-color:red green(上下为红色,左右为绿色)
border-color:red green blue(上为红色、左右为绿色、下为蓝色)
border-color:red green blue yellow(上右下左分别为红绿蓝黄)
border-style none 不显示边线
dotted 点线
dashed虚线
solid 实线
double 双线
border-width 长度 border-width:0.2cm 0.3cm 0.4cm 0.5cm;
border-width:1 2 3 4;



简化方案:border:形态 长度 颜色
例如:
  1. border:1px solid black;
复制代码
二、CSS 中边界padding和margin的使用

padding属性名称属性值 说明
padding-bottom 长度/百分比 元件下端边线的空隙
padding-left 长度/百分比元件左端边线的空隙
padding-right 长度/百分比 元件右端边线的空隙
padding-top 长度/百分比 元件上端边线的空隙


简易写法:
  1. padding:10px;
  2. padding:2px 4px;
  3. padding:2px 6px 10px;
  4. padding:1px 2px 3px 4px;
复制代码
属性名称 属性值 说明
margin-bottom auto 自动调整空隙
长度/百分比 设置下端空隙
margin-left auto 自动调整空隙
长度/百分比 设置左端空隙
margin-right auto  自动调整空隙
长度/百分比 设置右端空隙
margin-top auto 自动调整空隙
长度/百分比 设置上端空隙


简化方案:
  1. margin:2px 4px
  2. margin:2px 6px 10px
  3. margin:1px 2px 3px 4px
复制代码
常用网页顶格设置:
  1. margin:0;
复制代码
discuz模板中常用的居中:
  1. margin:0 auto;
复制代码
上一章:CSS背景与列表

很多同学都想做Discuz模板,但htm和CSS都会的不多,可以看看我们htm和CSS的知识,做Discuz模板的时候才会得心应手,坚持学习,相信一定会成功。




上一篇:站帮网大讲堂 第七期 站长工具的使用 9月12号
下一篇:左右滚动图片JS,手动任意左右切换JS

大神点评12

非一般感觉明星会员实名认证 发表于 2012-9-12 09:34:58 [DIVCSS] 显示全部楼层
前排支持
神马都是浮云... ...
ybkucun 发表于 2012-9-12 11:12:11 [DIVCSS] 显示全部楼层
站长真是高人啊,让这些文盲新手感激流涕!!!!
义乌论坛-优博网,http://www.chnyb.com
jingjinxin 发表于 2012-12-15 10:37:27 [DIVCSS] 显示全部楼层
好贴,学习了!感谢楼主分享。
longxd 发表于 2013-1-4 13:19:32 [DIVCSS] 显示全部楼层
嘻唰唰,嘻唰唰!!!!!!....
瓜瓜ぺ牛... 发表于 2013-2-7 10:06:16 [DIVCSS] 显示全部楼层
margin:1px 2px 3px 4px 这个简化代码分别指的是什么啊?上下左右的顺序
无知小菜鸟 发表于 2013-5-8 11:31:17 [DIVCSS] 显示全部楼层
感谢楼主的教程了~
深圳网站建设www.intersk.com
李格lg 发表于 2013-5-8 13:42:22 [DIVCSS] 显示全部楼层
好,正在学习中
hackshow 发表于 2013-7-13 17:42:44 [DIVCSS] 显示全部楼层
    教程很实用 。
︶ㄣ滾.o○.. 发表于 2014-6-21 02:04:27 [DIVCSS] 显示全部楼层
如果考公务员,要有十足的心理准备。早点开始托关系吧,还不见得一定就有收效。
寻找回忆的终点 发表于 2014-8-25 09:23:43 [DIVCSS] 显示全部楼层
很实用,谢谢分享
智能建站www.3135.com
邦妮儿 发表于 2015-9-19 17:11:42 [DIVCSS] 显示全部楼层
有用大力支持。。
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

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