html css 样式布局

一、position:fixed

锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。

示例:

二、position:absolute

1.外层没有position:absolute(或relative);那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。

2.外层有position:absolute(或relative);那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的下边框为20像素)。

示例:

三、position:relative

相对位置。

如下图,相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的,那就相对于浏览器进行相对位置的固定。

示例:

四、分层(z-index)

在z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。

在上面relative的示例中,我们看到了aa遮住了a,这是因为后写代码的显示级别越靠前,那么在不改变代码顺序的情况下如何让a盖住aa?如下:

示例:

五、float:left、right

Left、right时不用给他规定位置(left、top),直接相对于浏览器。若外部被包裹,相对于外部div的除去一行的位置的左上或右上显示。

overflow:hidden;    //超出部分隐藏;scroll,显示出滚动条;

<div style="clear:both"></div>   //截断流

设置超链接的样式示例:

附:cursor:pointer    鼠标指到上面时的形状

©                  版权符号©

半透明效果:

<div class="box">透明区域<div>

在样式表中的代码为:

.box

{

opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)

}

时间: 2024-08-08 09:40:34

html css 样式布局的相关文章

css样式布局中position的那些事儿

哎,页面布局及设计开发,对于一个一直从事后台开发来说屌丝来说,确实是件很费时.费力,很艰难的一件事. 今晚是想实现把多张重叠在一起,或是标记一张图片中不同的位置然后赋以超链接.花了一晚上的时间,才算初步搞定,大致明白了以下几个css属性用法. [1]将标签设置为float,和同事讨论: html的标签有块级和行级(至于那些是块级,可百度之),每个块级会占用html文档的一行(之所以是一行,是因为块级后面会带有换行).如果把块级标签设置为float时,则标签:(1)脱离原来父级标签.(2)可以在一

CSS样式布局入门介绍,非常详尽

转载自:http://wenboxz.com/archives/try-css-layout.html/

CSS样式布局入门介绍,很详尽

转载自:http://wenboxz.com/archives/try-css-layout.html/

快速记住CSS样式属性单词及输入HTML+CSS的方法

快速记住CSS样式属性单词及输入HTML+CSS的方法,DIVCSS5介绍一种快速输入HTML代码.快速输入CSS样式英文单词与样式值输入方法.降低英文单词代码输入错误概率,提升输入代码速度.DW软件输入CSS和HTML的终极用法(非面板输入法). DIVCSS5教大家一种快速记住CSS样式属性单词及用法的方法,告别死记硬背才是硬道理. CSS样式布局中使用的CSS样式英文单词,不需要死记硬背,会使用认识,知道长什么样即可.在DIV CSS布局开发中对于是否会拼写CSS属性单词关系不大,会使用.

《CSS网站布局实录》学习笔记(六)

第六章 CSS高级应用与技巧 6.1 id与class 6.1.1 什么是id id是XHTML元素的一个属性,用于标识对象名称.无论是class还是id,都是XHTML所支持的公共属性,并且也是其核心属性.class的主要功能是用来对对象的样式设置,而id除了可以定义样式外,还能够成为服务网站交互行为一个特殊标识.每一个被定义了id名称的对象,其id名字在每个页面有且仅能出现一次. 6.1.2 如何使用id 在不考虑使用JavaScript脚本,而是XHTML代码及CSS样式应用的情况下,应当

css样式表:样式分类,选择器。样式属性,格式与布局

样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立的区域内嵌在网页里,必须写在head里边. <style type="text/css"> p  //格式对p起作用 {样式: } </style> 3.外部样式表 新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→

DIV+CSS 样式简单布局Tab 切换

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../JS/JQuery/jquery-1.9.1.js" type="text/javascript"></script> <style type="

HTML——CSS样式表&amp;布局页面

CSS样式表: 一.作用:美化网页,页面布局. 二.分类: 内联,写在body里标签style=""里面的样式,优点是控制精确,可重用性差. 内嵌,嵌在网页的head里面,可重用性高 外部,样式写在另一个文件里面,如果要用直接附加过来. 优先级:内联>内嵌>外部 三.选择器: * 代表所有的元素 一般的网页都需要在写这个样式,去掉有些标签自带的边界,auto代表居中,如:*{  margin: 0px auto;  padding:0px; } 标签选择器:用标签的名字来选

CSS实现样式布局

使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额.本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考. 1.有疑问,先验证 在调试时,先对您的代码进行验证往往能省去不少麻烦事.格式不正确的XHTML/CSS 会导致许多布局上的错误.在其他浏览器中进行测试之前,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反. 如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览器的糟糕的显示,然后在符合标准的浏览器中进行测试,看到显示结果“不正常” 时