上蔡县住房和城乡建设局网站,手机视频网站开发教程,深圳罗湖做网站的公司哪家好,做网站宜宾传统布局
传统布局即是早期在平板电脑、智能手机等移动设备并不流行的时候使用的布局方式。
一、表格布局
例如#xff1a;采用表格方式实现如下简单模型的布局 #xff08;1#xff09;固定布局
即用具体的像素值来确定模型的宽和高等值。
HTML代码如下所示
tabl…传统布局
传统布局即是早期在平板电脑、智能手机等移动设备并不流行的时候使用的布局方式。
一、表格布局
例如采用表格方式实现如下简单模型的布局 1固定布局
即用具体的像素值来确定模型的宽和高等值。
HTML代码如下所示
table border0trtd colspan2 classheaderheader/td/trtrtd classasideaside/tdtd classsectionsection/td/trtrtd colspan2 classfooterfooter/td/tr
/table
css代码
charset utf-8;body {margin: 0;
}table {margin: 0 auto;width: 960px;border-spacing: 0;
}.header {height: 120px;background-color: olive;
}.aside {width: 200px;height: 500px;background-color: purple;
}.section {width: 760px;height: 500px;background-color: maroon;
}.footer {height: 120px;background-color: gray;
}
2流体布局
即采用百分比设置宽度等值表格的固定布局采用流体布局的方式比较简单只需要将table的width值设置为100%.
流体布局css代码
charset utf-8;body {margin: 0;
}table {margin: 0 auto;width: 960px;border-spacing: 0;
}.header {height: 120px;background-color: olive;
}.aside {width: 200px;height: 500px;background-color: purple;
}.section {width: 760px;height: 500px;background-color: maroon;
}.footer {height: 120px;background-color: gray;
}
二、浮动布局
浮动布局主要采用float和clear方式两个属性来构建
1固定布局
HTML代码片段
bodyheaderheader/headerasideaside/asidesectionsection/sectionfooterfooter/footer
/body
CSS代码
charset utf-8;body {width: 960px;margin: 0 auto;
}header {height: 120px;background-color: olive;
}aside {width: 200px;height: 500px;background-color: purple;float: left; //左浮动
}section {width: 760px;height: 500px;background-color: maroon;float: right; //右浮动
}footer {height: 120px;background-color: gray;clear: both;
}
注意aside和section这两部分必须要添加浮动并且两者总长度不能超过body的总长度否则无法将两者并排显示
2流体布局
流体布局只要更改 body 元素的限定长度为 auto 或 100%。然后左右两列分别设置 20% 和 80%即可。
流体布局css代码
charset utf-8;body {width: auto; //此处改为auto或者100%margin: 0 auto;
}header {height: 120px;background-color: olive;
}aside {width: 20%; //此处改为百分比height: 500px;background-color: purple;float: left;
}section {width: 80%; //此处改为百分比height: 500px;background-color: maroon;float: right;
}footer {height: 120px;background-color: gray;clear: both;
}
三、定位布局
在使用布局前先了解一下css2关于position属性的用法。 属性说明static默认值没有定位absolute绝对定位使用top,right,bottom,left来进行位移relative相对定位使用top,right,bottom,left来进行位移fixed以窗口参考定位使用top,right,bottom,left来进行位移 //absolute 绝对定位脱离文档流以窗口文档左上角 0,0 为起点
CSS代码
charset utf-8;body {margin: 10px auto;width: 800px;height: 500px;border: 1px solid red;
}header {position: absolute;top: 100px;left: 100px;width: 50px;height: 50px;background-color: grey;
}
效果图如图所示
所谓脱离文档流的意思就是本身这个元素在文档流是占位的。如果脱离了就不占有文档的位置好像浮在了空中一般有了层次感。
由于绝对定位脱离了文档流出现层次概念。那么每个元素到底在那一层会不会冲突覆盖。这时通过 z-index 属性来判定它们的层次关系。
属性说明auto默认层次数字设置层次数字越大层次越高
示例如下
html代码
body
body
headerdiv classdiv1div1/divdiv classdiv2div2/divdiv classdiv3div3/div
/header
/body
css代码
header {position: relative;
}div {width: 150px;height: 150px;position: absolute;
}.div1 {background-color: olive;left: 0px;z-index: -1; //设置在-1层。
}.div2 {background-color: purple;top: 100px;left: 100px;z-index: 10; //设置在第10层
}.div3 {background-color: gray;top: 200px;left: 0;z-index: 100; //设置在100层
} //relative 相对定位不脱离文档流占位偏移
CSS代码
charset utf-8;body {margin: 10px auto;width: 800px;height: 500px;border: 1px solid red;
}header {position: relative; //相对定位top: 100px;left: 100px;width: 50px;height: 50px;background-color: grey;
}
效果图如下
//fixed 以窗口参考定位脱离文档流会随滚动条滚动而滚动
css代码
charset utf-8;body {margin: 10px auto;width: 800px;height: 500px;border: 1px solid red;
}header {position: fixed; // 以窗口参考定位top: 100px;left: 100px;width: 50px;height: 50px;background-color: grey;
} 这三种分别都在各自的情况下使用均比较常用。但还有一种情况就是1.既要脱离文档流这样元素之间不会相互冲突2.以父元素比如 body 或其他父元素为参考点这样可以实现区域性绝对定位3.还必须是绝对定位。
HTML代码
bodyheaderheader/headerasideaside/asidesectionsection/sectionfooterfooter/footer
/body
CSS代码
charset utf-8;body {width: 960px;margin: 0 auto;//第一步将需要设置参考点的父元素设置为相对且不设置坐标position: relative;
}header {width: 960px;height: 120px;background-color: olive;//第二步如果父元素设置了参考点子元素的绝对定位将以它为基准 position: absolute;top: 0;left: 0;
}aside {width: 200px;height: 500px;background-color: purple;position: absolute;top: 120px;left: 0;
}section {width: 760px;height: 500px;background-color: maroon;position: absolute;top: 120px;right: 0;
}footer {width: 960px;height: 120;background-color: gray;position: absolute;top: 620px;left: 0;
}
效果图
四、box-sizing
在盒模型中元素盒子如果加入了内边距 padding 和边框 border 后它的总长度会增加。那么如果这个元素用于非常精确的布局时我们就需要进行计算增减。 为了解决这个精确计算的问题CSS3 提供了一个属性 box-sizing这个属性可以定义元素盒子的解析方式从而可以选择避免掉布局元素盒子增加内边距和边框的长度增减问题。
属性说明content-box默认值border 和 padding 设置后用于元素的总长度。border-boxborder 和 padding 设置后不用于元素的总长度。inherit规定应从父元素继承 box-sizing 属性的值。
示例设置 border-box 让 border 和 padding 不在额外增加元素大小
aside {width: 200px;height: 500px;background-color: purple;border: 5px solid green;padding: 10px;box-sizing: border-box;float: left;
}
box-sizing 是 CSS3 推出的各个厂商在实现时设置了私有前缀。
OperaFirefoxChromeSafariIE支持需带前缀无2 ~ 284 ~ 93.1 ~ 5支持不带前缀10.129106
//完整形式
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
五resize
CSS3 提供了一个 resize 属性来更改元素尺寸大小。
属性说明none默认值不允许用户调整元素大小。both用户可以调节元素的宽度和高度。horizontal用户可以调节元素的宽度vertical用户可以调节元素的高度。
一般普通元素默认值是不允许的。但如果是表单类的 textarea 元素默认是允许的。而普通元素需要设置 overflow:auto配合 resize 才会出现可拖拽的图形。 示例如下
HTML代码
bodyheaderheader/headerasideaside/asidesectionsectiontextarea/textarea/sectionfooterfooter/footer
/body
css代码
charset utf-8;body {width: 960px;margin: 0 auto;
}header {height: 120px;background-color: olive;overflow: auto; //必须resize: both; //设置为用户可以调节元素的宽度和高度。
}aside {width: 200px;height: 500px;background-color: purple;border: 5px solid green;padding: 10px;box-sizing: border-box;float: left;
}section {width: 760px;height: 500px;background-color: maroon;float: right;
}footer {width: 960px;height: 120;background-color: gray;clear: both;
}textarea {resize: none;
}
效果图如下
附 W3School中css3文档
学习参考资料李炎恢HTML5第一季视频教程
