基于http://www.ycku.com/xhtml/ 的视频教程的一些笔记
关于xhtml的解释 引用百度百科
可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用置标语言的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展标记语言，可扩展标记语言是标准通用置标语言的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。
下面的例子在头部声明使用了html5了<!doctype html>，只是在语法上更加靠近xhtml而已，实在有误请有望提出，个人感觉先学习XHTML再去学习HTML5会比较理想
对于大部分的标签的属性可以到 http://www.w3school.com.cn/tags/index.asp 进行查询了解，一般进行控制外观的内置属性开发中基本甚少使用，所以这里就不细说了。然而css基本要在开发中才会发现一些比较在意的问题，可以去看兼容性问题（pc css），然而切片布局的，稍后会开新的稍微说说自己目前的见解。
XHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML1.0 风格标记
1.所有单标记都必须关闭：<br />、<hr />、<option />等
2.所有的单属性必须等于自身：checked="checked"、readonly="readonly"等
3.尽可能不使用废弃标记：<center>、<font>等
4.尽可能不使用废弃属性：align、bgcolor
html基本标签
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title>标题</title> <body> 粗 <b>cu</b><br> 斜<i>xie</i><br> 删<s>sha</s><br> 下划<u>u</u><br> 电报<tt>dianb</tt><br> 下标<sub>shang</sub><br> 上标<sup>xia</sup><br> <address>dianzhi</address><br> <big>大写:字体变大</big> <br> <del>删除</del><br> <ins>修改 下划线</ins><br> <small>xiaoxie:字体变细</small><br> <strong>jiaqiang jiacu</strong> 基本与b标签一样<b>jiaqiang jiacu</b><br> <em> xieti jiaqiang</em><br> <pre> 格式化 让文本的空格和换行都显示在html上面</pre> <p>同一的html标签也是这样,采取更有语意性的</p> <p> <blockquote> 同一的html标签也是这样,采取更急有语意性的</blockquote></p> blockquote 引用标签 所以del strong em ins这些标签比上述标签会起到更好的语意作用;</body> </head> </html>
blockquote 引用文本,左右缩排
del strong em ins这些标签比上述标签会起到更好的语意作用;然而html5已经删除了部分标签了
html序列
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>hao</title>
</head>
<body>
无序列表
<ul type="circle">
<li>1</li>
<li type="disc">2</li>
</ul>
有序列表
<ol type="">
<li>1</li>
<li>2</li>
</ol>
定义列表(无前序)
<dl>
<dt>13</dt>
<dd>11</dd>
<dd>11</dd>
<dt>题目</dt>
<dd>细明</dd>
<dd>细明</dd>
</dl>
</body>
</html>
由于使用css reset之后,dd的margin-left的值被清空 来实现{float:left} ,清空前序号样式 {display：inline；}不过一般在reset里面已经使用了
html表格
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table summary='这是一个注释,结构化提示信息,搜素,页面不会显示出来' border="1">
<thead></thead>
<tbody>
<col bgcolor='red'></col>
<colgroup bgcolor='green'></colgroup>
<tr>
<th>a</th>
<td>b</td>
<th>c</th>
</tr>
<tr >
<th>1</th>
<th>1</th>
</tr>
<tr >
<th colspan='3' >1</th>
</tr>
</tbody>
</table>
table边框设置frame和rules 不常用,对边框的设置
cellspacing 0
cellpadding 0
nowrap限制文本框里面不换行
th是隐藏了一个加粗和居中的属性
col标签对应table的列进行操作,例如颜色或者背景
</body>
</html>
表格的背景优先级会比背景颜色优先级高
html图像
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>图像</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> </head> <body> <p> <img src="" width='200px' align="left" vspace="10" hspace="10" height='150px' alt="tuxiang"/> 文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top文字图像排版的位置测试文本,align:top </p> 缺省是bottom,在图像最的下方见到文字, top上 center中间<br/> 主要用 left或者right,align left或者right属性的设置相当于 浮动float的设置(博客或者日志的图文粗略显示模式<br/> vspace="10" hspace="10" 对应上下margin <br/> 上述基本属性基本使用css来实现就可以了<br/> 在a标签的包括下图像,边框的设置:css设置图像边框为0,css reset中要设置 设置图标 ie6会有问题显示不了图标 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <a href="http://localhost"><img src="" width='200px' style="border:0px"></a> </body> </html>
Alt属性对应无图像加载时候,对图像的描述，开发的时候必须加入，然而title属性看效果使用也无伤大雅。
Html 超链接
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>超链接</title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> </head> <body> <pre> 超链接也叫 URL 中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据 URL 的地址找到所需的资源。 格式: scheme://host[:post]/path/filename scheme指的是 http,ftp,file,mailto,news,gopher,telnet 七种 host 指的是 IP 地址或计算机名称 post 指的是服务器端口 path 指的是文件路径 filename 指的是文件 基准参考点 基本格式：<head>< basehref=”http://localhost:8080”> </head> 对应的该页面下的超链接为http://localhost:8080/* </pre> <a href="mailto:163@163.com">163@163</a> href="mailto:163@163.com" 使用本机的邮件发送</br> 锚点 a设置name name="123"</br> 跳转到123的锚点,a超链接 href写的#123 一般直接使用top返回顶部,对应某些页面的锚点,使用href="1.html#123" 超链接hover 点击后css失效 使用正确的书写顺序 link visited hover active 其实就是一个样式重写的问题 </body> </html>
Target属性 target="_blank" 新窗口打开
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
当然你还可以自己定义新窗口的名称 例如target="du" 然后新窗口都会在du 这个窗口或者标签打开了
<ul>
<li><a href="/example/html/pref.html" target="view_window">Preface</a></li>
<li><a href="/example/html/chap1.html" target="view_window">Chapter 1</a></li>
<li><a href="/example/html/chap2.html" target="view_window">Chapter 2</a></li>
<li><a href="/example/html/chap3.html" target="view_window">Chapter 3</a></li>
</ul>
超链接全部会在定义的view_window 打开,不会重复开过多页面
html 表单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<input type="image" src="1.jpg" alt="文本">
<button >
<img src="1.jpg" alt="文本">
</button>
<input type="file">
<select name='good'>
<optgroup label="广东">
<option>广东</option>
<option>广西</option>
</optgroup>
<optgroup label="广西">
<option>广东</option>
<option>广西</option>
</optgroup>
</select>
属性值multiple 为 多选 ,optgroup label="广西"中,会显示下列选项的组别名字
实际multiple 也比较少用，因为界面操作不友好 要按着ctrl 才实现多选，多选列表还是要交给js来实现，否则用户才不会买你的帐
</body>
</html>
外 边 框:<fieldset>...</fieldset>
标题: <legend>...</legend>
效果 标题在边框里面
----标题-----------------
html框架
<!doctype html> <html> <head> <meta charset="utf-8"> <title>框架</title> </head> <frameset rows="20%,80%"> <frame src="6.表单"> <frame src="6.表单"> </frameset> </html>
必须去掉 body标签
现在基本嵌套都用浮动框架
iframe
一般是需要javascript来自动获取网页高度
html媒体（主要是针对flash）
<!doctype html> <html> <head> <meta charset="utf-8"> <title>媒体</title> </head> <body> <embed src="1.swf" width="712" height="400" wmode="window"/> 必须要高度和宽度 wmode 值 window 使 flash 自身的矩形窗口来播放 opaque 使 flash 隐藏页面上位于它后面 transparent 使 flash 某一部分透明 <object type="application/x-shockwave-flash" data="1.swf" width="712" height="400> <param name="flash" value="1.swf" ></param> </object> object使用是对象,必须对其的值来插入,对应flash必须插入type声明对象类型 <br> <embed src="1.mp3" autoplay="false" loop="1" /> 背景音乐使用bgsound src=”URL” loop=”次数” 在head上面插入 <object data="1.mp3"><param name="mp3" value="1.mp3" ></param></object> </body> </html>
Meta标签（meta 这个东西有机会会细说）
<meta http-equiv="Refresh" content="time;URL " />
<meta http-equiv="Refresh" content="3;URL=8.媒体.html" />
定时跳转页面
refresh 表示重新下载页面 从而达到重定义跳转页面
一般写在head里面
meta 记录对应的信息增大搜索
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="author" content="作者"> <meta name="description" content="描述"> <meta name="keywords" content="关键字"> <meta name="generator" content="开发工具？"> <meta name="revised" content="html5"> <meta name="others" content="实在太多就不再列了，上述大部分是关于seo的，关于响应式稍后再说"> </head> <body> <marquee direction="center" onmouseover="this.stop();" onmouseout="this.start();"scrollamount="10" height="20px"> 对于做文字滚动不用js 这个可以试试 meta 对于搜索的优化 </marquee> </body> </html>
XHTML XML
XML 可以创建自己的标签,主要使用数据存放
Dtd之类限制xml的格式之类
CSS
串接式排版样式(重叠式样式表
优先级:
1.内联样式表的权值最高 1000；
2.ID 选择器的权值为 100
3.Class 类选择器的权值为 10
4.HTML 标签选择器的权值为 1
不要使用@import引入css文件,会导致文件不是多线程下载
长度 px 像素 推荐使用, Em 以目前字体高度为单位(绝对值反正现在有rem，这个看看就好) rem（css3）根据根元素缩放
Color rgb(0,0,0) （一般做效果使用rgba，也是css3的），一般有设计稿会使用 #000000 ;至于red yellow aliceblue 这些，自己看着办
单纯使用 font 加粗会出现显示不了,一般要配合font :12px bold;复合标签
最好还是使用font-weight:bold进行加粗;
text-indent 首行缩进 可以用于 文段之前的空格(中文习惯格式
line-height: 100px 对应100px的容器里进行垂直居中
vertical-align:middle
第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个 vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。
第二种用法，看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的，可以打个比喻：假设有两个行内元素a和 b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：
如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：
说到这里，思路就清晰了。
同样的原理对文字等也适用。
Css背景
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>背景</title>
<style>
body{background:#fff url("bg.jpg") no-repeat fixed center top;}
li{
list-style:none ;
}
</style>
</head>
<body>
提倡简写写法 background:颜色 背景图片 repeat attachment position<br/>
几乎不用list-style:url;图片 因为图片不能根据高度来调整,一般使用背景background就可以了
<p>简单px.this is css</p>
<p>简单px.this is css</p><p>简单px.this is css</p><p>简单px.this is css</p><p>简单px.this is css</p><p>简单px.this is css</p><p>简单px.this is css</p><p>简单px.this is css</p><p>简单px.this is css</p><p>简单px.this is css</p><p>简单px.this is css</p><p>简单px.this is css</p><p>简单px.this is css</p>
<ul>
<li>简单px.this is css</li>
<li>简单px.this is css</li>
<li>简单px.this is css</li>
<li>简单px.this is css</li>
<li>简单px.this is css</li>
</ul>
</body>
</html>
边框与边界
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>边框与边界</title>
<style>
div{ overflow:auto; }
img{ border:5px dashed ;
/*
border-color:red black yellow green
对应的边框颜色要上右下左 设置,需要每个分开出来
建议是简化 border 像素 形态 颜色;/规范
*/
margin:10px;
padding:10px;}
.box_a{50px; height:50px; background:#f00; margin:10px 0;}
.box_b{50px; height:50px; background:#f0f; margin:20px 0;display:inline-block;*display:inline; zoom:1;}
/*margin合并 第一个元素与父亲元素临近元素的margin合并(出现在块装元素标准浏览器出现问题,ie表现正常)
解决办法:
1)在父层div加上：overflow:hidden；
2)把margin-top外边距改成padding-top内边距;
3)父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border
父层div加： padding-top: 1px,或者 border-top:1px ;
4)设置父元素或子元素浮动（left/right）
5)设置父元素dispaly:inline-block或者display:table-cell;
6)给父元素加上绝对定位
以上6种办法都能解决第一个子元素的父元素的间距问题
相邻元素两个相邻元素之间的间隔，只有20px；如果我要实现两元素间的间隔是我理想的间隔，即30px,该如果实现呢？方法有以下两个：
1）给最后面的元素加上浮动（left/right）
2)给最后一个元素加上display:inline-block;但是IE6和IE7下不完全支持display:inline-block，所以要加上*display:inline;zoom:1即可解决IE6、7的bug;
1. 水平margin不会合并。
2. 两个上下渲染相邻（不一定是兄弟节点）的块状元素在正常页面流情况下会发生 margin 合并。
3. 浮动元素不会和任何元素（包括子孙节点）发生 margin 合并。
4. overflow！=visible的元素不和任何元素发生margin合并。
5. 绝对定位的元素不和任何元素发生margin合并。
6. inline-block 的元素不和任何元素发生margin合并。
7. 设置 clear 属性的元素不和任何元素发生margin合并。
8. 根元素不和任何元素发生margin合并。
9. 父节点和第一个子节点发生margin-top合并。
10. 如果最后一个子节点没有border以及padding，则和其父节点发生margin-bottom合并。
注意IE！特别是hasLayout对于margin合并也有影响，从而也造成了包含的绝对定位元素的位置差异。
*/
</style>
</head>
<body>
<div>
<img src="1.jpg"><img src="1.jpg"><br/>
<img src="1.jpg"><img src="1.jpg">
</div>
<div class="box_a"></div>
<div class="box_b"></div>
</body>
</html>
CSS链接、光标、DHTML、缩放
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>CSS链接、光标、DHTML、缩放</title>
<style>
a{
text-decoration:none;
border: 1px solid black;
zoom:1
}
a:link{
color:red;
text-decoration:none;
border: 1px solid black;
zoom:1
}
a:visited{
color:black;
text-decoration:none;
border: 1px solid black;
zoom:1
}
a:hover{
color:blue;
text-decoration:underline;
border: 1px solid black;
zoom:1
}
a:active{
color:green;
text-decoration:none;
border: 1px solid black;
zoom:1
}
span{cursor:help}
</style>
</head>
<body>
<a href="#"> 超链接测试</a>
<a href="#"> 超链接测试2</a>
<span>123</span>
zoom:1 缩放图像,只有ie6需要这个标签来显示全部内容
cursor 指定鼠标图片,html就指定整个页面
</body>
</html>
滤镜
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>滤镜</title>
<style>
div{height:200px; }
p{height:200px; }
img{opacity:0.5 }
</style>
</head>
<body>
<p>滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效</p>
<div>滤镜必须是块状对象,而且是只有ie支持,filter里面滤镜的必须配合属性才有效</div>
<img src="1.jpg" >
filter ie9以下包括ie9 ,才支持,然而ie9支持opacity 标签了
</body>
</html>
Css选择器
优先级:
1.内联样式表的权值最高 1000；
2.ID 选择器的权值为 100
3.Class 类选择器的权值为 10
4.HTML 标签选择器的权值为 1
每个id只能在html里面使用一次,唯一的元素,不会混淆(虽然可以用多个相同id但是不符合规范)
class可以在多个元素里面使用
选择符号
<div id="div" class="div"></div>
标签 div
Id #div
Class .div
div.div , div .div 优先级都属于11,所以谁先写在前面就会被后一个重写css
div.div div中class位div被选中, div .div div中的子元素class为div的元素被选中
link 加载css
css越晚加载的越重要，因为会覆盖之前加载的
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>css 选择器</title>
<style>
body{font-size: 20px}
h1{font-size: 12px; margin:0;padding:0}
div .div{color:red;}
div.div{color:green;}
</style>
</head>
<body>
123
<h1>滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效</h1>
<p>滤镜必须是块状对象而且是定义了高度的块状元素,而且是只有ie支持,filter里面滤镜的必须配合属性才有效</p>
<div>
<div class="div">滤镜必须是块状对象,而且是只有ie支持,filter里面滤镜的必须配合属性才有效</div>
</div>
通过css设置，首先设置body的字体，如
body {font-size: 14px;}
然后其他的都可以使用相对尺寸设置了，如
h1 {font-size: 2em;} /*14*2 = 28*/
h2 {font-size: 1.8em;}
等等
这样便于快速修改页面的整体文字尺寸，同时也不影响你修改局部的文字大小。
很少在嵌套标签里面加class,一般使用子类选择器来继承css
ie6不支持高级选择器 h1 >gt i{}
ie6只支持a的伪类，实在现在还有多少页面会做ie6-7的兼容
</body>
</html>
css 构造模型 定位（排版重点）
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>css 构造模型</title>
<style>
#contion{
padding:20px;
background:green;
border:1px solid black;
}
.box{
border:1px solid black;
margin:10px;
padding:10px;
}
div p{_color:blue}
#contion>p{color:blue}
.box p{color:red}
body{/*text-align:center;*/}
#textbox{
150px;
height:150px;
background:yellow;
border:1px solid black;
/*margin-left:auto;
margin-right:auto;*/
margin:0 auto;
padding:50px;
position:relative ;
}
#textbox p{
position:absolute ;
top:120px;
left:120px;
}
</style>
</head>
<body>
<div id="contion">
<p>测试10086moki</p>
<div class="box"><p>测试001moki</p></div>
<div class="box"><p>测试002moki</p></div>
<div></div>
</div>
<!--
每个浏览器文字的间距不一样
ie6 块状元素默认高度,增加p标签之后不会变化,其他版本会变化,默认div会有的margin
正常嵌套 border:1px solid black;margin:10px;padding:10px;各浏览器显示正常
只修改div contion的 颜色与box不一样,ie6不支持子选择器
#contion p{color:blue}
.box p{color:red}
解决办法 ie hack
-->
<div id="textbox">
<p>123</p>
</div>
<!--
margin-left:auto; auto属性ie6都支持,不支持margin-top:auto或者bottom的上下居中
父亲标签中加入text-align:center;,可以实现多浏览居中,可是文字要使用优先级重写text-align:left;,不建议这种写法
auto并不是100%,是自动扩展
padding会增大长度,所以width要减少对应的padding
absolute 绝对定位,是按照html的标签的点来定位,而relative 相对定位是父亲元素,
absolute绝对定位不占位置,relative 相对定位占原来的位置，
一般相对定位和绝对配合使用,父类使用相对定位,不设置top和left（为了兼容一般会习惯性加了left和top；）
,子类使用绝对定位absolute,可以定位的点是根据父类标签的点开始
relative 相对定位
absolute 绝对定位
这么一说还是一头冒水吧
看w3c那个CSS 定位概述 顺便也看浮动吧，浮动使用后记得清除浮动就ok了
-->
</body>
</html>
CSS构造颜色、背景与图像
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title> CSS构造颜色、背景与图像</title>
<style>
body{
background:url(bg1.jpg) repeat-x #E2FFEA;}
div{
//90px;
//height:90px;
background:red;
}
span{
90px;
height:90px;
background:#fff;
}
.shadow{
background: url(shadow.gif) no-repeat right bottom;
clear: right;
float: left;
//position: relative;
margin: 10px 0 0 10px;
}
.shadow img{
display: block;
/*这个属性到列表再进行解释*/
margin: -5px 5px 5px -5px;
//position: relative;
}
</style>
</head>
<body>
<div>1</div>
<span>2</span>
<div class="shadow">
<img src="1.jpg">
</img>
</div>
<div class="shadow">
<img src="1.jpg">
<img src="1.jpg">
</img>
</div>
<!--
display:block inline 元素转换成区块或者内联
转换之后,width height 取消
背景渐变:获取背景的渐变到底的颜色,衔接起来实现上下渐变效果
background:url(bg1.jpg) repeat-x #E2FFEA;
给区块加水印使用背景position right bottom,定位在右下方
给标题添加图标
使用background:url() no-repeat 0 50%;
padding-left:15px;
使用图标实现上下圆角,padding不在外区域设置就不会影响对应的宽度
background:url(top.jpg) no-repeat 0 0;
background:url(bottom.jpg) no-repeat 0 100%;
简单阴影效果
加入background隐影而已
background:url(shadow.jpg) no-repeat 100% 100%;
图像浮动,下面的shadow div,然后图像的margin: -5px 5px 5px -5px; 把背景显示出来
ie6 不支持//注释-->
</body>
</html>
css构造列表
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title> css构造列表</title>
<style>
body{margin:50px;padding:0}
ul{margin:5px;padding:2px;
list-style:none;
160px
}
li{
background:#ddd;
margin:0;
padding:2px 10px;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-left:1px solid #666;
border-bottom:1px solid #fff;
}
a{display:block;}
</style>
</head>
<body>
<ul>
<a href="#"><li>111</li></a>
<li>222</li>
<li><a href="#">333</a></li>
<li>444</li>
</ul>
<!--
ie-8以上 ul默认有padding margin,
横向列表 li{display:inline;}
以ul list-style-image:url(1.jpg);设置标题,不能调整对应的前标点的图标
建议设置ul li
li {
background:url(1.jpg) no-repeat 0% 50% ;
padding-left:150px;
line-height:150px;
}
内联列表 display:inline; 内联不能调高度
li{display:inline;
/* display:inline;一行列表 会把列表的前标记序号去掉, 还是建议使用float*/
background:url(1.jpg) no-repeat 0% 50% ;
padding-left:150px;
padding-top:150px;
line-height:150px
}
垂直列表 就是本来的背景设置,a设置为display:block; 就不用a在li标签外面，ie7必须要为a标签补充高度，不然会有点小问题
-->
</body>
</html>
css构造超链接
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>css构造超链接</title>
<style>
a{text-decoration:none;
border:1px dashed black;
/*ie6/7 边框显示不全,使用块状元素可以显示齐全,也可以使用zoom,或者line-height显示出来,
*/
zoom:1;
color:blue;
position:relative;
}
a[href^="http:"]{
color:red;
}
a[href^="mailto:"]{
color:green;
}
a span{display:none;
}
a:hover span{
display:block;
position:absolute;
top:1em;
left:0;
font-size:100%
}
</style>
</head>
<body>
123<a href="http://163">123</a>3123
<a href="mailto:163@163.com">mailto</a>
<a href="#">123<span>123456</span></a>
<!--
ie6不支持这个写法 a[href^="mailto:"]
需要ie6兼容hover之后的把display:none显示的话,需要把字体大小font-size进行调整
-->
</body>
</html>
css表格的构造
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>css表格的构造</title>
<style>
table{
/*设置单元格是合并还是分开border-collapse:collapse;
css不能输入大小,和table默认的cellspacing="0"的替代,会存在元素移动
*/
border:1px solid black;
/*border-collapse:collapse;*/
auto;}
.table th,.table td {
background:yellow;
50px;
border:1px solid black;
text-align:center;
vertical-align:middle;}
th,td {
50px;
border:1px solid black;
text-align:center;
vertical-align:middle;}
table col.col1 {
background:green;}
table col.col2 {
background:gold;}
.n{
visibility:hidden;}
</style>
</head>
<body>
<table class="table" >
<tr>
<th>1</th><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
</table>
<br/>
<table >
<colgroup>
<col class="col1" />
<col class="col2" />
</colgroup>
<tr><td >1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td class="n">1</td><td>2</td><td>3</td><td class="n">4</td></tr>
</table>
<!--table需要结构化使用thead tbody tfoot 设置对应的格式-->
</body>
</html>
css表单的构造
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>css表单的构造</title>
<style>
legend{ margin:0 auto}
.label label{
100px;
background:red;
display:inline-block;
text-align:right;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>注册表</legend>
性别: <label for="sex1"><input type="radio" name="sex" id="sex1" value="nan"/>nan<label><label for="sex2"><input type="radio" name="sex" id="sex2" value="nv"/>nv<label>
</fieldset>
</form>
<form class="label">
<fieldset>
<legend>good</legend>
<label for="name">姓名: </label><input type="text" name="name"id="name"/><br/>
<label for="name">123123:</label><input type="text" name="name"id="name"/><br/>
<label for="name">145: </label><input type="text" name="name"id="name"/><br/>
</fieldset>
</form>
<!--
使用label实现文字对齐
虽然使用display:inline-block; 可以实现对应的功能,浮动也可以实现,
旧版本的ie浏览器不支持display:inline-block这个属性！
正确的解释是"使用inline-block属性在IE下会触发layout，因此元素上设置的width、height是能生效的，所以也就有了同其它浏览器一致的显示效果",而不能说IE6/7支持 display:inline-block！
-->
</body>
</html>