欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

精通CSS+DIV基础总结(二)_html/css_WEB-ITnose

程序员文章站 2022-04-10 08:50:11
...
上一篇我们已经总结了部分CSS+DIV相关知识，这篇我们接着总结，从下边几个方面学习一下：


一，我们看如何设置网页的背景，顾名思义背景可以通过颜色和图片来设置，下边我们看一下如何设置：

颜色的设置非常简单，就是background-color这个属性，看下边的这个例子：

利用背景颜色分块
精通CSS+DIV基础总结(二)_html/css_WEB-ITnose


首页

分类讨论

谈天说地

精华区

我的信箱

休闲娱乐

立即注册

离开本站 		正文内容...


对于图片的设置，我们可以通过属性background-image来设置，当然我们还可以设置他的位置，重复次数等等，看这个例子：

   
 
   
背景水平重复



精通CSS+DIV基础总结(二)_html/css_WEB-ITnose			


 
   
 
   
 
   
 
   
 
   
    二，下边我们看表格与表单的制作，首先看一下表格的制作，主要是利用

,,
,

,
几个标签来，制作来说相对简单，当然加上CSS和javascript，XML，Ajax来说就非常复杂了。这里看下边简单制作的例子：   
年度收入



年度收入 2004 - 2007
	

		2004		2005		2006		2007	



拨款		11,980		12,650		9,700		10,600	



捐款		4,780		4,989		6,700		6,590	



投资		8,000		8,100		8,760		8,490	



募捐		3,200		3,120		3,700		4,210	



销售		28,400		27,100		27,950		29,050	



杂费		2,100		1,900		1,300		1,760	



总计		58,460		57,859		58,110		60,700	





          2，表单是我们提交个人信息的，也是网页经常出现的一条，我们通过一个常用表单的例子来学习：
   
 
   
表单




请输入您的姓名:


请选择你最喜欢的颜色:


请问你的性别:
男
女


你喜欢做些什么:
看书	上网	睡觉


我要留言:




   

 效果如图：
   
 
   

   
 
   
    三，下边我们看一下一些浏览器中的特殊元素：
   
          1，超链接特效：对于一些超链接，鼠标放上去会变色，并且会改变鼠标的形状，CSS如何设置，看这个例子：
   
动态超链接


精通CSS+DIV基础总结(二)_html/css_WEB-ITnose



首页		心情日记		Free		一起走到		从明天起		纸飞机		下一站	



   
    效果图：
   

   

   
 
   
      2，当有出现帮助按钮时，我们希望将鼠标形状变为与众不同的，就是有特效的，看这个例子：
   
 
   
鼠标变幻超链接




首页导读推荐版面推荐文章收藏夹我的信箱休闲娱乐帮助




   
          3，文本过多，需要设置滚动条，看这个例子的设置：
   
页面滚动条
CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。
   

   
    效果图：
   

   

   
     四,在制作使用菜单,我以百度的首页为例子,通过这个例子学习一下:
   
 
   
百度??全球最大中文搜索引擎


精通CSS+DIV基础总结(二)_html/css_WEB-ITnose





 



	



	
搜索帮助
高级搜索
	


   

     效果图:
   
 
   

   

   
      五,对于CSS的滤镜作用,主要是通过对一些图片设置一些滤镜效果,来更加符合我们的要求,先看一下有哪些功能:
   

   
 
   
  下边为简单说明：
   
 
   
1、滤镜：Alpha
   
 
   
语法：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
   
 
   
说明：
   
 
   
Opacity：起始值，取值为0～100, 0为透明，100为原图。
   
 
   
FinishOpacity：目标值。
   
 
   
Style：1或2或3
   
 
   
StartX：任意值
   
 
   
StartY：任意值
   
 
   
例子：filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
   
 
   
 
   
 
   
2、滤镜：blur
   
 
   
语法：STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
   
 
   
说明：
   
 
   
Add：一般为1，或0。
   
 
   
Direction：角度，0～315度，步长为45度。
   
 
   
Strength：效果增长的数值，一般5即可。
   
 
   
例子：filter:Blur(Add="1",Direction="45",Strength="5")
   
 
   
 
   
 
   
3、滤镜：Chroma
   
 
   
语法：STYLE="filter:Chroma(Color = color)"
   
 
   
说明：color：#rrggbb格式，任意。
   
 
   
例子：filter:Chroma(Color="#FFFFFF")
   
 
   
 
   
 
   
4、滤镜：DropShadow
   
 
   
语法：STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
   
 
   
