当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 学习网页标准制作网页之CSS混合布局应用

HTML/XHTML教程
CSS样式表设计的十条技巧
什么样的界面算是好界面-7个案例
CSS+JS实现的选项卡效果
用CSS设计高体验的表单显示效果示例
利用css和js实现firefox和IE都支持的页面局部打印
针对各种版本的浏览器隐藏CSS的九大技巧
Div+CSS布局入门教程
在DIV+CSS排版中新闻列表的制作方法
实践DIV+CSS网页布局入门指南
HTML中meta详解
有关HTML代码的另类应用技巧
彻底弄懂CSS盒子模式(DIV布局)
页面制作人员的修练之道
注意:HTML文件也能格式化硬盘
小技巧:让广告代码不再影响你的网页加载速度
进阶:彻底弄懂CSS盒子模式之二
彻底弄懂CSS盒子模式之三
详解css定位与定位应用
ASP生成静态Html文件技术杂谈
CSS的倡导者:学习CSS的10大理由

HTML/XHTML教程 中的 学习网页标准制作网页之CSS混合布局应用


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 96 ::
收藏到网摘: n/a

一、Margin(框距)padding(边框距)

margin属性设置顺序:上右下左

padding属性设置顺序:上右下左

margin:25px 0 25px 0;

简写:margin:25px 0;

二、Display显示属性设置

(1)、Display属性none (隐藏)

.alt {display:none;}

<span class=”alt”>Content List Part</span>

(2)、Display属性block (块/区域)

Img {display:block;}

<img href=”1.gif”></img>

块级元素:存在自身的“盒”中,后面跟随一个默认的回车

内联元素:是流的一部分,后面不跟随回车

(3)、Display属性inline

区别block元素,使用inline状态时,显示方式按照内联元素显示

三、 动态链接属性设置:

a:link {

font-weight : bold;

text-decoration : none;

color: #c30;

background: transparent;

}

a:visited {

font-weight : bold;

text-decoration : none;

color: #c30;

background: transparent;

}

a:hover {

font-weight : bold;

text-decoration : underline;

color: #f60;

background: transparent;

}

a:active {

font-weight : bold;

text-decoration : none;

color: #f90;

background: transparent;

}

(1)文字修饰属性(text-decoration)

Text-decoration:underline overline none;

Underline:链接时有下划线

Overline:连接时有上划线

None:连接时无下划线

(2)动态连接属性顺序

(LVHA)- LoVe-HA!

(3)IE/WINDOWS的伪装欺骗性

应避免使用a:active属性:出现bug 连接会出现冻结现象

四、如何设置行高(line-height)

Line-height:1.5;

五、如何设置文章位置(text-align)

可选择属性(left middle right)

IE6/WINDOWS的BUG会错误使文档居中

六、对于字体的完整CSS应用

Font:13px/1.5 Georigia,”New Centeury Schoolbook”,Times,serif;

七、设置页面分界限

(1)vertical-align:middle; 等于 <td valign=”middle”>设置垂直对齐

(2)background:none 等于 background:url(images/1.gif) repeat;

八、设置显示器设备

<style type=”text/css” media=”screen”> media属性

使用HTML4.01转换到XHTML1.0过渡式transitional