CSS视屏学习笔记.docx

第2节：

表格交互的变色

利用css实现奇数行添加类寄存器

Tr.altrow{background-color：

#777；}

第3节：

CSS与表单

下拉框：

红

绿

蓝

黄

青

紫

复选框

看书

上网

留言框：

按钮：

value的值为显示的值

像文字一样的输入效果：

效果：

Css代码：

.text{

border:

0pxwhitesolid;

border-bottom:

1pxgraysolid;

}

.submit{

background-color:

transparent;

border:

0px;

}

Body中的代码

请输入您的姓名：

第4节：

实现表格直接输入

将表格的每一个单元格中嵌套输入框，同时在通过css样式去掉输入框

第4章：

页面和浏览器元素

第1节：

动态链接的三个状态

a{color:

red;text-decoration:

none;}第一次访问时字体为红色，没有下划线；

a:

hover{/*鼠标移到连接上的样式*/

color:

red;/*深蓝*/

text-decoration:

none;/*无下划线*/

}

a:

visited{/*访问过的超链接*/

color:

#000000;/*黑色*/

text-decoration:

none;/*无下划线*/

}（无法显示）

a:

link{/*超链接正常状态下的样式*/

color:

red;/*深蓝*/

text-decoration:

none;/*无下划线*/

}（同上）

第2节：

按钮式的超链接

效果图：

注意事项：

在显示这种效果时一定要注意在开始时上边框和左边框颜色一致，下边框和右边框颜色一致，当鼠标移到选项上时在css中的设置是原来的两组颜色对调；

代码：

a{

color:

red;/*深蓝*/

text-decoration:

none;

padding:

4px10px4px10px;

border-top:

1pxsolid#EEEEEE;/*边框实现阴影效果*/

border-left:

1pxsolid#EEEEEE;

border-bottom:

1pxsolid#717171;

border-right:

1pxsolid#717171;

background-color:

#ecd8db;

}

a:

hover{/*鼠标经过时的超链接*/

color:

#821818;/*改变文字颜色*/

padding:

5px8px3px12px;/*改变文字位置*/

background-color:

#e2c4c9;/*改变背景色*/

border-top:

1pxsolid#717171;/*边框变换，实现“按下去”的效果*/

border-left:

1pxsolid#717171;

border-bottom:

1pxsolid#EEEEEE;

border-right:

1pxsolid#EEEEEE;

}

第3节：

浮雕式按钮：

与背景图片结合使用

第4节：

鼠标的变动

用css样式将你要设置的按钮的鼠标的样式进行简单的设置：

列a.help:

hover{cursor:

help;}

显示效果是在鼠标移到选项上时显示一个小问号在鼠标边上！

滚动跳的设置（仅仅适合IE浏览器）

效果图：

设置滚动条的代码：

.largetext{/*文本框滚动条*/

scrollbar-3dlight-color:

#B0C4DE;/*左边和上边的颜色*/

scrollbar-arrow-color:

#FFFFFF;/*小三角形按钮的颜色*/

scrollbar-base-color:

#8BA9CF;/*基本底色*/

scrollbar-darkshadow-color:

#436DA3;/*右边和下边的颜色*/

scrollbar-face-color:

#34547E;/*滚动条显示的颜色*/

scrollbar-highlight-color:

#E6ECF4;/*滑动按钮下底部的颜色*/

scrollbar-shadow-color:

#000000;/*右边和下边倒影的颜色*/

}

有滚动条的文本框

第4章：

制作菜单

第1节：

项目列表

• dsdfsd

Ul表示的是无符号的列表，但是在css中可以该表符号

ul{list-style-type：

decinal}显示为十进制

图片作为项目符号：

ul{list-style-image：

url（1.jpg）；}

此方法在ie和fi中显示不是一样的。

菜单的横竖转换：

在css中li{float：

left；}

效果图：

代码：

• 首页
• 公司简介
• 产品介绍
• 相关链接
• 在线咨询
• 员工专场

• 首页
• 公司简介
• 产品介绍
• 相关链接
• 在线咨询
• 员工专场

• 首页
• 公司简介
• 产品介绍
• 相关链接
• 在线咨询
• 员工专场

Css样式：

body{

background:

#777;

}

#div1{

position:

absolute;

width:

200px;

height:

300px;

left:

100px;

top:

50px;

border:

1yellowdotted;

}

#div1ul{

list-style-type:

circle;

}

#div1ulli{

margin:

10px0px0px0px;

padding:

5px5px5px10px;

border:

1pxredsolid;

width:

130px;

}

#div2{

width:

200px;

height:

300px;

left:

350px;

top:

50px;

position:

absolute;

border:

1yellowdotted;

}

#div2ul{list-style-image:

url（'1.jpg'）;}

#div2ulli{

margin:

10px0px0px0px;

padding:

5px5px5px10px;

border:

1pxredsolid;

width:

130px;

}

#div3{

width:

200px;

height:

300px;

left:

600px;

top:

50px;

position:

absolute;

border:

1yellowdotted;

}

#div3ul{list-style-type:

none;}

#div3a{

text-decoration:

none;/*如果要显示效果则边框及大小的设置都在a中*/

border:

1pxwhitesolid;

border-left:

12px#FA8072solid;

margin:

10px0px0px0px;

padding:

5px5px5px5px;

color:

#FF6347;

width:

130px;

}

#div3a:

hover{

color:

#CCCCCC;

background-color:

#FF0000;

}

流行的tap菜单：

2013518164923.jpg

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

CSS 学习 笔记

  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。