说明：Color:#rrggbb格式，任意。
   
 
   
Offx：X轴偏离值。
   
 
   
Offy：Y轴偏离值。
   
 
   
Positive：1或0。
   
 
   
例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
   
 
   
 
   
 
   
5、滤镜：FlipH
   
 
   
语法：STYLE="filter:FlipH"
   
 
   
例子：filter:FlipH
   
 
   
 
   
 
   
6、滤镜：FlipV
   
 
   
语法：STYLE="filter:FlipV"
   
 
   
例子：filter:FlipV
   
 
   
 
   
 
   
7、滤镜：glow
   
 
   
语法：STYLE="filter:Glow(Color=color, Strength=strength)"
   
 
   
说明：
   
 
   
Color：发光颜色。
   
 
   
Strength：强度(0－100)
   
 
   
例子：filter:Glow(Color="#6699CC",Strength="5")
   
 
   
 
   
 
   
8、滤镜：gray
   
 
   
语法：STYLE="filter:Gray"
   
 
   
例子：filter:Gray
   
 
   
 
   
 
   
9、滤镜：invert
   
 
   
语法：STYLE="filter:Invert"
   
 
   
例子：filter:Invert
   
 
   
 
   
 
   
10、滤镜：mask
   
 
   
语法：STYLE="filter:Mask(Color=color)"
   
 
   
例子：filter:Mask (Color="#FFFFE0")
   
 
   
 
   
 
   
11、滤镜：shadow
   
 
   
语法：filter:Shadow(Color=color, Direction=direction)
   
 
   
说明：
   
 
   
Color：#rrggbb格式。
   
 
   
Direction：角度，0－315度，步长为45度。
   
 
   
例子：filter:Shadow (Color="#6699CC", Direction="135")
   
 
   
 
   
 
   
12、滤镜：wave
   
 
   
语法：filter: Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength)
   
 
   
说明：
   
 
   
Add：一般为1，或0。
   
 
   
Freq：变形值。
   
 
   
LightStrength：变形百分比。
   
 
   
Phase：角度变形百分比。
   
 
   
Strength：变形强度。
   
 
   
例子：filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
   
 
   
 
   
 
   
13、滤镜：Xray
   
 
   
语法：STYLE="filter:Xray"
   
 
   
例子：filter:Xray
   
 
   
 
   
         对于滤镜的功能是微软为增强浏览器的功能而特意开发的并整合到IE浏览器中的集合。只使用于IE浏览器中！所以有必要的话，还需要我们学习PS的使用。
   
 
   
         综上为CSS+DIV总结的第二篇，也是我们在开发中经常使用的。这里我把上次我学习总结的与HTML为主的博客链接网页制作基础学习??HTML+CSS ，结合学习会更好。

精通CSS+DIV基础总结(二)_html/css_WEB-ITnose
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。


相关文章


相关视频










网友评论


文明上网理性发言，请遵守 新闻评论服务协议
我要评论






  • 精通CSS+DIV基础总结(二)_html/css_WEB-ITnose
    • 

    • 

    

    


    

    

    

    

    专题推荐
    


    

    

    

    作者信息
    

    

    精通CSS+DIV基础总结(二)_html/css_WEB-ITnose
    

    

    

    认证0级讲师
    

    

    

    

    发布技术文章
    

    

      

    • 最新文章
      • 

    • 热门排行
      • 

    

    

    

    

    

    

    

    
推荐视频教程
    

  • 
精通CSS+DIV基础总结(二)_html/css_WEB-ITnosejavascript初级视频教程

    • 

  • 
精通CSS+DIV基础总结(二)_html/css_WEB-ITnosejquery 基础视频教程

    • 

    

    

    
视频教程分类
    


    

    

    

    


    ：公益在线php培训，帮助PHP学习者快速成长！
    

    Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1精通CSS+DIV基础总结(二)_html/css_WEB-ITnose关于我们免责申明赞助与捐赠广告合作
    

    

    
精通CSS+DIV基础总结(二)_html/css_WEB-ITnose  
            精通CSS+DIV基础总结(二)_html/css_WEB-ITnose

    

    


    		

    

    					
    
															
    
						相关标签：												
							精通CSS+DIV基础总结(二)						
											
    
															
    
						
    
							上一篇：							
								怎样用CSS让鼠标悬停在图片上图片变灰							
						
    
						
    
							下一篇：							
								WordPress中获取所使用的模板的页面ID的简单方法_php实例							
						
    
					
    
															
    
						
    
							推荐阅读