例子_html_程序编码_思韵闪耀

例子

思韵闪耀

2010-09-30

0次

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, 当控件获得焦点时进行样式操作
<html>
<head>
<style type=”text/css”>
input:focus
{
background-color:yellow;
}
</style>
</head>

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

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

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

<h1>Image Transparency</h1>
<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″ />

</body>
</html>

4, 改变html的表现形式：如input text 这个文本框让其只有下线，改变其边框颜色
<!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>”>
<html xmlns=”<a href=”http://www.w3.org/1999/xhtml”>http://www.w3.org/1999/xhtml</a>”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<style>
input {
border-color:red;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;}
</style>
</head>

5, 百度输入栏：高度为28px, 而google为21px, 而中文高度比英文字母要繁，高度要高，显然百度的输入栏更符合输入中文。
<input name=”" type=”text” autocomplete=”off”/>
input[type="text"]{font:16px Verdana;height:28px;padding-top:2px} //改变html元素显示形状
注：页面要去掉头部的<!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>”>

上一篇： 像素是个相对单位，而不是绝对的

下一篇： 颜色转换rgb到#

例子

相关内容

热门资讯