六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

CSS设置DIV边框实例

Admin | 2009-4-11 23:31:24 | ReadNums | 35807 | 标签 网页制作 | 打印本页
     

  相信大家都听说过CSS了,CSS是一种样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。

  在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

  只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。

  它的作用可以达到:

  ①在几乎所有的浏览器上都可以使用。

  ②以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。

  ③使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。

  ④你可以轻松地控制页面的布局。

  ⑤你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。

  尽管CSS有着非常多的优点、容易学习;但是很多人对其望而却步,因为他们适应了Table方式的网页排版,而对CSS+DIV只是尝试性的做过简单的学习或仅仅只是了解,对其用法并非真正接触。

  相信我,CSS+DIV比Table更加灵活,同时,非常容易学习,几乎是一学就会。下面,俺带您从最简单的最基本的实例开始学习,让您走出网页排版新方式的第一步。

  下面,偶以最灵活最通用的方式来教您如何应用CSS+DIV,即代码分离模式,CSS是单独的代码,与DIV布局对象分离。

  启动您的Dreamweaver,新建一个HTML基本页,之后,切换到“代码”编辑模式,然后,如下图一样,编写相应代码即可:

  首先,在页面的Head区域,加入CSS代码,尽管这个时候您可能看不懂,不要紧,跟着做即可。

  接着,在Body区域,加入一个DIV,将其ID设置为MyDiv;

  最后,通过浏览器浏览您的页面,我们就可以看到如下图的一个具有边框的DIV对象了。

  是不是呀,挺简单的,但是却非常灵活,由于使用了代码与对象分离模式,只要随便修改,整个效果即随之而改变。

  以上的例子是设置DIV的边框线条颜色、类型,这是四条边都设置成同一种风格;如果要修改某个属性,我不知道属性的名称,怎么办呢,不要紧,Dreamweaver会帮助我们,我们要做的、要改的其实就是使用可视化的方式修改即可。

  如下图!将某种属性删除,然后输入:(冒号),这个时候,会弹出属性供我们进行选择。

  看到了吧,在弹出的属性选项中进行选择,即可完成。

  下面,我们继续研究部分属性;上面的例子是设置DIV边框成统一的风格,如果要修改某个边框为其它类型的,应该如何设置呢,比如设置上边框为虚线?

  如下图,上边框就成为虚线了!

  在此就不贴图了,直接帖出CSS代码:

  <style type="text/css">
<!--
#MyDiv {       
    width: 66px;/*DIV宽度*/
 float:left;/*DIV对齐方式,这里为左对齐*/
 border:#A3BFE7;/*边框颜色*/
 border:solid;/*边框线条,这里为虚线*/
 border-width:1px;/*边框粗细,这里为1个像素*/
 border-top:#000000;/*设置顶边的颜色*/
 border-top-style:dotted;/*设置顶边线条为虚线*/
 border-top-width:1px;/*设置顶边粗细为1像素*/
 }
-->
</style>

  好了,实例就介绍到这个地方。

  至于CSS+DIV的灵活应用,方法还多着呢,当您有了一定的基础,要想得到提高,那也是一件容易的事情。


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日