实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="static/css/style.css" />
<link rel="stylesheet" href="static/css/ui-ico.css" />
<title></title>
</head>
<body>
<!--顶部-->
<div class="header">
<div class="header-center">
<div class="header-left">
<a href="" class="logo"></a>
<ul>
<li> <a href=""><i class="ui-user ui-ico"></i>个人中心</a> </li>
<li> <a href=""><i class="ui-home ui-ico"></i>我的主页<i class="ui-drop-down-arrow"></i></a> </li>
<li> <a href=""><i class="ui-friend ui-ico"></i>好友<i class="ui-drop-down-arrow"></i></a> </li>
<li> <a href=""><i class="ui-game ui-ico"></i>游戏<i class="ui-drop-down-arrow"></i></a> </li>
<li> <a href=""><i class="ui-dress ui-ico"></i>装扮<i class="ui-drop-down-arrow"></i></a> </li>
</ul>
</div>
<div class="header-right">
<span style="width: 20px;"><a href=""> <i class="ui-ico-music-stop"></i></a></span>
<span style="width: 25px;"><a href=""> <i class="ui-ico-ph"></i></a></span>
<input type="text" name="search" id="search" value="" placeholder="用户/游戏/动态" />
<span><a href=""><i class="ui-ico-search"></i></a></span>
<a href="" class="header-right-userinfo"><img src="img/30.jpg" />安静、</a>
<a href="" class="a-back"><i class="ui-ico-out"></i></a>
<a href="" class="a-back"><i class="ui-ico-set"></i></a>
<a href="" class="a-back"><i class="ui-ico-diamond"></i></a>
</div>
</div>
</div>
<!--主体-->
<div class="main">
<!--主体头部-->
<div class="main-top">
<div class="main-center">
<!--主体头部里的顶部-->
<div class="top">
<div class="top-left">
<h2>安静、的QQ空间</h2>
</div>
<div class="top-right">
<a href=""><span><i class="ui-ico-thumb"></i>990</span></a>
</div>
</div>
<!--主体头部里的底部-->
<div class="foot">
<div class="foot-left">
<span class="user-head"> <img src="img/100.jpg" /> </span>
<div class="head-detail">
<span class="user-name">安静、</span>
<a href="" class="open-yellow"></a>
</div>
</div>
<div class="foot-right">
<div class="visit-star">
<i class="ui-ico-visit-star"></i>
<span class="visitor"> <p>今日访客<span class="visitor-num">12</span> 被挡访客<span class="visitor-num">36</span> </p> <p>访客总量<span class="visitor-num">2312</span> </p> </span>
</div>
</div>
<div class="nav-dh">
<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>
<li> <a href="">个人档</a> </li>
<li> <a href="">音乐</a> </li>
<li> <a href="">更多</a> </li>
</ul>
</div>
</div>
</div>
</div>
<div class="main-body"></div>
</div>
<div class="footer"></div>
</body>
</html>
点击 "运行实例" 按钮查看在线实例
实例
body{margin:0;padding:0;font-family:"微软雅黑"}
a{text-decoration:none;color:#fff}
/*头部*/
.header{width:100%;height:41px;background-color:#04b1cc;position: fixed;z-index: 999;}
.header-center{width:1060px;height:100%;line-height:100%;text-align:center;margin:auto}
/*头部左边*/
.header-left{float:left}
.header-left .logo{width:90px;height:40px;background:url(../../img/icenter.32-adg180416195621.png);background-position:-64px 0;float:left;overflow:hidden}
.header-left ul{float:left;margin:0;margin-left:10px;padding:0}
.header-left ul li{float:left;list-style:none;height:41px;padding:0 5px;overflow:hidden}
.header-left ul li:hover{background-color:#04c3e0}
.header-left ul li i{margin:5px;display:inline-block}
.header-left ul li a{color:#fff;font-size:12px;text-decoration:none}
/*头部右边*/
.header-right{float:right;width:400px;overflow:hidden}
.header-right #search{margin-left:15px;float:left;width:130px;height:18px;border-radius:3px;border:none;position:relative;background-color:rgba(255,255,255,.25);top:10px}
.header-right input::-webkit-input-placeholder{color:rgba(255,255,255,.8)}
.header-right .header-right-userinfo{float:left;height:41px;margin:0 10px;padding:0 5px;background-color:#04B1CC;font-size:14px;line-height:40px}
.header-right .header-right-userinfo:hover{background-color:#04c3e0}
.header-right .header-right-userinfo img{width:24px;height:24px;margin-right:10px;position:relative;top:8px}
.header-right .a-back{float: left;height: 41px;}
.header-right .a-back i{margin: 0 2px 0px 2px;}
.header-right .a-back:hover{background-color:#04c3e0;}
/*主体*/
.main{padding-top:40px;overflow:hidden}
.main-top{height: 300px;background-image: url(../../img/106904_top.jpg);background-repeat: no-repeat;}
.main-center{width: 1060px;height:100%;#background-color: beige;margin: auto;}
/*主体顶部*/
.main-top .main-center .top{width: 100%;height: 150px;#background-color: aquamarine;overflow: hidden;}
.main-top .main-center .top .top-left{float: left;}
.main-top .main-center .top .top-left h2{color: #157c8c;font-weight: 100;font-size: 28px;margin-top: 20px;}
.main-top .main-center .top .top-right{float: right;}
.main-top .main-center .top .top-right span{display:inline-block;height: 30px;background-color: rgba(0,0,0,.4);border-radius:18px;margin-top: 50px;margin-right:10px;padding: 3px 13px 3px 13px;line-height: 30px;color: #fff;}
/*主体底部*/
.main-top .main-center .foot{width: 100%;height: 150px;background-color:#sababab;overflow: hidden;}
/*主体底部左边*/
.main-top .main-center .foot .foot-left{float: left;}
.main-top .main-center .foot .foot-left .user-head{width: 126px;height: 126px;border: #aaa 1px solid;float: left;margin-top: 5px;}
.main-top .main-center .foot .foot-left .user-head img{width:95%;height:95%;padding: 3px;}
.main-top .main-center .foot .foot-left .head-detail{float: left;margin-top: 65px;margin-left: 20px;}
.main-top .main-center .foot .foot-left .head-detail .user-name{color: #04B1CC;font-size: 20px;float: left;}
.main-top .main-center .foot .foot-left .head-detail .open-yellow{background-image: url(../../img/icon-vip-open.png);background-size:100%;background-repeat:no-repeat;width: 90px;height: 22px;float: left;margin-top: 3px;}
/*主体底部右边*/
.main-top .main-center .foot .foot-right{float: right;}
.main-top .main-center .foot .foot-right .visit-star{float: left;width: 200px;height: 50px;margin-top: 50px;}
.main-top .main-center .foot .foot-right .visit-star p{margin: 5px;font-size: 12px;color: #fff;}
.main-top .main-center .foot .foot-right .visit-star .visitor-num{font-size: 14px;font-weight: bold;text-shadow: 1px 1px 1px rgba(0,0,0,.8);}
/*主体底部导航条*/
.main-top .main-center .foot .nav-dh{height: 30px;#background-color: blue;margin-top: 110px;}
.main-top .main-center .foot .nav-dh {}
.main-top .main-center .foot .nav-dh ul{line-height: 30px;position: relative;left: -130px;}
.main-top .main-center .foot .nav-dh ul li{list-style: none;float: left;margin-right: 30px;}
.main-top .main-center .foot .nav-dh ul li a{font-size: 14px;}
.main-top .main-center .foot .nav-dh ul li a:hover{text-decoration: underline;}
/*主体主要部分*/
.main-body{height: 1000px;background-color: aquamarine;}点击 "运行实例" 按钮查看在线实例
Correction status：qualified
Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
