サマリー：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS學習總結</title> <link rel="shortcut icon" type="ima
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS學習總結</title>
<link rel="shortcut icon" type="image/x-icon" href="../xuexi/static/images/08131844.jpg"/>
<link rel="stylesheet" type="text/css" href="../xuexi/static/css/css.css"/>
<style type="text/css">
/*CSS選擇器*/
*{ margin:0; padding:0;}
body{
text-align: center;
}
*#container{
width: 900px;
height: 500px;
margin: 0 auto;
background-color: bisque;
position:relative;
}
#top{
width: 860px;
height: 50px;
border: 1px solid rgb(228, 195, 7);
border-radius: 10px;
box-shadow: 0px 6px 60px rgb(7, 99, 116) inset;
position:absolute; top:15px; left:20px;
}
#nav{
position:absolute; top:10px; left:10px;
}
ul li{
background-color: rgb(239, 243, 17);
width: 120px;
height: 30px;
margin: 0px 5px;
line-height: 30px;
text-align: center;
float: left;
list-style: none;
border-radius: 10px;
}
a{
font-weight: bold;
color: red;
text-decoration: none;
}
a[href="http://ipnx.cn"]{
color: aqua;
}
a:hover{
font-size: 20px;
color:deeppink;
text-decoration:underline;
}
.main-left{
width: 350px;
height: 300px;
background-color:lightslategray;
position:absolute; top:70px; left:20px;
}
.userinfo {
padding:48px 100px 0 0px; /*設置用戶名位置*/
}
.input {
margin-left:5px; /*用戶名和密碼 從左往右移動5px*/
}
.main-right{
width: 500px;
height: 300px;
background-color:mediumseagreen;
position:absolute; top:70px; right:20px;
}
.main-right2{
width:400px;
margin: 10px 20px 0 40px;
}
h1{
color:mediumvioletred;
}
p{
text-indent: 2em;
}
.clear{clear:both;}
.foot{
border: 1px solid #ccc;
background-color: crimson;
width: 860px;
height: 60px;
border-radius: 10px;
/*box-shadow: 20px 16px 5px rgb(7, 99, 116) ;*/
position:absolute; left: 20px; bottom:60px;
}
.foot1{
list-style: none;
}
</style>
</head>
<body>
<div id="container" >
<div id="top">
<div id="nav">
<ul>
<li><a href="#">首頁</a> </li>
<li><a href="http://ipnx.cn">PHP中文網(wǎng)</a></li>
<li><a href="#">百度</a> </li>
<li><a href="#">網(wǎng)易</a> </li>
<li><a href="#">騰訊</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="main-left">
<div class="userinfo">
<form method="get/post" action="url地址">
用戶名 <input type="text" name="username" size="14" class="input" /><br/><br/>
密 碼 <input type="text" name="username" size="14"class="input" /><br/><br/>
密 碼 <input type="text" name="username" size="14"class="input" /><br/><br/>
<button>提交按鈕按鈕</button>
<input name="提交按鈕名稱" type="submit" value="提交"/>
<input type="reset" value="重置按鈕"/> <br/>
</form>
</div>
</div>
<div class="main-right">
<div class="main-right2">
<h1>國學鑒賞</h1>
<p>一般來說<em>“國學”</em>又稱“漢學”或“中國學”，泛指傳統(tǒng)的中華文化與學術。國學包括中國古代的哲學、史學、宗教學、
文學、禮俗學、考據(jù)學、倫理學以及中醫(yī)學、農學、術數(shù)、地理、政治、經(jīng)濟及書畫、音樂、建筑等諸多方面。
現(xiàn)“國學”概念產(chǎn)生于二十世紀二十年代，當時 “西學東漸”改良之風正值熾熱，張之洞、魏源等人為了與西學相對，
提出“中學”（中國之學）這一概念，并主張 “中學為體，西學為用”，一方面學習西方文明，同時又恢復兩漢經(jīng)學。
</p>
</div>
</div>
<div class="clear"></div>
<div class="foot">
<div class="foot1">
<ul>
<li ><a href="#">聯(lián)系我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
添削の先生：韋小寶添削時間：2019-01-20 17:54:00
先生のまとめ：寫的很不錯 前段就是要這樣多練習才可以更快的掌握