Summary of the basics of mastering CSS DIV (2)_html/css_WEB-ITnose

We have summarized some knowledge about CSS DIV in the previous article. In this article, we will summarize it and learn from the following aspects:

First, let’s look at how to set the background of the web page. As the name suggests, the background can be set by color and picture. Let’s take a look at how to set it:

Setting the color is very simple, that is Background-color, look at this example below:

<title>利用背景颜色分块</title><style><!--body{	padding:0px;	margin:0px;	background-color:#ffebe5;	/* 页面背景色 */}.topbanner{	background-color:#fbc9ba;	/* 顶端banner的背景色 */}.leftbanner{	width:22%; height:330px;	vertical-align:top;	background-color:#6d1700;	/* 左侧导航条的背景色 */	color:#FFFFFF;	text-align:left;	padding-left:40px;	font-size:14px;}.mainpart{	text-align:center;}--></style>   

首页 分类讨论 谈天说地 精华区 我的信箱 休闲娱乐 立即注册 离开本站	正文内容...

For the setting of the picture, we can set His position, number of repetitions, etc., look at this example:

<title>背景水平重复</title><style><!--body{	padding:0px;	margin:0px;}.topbanner{	background-image:url(bg2.jpg);		/* 背景图片 */	background-repeat:repeat-x;			/* 水平方向重复 */}--></style>   

Second, let’s look at the production of tables and forms. First, let’s look at the production of tables, mainly using

,,

,

are relatively simple to create. Of course, adding CSS, javascript, XML, and Ajax makes it very complicated. . Here is a simple example below:

<title>年度收入</title><style><!--.datalist{	border:1px solid #429fff;	/* 表格边框 */	font-family:Arial;	border-collapse:collapse;	/* 边框重叠 */}.datalist caption{	padding-top:3px;	padding-bottom:2px;	font:bold 1.1em;	background-color:#f0f7ff;	border:1px solid #429fff;	/* 表格标题边框 */}.datalist th{	border:1px solid #429fff;	/* 行、列名称边框 */	background-color:#d2e8ff;	font-weight:bold;	padding-top:4px; padding-bottom:4px;	padding-left:10px; padding-right:10px;	text-align:center;}.datalist td{	border:1px solid #429fff;	/* 单元格边框 */	text-align:right;	padding:4px;}--></style>    

年度收入 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. The form is for us to submit personal information, and it is also a form that often appears on web pages. Let’s learn through an example of a commonly used form:

<title>表单</title><style><!--form{	border: 1px dotted #AAAAAA;	padding: 1px 6px 1px 6px;	margin:0px;	font:14px Arial;}input{							/* 所有input标记 */	color: #00008B;	}input.txt{						/* 文本框单独设置 */	border: 1px inset #00008B;	background-color: #ADD8E6;}input.btn{						/* 按钮单独设置 */	color: #00008B;	background-color: #ADD8E6;	border: 1px outset #00008B;	padding: 1px 2px 1px 2px;}select{	width: 80px;	color: #00008B;	background-color: #ADD8E6;	border: 1px solid #00008B;}textarea{	width: 200px;	height: 40px;	color: #00008B;	background-color: #ADD8E6;	border: 1px inset #00008B;}--></style>   

请输入您的姓名:

请选择你最喜欢的颜色:
红 绿 蓝 黄 青 紫

请问你的性别:
男
女

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

我要留言:

The effect is as shown below:

Third, let’s take a look at some special elements in browsers:

1. Hyperlink special effects: For some hyperlinks, when the mouse is placed on it, it will change color and change the shape of the mouse. How to set it with CSS? Look at this example:

<title>动态超链接</title><style><!--body{	background:url(bg9.gif);	/* 页面背景图片 */	margin:0px; padding:0px;	cursor:pointer;}.chara1{	font-size:12px;	background-color:#90bcff;	/* 导航条的背景颜色 */}.chara1 td{	text-align:center;}a:link{							/* 超链接正常状态下的样式 */	color:#005799;				/* 深蓝 */	text-decoration:none;		/* 无下划线 */}a:visited{						/* 访问过的超链接 */	color:#000000;				/* 黑色 */	text-decoration:none;		/* 无下划线 */}a:hover{						/* 鼠标经过时的超链接 */	color:#FFFF00;				/* 黄色 */	text-decoration:underline;	/* 下划线 */}--></style>   

首页

心情日记

Free

一起走到

从明天起

纸飞机

下一站

Rendering:

2. When the help button appears, we want to change the mouse shape to something unique, with special effects. Look at this example:

<title>鼠标变幻超链接</title><style><!--body{	padding:0px;	margin:0px;	background-color:#efe5e2;}table.banner{	background:url(banner2_bg.jpg) repeat-x;	width:100%;}table.links{	background:url(button3_bg.jpg) repeat-x;	font-size:12px;	width:100%}a{	width:80px; height:32px;	padding-top:10px;	text-decoration:none;	text-align:center;	background:url(button3.jpg) no-repeat;	/* 超链接背景图片 */}a:link, a visited{color:#2d2d26;}a:hover{	color:#FFFFFF;	text-decoration:none;	background:url(button4.jpg) no-repeat;	/* 变换背景图片 */}a.help:hover{								/* “帮助”按钮的样式 */	cursor:help;							/* 变幻鼠标形状 */}--></style>   

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

3. There is too much text and scroll bars need to be set. See the settings in this example:

<title>页面滚动条</title><style><!--body{									/* 页面滚动条 */	background-color:#efe5e2;	scrollbar-3dlight-color: #B0C4DE;	scrollbar-arrow-color: #34547E;	scrollbar-base-color: #FF0000;		/* 基调颜色 */	scrollbar-darkshadow-color: #1D4272;	scrollbar-face-color: #CFDFF4;	scrollbar-highlight-color: #FFFFFF;	scrollbar-shadow-color: #5380BA;}.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;}.largetext1 {	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;}.largetext11 {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;}--></style>   <textarea name="textarea" cols="50" rows="6" class="largetext11">.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;}</textarea><p>CSS（Cascading Style Sheet），中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过，并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。它以HTML为基础，提供了丰富的格式化功能，如字体、颜色、背景、整体排版等等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪、PDA等等。CSS的引入随即引发了网页设计的一个又一个新高潮，使用CSS设计的优秀页面层出不穷。</p>

Rendering:

Fourth, when making the menu, I will use Baidu’s homepage as an example to learn from this example:

<title>百度??全球最大中文搜索引擎</title><style type="text/css">td,p{font-size:12px;}p{width:600px; margin:0px; padding:0px;}.ff{font-family:Verdana; font-size:16px;}#navigation{	margin:0px auto;	font-size:12px;	padding:0px;	border-bottom:1px solid #00c;	background:#eee;	width:600px;height:18px;}#navigation li{	float:left;					/* 水平菜单 */	list-style-type:none;		/* 不显示项目符号 */	margin:0px;padding:0px;	width:67px;}#navigation li a{	display:block;				/* 块显示 */	text-decoration:none;	padding:4px 0px 0px 0px;	margin:0px;}#navigation li a:link, #navigation li a:visited{	color:#0000CC;}#navigation li a:hover{			/* 鼠标经过时 */	text-decoration:underline;	background:#FFF;	padding:4px 0px 0px 0px;	margin:0px;}#navigation li#h{width:56px;height:18px;}		/* 左侧空间 */#navigation li#more{width:85px;height:18px;}	/* “更多”按钮 */#navigation .current{							/* 当前页面所在 */	background:#00C;	color:#FFF;	padding:4px 0px 0px 0px;	margin:0px;	font-weight:bold;}</style>   <center>
<br><img  src="/static/imghwm/default1.png" data-src="http://www.baidu.com/img/logo.gif" class="lazy" alt="Summary of the basics of mastering CSS DIV (2)_html/css_WEB-ITnose" ><br><br><br><br><div id="navigation"><ul>	<li id="h">	<li><a href="#">资 讯</a></li>	<li class="current">网 页</li>	<li><a href="#">贴 吧</a></li>	<li><a href="#">知 道</a></li>	<li><a href="#">MP3</a></li>	<li><a href="#">图 片</a></li>	<li id="more"><a href="#">更 多 >></a></li>
</ul></div>
<p style="height:44px;"> </p>
<table width="600" border="0" cellpadding="0" cellspacing="0">	<tr>	<td width="92"></td>	<td><form>
<input type="text" name="wd" class="ff" size="35">	<input type="submit" value="百度搜索">
</form></td>	<td width="92" valign="top">
<a href="#">搜索帮助</a><br><a href="#">高级搜索</a>
</td>	</tr>
</table>
</center>

Rendering:

5. For the filter function of CSS, it mainly sets some filter effects on some pictures to better meet our requirements. Let’s take a look at the functions first:

The following is a simple explanation:

1. Filter: Alpha

Syntax ：STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)"

Description :

Opacity: starting value, ranging from 0 to 100, 0 is transparent, 100 is the original image.

FinishOpacity: target value.

Style: 1 or 2 or 3

StartX: any value

StartY: any Values ​​

Example: filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

2. Filter: blur

Syntax: STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength) "

Explanation:

Add: Generally 1, or 0.

Direction: angle, 0~315 degrees, step size is 45 degrees.

Strength: The value of the effect increase, usually 5.

Example: filter:Blur(Add="1",Direction="45",Strength="5")

3. Filter: Chroma

Syntax: STYLE="filter:Chroma(Color = color)"

Description: color: #rrggbb format, any.

Example: filter:Chroma(Color="#FFFFFF")

4 , Filter: DropShadow

Syntax: STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

Description: Color: #rrggbb format, any.

Offx: X-axis deviation value.

Offy: Y-axis offset value.

Positive: 1 or 0.

Example: filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5. Filter: FlipH :FlipH

6. Filter: FlipV

Syntax: STYLE="filter :FlipV"

Example: filter:FlipV

7. Filter: glow

Syntax: STYLE="filter:Glow(Color=color, Strength=strength)"

Description:

Color: glow color.

Strength: Strength (0-100)

Example: filter:Glow(Color="#6699CC",Strength="5" )

8. Filter: gray

Syntax: STYLE="filter: Gray"

Example: filter:Gray

9. Filter: invert

Syntax: STYLE="filter:Invert"

Example: filter:Invert

10. Filter: mask

Syntax: STYLE="filter:Mask(Color=color)"

Example: filter:Mask (Color="#FFFFE0")

11. Filter: shadow

Syntax: filter:Shadow(Color=color, Direction=direction)

Description:

Color: #rrggbb format.

Direction: angle, 0-315 degrees, step size is 45 degrees.

Example: filter:Shadow (Color="#6699CC", Direction="135")

12. Filter: wave

Syntax: filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)

Explanation:

Add: Generally 1, or 0.

Freq: deformation value.

LightStrength: deformation percentage.

Phase: Percentage of angle deformation.

Strength: deformation strength.

Example: filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13. Filter: Xray

Syntax: STYLE="filter:Xray"

Example: filter: and integrated into the IE browser. Only used in IE browser! So if necessary, we also need to learn how to use PS.

In summary, this is the second summary of CSS DIV, which we often use in development. Here I will summarize what I learned last time and learn the basics of making HTML-based blog link web pages - HTML CSS. It will be better to combine the learning.