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:
<html><head><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> </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0"> <tr> <td colspan="2" class="topbanner"><img src="banner1.jpg" border="0"></td> </tr> <tr> <td class="leftbanner"> <br><br>首页<br><br>分类讨论 <br><br>谈天说地<br><br>精华区 <br><br>我的信箱<br><br>休闲娱乐 <br><br>立即注册<br><br>离开本站 </td> <td class="mainpart">正文内容...</td> </tr></table></body></html>
For the setting of the picture, we can set His position, number of repetitions, etc., look at this example:
<html><head><title>背景水平重复</title><style><!--body{ padding:0px; margin:0px;}.topbanner{ background-image:url(bg2.jpg); /* 背景图片 */ background-repeat:repeat-x; /* 水平方向重复 */}--></style> </head><body><table cellpadding="0" cellspacing="1" width="100%" border="0"> <tr> <td class="topbanner"><img src="banner2.jpg" border="0"></td> <!-- 配上banner图片 --> </tr></table></body><html>
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: <html><head><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> </head><body> <table class="datalist"> <caption>年度收入 2004 - 2007</caption><!--添加表头--> <tr> <th></th> <th scope="col">2004</th> <th scope="col">2005</th> <th scope="col">2006</th> <th scope="col">2007</th> </tr> <tr> <th scope="row">拨款</th> <td>11,980</td> <td>12,650</td> <td>9,700</td> <td>10,600</td> </tr> <tr> <th scope="row">捐款</th> <td>4,780</td> <td>4,989</td> <td>6,700</td> <td>6,590</td> </tr> <tr> <th scope="row">投资</th> <td>8,000</td> <td>8,100</td> <td>8,760</td> <td>8,490</td> </tr> <tr> <th scope="row">募捐</th> <td>3,200</td> <td>3,120</td> <td>3,700</td> <td>4,210</td> </tr> <tr> <th scope="row">销售</th> <td>28,400</td> <td>27,100</td> <td>27,950</td> <td>29,050</td> </tr> <tr> <th scope="row">杂费</th> <td>2,100</td> <td>1,900</td> <td>1,300</td> <td>1,760</td> </tr> <tr> <th scope="row">总计</th> <td>58,460</td> <td>57,859</td> <td>58,110</td> <td>60,700</td> </tr></table></body></html>Copy after login
<html><head><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> </head><body><form method="post"><p>请输入您的姓名:<br><input type="text" name="name" id="name" class="txt"></p><p>请选择你最喜欢的颜色:<br><select name="color" id="color"> <option value="red">红</option> <option value="green">绿</option> <option value="blue">蓝</option> <option value="yellow">黄</option> <option value="cyan">青</option> <option value="purple">紫</option></select></p><p>请问你的性别:<br> <input type="radio" name="sex" id="male" value="male" class="rad">男<br> <input type="radio" name="sex" id="female" value="female" class="rad">女</p><p>你喜欢做些什么:<br> <input type="checkbox" name="hobby" id="book" value="book" class="check">看书 <input type="checkbox" name="hobby" id="net" value="net" class="check">上网 <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check">睡觉</p><p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4" class="txtarea"></textarea></p><p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p></form></body></html>Copy after login
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: <html><head><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> </head><body><table align="center" cellpadding="1" cellspacing="0"> <tr><td><img src="banner3.jpg" border="0"></td></tr></table><table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center"> <tr> <td><a href="#">首页</a></td> <td><a href="#">心情日记</a></td> <td><a href="#">Free</a></td> <td><a href="#">一起走到</a></td> <td><a href="#">从明天起</a></td> <td><a href="#">纸飞机</a></td> <td><a href="#">下一站</a></td> </tr></table></body></html>Copy after login
Rendering:
2. When the help button appears, we want to change the mouse shape to something unique, with special effects. Look at this example: <html><head><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> </head><body><table cellpadding="0" cellspacing="0" class="banner"> <tr><td><img src="banner2_left.jpg" border="0"></td></tr></table><table cellpadding="0" cellspacing="0" class="links"> <tr><td><a href="#">首页导读</a><a href="#">推荐版面</a><a href="#">推荐文章</a><a href="#">收藏夹</a><a href="#">我的信箱</a><a href="#">休闲娱乐</a><a href="#" class="help">帮助</a></td></tr></table></body></html>Copy after login
3. There is too much text and scroll bars need to be set. See the settings in this example: <html><head><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> </head><body><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></body></html>Copy after login
Rendering:
Fourth, when making the menu, I will use Baidu’s homepage as an example to learn from this example:
<html><head><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> </head><body><center><br><img src="http://www.baidu.com/img/logo.gif"><br><br><br><br><div id="navigation"><ul> <li id="h"></li> <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></body></html>Copy after login
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.
Related labels：
source：php.cn
Previous article：How to learn DIV CSS_html/css_WEB-ITnose from scratch
Next article：CSS controls div to automatically extend to 100% height of the window_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to display the mobile version of Google Chrome
Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
11
2203
There is no output in the parent window
document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
1746
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
|
|---|
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
