Css学习(转载仅共个人学习用)

1、<li>中的LI前面的符号不出现而且不占位置
list-style:none;
margin:0px;padding:0px;
2、CSS相对定位语法

当父对象的position为absolute或者relative的时候
子对像如果设置了position为absolute,则top,left,right,bottom相对于父对象
例子：

<div id="AAA" style="position:relative;">基准点
<div id="num1" style="position:absolute;top:50px;left:1px;">测试1</div>
<div id="num2" style="position:absolute;top:80px;left:1px;">测试2</div>
</div>

3、CSS中的对齐属性

垂直顶部对齐（不是所有元素对这句都有效）

vertical-align:top;

水平居中对齐

text-align:center;

4、层的显示与隐藏

<script>
function hidlayer(){
document.all.Layer1.style.display="none";
}
</script>

<div id="Layer1" style="display:block"></div>

<a href="#" onClick="hidlayer()">隐藏层</a>

5、怎么能得到<div>的高度值

document.getElementById("divID").offsetHeight

6、在<table>或<div>中如何让传入的文本自动换行

<div style="width:100px">
你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你
</div>
这样的话。div中内容。会到100px自动换行的。但是
<div style="width:100px">
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
</div>
也就是其中内容是英文的话就不会换行？？？内容将会撑大直到完全显示

如果你输入的不是一连串的如:aaaaaaaaaa或！！！！！！！！这样的无意义字符，在你指定了容器的宽度之后，是会自动换行的；
如果有大篇章这样的字符，可以考虑使用word-break:break-all或table-layout:fixed

<div style="width:100px;word-break:break-all;">
cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc
</div>

7、文字应该放在div里面还是p里面还是span里面呢
内容较多的时候，分多行显示，一般会用div或者p，span一般用在行内

8、<div>与<span>有什么区别

SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN

例子：
<div>1</div><div>2</div>
<span>1</span><span>2</span>

从上面例子中可以看到span是不换行的

9、如何让页面中的表格不服从CSS中的table布局

可以为这个表格重新定义一个样式：background:none;

.asd{
background:none;
}

<table class="asd">
</table>

10、层的换行

<div nowrap>
<div style="float:left">此处显示新 Div1 标签的内容</div>
<div style="float:left">此处显示新 Div2 标签的内容</div>
<div style="float:left">此处显示新 Div3 标签的内容</div>
<div style="float:left">此处显示新 Div4 标签的内容</div>
<div style="float:left">此处显示新 Div5 标签的内容</div>
<div style="float:left">此处显示新 Div6 标签的内容</div>
<div style="float:left">此处显示新 Div7 标签的内容</div>
<div style="float:left">此处显示新 Div8 标签的内容</div>
<div style="float:left">此处显示新 Div9 标签的内容</div>
<div style="float:left">此处显示新 Div10 标签的内容</div>
</div>
现在层是自动换行了，我想在一行显示全部内容，请问怎样设置

