摘要：<!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://www.php.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://www.php.cn">PHP中文网</a></li>
<li><a href="#">百度</a> </li>
<li><a href="#">网易</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>又称“汉学”或“中国学”，泛指传统的中华文化与学术。国学包括中国古代的哲学、史学、宗教学、
文学、礼俗学、考据学、伦理学以及中医学、农学、术数、地理、政治、经济及书画、音乐、建筑等诸多方面。
现“国学”概念产生于二十世纪二十年代，当时 “西学东渐”改良之风正值炽热，张之洞、魏源等人为了与西学相对，
提出“中学”（中国之学）这一概念，并主张 “中学为体，西学为用”，一方面学习西方文明，同时又恢复两汉经学。
</p>
</div>
</div>
<div class="clear"></div>
<div class="foot">
<div class="foot1">
<ul>
<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>
</ul>
</div>
</div>
</div>
</body>
</html>
批改老师：韦小宝批改时间：2019-01-20 17:54:00
老师总结：写的很不错 前段就是要这样多练习才可以更快的掌握
