css学习

简介:
Java代码   收藏代码
  1. .menucxcw {  
  2.   display:block;  
  3.   width:80px;  
  4.   height:20px;  
  5.   margin-right:25px;  
  6.   background-image:url(../images/menu_6.jpg);  
  7.   background-position:top;  
  8.   margin-top:2px;  
  9.   text-decoration:none; //清除链接的下划线  
  10.   white-space: nowrap //文本不换行  
  11. }  
  12.   
  13.   
  14. .menucxcw:hover {  //鼠标放上去时,显示下面的亮丽按钮   
  15.   background-position:left 20px;  //左填充,垂直20px  
  16. }  

 

<td style="border-bottom:1px dashed #CCCCCC;">

本线条可显示上下左右虚线条.1px线条数值大小,可更改,最小为1,solid为实线型,dashed为虚线类型,对tr无效

 

<div id="time" style="display:inline;"></div>div中元素一行显示

 

<td width="100%" colspan="2"><input name="user_login" id="user_login" type="text" onfocus="style.backgroundColor='#F0F5FD'" onblur="style.backgroundColor='#ffffff'" /></td>


align=absmiddle表示图像的中间与同一行中最大元素的中间对齐 
style="vertical-align:middle;"

ertical-align在小雨手册上的解释是:设置或检索对象内容的垂直对其方式。我觉得不太理解的是vertical-align所在的分类是“属性/文本”
  O3noBLOG特别强调的是vertical-align和valign的不同,的确vertical-align应用最多的应该是在td内,控制内部对象位置,和td的valign属性极其相似。
  valign共有四个参数:top, baseline, bottom, middle,相对而言vertical-align也有相同的属性值,以下是对td控制对比:
  使用vertical-align:top;来避免td默认的valign="middle"是很好的选择,当然也可以使用vertical-align:middle;来对td控制,但对div肯定也是无效的。

 

去掉图片显示时四周的边框<img  border="0" >

设定tr的高度<td height="20">

 

z-index 检索或设置对象的层叠顺序 div1的z-index:3 div2的z-index:4,说明div2在div1的上面

 

5)为图片添加 alt 属性  
   为所有图片添加 alt 属性。alt 属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对
纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了 alt 属性,代码才会被 W3C 正确性校验通过。注意的
是我们要添加有意义的 alt属性,象下面这样的写法毫无意义:  
   <img src="logo.gif" alt="logo.gif">  
正确的写法: 
   <img src="logo.gif" alt="互动力工作室标志,点击返回首页"> 

 

书上说在模型窗口中加入<base target="_self"/> 标签即可。这个属性有IE6与IE7之分。作用就是让页面的所有链接只在本窗口内打开。
注:

1、如果你是IE6,你将<base target="_self"/>加入到<head>标签里就可以了。
2、如果你是IE7,你必须将<base target="_self"/>加入到<head>的标签内位置。

Java代码   收藏代码
  1. <html>  
  2.      <head>  
  3.            <title>test</title>  
  4.            <base target="_self"/>  
  5.            .............  
  6.      </head>  
  7. </html>  

 心得:

Java代码   收藏代码
  1. <base target="可以是你框架页面的框架名"/>  

进度条控制百分百

Java代码   收藏代码
  1. .column4 .zheng_bar {  
  2.     background: url("../temp/l_bar_bj.gif") repeat-x scroll 0 0 transparent;  
  3.     display: block;  
  4.     height: 28px;  
  5.     width: 80%;  
  6. }  

 <p class="zheng_bar" style="width:3%"></p>

 

noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。

Java代码   收藏代码
  1. <frameset cols = "25%, 25%,*">  
  2.   <noframes>  
  3.   <body>Your browser does not handle frames!</body>  
  4.   </noframes>  
  5. </frameset>  
相关文章
|
XML 编解码 前端开发
css核心知识学习
css核心知识学习
67 0
|
5月前
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
40 4
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
3月前
|
前端开发
|
3月前
|
Web App开发 移动开发 自然语言处理
|
5月前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
93 0
学习css的clip-path属性
|
5月前
|
前端开发 JavaScript 开发者
学习CSS动画的高级技巧
【7月更文挑战第1天】学习CSS动画的高级技巧
50 2
|
5月前
|
前端开发 JavaScript 开发者
如何学习CSS动画?
【7月更文挑战第1天】如何学习CSS动画?
36 1
|
7月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
245 0
|
7月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
92 0