答：
需要为容器指定宽度，如：
<style>
ul {margin:0px;padding:2px;width:300%;border:1px solid #630;}
li {display:inline;border:1px solid #f00;}
</style>
<ul>
<li>此处显示新 li1 标签的内容</li>
<li>此处显示新 li2 标签的内容</li>
<li>此处显示新 li3 标签的内容</li>
<li>此处显示新 li4 标签的内容</li>
<li>此处显示新 li5 标签的内容</li>
<li>此处显示新 li6 标签的内容</li>
<li>此处显示新 li7 标签的内容</li>
<li>此处显示新 li8 标签的内容</li>
<li>此处显示新 li9 标签的内容</li>
<li>此处显示新 li10 标签的内容</li>
</ul>

11、为什么我表格中的背景显示不出来

你输出的时候应该把没有数据的td填入一个空格或者

css遵循一个规则：没有前景就没有背景

12、html很多标签都有display属性，dipslay的值block,inline,none,list-item 分别表示什么

block :　块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
none :　隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline :　内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
inline-block :　将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内
list-item :　将块对象指定为列表项目。并可以添加可选项目标志

13、用css如何实现下面表格的效果

<table width="500" border="1">
<tr align="center">
<td>姓名</td>
<td>年龄</td>
<td>联系地址</td>
<td>联系电话</td>
<td> </td>
</tr>
<tr align="center">
<td>张三</td>
<td>22</td>
<td>深圳市福田区华强北路</td>
<td>12345678</td>
<td>编辑</td>
</tr>
<tr align="center">
<td>李四</td>
<td>25</td>
<td>不详</td>
<td>321</td>
<td>编辑</td>
</tr>
</table>

答：
<style type="text/css">
#dydiv { border: 1px solid #aaa; float: left; }
#dydiv ul { padding: 1px ;margin: 0px; list-style: none; float: left; }
#dydiv ul li { padding: 3px; margin: 1px; border:1px solid #aaa; text-align: center; }
</style>
<div id="dydiv">
<ul>
<li>姓名</li>
<li>张三</li>
<li>李四</li>
</ul>
<ul>
<li>年龄</li>
<li>22</li>
<li>25</li>
</ul>
<ul>
<li>联系地址</li>
<li>深圳市福田区华强北路</li>
<li>不详</li>
</ul>
<ul>
<li>联系电话</li>
<li>12345678</li>
<li>321</li>
</ul>
<ul>
<li> </li>
<li>编辑</li>
<li>编辑</li>
</ul>
</div>

14、鼠标停滞显示文字

可以用对象的title 或alt属性

也可以用下面的代码实现

<html>
<head>
<STYLE type=text/css>BODY {
MARGIN-TOP: 0px; FONT-SIZE: 9pt; MARGIN-LEFT: 4px; MARGIN-RIGHT: 0px; FONT-FAMILY: "宋体"
}
A {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: black; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: 400; FONT-SIZE: 13px; COLOR: red; TEXT-DECORATION: underline
}
A:active {
FONT: 9pt "宋体"; CURSOR: hand; COLOR: #ff0033
}
</style>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>

<body>
<script>

function show(tips,flag,url){
var my_tips=document.all.mytips;
if(flag){
my_tips.style.display="";
if (url!=null){my_tips.innerHTML="<img src="/"+url+"'align=left>"+tips;}
else{ my_tips.innerHTML=tips;}
my_tips.style.left=event.clientX+10;
my_tips.style.top=event.clientY+10;
}
else
{
my_tips.style.display="none";
}
}
</script>

<a href="#" tips="我是第一个" onmousemove=show(this.tips,1) onmouseout=show(this.tips,0)>Hello,world!</a>
<a href="#" tips="我就是第二个" onmousemove=show(this.tips,1,'http://be10.ods.org/51js/images/standard/online_member.gif') onmouseout=show(this.tips,0)>你好，中国</a>
<a href="#" tips="那我就是最后一个了" onmousemove=show(this.tips,1,'http://be10.ods.org/51js/images/standard/online_moderator.gif') onmouseout=show(this.tips,0)>永远都好</a>

<div id=mytips style="position:absolute;width:150;height:16;border:1 gray solid;font-size:9pt;background-color:#ffffff;color:red;display:none;filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);">
</div>
</body>
</html>

彻底弄懂CSS盒子模式(DIV布局快速入门)

作者：唐国辉

实例网页网址：http://www.hsptc.com/css2.html

知识巩固教程：彻底弄懂CSS盒子模式(导航栏实例详解)

前言

如果你想尝试一下不用表格来排版网页，而是用CSS来排版你的网页，也就是常听的用DIV来编排你的网页结构，又或者说你想学习网页标准设计，再或者说你的上司要你改变传统的表格排版方式，提高企业竞争力，那么你一定要接触到的一个知识点就是CSS的盒子模式，这就是DIV排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。因为用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器，比如PDA设备也能正常浏览，所以放弃自己之前钟爱的表格排版也是值得的，更重要的是CSS排版网页的优势远远不只这些，本人在这里就不多说，自己可以去查找相关信息。

理解CSS盒子模型

什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

CSS盒子模式

这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。

由“盒子”堆出来的网页版面

现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。

转变我们的思路

　　传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。

实现结构与表现分离

　　在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结果body内容部分就如下，这没有外加任何表现控制的标签：

qyjun

公告