屌丝小课堂(二、DIV+CSS一列布局)

前端开发 5315 Views 0 Comments

屌丝小课堂又开讲了,上一课讲的都是些基础部分,今天我们开始了用DW制作一个简单的布局-一列。慢慢来,这里用到的就是盒子模型了,做着理解着。这节很简单。推荐大家手写代码,不要用可视化工具。

1、首先打开DW工具,新建一个页面。切换到代码视图。插入一个DIV标签,给起个名字叫content,这个名字以后最好有一套标准,也就是语义标签,有利于SEO。代码如下:

<div  class="content">这是内容</div>

这是HTML部分,这就是个盒子了。

然后写CSS样式。代码如下:

<style type="text/css">
.content { height: 300px; width: 400px; background: #99FFcc; }
< /style>

然后预览下,看看在IE中的显示效果,一列固定宽度就做成了。简单吧。

2、一列固定宽度盒子居中

上面已经写出一列固定宽度了,下面我们要解决的问题就是如何让盒子居中,这就要用到盒子模型提到的margin这个属性。给这个盒模型加个margin: auto;时,可以使盒模型居中。不信你可以试试,刷新看下效果。代码如下:

.content { height: 300px; width: 400px; background: #99FFcc;margin: auto; }

3、上面的都是宽度定死了,下面做个宽度自适应的。
宽度自适应是现对于浏览器而言的,盒模型的宽度随着浏览器的变化而变化。这时要用到宽度的百分比了。当不设置宽度时,盒模型默认是相对于浏览器显示的宽度。那就把刚才CSS的宽度去掉

.content { height: 300px; background: #99FFcc;margin: auto; }

。刷新看下,然后改变浏览器大小看看效果。

4、解决浏览器默认属性问题
不同浏览器对CSS属性有不同的默认值,为了统一,也为了制作网页的兼容性,我们会提前初始化所有CSS默认属性。
例如刚才的盒模型,我们会发现浏览器有白边,那我们给body{margin:0;}这个属性看看是不是盒模型与浏览器没了白边。

屌丝小课堂(一、 XHTML CSS的基础知识)

屌丝小课堂(二、DIV+CSS一列布局)

转载请注明:一只羊博客 » 屌丝小课堂(二、DIV+CSS一列布局)

分享到:
(0)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址