CSS
布局与格式设置
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>用户注册页面</title>
<link href="css/mycss.css"rel="stylesheet" type="text/css" />
<style type="text/css">
/*标签选择器*/
input,select{
border-width:0px;
/*border-bottom-color:#F00;
border-bottom-width:3px;
border-bottom-style:dotted;*/
border-bottom:#F00 3px dotted;
background-color:#FCF;
}
/*类选择器*/
.myClass{
background-color:#6FF;
border-bottom-style:dashed;
}
tr.OddColor {color:red}
tr.EvenColor {color:blue}
/*ID选择器*/
#information{
background-image:url(images/xx.jpg);
background-repeat:no-repeat;
background-position:30px 30px;
background-attachment:scroll;
}
#myButton{
background-color:blue;
}
.myButtonClass{
background-color:red;
}`
</style>
</head>
<body>
<form method="post" action="http://www.baidu.com">
<table border="1">
<input type="reset" value="取消注册" id="myButton"class="myButtonClass" style="border-bottom:#F00;border-left-color:#36C;border-top-width:5px; border-top-color:#063; padding-top:5px; margin-left:30px;background-color:black;"/>——行选择
</table>
</form>
</body>
</html>
外部选择器
在站点建立一个.css文件,把格式放在文件中。
布局:
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.myMenu{——————设置myMenu类格式
list-style-type:none
}
.myMenuli{————————设置myMenu类中li格式
float:left;————————将li里面的内容向右排列
width:70px;
background:url(image.jpg)no-repeat 0 0;
margin:3px;——————所有外边距属性
padding-left:5px;————所有内边距属性
}
a{————————————设置<a>标签格式
text-decoration:none;
font-weight:bold;
}
a:hover{——————————当鼠标移动<a>标签
background:url(banner.jpg)no-repeat 0 0;
color:#F00;
}
.myMenu1{
list-style-type:none;
width:200px;
height:500px;
border:#C001px dashed;
padding-left:4px;
}
.myMenu1li{
float:left;
width:40px;
margin:3px;
padding-left:5px;
}
dl{
width:300px;
border:#C001px dashed;
float:left;
margin:5px;
}
dldt{
float:left;
}
dldd{
margin: 0px;
border:#C001px dashed;
}
</style>
</head>
<body>
<ul class="myMenu">
<li><ahref="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">咨询</a></li>
<li><a href="#">部门</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<divstyle="clear:both;"></div>
<ol class="myMenu1">
<li><ahref="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">部门</a></li>
<li><a href="#">我们</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">部门</a></li>
<li><a href="#">我们</a></li>
<li><a href="#">首页</a></li>
</ol>
<divstyle="clear:both;"></div>
<dl>
<dt>
<img src="image.jpg"width="100" height="80"/>
</dt>
<dd>
春华秋实您查询的关键词仅在网页标题或指向此网页的链接中出现。。
</dd>
</dl>
<dl>
<dt>
<img src="image.jpg"width="100" height="80"/>
</dt>
<dd>
春华秋实您查询的关键词仅在网页标题或指向此网页的链接中出现。。
</dd>
</dl>
</body>