Web标准:二、一列布局

知识点:

1.一列固定宽度

2.一列固定宽度居中

3.一列自适应宽度

4.一列自适应宽度居中

5.一列二至多块布局

1)一列固定宽度

下图是定义了一个高300px,宽400px,颜色是#99FFcc的样式表。

显示如下:2)一列固定宽度居中

与一列固定宽度相比,只要加一个居中的属性即可,这里用到的是CSS的外边距属性:margin。增加属性margin:auto;

显示如下:3)一列自适应宽度

自适应宽度是相对于浏览器,将CSS中的“width:400px;”去掉,或者使用“width:100%;”。可以看到两侧会有白边,这个是body的默认边距。这里我们可以加一个body{margin:0;},可以把body的默认边距去掉。h1-h6,ul等元素均有默认边距

 

4)一列自适应宽度居中

只要设置div的外边距为auto即可实现居中

5)一列二至多块布局

一般网站可以分为三部分,头部、中间主体、底部。我们可以用三个div来划分。

同样的我们可以将三个div放到一行上,只要给width一个固定的百分比,并且加一个“float:left”即可

CSS选择器:

CSS语法由三部分组成,选择器:可以是ID、CLASS或p等标签;属性和值是来定义这个物体的某一个特性。

ID和CLASS选择器:

id只能作用与一个对象,不能作用于多个对象,优先级高于class,这是id和class的区别。

时间: 2024-10-08 18:51:40

Web标准:二、一列布局的相关文章

web标准(复习)--2 列布局

今天我们开始学习一列布局,包含以下几种形式: 1.一列固定宽度 2.一列固定宽度居中 3.一列自适应宽度 4.一列自适应宽度居中 5.一列二至多块布局 前一节我们回顾了xhtml基础和css基础部分,今天我们正式开始使用网页制作软件--adobe公司出品的dreamweaver来开始网页设计之旅.相信之前您已经用过这个软件了,具体怎么使用我就不讲了.为了照顾部分朋友,今天课程的css部分我们是以可视化生成方式,不过建议大家能手写的尽量还是手写,这样有助于提高效率. 一.一列固定宽度我们先看一下一

web标准(复习)--3 二列和三列布局

今天学习二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6的3像素bug 一.两列自适应宽度下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助css的浮动来实现.首先创建html代码如下: <style>#side { background-color:#99F

第三天 二列和三列布局

http://www.aa25.cn/div_css/904.shtml 今天学习<十天学会web标准(div+css)>的二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml的块级元素(div)和内联元素(span) float属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6的3像素bug 一.两列自适应宽度 下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助c

web前端如何让网页布局稳定性和标准性?

刚开始学css+div布局的同学们,都比较困惑和难写的就是兼容性的问题了,特别是ie6等低版本的浏览器,随意国内逐步慢慢消失取代,但是现阶段还是会有点考虑因素再里面.我们写的网页布局怎么样才是合理的,完整的,兼容性好的呢? 因此再这里,小强老师给大家列出网页布局标准性.合理性和兼容性的一些方法,希望对刚开始学习css的同学有所帮助. 一.<!DOCTYPE> 标记的重要性. 位 于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准 规范,我们必需在开头处使用<

web前端_表格table布局,同一列两个&lt;td&gt;之间有间隙解决办法。

同学接了个很简单的网站.结果在布局的时候发现网页头部和网页主体之间差不多有1px的间隙.怎么也去除不了,帮忙看了看,隋记录下来,是这样的,网页头部和主体分别在两个<td>中(使用table布局),贴上简单demo: 效果如下,间隙消失了,最重要的是红色矩形圈起来的那句. 如果去掉红色矩形圈起来的部分,效果如下: web前端_表格table布局,同一列两个<td>之间有间隙解决办法.

二列布局 左边固定宽度 右边响应

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>二列布局 左边固定宽度 右边响应</title> <style> html{ height: 100%; } body{ height: 100%; margin: 0; padding: 0; } .left{ width: 200px; heig

css3总结(三)立方体、动画、web字体、字体图标、弹性布局、多列布局、伸缩盒子

目录: 1.立方体2.动画3.设置动画的一些属性4.案例:无缝滚动5.web字体6.弹性布局7.多列布局8.弹性布局9.案例:伸缩盒子的flex属性的应用案例(菜单个数不限)10.伸缩盒子的align-items属性     设置侧轴对齐方式11.案例:伸缩盒子,宽高自适应 1.立方体    *transform-style: preserve-3d;/*子元素保留其3d样式*/ <!DOCTYPE html> <html> <head> <title>立方

纯CSS无hacks的跨游览器多列布局

利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中都能通过验证. 问题的症结所在 如上图所示,由于各列的内容不一致导致其背景的高度也不统一.而背景实质上是内容(标准的盒子模型是由内容区,补白区,边框区与边界区组成,背景存在于前三者中:IE为前两者)的自适应的问题.再转化一下,如何撑大那些较短的列的高度,让所有列的高度等于最高的列的高度?这个,的确很

web标准(复习)--6 html列表

今天我们开始学习html列表,包含以下内容和知识点: ul无序和ol有序列表 改变项目符号样式或用图片定义项目符号 横向图文列表 浮动后父容器高度自适应 IE6的双倍边距bug 一.ul无序和ol有序列表无序列表是web标准布局中最常用的样式,代码如下: <div id="layout"><ul><li><a title="第五天 超链接伪类" href="/div_css/906.shtml" targ

标准之路网站上一篇文章《十天学会web标准(div+css)》的营养精华

以下精华出自如下链接,“http://www.aa25.cn/special/10day/index.shtml”,<十天学会web标准(DIV+CSS)>. 这个内容不要删掉:“<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">”,删除它后可能引起某些