angeo2010

浏览: 19055 次
性别:
来自: 广州

最近访客更多访客>>

ztmars

吴小帅啊

tigerpan6374

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2011-09 ( 26)
更多存档...

HTML+CSS

博客分类：

学习笔记

Html分类：

1.基本标签:

<h1>...<h6>：标题

<p></p>:字段

<ul>,<ol>：无序、有序

<font>：字体

<img>：图片

<hr>：横线

<b>后面结合CSS圆角

2.布局

framset(微软，不符合W3C的规范)

table：用于涨势有排列格式的数据（一般用于后台管理系统布局）

colspan:行扩充

rowspan:列扩充

div span：（一般用与门户网站布局）

3.用户交互

<form>系列

-<input>

text/password/radio/checkbox/file/hidden

-<select><option></option></select>下拉列表

-<textarea></textarea>

css:

1.存放形式

1).存放在某一属性<td style=""></td>

2).存放在页面<head></head>中的<style></style>

3).外部.css文档，<link rel="stylesheet" stye="text/css" href="css1.css">

优先级是：1最高，2，3同级别（不过用谁取决于位置的先后，使用摆放在后面的）

2.选择符

1).标签选择符：对同一种标签使用相同的样式(如：body/table/div/span)

2).id选择符：指定对某一标签使用某种样式(如：<div id="div2"> #div2{})

3).class选择符：指定对某一标签使用某种样式(如：<div class="div3"> .div3{})

4).群选择符：多个标签用同一样式，用“，”隔开(如：img,.div2,#div3{})

5).包含选择符：设置路径，“ （空格）”隔开(如：.div td p span {}；ID为div的里面的td 中的p中的span设置)

优先级：id选择符 > class选择符 > 标签选择符

3.控制

1 总体控制

1.1 透明效果

filter:alpha(opacity=100);

注意：只支持IE;

2 文字控制

2.1 字体

body {

font-family: 黑体, 幼园;

}

2.2 大小

body {

font-family: 黑体, 幼园;

font-size: 24pt;

}

2.3 颜色

body {

font-family: 黑体, 幼园;

font-size: 24pt;

color: red;

}

2.4 粗细

body {

font-family: 黑体, 幼园;

font-size: 24pt;

color: red;

font-weight: bold;

}

2.5 斜体

body {

font-family: 黑体, 幼园;

font-size: 24pt;

color: red;

font-weight: bold;

font-style: italic;

}

2.6 线条

2.6.1 下划线

text-decoration: underline;

2.6.2 顶画线

text-decoration: overline;

2.6.3 删除线

text-decoration: line-through;

2.7 字母

2.7.1 单词首字母大写

text-transform: capitalize;

2.7.2 单词所有字母大写

text-transform: uppercase;

2.7.3 单词所有字母小写

text-transform: lowercase;

2.7.4 字母间距

letter-spacing: 10px;

2.8 与右边的距离

padding-right: 10px;

2.9 首字下沉

2.9.0.1 HTML

<p><span>首</span>好阿斗发缩短发送毒发</p>

2.9.0.2 CSS

p span {

float: left;

font-size: 80pt;

}

3 图片

3.1 背景图片

3.1.1 显示背景图片

background-image: url(User.jpg);

3.1.2 背景图片的重复

background-repeat: repeat-x; 横向排列

background-repeat: repeat-y; 纵向排列

background-repeat: no-repeat; 不重复

background-repeat: repeat; 平铺

3.1.3 背景图片的位置

background-repeat: no-repeat;

background-position: center;

3.1.4 固定背景图片的位置比例

background-attachment: fixed;

4 DI

4.2 相对定位

float: left;

4.3 绝对定位

position: absolute;

left: 100px;

top: 30px;

4.4 取消定位

clear: both;

4.5 固定宽度且居中

4.5.1 HTML

<body>

<div>

<div class="d1">Hello </div>

</div>

</body>

4.5.2 CSS

body {

text-align: center;

}

.container {

position: relative;

margin-left: auto;

margin-right: auto;

width: 600px;

}

5 Table

5.1 位置

5.1.1 靠顶对齐方式

5.1.1.1 HTML

<tr>

<td class="a">Hello</td>

Hello<br>

Eric

</td>

</tr>

5.1.1.2 CSS

.a {

vertical-align: top;

}

5.1.2 靠底对齐方式

5.1.2.1 HTML

<tr>

<td class="a">Hello</td>

Hello<br>

Eric

</td>

</tr>

5.1.2.2 CSS

.a {

vertical-align: bottom;

}

5.1.3 居中对齐方式

5.1.3.1 HTML

<tr>

<td class="a">Hello</td>

Hello<br>

Eric

</td>

</tr>

5.1.3.2 CSS

.a {

vertical-align: middle;

}

5.2 边框

5.2.1 设定分隔形边框

5.2.1.1 HTML

</tr>

</table>

5.2.1.2 CSS

.testTable {

border: 1px;

border-color: black;

border-collapse: collapse;

border-style: solid;

}

.title {

border: 1px;

border-color: black;

border-collapse: collapse;

border-style: solid;

}

.cell {

border: 1px;

border-color: black;

border-collapse: collapse;

border-style: solid;

}

注意，各个<table><tr><td>的各个属性都要设置，才看得见边框和分隔

分享到：

JavaScript | Servlet

2011-09-04 14:33
浏览 820
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML+CSS

1 总体控制

1.1 透明效果

2 文字控制

2.1 字体

2.2 大小

2.3 颜色

2.4 粗细

2.5 斜体

2.6 线条

2.6.1 下划线

2.6.2 顶画线

2.6.3 删除线

2.7 字母

2.7.1 单词首字母大写

2.7.2 单词所有字母大写

2.7.3 单词所有字母小写

2.7.4 字母间距

2.9 首字下沉

2.9.0.1 HTML

2.9.0.2 CSS

3 图片

3.1 背景图片

3.1.1 显示背景图片

3.1.2 背景图片的重复

3.1.3 背景图片的位置

3.1.4 固定背景图片的位置比例

4 DI

4.2 相对定位

4.3 绝对定位

4.4 取消定位

4.5 固定宽度且居中

4.5.1 HTML

4.5.2 CSS

5 Table

5.1 位置

5.1.1 靠顶对齐方式

5.1.1.1 HTML

5.1.2 靠底对齐方式

5.1.2.1 HTML

5.1.2.2 CSS

5.1.3 居中对齐方式

5.1.3.1 HTML

5.1.3.2 CSS

5.2 边框

5.2.1 设定分隔形边框

5.2.1.1 HTML

5.2.1.2 CSS

评论

发表评论

相关推荐

ORACLE

MYSQL

JDBC

JAVAweb--JSP

JavaScript

Servlet

Tomcat

JAVASE--其他

JAVASE--IO流

JAVASE--集合

JAVASE--面向对象2

JAVASE--面向对象

JAVASE--包

JAVASE--环境变量

最近访客更多访客>>