DIVCSS 第九章 CSS 构造模型

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

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

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

x
今天开始CSS的构造模型,今天的课程推荐大家先看看第四章 CSS 边框border与边界padding和margin和第五章 CSS 区块、浮动、定位、溢出、滚动条,看过这2章后可以更好的理解下面内容,大家可以把下面代码复制带页面中查看效果。

一、div
部分(division)---<div>元素,经常以div 形式引用,是XHTML 元素,用于定义XHTML 文件中的区域。

1、添加div
  1. <div>
  2. <p>This is our content area.</p>
  3. </div>
复制代码
给div 添加一个id
  1. <div id=”container”>
  2. <p>This is our content area.</p>
  3. </div>
  4. #container {
  5. Padding: 20px;
  6. Border:1px solid #000;
  7. Background:#ccc;
  8. }
复制代码
2、添加子div
  1. <div id=”container”>
  2. <p>This is our content area.</p>
  3. <div class=”box”>
  4. <p>I’m in a box!</p>
  5. </div>
  6. <div class=”box”>
  7. <p>I’m also in a box!</p>
  8. </div>
  9. </div>
  10. .box {
  11. margin: 10px;
  12. padding: 20px;
  13. border: 1px solid #000;
  14. }
复制代码
3、div 和上下文选择器
  1. .box p {Color: #333;}
  2. #container p {Color: #333;}
复制代码
二、边距

1、外边距(margin)

外边距声明:
  1. #container {
  2. Margin:-top: 20px;
  3. Margin-left: auto;
  4. Margin-right: auto;
  5. Margin-bottom; 20px;
  6. Width: 300px;
  7. Border: 1px solid #333;
  8. Padding: #ccc;
  9. }
  10. #container {
  11. Margin: 20px auto 1em auto; /*上,右,下,左*/
  12. }
复制代码
用margin:auto 居中
  1. Body {Text-align: center;}
  2. #container {
  3. Width: 400px;
  4. Margin: 10px auto 10px auto;
  5. Padding: 20px;
  6. Background: #ccc;
  7. Text-align: left;
  8. }
复制代码
2、内边距(padding)
  1. #container {
  2. Padding-top: 20px;
  3. Padding-left: 10%;
  4. Padding-right: 1em;
  5. Padding-bottom: 0;
  6. Background: #ccc;
  7. }
复制代码
3、外边距,内边距和主体
  1. Body {
  2. Margin: 0;
  3. Padding: 0;
  4. }
复制代码
三、边框

Border-style (边框样式):None(无边框)、dotted(点线)、dashed(虚线)、Solid(实线)、double(双线)、groove(凹槽)、ridge(凸槽)、Inset(凹边)、outset(凸边)
/*上右下左*/
  1. Border-style: solid dotted inset outset;
  2. Border-width(长度)
  3. Border-top-width
  4. Border-right-width
  5. Border-bottom-width
  6. Borer-left-width
  7. Border-color
  8. Border
  9. Border-top
  10. Border-right
  11. Border-bottom
  12. Border-left
复制代码
Border(四周)Border-top(上)…

四、定位

P,h1 和div 等成为块级元素。意思是这些元素显示为一块内容,即”块框”。与之相反,strong 和span 等元素称为行内元素,即”行内框”。

1、相对定位
  1. #myBox {
  2. Position: relative;
  3. Top: 20px;
  4. Left: 20px;
  5. }
复制代码
2、绝对定位
  1. #myBox {
  2. Position:absolute;
  3. Top: 20px;
  4. Left: 20px;
  5. }
复制代码
五、浮动
  1. .news img {
  2. Float: left;
  3. }
  4. .news p {
  5. Float: right;
  6. }
复制代码
更多请查看:15天学习DIV+CSS教程




上一篇:15天学习DIV+CSS教程汇总导读
下一篇:第十章 CSS 构造列表与导航

大神点评9

jyuap 发表于 2012-10-16 16:00:04 [DIVCSS] 显示全部楼层
顶.支持,路过.....  
醉如轮回bdz 发表于 2012-10-16 16:00:04 [DIVCSS] 显示全部楼层
活着,就是要支持你
我是小鸟 发表于 2012-10-16 17:59:51 [DIVCSS] 显示全部楼层
加油啊!!!!顶哦!!!!!  
大爱无疆 发表于 2012-10-16 17:59:51 [DIVCSS] 显示全部楼层
我在努力中  
jingjinxin 发表于 2012-12-15 10:41:25 [DIVCSS] 显示全部楼层
好贴,学习了!感谢楼主分享。
sharely明星会员实名认证 发表于 2013-4-18 11:02:28 [DIVCSS] 显示全部楼层
好东西呀,太给力了哦
vip合购 发表于 2014-6-17 02:34:46 [DIVCSS] 显示全部楼层
我怎么忍心看着你离去?我们一起度过了多少温馨快乐的时光,可是今天就要分手!望着你哀怨的眼神,我大喊:等一等,这狗我不卖了
中国易维网 发表于 2014-6-17 11:25:31 [DIVCSS] 显示全部楼层
原来这文章发的这么早啊
网上商城
m.meishangmen.com
meishangmen.com
l晴晴 发表于 2015-8-8 11:18:48 [DIVCSS] 显示全部楼层
很给力,希望分享更多给力的帖子啊。
您需要登录后才可以回帖 登录 | 快速注册

本版积分规则

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