css html上課
<!DOCTYPE html>
<html>
<head>
<mata name="keywords" content="Java,JSP,jQuery" />
<meta charset="UTF-8">
<!-- html -->
<style type="text/css">
#p2{
color:blue;
border:solid;
border-color:yellow;
}
body{
background-color: red;
}
/*css*/
</style>
<link rel="stylesheet" type="text/css" href="css/login.css" />
<link rel="stylesheet" type="text/css" href="css/logintwo.css" />
<title>标题</title>
</head>
<body style="background-color: #F0F0F0;">
<!-- html -->
<div id="page" style=" margin:0 auto; width:400px; height:100px; " >
<div id="page_top" >
<img src="login_top.jpg" alt="login_top" width="400" height="2" ><br />
</div>
<div id="page_conter" >
<form action="login.jsp" method="get">
厂别:
<select name ="fact_no">
<option value="0236">0236(裕成制鞋廠)</option>
<option value="023A">023A(PY-S10鞋廠)</option>
<option value="B0F5">B0F5(裕泰鞋業有限公司)</option>
</select> <br/><br/>
帐号:<input type="text" name="username"><br/><br/>
密码:<input type="password" name="password"><br/><br/>
<input type="submit" name="登录" value="登录">
<input type="reset" name="清除" value="清除" ><br/>
</form>
</div>
<div id="page_bottom" >
<a href="http://servicedesk.yydg.com.cn" target="_blank">請求服務</a>
</div>
<div>
<p style="color:red;border:solid;border-color:yellow;">L这个伪类应用于处于激活状态的元素。
最常见的例子就是在 HTML 文档中点击一个超链接：在鼠标按钮按下期间，
这个链接是激活的。还有其他一些方式来激活元素，另外从理论上讲其他元素也可以被激活，不过 CSS 对此没有定义。
</p>
</div>
<div>
<p id="p2">
CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！
</p>
</div>
<div>
<p id="p3">
p3 test.
</p>
</div>
<div>
<p id="p4">
four test.
</p>
</div>
<div class="stwo">W3Schools' CSS reference is</div>
<div class="stwo">tested regularly </div>
<p class="stwo">with all major browsers</p>
<span>one</span> <br />
<span>two</span><br />
<span>three</span><br />
<span>four</span><br />
<div id="div11">
<p id="p11">selectors are patterns used to select </p>
<p id="p22">the element(s) you want to style.</p>
</div>
<div id="div33">
<p>demonstrate the different selectors.</p>
</div>
<h1>title one.</h1>
<h2>two.</h2>
<a href="http://servicedesk.yydg.com.cn/esp">esp服務</a>
<a href="http#">http</a>
<div id="divhh">
<h3 id="piddd" class="ppclass">test selectors.</h3>
</div>
<h4 id="piddd" class="ppclass">four test selectors.</h4>
</div>
</body>
</html>
/*login.css CSS code.*/
@CHARSET "UTF-8";
body{
background-color: orange;
}
/*1.標簽選擇器(元素選擇器)*/
span{
color:blue;
}
/*2.類(class)選擇器*/
.stwo{
color:#383838;
font-weight:bold;
}
/*3.id選擇器*/
#div11{
color:#600000;
}
#p3{
color:red;
border:solid;
border-color:yellow;
}
/*4.父子選擇器(關聯選擇器)*/
#div33 p{
border:solid;
border-color:yellow;
}
/*5.組合選擇器*/
h1,h2{
color:#CCFF66;
}
/*6.偽標簽、類選擇器*/
a:link{
color: #CCFF66;
}
a:visited {
color: #CC0033;
}
/*行內CSS > id > class > 標簽(父子先) */
/*#piddd{
color:blue;
}*/
/*.ppclass{
color:orange;
}
*/
div h3{
color:red;
}
h3{
color:green;
}
/*../css/logintwo.css code*/
@CHARSET "UTF-8";
#p4{
color:blue;
border:solid;
border-color:green;
}
#p3{
color:blue;
border:solid;
border-color:yellow;
}
<html>
<head>
<mata name="keywords" content="Java,JSP,jQuery" />
<meta charset="UTF-8">
<!-- html -->
<style type="text/css">
#p2{
color:blue;
border:solid;
border-color:yellow;
}
body{
background-color: red;
}
/*css*/
</style>
<link rel="stylesheet" type="text/css" href="css/login.css" />
<link rel="stylesheet" type="text/css" href="css/logintwo.css" />
<title>标题</title>
</head>
<body style="background-color: #F0F0F0;">
<!-- html -->
<div id="page" style=" margin:0 auto; width:400px; height:100px; " >
<div id="page_top" >
<img src="login_top.jpg" alt="login_top" width="400" height="2" ><br />
</div>
<div id="page_conter" >
<form action="login.jsp" method="get">
厂别:
<select name ="fact_no">
<option value="0236">0236(裕成制鞋廠)</option>
<option value="023A">023A(PY-S10鞋廠)</option>
<option value="B0F5">B0F5(裕泰鞋業有限公司)</option>
</select> <br/><br/>
帐号:<input type="text" name="username"><br/><br/>
密码:<input type="password" name="password"><br/><br/>
<input type="submit" name="登录" value="登录">
<input type="reset" name="清除" value="清除" ><br/>
</form>
</div>
<div id="page_bottom" >
<a href="http://servicedesk.yydg.com.cn" target="_blank">請求服務</a>
</div>
<div>
<p style="color:red;border:solid;border-color:yellow;">L这个伪类应用于处于激活状态的元素。
最常见的例子就是在 HTML 文档中点击一个超链接：在鼠标按钮按下期间，
这个链接是激活的。还有其他一些方式来激活元素，另外从理论上讲其他元素也可以被激活，不过 CSS 对此没有定义。
</p>
</div>
<div>
<p id="p2">
CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！
</p>
</div>
<div>
<p id="p3">
p3 test.
</p>
</div>
<div>
<p id="p4">
four test.
</p>
</div>
<div class="stwo">W3Schools' CSS reference is</div>
<div class="stwo">tested regularly </div>
<p class="stwo">with all major browsers</p>
<span>one</span> <br />
<span>two</span><br />
<span>three</span><br />
<span>four</span><br />
<div id="div11">
<p id="p11">selectors are patterns used to select </p>
<p id="p22">the element(s) you want to style.</p>
</div>
<div id="div33">
<p>demonstrate the different selectors.</p>
</div>
<h1>title one.</h1>
<h2>two.</h2>
<a href="http://servicedesk.yydg.com.cn/esp">esp服務</a>
<a href="http#">http</a>
<div id="divhh">
<h3 id="piddd" class="ppclass">test selectors.</h3>
</div>
<h4 id="piddd" class="ppclass">four test selectors.</h4>
</div>
</body>
</html>
/*login.css CSS code.*/
@CHARSET "UTF-8";
body{
background-color: orange;
}
/*1.標簽選擇器(元素選擇器)*/
span{
color:blue;
}
/*2.類(class)選擇器*/
.stwo{
color:#383838;
font-weight:bold;
}
/*3.id選擇器*/
#div11{
color:#600000;
}
#p3{
color:red;
border:solid;
border-color:yellow;
}
/*4.父子選擇器(關聯選擇器)*/
#div33 p{
border:solid;
border-color:yellow;
}
/*5.組合選擇器*/
h1,h2{
color:#CCFF66;
}
/*6.偽標簽、類選擇器*/
a:link{
color: #CCFF66;
}
a:visited {
color: #CC0033;
}
/*行內CSS > id > class > 標簽(父子先) */
/*#piddd{
color:blue;
}*/
/*.ppclass{
color:orange;
}
*/
div h3{
color:red;
}
h3{
color:green;
}
/*../css/logintwo.css code*/
@CHARSET "UTF-8";
#p4{
color:blue;
border:solid;
border-color:green;
}
#p3{
color:blue;
border:solid;
border-color:yellow;
}