DIV+CSS设置及问题总结

web上方紧贴工具栏的方式
使web上方接触工具栏  * { margin:0; padding:0; list-style:none;}
*代表对所有的HMTL控件进行设置

设置让一个div在页面中居中的办法
设置该div的margin属性的left、right为auto ;如: .div{ margin:1px auto ;}

ul横向排列
1.读取出li 前面的.  ul的 list-style: none; 如:   #tab ul   { list-style: none;}
2.设置ul 横向显示 li的float属性  如: #tab ul li {float: left;}

a标签去除下划线: text-decoration:none;

设置table内的td内容不换行: white-space:nowrap;

div visible\vidibility\display

1. visible
visible="false"/要隐藏页面元素的时候要设置其为服务器端控件 即runat="server",作用效果相当于display:none
2.visibility
visibility:visible /元素可见,默认值/
visibility:hidden /元素不可见,但仍然为其保留相应的空间/应用:想要隐藏页面元素,但是为其保留空间
visibility:collapse /只对table对象起作用,能移除行或列但不会影响表格的布局。如果这个值用在table以外的对象上则表现为hidden。/
visibility:inherit /继承上级元素的visibility值。/
3. display
display:none /元素不可见,并且不为其保留相应的位置/应用:隐藏一个元素,将其他元素填充到该元素保留的空间。
display:block CSS+DIV/表现为一个块级元素(一般情况下独占一行)/
display:inline /表现为一个行级元素(一般情况下不独占一行)/

div全屏背景色设置
描述: div的内容是在载入页面的时候动态加载的,div的高度也会一次动态改变。
 原来对div的设置是
.page
{
    width:100%;
    height:100%;
    background-color:#efefef;    
    }
效果是页面加载后的可见部分被设置了背景色,拖动滚动条后的其余部分均没有被设置背景色。

改变后的设置:
.page
{
    width:100%;
    height:100%;
    overflow:scroll;
    background-color:#efefef;    
    }
加入overflow属性,可对div的全部部分设置背景色。

时间: 2024-10-06 14:18:41

DIV+CSS设置及问题总结的相关文章

DIV+CSS设置网页—hatml

7.表单标签    (1)什么是表单?把输入的数据提交到服务器上(存到服务器),这个过程称为表单    (2)使用表单标签实现数据提交到服务器上这个过程 (3)form 标签:如果写表单,首先定义表单的范围    * 属性    ** action:提交的服务器的地址    ** method:表单的提交方式(有很多种,常见的有两种 get和post)    *** 代码    <form action="hello.html" method="get">

CSS网页错位之DIV CSS宽度计算

DIV CSS宽度计算之CSS网页布局错位(体感音乐) 为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么计算CSS宽度例一:我们计算一个左右结构的布局样式.假如总宽度为400px,那么左右加起来就应当小于400px,那我们可能左边为300px,右边为100px(体感音乐)正确代码: <!DOCTYPE html> <head> &l

CSS设置div的最小高度和最小宽度

CSS设置div的最小高度和最小宽度:所谓设置div的最小高度和宽度就是设置一个值,如果实际宽度或者高度小于此值时,就会将实际的宽度和高度值设置为规定的此最小值,下面就通过实例代码简单做一下介绍.如果在标准浏览器中,当然可以使用max-height或者max-width实现此效果,例如: max-width:50px; max-height:100px; 以上代码在标准浏览器中是没有任何问题的,但是无奈IE6浏览器并不支持,因为当前还有为数不少的IE6用户,所以需要兼容IE浏览器.代码修改如下:

CSS设置div的最小高度和最小宽

CSS设置div的最小高度和最小宽度: 所谓设置div的最小高度和宽度就是设置一个值,如果实际宽度或者高度小于此值时,就会将实际的宽度和高度值设置为规定的此最小值,下面就通过实例代码简单做一下介绍. 如果在标准浏览器中,当然可以使用max-height或者max-width实现此效果,例如: max-width:50px; max-height:100px; 以上代码在标准浏览器中是没有任何问题的,但是无奈IE6浏览器并不支持,因为当前还有为数不少的IE6用户,所以需要兼容IE浏览器.代码修改如

几个简单的css设置问题:div居中,ul li不换行 ,内容超出自动变省略号等

1  div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即可. 2)position值为relative时(绝对定位),css设置属性    text-align:center; left:50%;  margin-left:-500px;(左边距margin-left设置为当前div宽度的一半的负值即可). 代码示例: .page { position:

div css文字字体行高行距 深入理解css行间距设置

div css文字字体行高行距 深入理解css行间距设置 div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性.(体感音乐) 要使得每行的文字一定的间距距离所以可以通过line-height样式实现.接下来DIVCSS5通过DIV CSS实例实现字体文字上下间距. 相关扩展CSS教程: css line-height div css字间距 为了观察到行距设置效果,新

如何查看DIV被设置什么CSS样式

如何查看DIV被设置什么CSS样式呢?可以扩展到了解查看任何HTML标签被设置什么CSS样式.DIVCSS5教大家掌握如何使用谷歌浏览器查找网页中某局部DIV布局结构以及对应设置什么CSS样式. 一.直接观察div标签被设置什么样式   -   TOP 比较简单的布局,我们直接从浏览器上观察效果就能分析一下地方被设置什么样式. 简单直观分析DIV CSS布局用什么样式图 如上图,可以大致分析对应样式有哪些,比如使用背景图片,设置宽度多少.设置CSS高度多少.字体大小.文字靠左.距离左多少. 以上

深度理解div+css布局嵌套盒子

1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CSS定位以及设置显示效果,最后在每个块中添加相应的内容.利用CSS排版方法更容易地控制页面每个元素的效果,更新也更容易,甚至页面的拓扑结构也可以通过修改相应的CSS属性来重新定位.  2. 盒子模型 盒子模型是CSS控制页面元素的一个重要概念,只有掌握了盒子模型,才能让CSS很好地控制页面上每一个元素,达到我们

div+css感悟

div+css感觉很简单,可是真正做起来一些小细节把握不好,这个网页的布局也是完成不了的.今天学习了一些技巧方法现在分享下: 即一个原则,网页由一个个的大盒子组成,一个个的大盒子里面装着一个个的小盒子.先衡量好大盒子的尺寸,才好确定小盒子的大小. 大盒子包含小盒子,大的盒子必须又小的盒子组成,一个模块不能只有小盒子,要由大盒子来包装.所以先设定大盒子的宽度,高度可以设置,也可以不设置,再设置小盒子的具体信息. 1.现在的网页布局都是采用盒子模型,即网页由一个个div来构成的,div包含着很多di