一个登入效果简易图：（色彩搭配有点乱，嘻嘻，可以在代码处改成自己喜欢的颜色）
css样式的代码：
style.css:
@charset "utf-8";
/* CSS Document */
*{
margin:0px;
padding:0px;
}
body{
background-color:#FCC;
}
.wrapper{
80%;
height:2000px;
background-color:#FC9;
margin:0px auto;}
.heading{
margin:0px;
100%;
height:90px;
background-color: #FCC;
margin:0px auto;
}
.heading-nav{
padding-top:30px;
padding-bottom:30px;
height:30px;
100%;
position:relative;}
.heading-title{
float:left;
font-family:Verdana, Geneva, sans-serif;
font-size:30px;
color:#FF0;}
.heading-navbar ul{
margin-left:40px;
float:left;
list-style-type:none;
padding-top:6px;
padding-bottom:6px;
}
.heading-navbar li{
display:inline;
padding-left:10px;}
a:link,a:visited{
font-weight:bold;
color:#F69;
text-align:center;
padding:6px;
text-decoration:none;
}
a:hover,a:active{
color:#666;
}
.heading-img img{
border-radius:30px;
height:26px;
26px;
box-shadow:1px 1px 1px #f9c;
float:right;
}
.heading-soplight form{
float:right;
100px;
height:30px;
position:relative;
margin-right:70px;
}
.heading-soplight input{
height：26px;
border-radius:26px;
}
.footing{
font-family:Tahoma, Geneva, sans-serif;
padding-top:15px;
padding-bottom:10px;
text-align:center;
font-size:px;
color:#999;
}
.body-title h3{
padding-top:20px;
text-indent:2em;
font-size:30px;
color:#F69;
font-family:"Arial Black", Gadget, sans-serif;}
.body-title p{
color: #000;
margin-top:20px;
font-size:bold;
text-indent:3em;
padding-right:20px;
margin-bottom:20px;
}
hr{
margin-bottom:20px;}
.body-img{
margin:10px;
border:1px solid #999;
auto;
height:auto;
float:left;
text-align:center;
}
img{
margin:5px;}
html代码：
Untitled-2.html:
| <!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" /> | |
| <link rel="stylesheet" href="style.css" type="text/css" /> | |
| <title>我的世界</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="wrapper"> | |
| <div class="heading"> | |
| <div class="heading-nav"> | |
| <div class="heading-title">舍“进”求“媛”吧~</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="图片/img-03ee5763330b575e86fadef0269f5a5c.jpg"></div> | |
| <div class="heading-soplight"> | |
| <form> | |
| <input type="text"> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="body"> | |
| <div class="body-title"> | |
| <h3>生活缩影&&生活继续</h3> | |
| <p>你好吗？天气好吗？如果快乐太难的话，那祝你平安。</p> | |
| </div> | |
| <hr/> | |
| </div> | |
| <div class="body-img"> | |
| <a href="#" target="_self"> | |
| <img src="图片/img-49b3aec9745d8d7e725421ddb173207d.jpg" width="200px" height="200px"/> | |
| </a><br/><h6>嘟嘟熊</h6> | |
| </div> | |
| <div class="body-img"> | |
| <a href="#" target="_self"> | |
| <img src="图片/IMG_20160718_161944.jpg" width="200px" height="200px"/> | |
| </a><br/><h6>girl</h6> | |
| </div> | |
| <div class="body-img"> | |
| <a href="#" target="_self"> | |
| <img src="图片/img-48595e3aec3abfa7452a85f3b3fe2099.jpg" width="200px" height="200px"/> | |
| </a><br/><h6>小馒头</h6> | |
| </div> | |
| <div class="body-img"> | |
| <a href="#" target="_self"> | |
| <img src="图片/img-703fa08f5cbcc824355f275d07e1d2a6.jpg" width="200px" height="200px"/> | |
| </a><br/><h6>喵喵</h6> | |
| </div> | |
| <div class="body-img"> | |
| <a href="#" target="_self"> | |
| <img src="图片/img-1ee9bac848fc3631a520491c302ab672.jpg" width="200px" height="200px"/> | |
| </a><br/><h6>小新</h6> | |
| </div> | |
| <div class="body-img"> | |
| <a href="#" target="_self"> | |
| <img src="图片/img-0ce66d19d9883db7d699a5e8b5594446.jpg" width="200px" height="200px"/> | |
| </a><br/><h6>阳光</h6> | |
| </div> | |
| <div class="body-img"> | |
| <a href="#" target="_self"> | |
| <img src="图片/img-873f577e7e329dc7e9311bb045b2335b.jpg" width="200px" height="200px"/> | |
| </a><br/><h6>睡觉</h6> | |
| </div> | |
| <div class="body-img"> | |
| <a href="#" target="_self"> | |
| <img src="图片/img-34a1cb4f88131f8183deee76d69c85d6.jpg" width="200px" height="200px"/> | |
| </a><br/><h6>嘟嘟猫</h6> | |
| </div> | |
| <div class="body-img"> | |
| <a href="#" target="_self"> | |
| <img src="图片/img-c4556d1fcee91017979948ca91b5e01a.jpg" width="200px" height="200px"/> | |
| </a><br/><h6>龟龟</h6> | |
| </div> | |
| <div class="body-img"> | |
| <a href="#" target="_self"> | |
| <img src="图片/img-9ffa8ff9b1f3b3d409857d0914475933.jpg" width="200px" height="200px"/> | |
| </a><br/><h6>白雪公主</h6> | |
| </div> | |
| <div class="body-img"> | |
| <a href="#" target="_self"> | |
| <img src="图片/img-6548ebbe56a4dfbd724c1fc91f3e33c5.jpg" width="200px" height="200px"/> | |
| </a><br/><h6>秃秃树</h6> | |
| </div> | |
| <div class="body-img"> | |
| <a href="#" target="_self"> | |
| <img src="图片/img-89ea89c2f255b8a885058c1bd3053369.jpg" width="200px" height="200px"/> | |
| </a><br/><h6>风</h6> | |
| </div> | |
| </div> | |
| <div class="footing">@颜double媛</div> | |
| </div> | |
| </body> | |
| </html> | |