资源描述
1.<meta>
元信息标记，定义页面的关键字，页面说明，刷新等。
<meta name="keywords" content="关键字">
<meta name="description" content="页面说明">
<meta name="author" content="作者">
2.改变链接字的颜色
<body link="未访问过的字颜色" vlink="访问后的颜色" >
3.列表
有序<ol><type=“1”start=“3”><li></li></ol>
无序<ul><type="square"><li>名称<li></ul>
目录<dir><li>名称</li><dir>
菜单<menu><li>名称</li></menu>
定义列表<dl><dt>定义</dt><dd>定义的内容</dd></dl>
4.<sub>上标和<sup>下标
5.<vspace="">垂直边距，用于图文混排
6.<b></b>加粗<i></i>斜体
7.利用<caption></caption>(放在<table>下)在表格上方加标题
8.链接<a href"" target="-blank"></a>打开一个全新的窗口
<a href"" target="-seft"></a>
超链接锚点<a href="#2">使用查询</a>(放在body下)<a name="2"></a>锚点
9.滚动
<marquee direction="up">文字，图像</marquee>
up,down,left,right滚动方向
或<marquee behavior="alternate" scrollmount=“像素值” scrolldelay=“延迟时间毫秒” loop=“滚动次数” width=“滚动范围”>文字，图像</marquee>
alternate来回交替，scroll循环，slide只滚动一次
10.插多媒体
<embed src="xxx.sef" width="" heidht=""></embed>
显示播放器<embed src="xxx.MP3" width="" heidht=""></embed>
不显示： <bgsound src="xxx.mp3" loop="循环次数">
11.框架
框架网页：(index.htm)
放在</head><body>之间<frameset rows(水平分割)="第一个框架宽度30%,第二个宽度70%" >或cols()=""><frame src="xxx.htm"><frame src="xx.htm"></frameset>
属性：frameborder="no/yes"framespacing="边框宽度像素"，bordercolor
常用属性：隐藏滚动条
scrolling=“yes(显示)、no（隐藏）,auto（系统默认由内容调整）”
12.框架链接：
<frame src=".htm" name="1">
<a herf=".htm"target="1"></a>
13.浮动的框架：
<iframe src=".htm" name=".htm" width=".htm" height="" frameborder="no">
14.表单
<form type="text" size="12">姓名</form>
属性：action="表单处理程序地址"name="form1" method="get(将数据收到url),post"
表单元素：请输入姓名<input type="text" size=“5（字符）” value=“张三（默认）” maxlength="4"(只能输入四个字符)><br>
请输入密码<input type="password" size=“10（字符）” value=“0009（默认）” maxlength="10"(只能输入四个字符)><br>
14.单选按钮
请选择性别<input name="sex" type="radio" value=“男性”checkd>男
<input name="sex" type="radio" value=“女性”>女<br>
15.复选框
<input name="yy" type="checkbox" value="游泳"checkd>游泳
<input name="yy" type="checkbox" value="游泳"checkd>游泳
<input name="yy" type="checkbox" value="游泳"checkd>游泳
16. 下拉菜单和列表
请选择学历：<select name="itaok">
<option value="大学" selected(默认值)>大学</option>
<option value="小学">小学</option>
<option value="大学">大学</option>
</select>
列表：
请选择学历：<select name="itaok" multiple size="2"(显示的数)>
<option value="大学" selected(默认值)>大学</option>
<option value="小学">小学</option>
<option value="大学">大学</option>
</select>
17.文本域
请你留言：<textarea name="text" cols="30"(文本域宽度，以列为单位) rows="10"(文本域高度，以行为单位)></textarea>
爱逃课看到35
css课程
18.图片边框
img.test1{
border-style:dotted(点画线);dashed(虚线)
border-color: ;
bordre-width: ;
}
<img ser="" class="test1">
或
mg.test1{
border-style:dotted(点画线);dashed(虚线) color: ;width: ;
}
<img ser="" class="test1">
border-left:3px bule;
border-right:3px bule ;
图片的缩放
vertical-align:baseline/bottom/middle/sub/super/text-bottom/text-top/top(竖直对齐)
19.图文混排
span{float:left;（放大首字）
marrgin: ;
pading-right: :
padding-left: ;
}
<span>春</span>
img{float:(文字环绕图片)
/*margin-right:50px;（右侧距离）
/*margin-left:25px;（下段距离）
}
将段落的第一行缩进 50 像素：
p
{
text-indent:50px;
}
<script type="text/javascript">
function setTextIndent()
{
document.getElementById("div1").style.textIndent="50px";
}
</script>
字间隔word-spacing
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
This is a paragraph. The spaces between words will be increased.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>
字符转换
text-transform处理文本的大小写。这个属性有 4 个值：
· none
· uppercase
· lowercase
· capitalize
默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
文本装饰
text-decoration 有 5 个值：
· none
· underline
· overline
· line-through
· blink
不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：
处理空白符
white-space
值 nowrap
与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。
值
空白符
换行符
自动换行
pre-line
合并
保留
允许
normal
合并
忽略
允许
nowrap
合并
忽略
不允许
pre
保留
保留
不允许
pre-wrap
保留
保留
允许
文本方向
direction 属性规定文本的方向 / 书写方向。div
{
direction: rtl
}
可能的值
值
描述
ltr
默认。文本方向从左到右。
rtl
文本方向从右到左。
inherit
规定应该从父元素继承 direction 属性的值。
20.css页面背景
body{backgroung-color: ;(页面背景颜色)
margin: '
padding: ;
color: ;（页面文字颜色）}
p{font-size: ;(正文文字大小)
padding-top: ;
padding-left: ;
line-height: ;
}
21.背景
body{padding:0px;
margin:0px;
background-color: ;(页面背景)}
.topbanner{background-color: ;}(顶端banner的背景色)
leftbanner{
width:22%; height:330px;
vertical-align:top;
background-color: ;
color: ;
padding-left: ;
text-align:left;
font-size:
}(左侧导航条的背景色)
mianpart{text-align:center;}
22.背景图的重复及位置
body{padding: ;
margin: ;
background-image: ;(背景图片)
background-repeat:repaer-y;(垂直方向重复) /no-repeat;(不重复)
background-color: ;
background-position：bottom right；（背景位置，右下）
}
background-attachment：fixed；（固定背景图片）
23.文字
writing-mode（仅IE）:tb-rl;(竖排文字)
24.控制表格
隔行变色：.datalist tr.altrow{background-color: ;}
表单
元素：<form>
<p>请输入您的姓名：<br><input type="text" name="name" id="name"></p>
<p>请选择你喜欢的颜色：<br><select name="color" id="color">
<option value="red">红色</option></select></p>
</form>
留言
表单还可以嵌套在表格中
折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框：
table
{border-collapse:collapse; }
table,th, td
{ border: 1px solid black; }
25.动态超链接
a:link{color: ;(正常状态下的样式)
text-decoration:none;（无下划线）}
a:visited{ccolor: ;(访问过的)
text-decoration:none;
}
a:hover{color: ;(鼠标经过时)
text-decoration:underline;}
25-2.按钮式超链接
第7课
26.鼠标特效
a.help:hover{cursor:help;（）变换鼠标的形状}(帮助按钮的样式)
页面滚动条
27.项目列表
ul{list-style-type: none(不显示) (项目编号)/list-style-image:url(ixon1.jpg);用图片作为符号}
<ul><li></li></ul>（不推荐使用）
无需表格的菜单
用ul li 第八课
27-2.横向菜单
#t{float:left;(水平显示各个项目)}
<div id=“t”>
<ul><li></li><a href=""> </a></ul></div>
27-3.tab菜单第八课
28.CSS滤镜的使用(仅ＩＥ支持)
ALPHA通道：
.alpha{filter:alpha(opacity=50);}
class="alpha"
BLUR通道：
.blur{filter:progid:DXTmageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);}
class="blur"
透明色：
.chroma{filter:chroma(color= );(去掉颜色）}
class=“chroma”
Flip翻转：
.flip1{filter:fliph;(水平翻转)/flipv(竖直翻转)/flipv fliph（水平，竖直同时翻转）}
class="flip1"
遮罩：
.mask={filter:mask(color= );}
class="mask"
波浪：
span.wave{filter:wave(add=0,ferq2,ligntstrength=70,phase=75,strength=4);
}
<span class="wave">波浪</span>
29.理解css与div定位
div标记
＜div＞</div＞在不同行上
＜span＞</span＞在同一行上
29-1．盒子模型：
border
margin,padding
float定位
float：left/right；
position:absolute;绝对位置/related
z-index:
{position:absolute;脱离父子关系
z-index:1/o/-1(高低值也表明谁覆盖谁);}
给图片签名：
给文字设置决定定位及z-index
30.css排版（第11课）
clear:both;(不收float的影响)
固定宽度且居中的版式：
方法一：
body,html{margin:0px;padding:0px;text-align:center;background: ;}
#container{position.relative;margin:0 auto;padding:0px;width:700px;text-align:left;background:url( .jpg)repeat-y;}
方法二：
body,html{margin:0px;padding:0px;background: ;}
#container{position.relative;left:50%； width:700px;margin-left：-350;background:url( .jpg)repeat-y;}
31.框架搭建第12课
32.Javascript(13课)
表格输入时高亮：<script language=”javascript” type=”text/ javascript”>
Function hilite(obj){obj=document.getElementById(“td”+obj.name.tostring());obj.style-border=’2px solid #007EFF’;//加粗，变色}
Function delite(obj){obj=document.getElmentByLd(“td”+obj.name.tostring());obj.style.border=’1px solid #ABABAB’;//恢复原来的边框}
</script>
<script language=”javascript”> </ script>放在</head>前
页面之间的跳转 alert(a>b?”调用02.css ”“调用03.css”)
由远变近的文字：<script language=”javascript”>
for(vari=0;i<128;i++){docement.write(‘<div style=”left”;+（200-i）+’px;top’+(10+i/2)+‘px’>’)}
</ script>
图片淡入淡出：
33.xml基础（可以用户自定义标签符号）
用于存储数据
Xml链接css文件:<?xml-stylesheet type=”text/css”href=”xxx.css”?>
Xml文字阴影效果：加css文件<shadow></shadow>
Xml古诗效果：加css文件<poem><title>静夜思</c><author>李白</author><verse>床前明月光<br/></verse></poem>
定义css：Br{display:block//让诗句分行显示}
Author{}
Verse{}
Title{}
Poem{}
35. CSS 轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
在元素周围画一条线
<style type="text/css">
p {border:red solid thin;
outline:#00ff00 dotted thick;
outline-color:#00ff00; outline-style: solid；outline-width:thin;（设置轮廓的颜色，样式，宽度）}
</style>
<p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。</p>
</body>
36. CSS 框模型概述
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
CSS 边框属性
属性
描述
border
简写属性，用于把针对四个边的属性设置在一个声明。
border-style
用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width
简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color
简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom
简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color
设置元素的下边框的颜色。
border-bottom-style
设置元素的下边框的样式。
border-bottom-width
设置元素的下边框的宽度。
border-left
简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color
设置元素的左边框的颜色。
border-left-style
设置元素的左边框的样式。
border-left-width
设置元素的左边框的宽度。
border-right
简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color
设置元素的右边框的颜色。
border-right-style
设置元素的右边框的样式。
border-right-width
设置元素的右边框的宽度。
border-top
简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color
设置元素的上边框的颜色。
border-top-style
设置元素的上边框的样式。
border-top-width
设置元素的上边框的宽度。
CSS 外边距属性
属性
描述
margin
简写属性。在一个声明中设置所有外边距属性。
margin-bottom
设置元素的下外边距。
margin-left
设置元素的左外边距。
margin-right
设置元素的右外边距。
margin-top
设置元素的上外边距。
CSS 定位 (Positioning)
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
CSS 定位属性
CSS 定位属性允许你对元素进行定位。
属性
描述
position
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top
定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right
定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom
定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left
定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow
设置当元素的内容溢出其区域时发生的事情。
clip
设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align
设置元素的垂直对齐方式。
z-index
设置元素的堆叠顺序。
35.自适应的水平菜单，应用滑动门技术的玻璃效果菜单
<div id=”menu”><ul>
<li><a href=” ”>home</b></a></li></ul>
</div>
#menu{字体，字号，宽度} #menu ul{ padding： 0 0 0 8PX；margin：0；list-style：none；height： ；background：；}
#menu ul li{float：left；}
#menu ul lia{display：block；line-height：35px; color: ;text-decroration:none;padding:0 0 0 4px;}
#menu ul li a：hover{color: ;backgroud: ;}
#menu ul li ab{display：block；}
#menu ul li a：hover b{color: ;backgroud: no-repeat right top;}
#menu ul li ab{display：block；padding：0 14px；0 0；}
36.div布局
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
