这里是普通文章模块栏目内容页
例子

1,<a href=”http://www.w3schools.com/css/tryit.asp?filename=trycss_float5“>导航条</a>

body{
font-family: “宋体”;
font-size: 12px;
//对于页面中出现的文字,如外部没有CSS,就用这个CSS,默认。即最外层的CSS影响它所包含的内部所有元素,若其没有自己的CSS,则外部的应用之,对应应用。因为如td之类没有字体之类的属性,这种对应指的是外部CSS属性与元素含有的属性的交。
如: td
{
font-size:12px;s
}
对页面中td内的文字应用。

background-color: #F8FDF8;
margin: 0px auto;
}

2, 连接:link:正常显示 visited: 点击过后 hover: 鼠标滑过 active: 鼠标按下时
a.link {
font-size: 12px;
line-height: 22px;
color: #333333;
text-decoration: none;
}
a:visited {
font-size: 12px;
line-height: 22px;
color: #333333;
text-decoration: none;
}
a:hover {
font-size: 12px;
line-height: 22px;
color: #009900;
text-decoration: none;
}
a:active {
font-size: 12px;
line-height: 22px;
color: #333333;
text-decoration: none;
}

注: visited要在a:link之后。 active要在hover之后才会有效果。
3, 当控件获得焦点时进行样式操作
&lt;html&gt;
&lt;head&gt;
&lt;style type=”text/css”&gt;
input:focus
{
background-color:yellow;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form action=”form_action.asp” method=”get”&gt;
First name: &lt;input type=”text” name=”fname” /&gt;&lt;br /&gt;
Last name: &lt;input type=”text” name=”lname” /&gt;&lt;br /&gt;
&lt;input type=”submit” value=”Submit” /&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

3, 图片由半透明转为透明

&lt;html&gt;
&lt;head&gt;
&lt;style type=”text/css”&gt;
img
{
opacity:0.4; //firefox的用法,范围从0.0 – 1.0
filter:alpha(opacity=40) //ie的用法,范围从0 – 100
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Image Transparency&lt;/h1&gt;
&lt;img src=”klematis.jpg” width=”150″ height=”113″ alt=”klematis”
onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″
onmouseout=”this.style.opacity=0.4;this.filters.alpha.opacity=40″ /&gt;

&lt;/body&gt;
&lt;/html&gt;

4, 改变html的表现形式: 如input text 这个文本框让其只有下线,改变其边框颜色
&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>”&gt;
&lt;html xmlns=”<a href=”http://www.w3.org/1999/xhtml”>http://www.w3.org/1999/xhtml</a>”&gt;
&lt;head&gt;
&lt;meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;style&gt;
input {
border-color:red;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
sdf
&lt;input name=”" type=”text” /&gt;sfd
&lt;/body&gt;
&lt;/html&gt;

5, 百度输入栏:高度为28px, 而google为21px, 而中文高度比英文字母要繁,高度要高,显然百度的输入栏更符合输入中文。
&lt;input name=”" type=”text” autocomplete=”off”/&gt;
input[type="text"]{font:16px Verdana;height:28px;padding-top:2px} //改变html元素显示形状
注:页面要去掉头部的&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>”&gt;

栏目索引
相关内容