您的位置：首页 > Web前端 > CSS

html 表单 css样式表

2015-12-02 08:34 609 查看

<body>
<center>
帐号：<input type="text" name="first"/>
<br>
密码：<input type="password" name="seconds">

<br>
备注：<textarea name="third" cols="50" rows="10" ></textarea>
<input type="hidden" value="345" id="er">
<br>
<input type="submit" value="注册"><input type="reset" value="重置"><input type="button" value="按钮"><br>
<form id="form1" name="form1" method="post" action="">
<input type="image" src="QQ截图20151130143444.png"/>
性别： 男<input type="radio" name="radio" id="radio" checked="checked" value="男" />

女<input type="radio" name="radio" id="radio2" value="女" />
<br>

</form>
<form id="form2" name="form2" method="post" action="">
<p>
<input type="checkbox" name="checkbox" id="checkbox" />汉堡
<label for="checkbox"></label>
</p><label></label>
<p>
<input type="checkbox" name="checkbox2" id="checkbox2" />可乐
<label for="checkbox2"></label>
</p>
</form>

<form id="form3" name="form3" method="post" action="">
<p>
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_0" />
男</label>
 
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1" />
女</label><br />
</p>
<input type="file"/><br>
<select name="down" size="1" />
<option>雪碧</option>
<option selected="selected">美年达</option>
<option>百事可乐</option>
<option>可口可乐</option>
</select>
</form>
</center>
</body>

@charset "utf-8";
/* CSS Document */
<style type="text/css">
*/*有些标签有默认的边距，一般写样式表的时候首先去除*/
{/*星号表示对所有的标签都起作用*/
margin:0px;
pading:0px;
}
p , div/*用逗号隔开表示对于这两类标签都起到相同的作用*/
{
font-size:40px;
color:#00F;/*若网页本身有自己的属性，遇到css样式表的时候有冲突，根据css样式表的执行*/
}
.main/*以点开头的样式，需要在引用的时候使用class*/
{
font-size:60px;
color:#FF0;
}
.main span/*以点开头，在使用了main这个样式表的标签里面去寻找span标签*/
{/*中间的空格表示后代*/
font-size:130px;
color:#0F0;
}
#main/*以#开头的样式，需要在引用的时候使用id*/
{
font-size:100px;
color:#F0F;}
body
{
background:url(未标题-1.jpg);
background-repeat:repeat-x;}

p.abc/*在所有p标签中，如果有引用此abc的p标签，那就执行下面的样式*/
{
font-size:36px;
color:#0FF;}
a:link
{
color:#000;
text-decoration:none;}
a:visited
{
color:#000;
}
a:hover
{
color:#F00;
text-decoration:underline;}

a:active
{
color:#F90;}
</style>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS样式表</title>

<link href="Untitled-3.css" rel="stylesheet" type="text/css" />
</head>

<body>
<a href="http://www.baidu,com/">百度一下你就知道</a>
<p class="main">今天天气很<span>不错</span></p>
<p id="main">今天挺冷的</p>
<p>好想下雪</p>
<div>现在学HTML静态网页部分</div>
<font>今天是2015年最后一个月的第一天</font>
<p class="abc">弹尽粮绝</p>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航