布局标签之间的比较
昨天刚学完用table标签和frameset框架标签的页面布局,今天又学习div+css的页面布局。感觉计算机技术就是这样,一个简单的页面布局都是这样可用多种方法,并且三种方法对于一些简单基本的布局都能实现,且各有特点。 1、TABLE表格布局。
优点:布局容易、快捷、兼容性好。
缺点:改动不便,需重新调整,工作量大。
2、DIV+CSS。
优点:布局灵活、改动方便。
缺点:需考虑平台的兼容性,对制作人员技能要求转高。 3、https://blog.csdn.net/qq_17614015/article/details/51364222 讲述了frameset和div布局的优缺点 注:最后相比较而言,个人觉得以后开发直接熟练一种div的就行了,如果用到table和frameset话现学也比较好上手
div布局需要会的六点
实际上还是由HTML的div区域标签来布局区域的相对位置,对于掌控总体的布局,需要理解会用以下四点: 1、div嵌套技术的使用(尽量把界面先大体划分为几个模块 ,然后一个模块里面尽量都是同一类的小模块 。 2、使用 css浮动技术::float属性: left right:浮动在桌面的右边 。
3、clear属性: both:两边都不允许浮 left:左边不允许浮动 right:右边不允许浮动 。 <!-- 为避免后面不在同一行的模块隐在浮动块下,先要解除浮动 -->
<div style="clear: both;"></div> 4、合理的设置每个区域所占宽和高的比例 (通过设置line-height=div的height使文本居中,因为原始行高默认为字体的高度,且字体永远会在不同的行高中居中,设置好line-height放在div中文本就会居中)。 5、css盒子模型(万物皆盒子)通过padding属性调整内边距,即盒子内部的内容在当前盒子内的位置。margin属性调整外边距,即调整并列同级盒子之间的距离相对位置。 6、css绝对定位:position: absolute;top: 200px;left: 300px;使用这条语句控制当前盒子相对于桌面左边和上边的空距离。
浮动的元素会脱离正常的文档流,在正常的文档流中不占空间,因此
a、需要时可用来设计合色(浮动块不占空间,后面的非浮动标签会向前挪,隐藏在浮动块下面)
b、通过浮动使多个div布局在同一行(div不自动换行,span反之)
c、使用浮动可使得文字环绕在div区域边上
table布局也需要会两点
1、table嵌套,先把整个界面按行分为几个模块,就是一个几行的表格,看集体每个模块的内容来定某行分为几列。把一个模块中都是相同类型的小模块行嵌套一个table标签再细分为几行几列。 2、colspan列单元格合并,rowspan行单元格合并。在同一个table标签中出现大小不同的内容区域,必定要合并单元格。
frameset布局掌握三点
1、frameset嵌套 。 2、rows=“x%” cols=“x%” 设置区域大小 。 3、 <frame src="ccc.html" name="rightFrame"/> 指定区域对应的html(可重新编辑布局)和name属性方便后面指定链接跳转到哪一个frame。
div布局决定网页骨架,css如何化妆渲染
css将html内容布局和美化进行分离
css常用选择器:ID选择器:#id名 类选择器:.类名 元素选择器:标签名字
<style type="text/css">
div{
color: blue;
}
#div1{
color:red;
}
.fruit{
color: greenyellow;
}
.vegetable{
color: pink;
}
</style>
css引入方式:
- 行内样式:在标签内部定义style
- 内部样式:在head中定义style标签
- 外部样式:<link rel="stylesheet" href="网站首页.css" type="text/css" />引入外部css文件
css的扩展选择器:
- 选择器分组:中间用逗号隔开
- 后代选择器:中间用空格隔开
- 子元素选择器:>号隔开
- 属性选择器:中括号隔开
- 伪类:只针对a标签使用
css优先级:
- 就近原则,靠近div的优先
- 精确度:行内样式>id选择器>类选择器>元素选择器
css属性 :
https://www.cnblogs.com/whatisfantasy/p/6168416.html 常用css属性及其用法