实例
<!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;}运行实例 »
点击 "运行实例" 按钮查看在线实例
