HTML与CSS简单页面效果实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML与CSS简单页面效果实例</title>
<style>
* {
margin: 0px;
padding: 0px;
} body {
background-color: snow;
} .wrapper {
width: 80%;
height: 1000px;
background-color: antiquewhite;
margin: 0px auto;
} .heading {
width: 100%;
height: 90px;
background-color: snow;
margin: 0px auto;
} .heading_title {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: burlywood;
} .heading_nav {
padding-top: 30px;
padding-bottom: 30px;
width: 100%;
height: 30px;
position: relative;
} ul {
margin-left: 40px;
float: left;
list-style-type: none;
padding-top: 6px;
padding-bottom: 6px;
} li {
padding-left: 10px;
display: inline;
} a:link, a:visited {
font-weight: bold;
color: darkgray;
text-align: center;
padding: 6px;
text-decoration: none;
} a:hover, a:active {
color: dimgray;
} .heading_img img {
border-radius: 30px;
display: inline;
width: 26px;
height: 26px;
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
float: right;
} .heading_soptlight form {
float: right;
width: 100px;
height: 26px;
position: relative;
margin-right: 80px;
} form input {
height: 26px;
border-radius: 30px;
} .body {
padding: 30px;
height: auto;
width: auto;
} .body_title h3 {
font-size: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #333333;
} .body_title p {
margin-top: 20px;
margin-bottom: 20px;
} .footing {
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
font-size: 10px;
color: darkgray;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="heading">
<div class="heading_nav">
<div class="heading_title">
HTML与CSS简单页面效果实例
</div>
<div class="heading_navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">职业课程</a></li>
<li><a href="#">技术问答</a></li>
<li><a href="#">VIP会员</a></li>
</ul>
</div>
<div class="heading_img">
<img src="Scripts/img/bg.jpg" />
</div>
<div class="heading_soptlight">
<form>
<input type="text" />
</form>
</div>
</div>
</div>
<div class="body">
<div class="body_title">
<h3>人生感悟</h3>
<p>有过痛苦，才知道众生的痛苦；有过执着，才能放下执着；有过牵挂，了无牵挂。</p>
</div>
<hr />
<hr />
</div>
</div>
<div class="footing">
@kikyo
</div>
</div>
</body>
</html>