账号通
    

账号  

密码  

21980

查看

23

回复
主题:[分享]科汛模板制作,Div+CSS布局入门实战教程(2) [收藏主题] 转到:  
mxzg 当前离线

222

主题

0

广播

3

粉丝
添加关注
级别:二年级

用户积分:2177 分
登录次数:148 次
注册时间:2006/8/9
最后登录:2009/3/17
mxzg 发表于:2008/10/13 17:47:00   | 只看该作者 查看该作者主题 楼主 
科汛智能建站系统

接下来我们在桌面新建一个文件夹,命名为“DIV+CSS布局练习”,在文件夹下新建两个空的记事本文档,输入以下内容:
无标题文档
这是XHTML的基本结构,将其命名为index.htm,另一个记事本文档则命名为css.css。
下面,我们在标签对中写入DIV的基本结构,代码如下:

<div id="container"><!--页面层容器-->
  <div id="Header"><!--页面头部-->
  </div>
  <div id="PageBody"><!--页面主体-->
    <div id="Sidebar"><!--侧边栏-->
    </div>
    <div id="MainBody"><!--主体内容-->
    </div>
  </div>
  <div id="Footer"><!--页面底部-->
  </div>
</div>
  
为了使以后阅读代码更简易,我们应该添加相关注释,接下来打开css.css文件,写入CSS信息,代码如下:
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
/*页面层容器*/
#container {width:100%}
/*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}
/*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
把以上文件保存,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。

关于以上CSS的说明(详细请参考CSS2.0中文手册,网上有下载):
1、请养成良好的注释习惯,这是非常重要的;
2、body是一个HTML元素,页面中所有的内容都应该写在这标签对之内,我就不多说了;
3、讲解一些常用的CSS代码的含义:
font:12px Tahoma
这里使用了缩写,完整的代码应该是:font-size:12px;font-family:Tahoma;说明字体为12像素大小,字体为Tahoma格式;
margin:0px
也使用了缩写,完整的应该是:
margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px

margin:0px 0px 0px 0px
顺序是 上 / 右 / 下 / 左,你也可以书写为margin:0(缩写);
以上样式说明body部分对上右下左边距为0像素,如果使用auto则是自动调整边距,
另外还有以下几种写法:
margin:0px auto;
说明上下边距为0px,左右为自动调整;
我们以后将使用到的padding属性和margin有许多相似之处,他们的参数是一样的,
只不过各自表示的含义不相同,margin是外部距离,而padding则是内部距离。
text-align:center
文字对齐方式,可以设置为左、右、中,这里我将它设置为居中对齐。
background:#FFF
设置背景色为白色,这里颜色使用了缩写,完整的应该是background:#FFFFFF。
background可以用来给指定的层填充背景色、背景图片,以后我们将用到如下格式:
background:#ccc url('bg.gif') top left no-repeat;
表示:使用#CCC(灰度色)填充整个层,使用bg.gif做为背景图片,
top left
表示图片位于当前层的左上端,no-repeat表示仅显示图片大小而不填充满整个层。
top/right/left/bottom/center
用于定位背景图片,分别表示 上 / 右 / 下 / 左 / 中;还可以使用
background:url('bg.gif') 20px 100px;
表示X座标为20像素,Y座标为100像素的精确定位;
repeat/no-repeat/repeat-x/repeat-y
分别表示 填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
height / width / color
分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
4、如何使页面居中?
大家将代码保存后可以看到,整个页面是居中显示的,那么究竟是什么原因使得页面居中显示呢?
是因为我们在#container中使用了以下属性:
margin:0 auto;
按照前面的说明,可以知道,表示上下边距为0,左右为自动,因此该层就会自动居中了。
如果要让页面居左,则取消掉auto值就可以了,因为默认就是居左显示的。
通过margin:auto我们就可以轻易地使层自动居中了。
5、这里我只介绍这些常用的CSS属性了,其他的请参看CSS2.0中文手册

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
rstu512 当前离线

8

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:216 分
登录次数:3 次
注册时间:2009/5/3
最后登录:2009/5/5
rstu512 发表于:2009/5/5 9:36:00   | 只看该作者 查看该作者主题 沙发 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
小翠 当前离线

36

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:354 分
登录次数:5 次
注册时间:2009/4/22
最后登录:2009/4/28
小翠 发表于:2009/4/28 15:50:00   | 只看该作者 查看该作者主题 藤椅 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
eieibear 当前离线

101

主题

0

广播

0

粉丝
添加关注
级别:一年级

用户积分:558 分
登录次数:17 次
注册时间:2009/3/9
最后登录:2009/5/2
eieibear 发表于:2009/4/26 22:09:00   | 只看该作者 查看该作者主题 板凳 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
张贵德 当前离线

22

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:312 分
登录次数:8 次
注册时间:2008/11/8
最后登录:2009/2/8
张贵德 发表于:2008/11/20 22:14:00   | 只看该作者 查看该作者主题 报纸 
科汛在线考试系统(NET)
版主,你要转帖的话,一定要转完全啊,看的我一头雾水,最后还是在google.cn上搜索出来完整版本的了
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
张贵德 当前离线

22

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:312 分
登录次数:8 次
注册时间:2008/11/8
最后登录:2009/2/8
张贵德 发表于:2008/11/20 22:08:00   | 只看该作者 查看该作者主题 地板 
科汛在线商城系统(NET)

完整篇

http://www.blueidea.com/tech/site/2006/3574.asp

 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
zpwz 当前离线

777

主题

0

广播

0

粉丝
添加关注
级别:六年级

用户积分:943 分
登录次数:32 次
注册时间:2010/11/22
最后登录:2013/6/9
zpwz 发表于:2010/12/3 19:50:22   | 只看该作者 查看该作者主题 7楼 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
idwangwen 当前离线

8

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:60 分
登录次数:8 次
注册时间:2010/4/30
最后登录:2011/3/23
idwangwen 发表于:2010/12/3 19:55:12   | 只看该作者 查看该作者主题 8楼 
做在线知识付费 选科汛云开店
学习中!楼主继续贴啊加油
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
keeper11 当前离线

148

主题

3

广播

0

粉丝
添加关注
级别:一年级

用户积分:1302 分
登录次数:218 次
注册时间:2008/3/16
最后登录:2020/4/26
keeper11 发表于:2010/12/5 11:59:21   | 只看该作者 查看该作者主题 9楼 
科汛智能建站系统
已经说得很详细了哦。
 
缩阴产品排行榜 http://suoyin999.com
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
afengflmx 当前离线

91

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:82 分
登录次数:8 次
注册时间:2010/12/4
最后登录:2011/2/19
afengflmx 发表于:2010/12/9 13:05:41   | 只看该作者 查看该作者主题 10楼 
科汛在线网校系统
已经说得很详细了哦。
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.37891秒 powered by KesionCMS 9.0