前端作业之仿QQ空间个人中心效果图
![J-y_劔影_Mr.zhiweiHong的QQ空间 [http___weihu.qzone.qq.com].png](https://img.php.cn//upload/image/656/202/699/1526816105196954.png "1526816105196954.png")
前端作业之仿QQ空间个人中心users.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>J-y_劔影_Mr.zhiweiHong的QQ空间 [http://weihu.qzone.qq.com]</title> <meta name="keywords" content="QQ空间,黄钻,免费装扮,开心农场,QQ农场,QQ牧场" /> <link rel="icon" href="inc/images/favicon.ico" type="image/x-icon" /><!-- 添加标题图标 --> <!-- 导入公共模式表 --> <link rel="stylesheet" href="inc/css/common.css"> <!-- 导入首页样式表 --> <link rel="stylesheet" href="inc/css/users.css"> <link rel="stylesheet" type="text/css" href="inc/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="inc/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="inc/layui/css/layui.css"> </head> <body class="bg-body"> <!-- 头部 --> <div class="header"> <a href="" class="sign"></a> <div class="container"> <div class="hefl"> <a class="logo" href=""></a> <ul class="menu"> <li><a href=""><i class="layui-icon layui-icon-username"></i>个人中心</a></li> <li><a href=""><i class="layui-icon layui-icon-home"></i>我的主页<span class="layui-icon layui-icon-triangle-d"></span></a></li> <li><a href=""><i class="layui-icon layui-icon-user"></i>好友<span class="layui-icon layui-icon-triangle-d"></span></a></li> <li><a href=""><i class="layui-icon layui-icon-app"></i>游戏<span class="layui-icon layui-icon-triangle-d"></span></a></li> <li><a href=""><i class="layui-icon layui-icon-theme"></i>装扮<span class="layui-icon layui-icon-triangle-d"></span></a></li> </ul> </div> <div class="hefr"> <div class="user-info"> <a href="" class="user-img"><img src="inc/images/30.jpg"><span>J-y_劔影_Mr.zhiweiHong</span></a> <a href=""><i class="fa fa-sign-out"></i></a> <a href=""><i class="fa fa-cog"></i></a> <a href=""><img src="inc/images/qzone-vip.gif"></i></a> </div> <div class="susobox"> <input type="text" name="susobox" placeholder="用户/游戏/动态"> <a href="" class="suso"><i class="fa fa-search"></i></a> </div> <div class="music"> <a href="" class="play"><i class="fa fa-pause"></i></a> <a href=""><img src="inc/images/music-sonic.gif"></a> </div> </div> </div> </div> <div class="main"> <div class="container"> <div class="top"> <div class="warps"> <div class="mtfl"> <div class="titl"> <h1>J-y_劔影_Mr.zhiweiHong的QQ空间</h1> <a href="" title="当前空间等级：91级；积分：71826"><span class="no"> <b class="d9"></b> <b class="d1"></b> </span></a> <a href=""><span class="op"></span></a> </div> <div class="user"> <a href=""><img src="inc/images/100.jpg"></a> <div class="lv"> <h3>J-y_劔影_Mr.zhiweiHong的QQ空间</h3> <a href="" class="qz-vip"></a> <a href="" class="qz-cz">成长值65616 成长速度35点/天</a> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 10%;"> <i class="count"> 10% </i> </div> </div> <div class="user-vip"> <a href="" class="cz" title="续费年费"></a> <a href="" class="hz" title="了解黄钻特权"></a> <a href="" class="ql" title="情侣黄钻"></a> </div> <div class="mime"> <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> </ul> </div> </div> </div> <div class="mtfr"> <div class="zuan"> <a href=""><i class="guan"></i>特别关心</a> <a href=""><i class="zan"></i>赞（99）</a> </div> <div class="weather"> <div style="float: right;font-size: 18px;"> <span>肇庆</span> <br> <span style="font-size: 12px;">5月18日</span> </div> <span class="unit">°</span> <span class="qiwen">37</span> <div class="weather-icon"></div> </div> <div class="visitor"> <div class="vis"> <p>今日访客<span>10</span></p> <p>访客总量<span> 32152</span></p> </div> <div class="visico"></div> </div> </div> </div> </div> <div class="base"> <div class="col-md-2" style="padding: 0px;"> <div class="bafl"> <div class="qz-nav"> <ul> <li class="col-md-4"><a href=""><span class="num">8037</span><span>照片</span></a></li> <li class="col-md-4"><a href=""><span class="num">1141</span><span>说说</span></a></li> <li class="col-md-4"><a href=""><span class="num">649</span><span>日志</span></a></li> </ul> </div> <div class="qz-mav"> <ul class="list-group"> <li class="list-group-item active"><a href=""><i class="layui-icon layui-icon-user"></i>好友动态</a></li> <li class="list-group-item"><a href=""><i class="fa fa-heart-o"></i>特别关心</a></li> <li class="list-group-item"><a href=""><i class="">@</i>与我相关</a></li> <li class="list-group-item"><a href=""><i class="fa fa-play-circle-o"></i>空间达人<span class="sn-radio"></span></a></li> <li class="list-group-item"><a href=""><i class="fa fa-calendar"></i>那年今日</a></li> <li class="list-group-item"><a href=""><i class="fa fa-graduation-cap"></i>腾讯课堂</a></li> <li class="list-group-item"><a href=""><i class="layui-icon layui-icon-app"></i>游戏应用</a></li> <li class="list-group-item"><a href=""><i class="layui-icon layui-icon-rate"></i>我的收藏</a></li> </ul> </div> <div class="qz-profile"> <ul class="list-group"><!-- 列表组容器 --> <li class="list-group-item active"><a href=""><strong>个人档</strong></a></li> <li class="list-group-item"><i class="fa fa-vcard-o"></i>J-y_劔影_Mr.zhiweiHong</li> <li class="list-group-item"><i class="fa fa-mars"></i>绅士</li> <li class="list-group-item"><i class="fa fa-wpforms"></i>31岁 天蝎座 男</li> <li class="list-group-item"><i class="fa fa-shopping-bag"></i>WH86网娱科技公司</li> <li class="list-group-item"><i class="fa fa-graduation-cap"></i>来自 广东肇庆</li> <li class="list-group-item"><a href="" style="color: #cc8f14;">查看详细资料</a></li> </ul> </div> <div class="qz-message"> <ul class="list-group"> <li class="list-group-item active"><a href=""><strong>留言板</strong></a></li> <li class="list-group-item"> <textarea class="form" placeholder="我也留个言吧"></textarea> <div class="mesg"> <a href=""><i class="fa fa-smile-o"></i></a> <div class="mefr"> <label><input type="checkbox" name="">私密留言</label><i class="diamond"></i> <button>发表</button> </div> <div style="clear:both;"></div> </div> </li> <li class="list-group-item msg-list"> <span class="name">小堂妹</span>： <span>为什么你老是消失在我的'Q里?</span> <p>2015-10-18 20:02</p> </li> <li class="list-group-item msg-list"> <span class="name">张婶</span>： <span>谢谢！不过还没到是农历6、23</span> <p>2013-06-23 06:20</p> </li> <li class="list-group-item msg-list"> <span class="name">缘总</span>： <span>同学好:来你的小家瞧瞧啦.</span> <p>2012-03-08 16:07</p> </li> <li class="list-group-item"><a href="" style="color: #cc8f14;">查看更多留言</a></li> </ul> </div> </div> </div> <div class="col-md-7"> <div class="bace"> <div class="soso"> <textarea class="col-md-10" form="soso" placeholder="说点儿什么吧"></textarea> <div class="plug"> <span class="col-md-1 first"><a href=""><i class="pic"></i></a></span> <span class="col-md-1"><a href=""><i class="other"></i></a></span> </div> </div> <div class="dynamic"> <div class="dyall"> <a href=""><b>全部动态</b><i class="layui-icon layui-icon-down" style="font-size: 10px;"></i></a> <span><a href=""><i class="sx"></i></a></span> <span><a href=""><i class="ds"></i></a></span> </div> <div class="dycon"> <div class="usname"> <a href=""><img src="inc/images/100.jpg"></a> <p><a href="" class="name">J-y_劔影_Mr.zhiweiHong</a><a href=""><span class="usname-qz-vip"></span></a></p> <p class="date">5月11日 23:18</p> <div class="usdown"><a href="" style="text-decoration: none;"><i class="layui-icon layui-icon-down"></i></a></div> </div> <div class="pltext"> <div class="ptext"><p>无聊得一B！搞笑一下！！</p></div> <div class="imgwarp"> <a href=""><img src="inc/images/day1.jpg"></a> <a href=""><img src="inc/images/day2.jpg"></a> </div> <div class="musicwarp"> <div class="imgbox"> <a href=""><img src="inc/images/music.jpg"><i class="music-play"></i></a> </div> <div class="textbox"> <p style="font-size: 16px;"><a href="">还有我</a></p> <p>歌手：孙露</p> <p>所属专辑：《试音孙露 DSD》</p> </div> <div class="dowbut"><a href="">下载</a></div> </div> <span><i class="opbs"></i>来自<a href="">xiaomi mi 5s plus(金色)</a></span> </div> <div class="dyplug"> <p><a href="">浏览41次</a></p> <span><a href=""><i class="dz"></i></a></span> <span><a href=""><i class="pl"></i></a></span> <span><a href=""><i class="zf"></i></a></span> </div> <div class="dylink"> <div><a href=""><i class="linkico"></i></a></div> <div class="linkuser"> <a href="">旅途，颠沛流离</a>、 <a href="">特别 <img src="inc/images/ico1.gif"></a>、 <a href="">骑着二师兄去旅行</a>、 <a href="">温水。</a>、 <a href="">早 <img src="inc/images/ico2.gif"></a>、 <a href="">I'm just myself</a>、 <a href="">星:-*永恒<img src="inc/images/ico3.gif"></a>、 <a href="">男神不吃辣条</a>、 <a href="">伴。<img src="inc/images/ico5.gif" alt=""></a>、 <a href="">F.F.M.F<img src="inc/images/ico4.gif"></a>、 <a href="">◆◇_____猜不透</a>、 <span style="color: #cc8f14">共<b>28</b>人觉得很赞</span> </div> </div> <div class="dyplq"> <div><a href="" style="color: #e6b85c;">展开剩余18条评论↓</a></div> <div class="dypl"> <ul> <li> <div class="namepic"><a href=""><img src="inc/images/ico6.png"></a></div> <a href="">Bεи </a>：心中带涡轮，开啥都是T <div class="dahf"><span>5月18日 10：20</span></div> <div class="mysub"> <ul> <li> <div class="namepic"><a href=""><img src="inc/images/50.jpg"></a></div> <a href="">J-y_劔影_Mr.zhiweiHong </a><span> 回复</span><a href=""> Bεи </a>：路虎在向你招手~~ <div class="dahf"><span>5月18日 10：20</span></div> </li> </ul> </div> </li> <li> <div class="namepic"><a href=""><img src="inc/images/ico7.gif"></a></div> <a href="">. 山太<img src="inc/images/e328028.gif"> </a>：只要左右手还在，走哪都不会孤单<img src="inc/images/e151.png" alt="哈哈"><img src="inc/images/e151.png" alt="哈哈"> <div class="dahf"><span>5月18日 10：20</span></div> <div class="mysub"> <ul> <li> <div class="namepic"><a href=""><img src="inc/images/50.jpg"></a></div> <a href="">J-y_劔影_Mr.zhiweiHong </a> 回复<a href=""> . 山太<img src="inc/images/e328028.gif"></a>：果然是老司机 <div class="dahf"><span>5月18日 10：20</span></div> </li> </ul> </div> </li> <li> <div class="namepic"><a href=""><img src="inc/images/ico8.jpg"></a></div> <div class="msgs"><a href="">卖网吧加速器-9527 </a>： 只要眼里有钱，看啥都是rmb <div class="dahf"><span>5月18日 10：20</span></div> </div> <div class="mysub"> <ul> <li> <div class="namepic"><a href=""><img src="inc/images/50.jpg"></a></div> <a href="">J-y_劔影_Mr.zhiweiHong </a><span> 回复</span><a href=""> 卖网吧加速器-9527</a>：争取做个富一代!! <div class="dahf"><span>5月18日 10：20</span></div> </li> </ul> </div> </li> </ul> </div> </div> <div class="comment"> <textarea class="form" placeholder="评论"></textarea> <span><a href=""><i class="xjzp"></i></a></span> </div> </div> </div> <div class="dymore"> <a href="" style="text-decoration: none;">加载更多动态显示</a> </div> </div> </div> <div class="col-md-3" style="padding: 0px;"> <div class="bafr"> <div class="qz-sign"> <ul> <li class="col-md-4"><a href=""><span class="si">02.18</span><span class="num">签到</span></a></li> <li class="col-md-8"><a href=""><span class="si">本月签到次数</span><span class="num">20次</span></a></li> </ul> </div> <div class="qz-caller"> <div class="catile"> <p> <a href="" class="title" style="text-decoration: none;"><b>谁看过我</b></a> <b class="line">|</b> <a href="" class="linek">我看过谁</a> <b class="line">|</b> <a href="" class="linek">被挡访客</a> </p> </div> <div class="caimg"> <ul> <li> <a href=""><img src="inc/images/1.jpg" alt="访客头像"></a> <div class="user-name-bg"> <span class="user-name">苏嘉嘉</span><a href="" title="QQ空间独立版"></a> </div> <span class="date">4月27日</span> </li> <li> <a href=""><img src="inc/images/2.jpg" alt="访客头像"></a> <div class="user-name-bg"> <span class="user-name">小华</span><a href="" title="QQ空间独立版"></a> </div> <span class="date">4月26日</span> </li> <li> <a href=""><img src="inc/images/3.jpg" alt="访客头像"></a> <div class="user-name-bg"> <span class="user-name">培众小辉</span><a href="" title="QQ空间独立版"></a> </div> <span class="date">4月20日</span> </li> <li> <a href=""><img src="inc/images/4.jpg" alt="访客头像"></a> <div class="user-name-bg"> <span class="user-name">老豆</span><a href="" title="QQ空间独立版"></a> </div> <span class="date">4月12日</span> </li> <li> <a href=""><img src="inc/images/5.jpg" alt="访客头像"></a> <div class="user-name-bg"> <span class="user-name">杨姐</span><a href="" title="QQ空间独立版"></a> </div> <span class="date">4月9日</span> </li> <li> <a href=""><img src="inc/images/6.jpg" alt="访客头像"></a> <div class="user-name-bg"> <span class="user-name">三叔</span><a href="" title="QQ空间独立版"></a> </div> <span class="date">4月7日</span> </li> <li> <a href=""><img src="inc/images/7.jpg" alt="访客头像"></a> <div class="user-name-bg"> <span class="user-name">同学小武</span><a href="" title="QQ空间独立版"></a> </div> <span class="date">4月6日</span> </li> <li> <a href=""><img src="inc/images/8.jpg" alt="访客头像"></a> <div class="user-name-bg"> <span class="user-name">缘总</span><a href="" title="QQ空间独立版"></a> </div> <span class="date">4月6日</span> </li> <li> <a href=""><img src="inc/images/9.jpg" alt="访客头像"></a> <div class="user-name-bg"> <span class="user-name">亚子</span><a href="" title="QQ空间独立版"></a> </div> <span class="date">4月6日</span> </li> </ul> </div> <div class="capage"> <a href="" class="prev unclick" title="上一页"><i class="glyphicon glyphicon-chevron-left"></i></a> <a href="" class="next" title="下一页"><i class="glyphicon glyphicon-chevron-right"></i></a> <a href="" class="more" title="更多"><i class="glyphicon glyphicon-option-horizontal"></i></a> </div> <div class="cainfo"> <ul> <li class="col-md-4">今日浏览<a href=""><span>10</span></a></li> <li class="col-md-4">总浏览<a href=""><span>32152</span></a></li> <li class="col-md-4">被挡访客<a href=""><span>33</span></a></li> </ul> <p>待审核评论<a href=""><i>7</i></a></p> </div> </div> <div class="qz-gift"> <div class="giti"><a href="" class="title" style="text-decoration: none;"><b>礼物</b></a></div> <div class="gile"> <ul> <li> <a href=""><img src="inc/images/10.jpg" alt="访客头像"></a> <div class="gius"> <p><a href="">洪标</a></p> <p>明天生日</p> </div> <div class="gibgr"> <i class="bgico"></i> <b>生日快乐</b> </div> </li> <li> <a href=""><img src="inc/images/11.jpg" alt="访客头像"></a> <div class="gius"> <p><a href="">王勇</a></p> <p>明天生日</p> </div> <div class="gibgr"> <i class="bgico"></i> <b>生日快乐</b> </div> </li> <li> <a href=""><img src="inc/images/12.jpg" alt="访客头像"></a> <div class="gius"> <p><a href="">乐讯客服</a></p> <p>明天生日</p> </div> <div class="gibgr"> <i class="bgico"></i> <b>生日快乐</b> </div> </li> </ul> </div> <div class="gipage"> <a href="" class="prev" title="上一页"><i class="glyphicon glyphicon-chevron-left"></i></a> <a href="" class="next" title="下一页"><i class="glyphicon glyphicon-chevron-right"></i></a> <a href="" class="more" title="更多"><span>给更多好友送礼</span></a> </div> </div> <div class="qz-care"> <div class="retile"> <p> <a href="" class="title" style="text-decoration: none"><b>谁在意我</b></a> <b class="line">|</b> <a href="" class="linek">我在意谁</a> </p> </div> <div class="gile"> <ul> <li> <a href=""><img src="inc/images/1.jpg" alt="访客头像"></a> <div class="gius"> <p><a href="">老婆</a></p> <i class="xin"></i><span><a href="">99</a></span> </div> <div class="gibgr"> <b>祥情</b> </div> </li> <li> <a href=""><img src="inc/images/14.jpg" alt="访客头像"></a> <div class="gius"> <p><a href="">姐姐</a></p> <i class="xin"></i><span><a href="">88</a></span> </div> <div class="gibgr"> <b>祥情</b> </div> </li> <li> <a href=""><img src="inc/images/4.jpg" alt="访客头像"></a> <div class="gius"> <p><a href="">老豆</a></p> <i class="xin"></i><span><a href="">58</a></span> </div> <div class="gibgr"> <b>祥情</b> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="container"> <div class="link"> <a href="" class="app">空间手机版</a><span> | </span> <a href=""> 黄钻贵族</a><span> | </span> <a href="">官方Qzone</a><span> | </span> <a href="">QQ互联</a><span> | </span> <a href="">认证服务</a><span> | </span> <a href="">腾讯博客</a><span> | </span> <a href="">腾讯客服</a><span> | </span> <a href="">QQ空间服务协议</a><span> | </span> <a href="">Complaint Guidelines</a><span> | </span> <a href="">粤网文[2017]6138-1456号</a> <p>Copyright © 2005 - 2018 Tencent.<a href="">All Rights Reserved.</a></p> <p>腾讯公司 <a href="">版权所有</a></p> </div> </div> <!-- 回到顶部 --> <div class="tops"><a href="#top" mce_href="#top"><b>︿</b></a></div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
前端作业之仿QQ空间个人中心公共样式表 common.css
实例
/*整体*/
body {margin: 0;padding: 0;}
.bg-body {background: #F8DB4F;}
/*头部*/
.header {width: 100%; height: 40px;background: #D18B00;line-height: 40px;color:#fff;position:fixed;}/*position:fixed固定导航条不滚动*/
.header .sign {margin-top:15px;margin-right: 10px;background-image: url(../images/icenter-common-adg.png);background-position: -565px 0px;float: right;width: 20px;height: 10px;}
.header a {color:#fff;text-decoration: none;font-size: 0.9em;}
.header a:hover{text-decoration: none;color: #fff}
/*头部左侧*/
.header .hefl {width: 620px;float: left;}
.header .hefl .menu li {height: 40px;list-style-type: none;float: left;padding:0 6px;}
.header .hefl .menu li:hover {background:#E09600;}
.header .hefl li i {width: 20px;height: 16px;margin: 0 5px;font-size: 18px;}
.header .hefl li span {font-size: 10px;}
.header .hefl .logo {background-image: url(../images/icohome.png);background-position: 0px 0px;float: left;width: 90px;height: 40px;}
/*头部右侧*/
.header .hefr .susobox,.user-info a {margin-left: 10px;}
.header .hefr .susobox{color: #bababa;float: right;margin-right: 10px;}
.header .hefr .susobox input{width: 135px;height: 24px;font-size: 12px;padding:5px;border:none;border-radius: 4px;background-color: rgba(255,255,255,.25);color: #ffffff;}
.header .hefr .susobox input::-webkit-input-placeholder {color: #eeeeee;}
.header .hefr .susobox .suso{position: absolute;top: 0px;margin-left: 148px;}
.header .hefr .susobox .suso i{font-size: 14px;margin-left: -30px;}
.header .hefr .user-info{float: right;}
.header .hefr .user-info img{width: 24px;height: 24px;}
.header .hefr .user-info .user-img {float: left;width: 100px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.header .hefr .music {float: right;}
.header .hefr .music .play{background: #E09600;padding:3px 5px;}
.header .hefr .music img {background: #E09600;padding:5px;}
/*底部*/
.footer {clear: both;padding-bottom: 20px;}
.footer .link {text-align: center;}
.footer .link .app {color: #cc8f14;}
.footer .link a {color: #403e39;margin: 10px 3px;}
.footer .link a:hover{color: #403e39}
.footer p {margin-top: 5px;}
/*回到顶部*/
.tops {position: fixed;right: 20px; bottom: 20px;}
.tops a{text-decoration: none;float: right;background: #FAF7E6;width: 30px;height: 30px;text-align: center;}
.tops a:hover{text-decoration: none;}运行实例 »
点击 "运行实例" 按钮查看在线实例
前端作业之仿QQ空间个人中心页面样式表 users.css
实例
/*主体*/
.main {background-image: url(../images/poster.jpg);background-repeat: no-repeat;background-attachment: fixed;background-position: 50% 20%;width: 100%;}
.main .warps {width: 100%;height: auto;color: #cc8f14;}
/*主体上部*/
.main .top{width: 100%;height: 290px;}
.main .top .warps .titl {padding-top: 65px;}
.main .top .warps .mtfl h1 {height: 38px;line-height: 38px;font-size: 28px;display: inline-block;vertical-align: middle;}
.main .top .warps .mtfl .no {background-image: url(../images/qz_qzone_lv.png);background-position: -52px 0px;width: 20px;height: 18px;position: absolute;top:75px; left: 660px;}
.main .top .warps .mtfl .d9 {background-image: url(../images/qz_qzone_lv.png);background-position: -270px 0px;width: 10px;height: 10px;position: absolute;top:10px; left: 10px;}
.main .top .warps .mtfl .d1 {background-image: url(../images/qz_qzone_lv.png);background-position: -125px 0px;width: 10px;height: 10px;position: absolute;top:10px; left: 16px;}
.main .top .warps .mtfl .op {background-image: url(../images/icenter.32.png);background-position: -376px -30px;width: 38px;height: 28px;position: absolute;top:70px; left: 690px;}
/*主体上部左侧*/
.main .top .mtfl {float: left;width: 880px;height: 150px;}
.main .top .mtfl .user {padding-top: 30px;}
.main .top .mtfl .user img {width: 126px;height: 126px;border-radius: 2px;border: #FFF 3px solid;}
.main .top .mtfl .user .lv {position: relative;top:-120px; left: 150px;}
.main .top .mtfl .user h3 {width: 150px;font-size: 20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-bottom: 10px;} /*隐藏过长文本*/
.main .qz-vip {background-image: url(../images/qz_ye_vip.png);float: left;background-position: -288px 0;width: 80px;height: 50px;}
.main .top .mtfl .user .qz-cz {color: #cc8f14;position: absolute;top: 45px;left: 95px}
.main .top .mtfl .user a{text-decoration: none;font-size: 0.8em;}
.main .top .mtfl .user .progress {height: 10px;margin-bottom: 0px;width: 168px;position: absolute;margin-top: -85px;margin-left: 245px;}
.main .top .mtfl .user .progress .count {display: inline-block;margin: 0 3px 0 5px;font-size: 9px;color: #b85700; font-family: arial;text-shadow: 1px 1px 1px #fff6b0;height: 10px;line-height: 10px;vertical-align: top;}
.main .top .mtfl .user .user-vip .cz {background-image: url(../images/icon-vip-fee-year.png);float: left;width: 82px;height: 26px;position: relative;top:-103px; left: 340px;}
.main .top .mtfl .user .user-vip .hz {background-image: url(../images/icenter-delay.png);float: left;background-position: -290px -123px;width: 22px;height: 22px;position: relative;top:-102px; left: 355px;}
.main .top .mtfl .user .user-vip .ql {background-image: url(../images/icenter.32.png);float: left;background-position: -353px -35px;width: 23px;height: 23px;position: relative;top:-100px; left: 362px;}
.main .top .mtfl .user .mime{float: left;width: 80%;position: relative;top:-55px; left: 18px;}
.main .top .mtfl .user .mime ul li{list-style: none;display:inline;margin: 10px;}
.main .top .mtfl .user .mime ul li a{color: #0000ff;font-size: 1.2em;}
/*主体上部右侧*/
.main .top .mtfr {float: right;width: 220px;height: 32px;position: absolute;top:96px; right: 186px;}
.main .top .mtfr .zuan a { color: #fff;font-size: 0.9em; background-color: rgba(0,0,0,.4);border-radius: 18px;padding:10px;padding-left: 30px;}
.main .top .mtfr .zan {background-image: url(../images/icenter.32.png);background-position: -630px 0px;width: 20px;height: 20px; margin-right: 5px;position: absolute;right: 95px;}
.main .top .mtfr .guan { background-image: url(../images/icenter.32.png);background-position: -460px -22px;width: 20px;height: 20px; margin-right: 5px;position: absolute;right: 190px;}
.main .top .mtfr .weather {color: #0000ff;padding-top: 25px;padding-right: 55px;}
.main .top .mtfr .weather .qiwen{float: right;font-size: 40px;height: 56px;font-weight: normal;}
.main .top .mtfr .weather img{float: right;width: 56px;height: 56px;}
.main .top .mtfr .weather span{float: right;}
.main .top .mtfr .weather .weather-icon {background-image: url(../images/icenter-common-adg.png);background-position: -181px -60px;width: 55px;height: 55px;position: absolute;top:35px;right: 140px;}
.main .top .mtfr .visitor {color: #0000ff;font-size: 12px;width: 148px;height: 45px;padding-top: 65px;position: absolute;right: -10px;}
.main .top .mtfr .visitor .visico {background-image: url(../images/icon-star-0.png);width: 40px;height: 54px;position: absolute;top:50px;right: 160px;}
/*主体下部左侧*/
.main .base .bafl .qz-nav{float: left;width: 100%;background:rgb(255,252,244);border:solid 1px rgb(235, 227, 188);padding: 10px 0px;}
.main .base .bafl .qz-nav a{color: #403e39;}
.main .base .bafl .qz-nav .num{font-size: 20px;font-family: "Segoe UI";display: block;}
.main .base .bafl .qz-nav span{font-size: 14px;}
.main .base .bafl .qz-nav ul{list-style: none;padding: 0px;}
.main .base .bafl .qz-nav ul li{display:inline;float: left;border-left: solid 1px rgb(235, 227, 188);text-align: center;}
/*个人中心菜单*/
.main .base .bafl .qz-mav{float: left;width: 100%;margin-top: 10px;}
.main .base .bafl .qz-mav .list-group-item{background: rgb(255,252,244);border-color: #ede8d1;}
.main .base .bafl .qz-mav .active{background: rgba(250,247,230,1);color: #403e39;border-color:#f5efd5;}
.main .base .bafl .qz-mav .active:hover{background: rgba(250,247,230,1);color: #403e39;border-color:#f5efd5;}
.main .base .bafl .qz-mav .list-group-item i{margin-right: 10px;color: gray;}
.main .base .bafl .qz-mav .sn-radio {float: right;display: inline-block;padding: 0;background-color: #d8615d;border-radius: 7px;width: 7px;height: 7px;}
.main .base .bafl .qz-mav a{text-decoration: none;}
.main .base .bafl .qz-mav li:hover{background-color:#f5efd5;}
/*个人档*/
.main .base .bafl .qz-profile{float: left;}
.main .base .bafl .qz-profile .list-group-item{background: rgb(255,252,244);border-color: #ede8d1;}
.main .base .bafl .qz-profile .active{background: rgba(250,247,230,1);color: #403e39;border-color:#f5efd5;}
.main .base .bafl .qz-profile .active:hover{background: rgba(250,247,230,1);color: #403e39;border-color:#f5efd5;}
.main .base .bafl .qz-profile .list-group-item i{margin-right: 10px;color: gray;}
/*留言板*/
.main .base .bafl .qz-message{float: left;}
.main .base .bafl .qz-message .list-group-item{background: rgb(255,252,244);border-color: #ede8d1;}
.main .base .bafl .qz-message .active{background: rgba(250,247,230,1);color: #403e39;border-color:#ede8d1;}
.main .base .bafl .qz-message .active:hover{background: rgba(250,247,230,1);color: #403e39;border-color:#ede8d1;}
.main .base .bafl .qz-message textarea{width: 100%;height: 56px;resize: none;overflow-x: hidden;word-break: break-all;border:1px solid rgb(235, 227, 188);padding: 6px;}/*无法拉伸输入框尺寸，裁剪水平溢出文本，单词内换行*/
.main .base .bafl .qz-message .mesg{margin-top: 5px;}
.main .base .bafl .qz-message .mesg a{float: left;color: gray;font-size: 20px;}
.main .base .bafl .qz-message .mesg .mefr{float: right;}
.main .base .bafl .qz-message .mesg .mefr label{font-weight: normal;padding-right: 20px;}
.main .base .bafl .qz-message .mesg .mefr .diamond{background-image: url(../images/icenter-delay.png);background-position: -727px 0px;width: 15px;height: 15px;position: absolute;top:78px;right: 65px;}
.main .base .bafl .qz-message .mesg .mefr button{background: #e6b85c;border:solid 1px #d6a647;border-radius: 2px;color: #ffffff;padding: 2px 8px;}
/*留言信息*/
.main .base .bafl .qz-message .msg-list span{font-size: 12px;}
.main .base .bafl .qz-message .msg-list .name{color: #cc8f14;}
.main .base .bafl .qz-message .msg-list p{margin-top: 10px;color: gray;}
/*主体下部中间--发表说说*/
.main .base .bace .soso {height: 68px;}
.main .base .bace .soso textarea{height: 100%;resize: none;overflow-x: hidden;word-break: break-all;border:1px solid rgb(235, 227, 188);padding: 6px;}
.main .base .bace .soso .plug {width: 100%;height: 68px;background:rgb(250,247,230);border:solid 1px rgb(235, 227, 188);}
.main .base .bace .soso .plug .first{height: 66px;border-right: solid 1px rgb(235, 227, 188);}
.main .base .bace .soso .pic {background-image: url(../images/icomenu.png);background-position: -250px -180px;width: 24px;height: 24px;position: absolute;top:15px;}
.main .base .bace .soso .pic:hover{background-image: url(../images/icomenu.png);background-position: -250px -206px;width: 24px;height: 24px;}
.main .base .bace .soso .other{background-image: url(../images/icomenu.png);background-position: -250px -233px;width: 24px;height: 24px;position: absolute;top:-50px;right: -38px;}
.main .base .bace .soso .other:hover{background-image: url(../images/icomenu.png);background-position: -250px -259px;width: 24px;height: 24px;}
/*动态评论*/
.main .base .bace .dynamic {width: 100%;height: auto;background: #fffcf4;margin-top: 10px;}
.main .base .bace .dynamic .dyall {width: 100%;height: 44px;line-height: 44px;border:solid 1px rgb(235, 227, 188);}
.main .base .bace .dynamic .dyall b{margin-left: 10px;}
.main .base .bace .dynamic .dyall i {margin-left: 5px;}
.main .base .bace .dynamic .dyall a{text-decoration: none;}
.main .base .bace .dynamic .dyall .sx{background-image: url(../images/icomenu.png);float: left;background-position: -720px -185px;width: 25px;height: 25px;position: absolute;top:93px;right: 70px;}
.main .base .bace .dynamic .dyall .sx:hover{background-image: url(../images/icomenu.png);float: left;background-position: -720px -211px;width: 25px;height: 25px;}
.main .base .bace .dynamic .dyall .ds{background-image: url(../images/icomenu.png);float: left;background-position: -720px -235px;width: 24px;height: 24px;position: absolute;top:90px;right: 30px;}
.main .base .bace .dynamic .dyall .ds:hover{background-image: url(../images/icomenu.png);float: left;background-position: -720px -261px;width: 24px;height: 24px;}
.main .base .bace .dynamic .dycon {margin: 0px 15px;padding-bottom: 10px;}
.main .base .bace .dynamic .dycon .usname {height: 50px;padding-top: 10px;}
.main .base .bace .dynamic .dycon .usname img {float: left;width: 50px;border-radius: 50%;}
.main .base .bace .dynamic .dycon .usname-qz-vip{background-image: url(../images/qz-f-vip.png);background-position: -92px 0px;width: 48px;height: 30px;}
.main .base .bace .dynamic .dycon .usname .name {float: left;font-size: 16px;height: 28px;line-height: 28px;margin-left: 8px;}
.main .base .bace .dynamic .dycon .usname .date {overflow: hidden;display: inline-block;position: absolute; margin-top:30px;margin-left: -178px;}
.main .base .bace .dynamic .dycon .usname .usdown a:hover{color: #e6b85c;}
.main .base .bace .dynamic .dycon .usname .usdown {float: right;position: relative;right: 20px;}
.main .base .bace .dynamic .dycon .pltext {padding-top: 20px;}
.main .base .bace .dynamic .dycon .pltext .imgwarp,.ptext,.musicwarp {margin-bottom: 10px;}
.main .base .bace .dynamic .dycon .pltext .imgwarp img{width: 49%;height: 280px;}
.main .base .bace .dynamic .dycon .pltext .musicwarp {width: 100%;border:solid 1px #ede8d1;display: table;height: 120px;}
.main .base .bace .dynamic .dycon .pltext .musicwarp:hover{background: #f5efd5;}
.main .base .bace .dynamic .dycon .pltext .imgbox {float: left;overflow: hidden;}
.main .base .bace .dynamic .dycon .pltext .imgbox img{width: 120px;}
.main .base .bace .dynamic .dycon .pltext .music-play{background-image: url(../images/feed-imp.png);float: left;background-position: -74px 0px;width: 60px;height: 60px;display: inline-block;margin-top:30px;position: absolute;left: 60px;}
.main .base .bace .dynamic .dycon .pltext .textbox {float: left;height: 120px;overflow: hidden;display: table-cell;vertical-align: middle;padding: 20px 14px;}
.main .base .bace .dynamic .dycon .pltext .textbox p{padding-top: 5px;}
.main .base .bace .dynamic .dycon .pltext .dowbut {float: right;padding:43px 16px;display: table-cell;vertical-align: middle;}
.main .base .bace .dynamic .dycon .pltext .dowbut a{text-decoration: none;background: #e6b85c;color:#fff;display: inline-block;border: 1px solid #e6b85c;border-radius: 2px;padding: 5px 18px;}
.main .base .bace .dynamic .dycon .pltext .dowbut a:hover{background: #f2c261;}
.main .base .bace .dynamic .dycon .pltext .opbs{background-image: url(../images/icomenu.png);float: left;background-position: -458px -310px;width: 16px;height: 16px;}
.main .base .bace .dynamic .dycon .dyplug {padding: 15px 0px;border-bottom:solid 1px rgb(235, 227, 188);}
.main .base .bace .dynamic .dycon .dyplug .dz{background-image: url(../images/icomenu.png);float: left;background-position: -460px -260px;width: 24px;height: 24px;position: relative;top:-22px;right: -420px;}
.main .base .bace .dynamic .dycon .dyplug .dz:hover{background-image: url(../images/icomenu.png);float: left;background-position: -460px -286px;width: 24px;height: 24px;}
.main .base .bace .dynamic .dycon .dyplug .pl{background-image: url(../images/icomenu.png);float: left;background-position: -460px -156px;width: 24px;height: 24px;position: relative;top:-22px;right: -476px;}
.main .base .bace .dynamic .dycon .dyplug .pl:hover{background-image: url(../images/icomenu.png);float: left;background-position: -460px -182px;width: 24px;height: 24px;}
.main .base .bace .dynamic .dycon .dyplug .zf{background-image: url(../images/icomenu.png);float: left;background-position: -460px -210px;width: 24px;height: 24px;position: relative;top:-22px;right: -535px;}
.main .base .bace .dynamic .dycon .dyplug .zf:hover{background-image: url(../images/icomenu.png);float: left;background-position: -460px -236px;width: 24px;height: 24px;}
.main .base .bace .dynamic .dycon .dylink {padding: 10px 0px;}
.main .base .bace .dynamic .dycon .dylink a{color: #e6b85c;}
.main .base .bace .dynamic .dycon .dylink .linkuser {color: #e6b85c;}
.main .base .bace .dynamic .dycon .dylink .linkico {background-image: url(../images/icomenu.png);float: left;background-position: -510px -207px;width: 24px;height: 24px;padding-right: 10px;}
.main .base .bace .dynamic .dycon .dyplq {padding-bottom: 10px;font-size: 13px;}
.main .base .bace .dynamic .dycon .dyplq .dypl .namepic img{float: left;width: 30px;height: 30px;border-radius: 50%;margin-right: 10px;}
.main .base .bace .dynamic .dycon .dyplq .dypl ul li {list-style: none;padding-top: 10px;}
.main .base .bace .dynamic .dycon .dyplq .dypl a{color: #e6b85c;}
.main .base .bace .dynamic .dycon .dyplq .dypl .dahf {margin-left: 40px;}
.main .base .bace .dynamic .dycon .dyplq .dypl .mysub {margin-left: 38px;}
.main .base .bace .dynamic .dycon .comment textarea {width: 100%;height: 36px;resize: none;overflow-x: hidden;word-break: break-all;border:1px solid rgb(235, 227, 188);padding: 6px;}
.main .base .bace .dynamic .dycon .comment .xjzp{background-image: url(../images/icomenu.png);float: left;background-position: -512px -288px;width: 24px;height: 24px;position: relative;top:-32px;right: -575px;}
.main .base .bace .dynamic .dycon .comment .xjzp:hover{background-image: url(../images/icomenu.png);float: left;background-position: -512px -314px;width: 24px;height: 24px;}
.main .base .bace .dymore {height: 46px;line-height: 46px;text-align: center;border:1px solid rgb(235, 227, 188);background: #fffcf4;margin:3px 0;}
.main .base .bace .dymore:hover{background: #f5efd5;}
/*主体下部右侧--签到*/
.main .base .bafr .qz-sign {width: 100%;height: 68px;background:rgb(255,252,244);border:solid 1px rgb(235, 227, 188);}
.main .base .bafr .qz-sign .col-md-4 {background: #ebe3bc;height: 67px;padding-top: 12px;text-align: center;}
.main .base .bafr .qz-sign .col-md-8 {width: 155px;padding-top: 12px;text-align: center;}
.main .base .bafr .qz-sign a{text-decoration: none; color: #cc8f14;}
.main .base .bafr .qz-sign span{text-align: center;}
.main .base .bafr .qz-sign .si {font-size: 12px;display: block;}
.main .base .bafr .qz-sign .num {font-size: 18px;}
/*访客*/
.main .base .bafr .qz-caller {float: right;width: 100%;background:rgb(255,252,244);border:solid 1px rgb(235, 227, 188);border-radius: 3px; margin-top: 10px;}
.main .base .bafr .qz-caller .catile {padding-left: 10px;height: 40px;line-height: 40px;}
.main .base .bafr .qz-caller .titie {text-decoration: none;padding-left: 20px;font-weight: bolder;}
.main .base .bafr .qz-caller .catile .line {margin-left:0 5px;color: #ede8d1;}
.main .base .bafr .qz-caller .catile .linek {color: #cc8f14;margin-left: 10px;}
.main .base .bafr .qz-caller .caimg {width: 280px;height: 300px;margin-left:15px;}
.main .base .bafr .qz-caller .caimg ul li {list-style: none;float: left;margin-right: 19px;}
.main .base .bafr .qz-caller .caimg img {width: 68px;height: 68px;border-radius: 4px;}
.main .base .bafr .qz-caller .caimg .user-name-bg {position: relative;top: -16px;right:0px;width: 68px;height: 16px;word-wrap: break-word;text-align: center;border-radius: 3px;display: block;overflow: hidden;background: black;opacity: 0.5;}
.main .base .bafr .qz-caller .caimg .user-name {display: inline-block;margin: 0 3px;max-width: 45px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height: 16px;color: #fff;cursor: pointer;text-decoration: none;font-size: 12px;}
.main .base .bafr .qz-caller .caimg .date {display: block;position: relative;tion: relative;top: -10px;text-align: center;height: 20px;line-height: 20px;margin-top: 2px;}
.main .base .bafr .qz-caller .capage {display: inline-block;width: 220px;height: 26px;padding-left: 16px;}
.main .base .bafr .qz-caller .capage a {text-decoration: none;}
.main .base .bafr .qz-caller .capage i {font-size: 10px;color: #afa696;}
.main .base .bafr .qz-caller .capage a.unclick{opacity: 0.5;}
.main .base .bafr .qz-caller .cainfo {float: left;width: 100%;background:rgb(255,252,244);border-top:solid 1px rgb(235, 227, 188);padding: 10px 0px;}
.main .base .bafr .qz-caller .cainfo a{color: #403e39;}
.main .base .bafr .qz-caller .cainfo span{font-size: 12px;}
.main .base .bafr .qz-caller .cainfo ul li{display:inline;float: left;text-align: center;padding-bottom: 10px;}
.main .base .bafr .qz-caller .cainfo p{float: left;width: 100%;height: 30px;line-height: 30px; background:rgb(255,252,244);border-top:solid 1px rgb(235, 227, 188);padding: 8px 16px;}
.main .base .bafr .qz-caller .cainfo i{margin-left: 8px;}
/*礼物*/
.main .base .bafr .qz-gift {float: right;width: 100%;background:rgb(255,252,244);border:solid 1px rgb(235, 227, 188);border-radius: 3px; margin-top: 15px;}
.main .base .bafr .qz-gift .giti {padding: 10px;}
.main .base .bafr .qz-gift .gile {width: 220px;height: 240px;margin-left:10px;}
.main .base .bafr .qz-gift .gile ul li{float: left;margin-bottom: 10px;position: relative;height: 68px;}
.main .base .bafr .qz-gift .gile img {float: left;width: 68px;height: 68px;border-radius: 4px;}
.main .base .bafr .qz-gift .gile .gius {float: left;padding-left:10px;width: 80px;height: 30px;line-height: 30px;}
.main .base .bafr .qz-gift .gile .gibgr {display: block;height: 35px;line-height: 35px;background-color: #fffcf4;border: 1px solid #ede8d1;text-align: center;border-radius: 2px;text-decoration: none;position: absolute;top: 10px;right: -100px;cursor: pointer;}
.main .base .bafr .qz-gift .gile .gibgr .bgico {background-image: url(../images/icenter.32.png);background-repeat: no-repeat;float: left;background-position: -598px -20px;width: 15px;height: 15px;position: absolute;top:10px;right: 65px;}
.main .base .bafr .qz-gift .gile .gibgr b{padding-left: 24px;padding-right: 5px;}
.main .base .bafr .qz-gift .gipage {display: inline-block;width: 280px;height: 26px;padding-left: 16px;margin-bottom: 5px;}
.main .base .bafr .qz-gift .gipage .prev, .next a {text-decoration: none;}
.main .base .bafr .qz-gift .gipage .more span{color: #cc8f14;wline-height: 22px;margin-left: 105px;}
.main .base .bafr .qz-gift .gipage i {font-size: 10px;color: #afa696;display: inline-block;width: 16px;height: 16px;}
.main .base .bafr .qz-gift .gipage i:hover{background: #faf7e6;}
/*亲密好友*/
.main .base .bafr .qz-care {float: right;width: 100%;background:rgb(255,252,244);border:solid 1px rgb(235, 227, 188);border-radius: 3px; margin: 13px 0;}
.main .base .bafr .qz-care .retile {padding-left: 10px;height: 40px;line-height: 40px;}
.main .base .bafr .qz-care .retile .line {margin-left:0 5px;color: #ede8d1;}
.main .base .bafr .qz-care .retile .linek {color: #cc8f14;margin-left: 10px;}
.main .base .bafr .qz-care .gile{padding-left: 10px;}
.main .base .bafr .qz-care ul li{float: left;margin-bottom: 10px;position: relative;height: 68px;}
.main .base .bafr .qz-care img {float: left;width: 68px;height: 68px;border-radius: 4px;}
.main .base .bafr .qz-care .gile .gius {float: left;padding-left:10px;width: 80px;height: 30px;line-height: 30px;}
.main .base .bafr .qz-care .gile .gibgr {display: block;height: 30px;line-height: 30px;background-color: #fffcf4;border: 1px solid #ede8d1;text-align: center;border-radius: 2px;text-decoration: none;position: absolute;top: 10px;right: -100px;cursor: pointer;}
.main .base .bafr .qz-care .gile .gibgr b{padding: 5px 25px;}
.main .base .bafr .qz-care .gile span {margin-left: 35px;}
.main .base .bafr .qz-care .gile .xin {background-image: url(../images/icenter.32.png);background-repeat: no-repeat;float: left;background-position: -558px -36px;width: 20px;height: 20px;position: absolute;top:36px;right: 53px;}运行实例 »
点击 "运行实例" 按钮查看在线实例
新知识点：
1.浏览器缩放 html样式不变形
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
2. 添加浏览器标题小图标 【标题小图标<title>网页标签标题</title>】
<link rel="icon" href="inc/images/favicon.ico" type="image/x-icon" />
重点：favicon.ico 小图标 最好不要改命名
3. 列表组容器
<ul class="list-group"><!-- 列表组容器 --> <li class="list-group-item active"><a href=""><strong>个人档</strong></a></li> <li class="list-group-item"><i class="fa fa-vcard-o"></i>J-y_劔影_Mr.zhiweiHong</li> <li class="list-group-item"><i class="fa fa-mars"></i>绅士</li> <li class="list-group-item"><i class="fa fa-wpforms"></i>31岁 天蝎座 男</li> <li class="list-group-item"><i class="fa fa-shopping-bag"></i>WH86网娱科技公司</li> <li class="list-group-item"><i class="fa fa-graduation-cap"></i>来自 广东肇庆</li> <li class="list-group-item"><a href="" style="color: #cc8f14;">查看详细资料</a></li> </ul>
使用方法：ul class="list-group" 和 li class="list-group-item" 组合
前提需导入 bootstrap/css/bootstrap.min.css
4. 固定窗口 常用场景：回到顶部 或 右下角广告窗口
<div class="tops"><a href="#top"><b>︿ / 顶部</b></a></div>
.tops {position: fixed;right: 20px; bottom: 20px;}
.tops a{text-decoration: none;float: right;background: #FAF7E6;width: 30px;height: 30px;text-align: center;}
.tops a:hover{text-decoration: none;}关键点：<a href="#top"></a> position: fixed; 固定定位 带方位坐标最好 top bottom left right
旧知识复习点：
1. display：属性规定元素应该生成的框的类型
display: none; 此元素不会被显示
display: inline; 此元素将显示为块级元素，此元素前后会带有换行符
display: block; 此元素将显示为块级元素，此元素前后会带有换行符
display: inline-block; 行内块元素
display: table; 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符 display: inline-table; 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符 display: table-row 此元素会作为一个表格行显示（类似 <tr>） display: table-cell; 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） display: table-column; 此元素会作为一个单元格列显示（类似 <col>） display: table-caption; 此元素会作为一个表格标题显示（类似 <caption>） display: table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>） display: table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>） display: table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）
display: none; 和 display: block; 可以实现鼠标悬停显示二级菜单的效果 比JQ显示的效果还简单
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li:hover #b{
display: block;
}
#b{
display: none;
}
</style>
</head>
<body>
<ul>
<li>sss
<ul id="b">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2. overflow：属性规定当内容溢出元素框时发生的事情
visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
一般应用于文本域 文字过多进行裁剪
textarea {width: 100%;height: 36px;resize: none;overflow-x: hidden;word-break: break-all;border:1px solid rgb(235, 227, 188);padding: 6px;}word-wrap:break-word 在长单词或 URL 地址内部进行换行。
例如div宽200px，它的内容就会到200px自动换行，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。
word-wrap:break-all 允许在单词内换行。
例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
3. :hover 选择器用于选择鼠标指针浮动在上面的元素。
a:link {color:blue;} 未访问
a:visited {color:blue;} 已访问
a:hover {color:red;} 悬浮
a:active {color:yellow;} 活动链接
:hover 选择器可用于所有元素，不只是链接。
a:hover{text-decoration: none;color: #fff}
li:hover{background-color:#f5efd5;}
.pic {background-image: url(../images/icomenu.png);background-position: -250px -180px;width: 24px;height: 24px;position: absolute;top:15px;}
.pic:hover{background-image: url(../images/icomenu.png);background-position: -250px -206px;width: 24px;height: 24px;}
.dymore:hover{background: #f5efd5;}刚开始我以为:hover 只能用于A标签 做完这个项目才发现 :hover 神通广大 牛逼XX 所有鼠标悬停的效果都能做
总结：做这个页面花了整整2天，边做边遇到问题，一遇到问题就F12，看看原作者怎么写的样式 再自己按他的写 写出效果来 就逐一理解 测试效果 想想作者为什么这么写 不懂的查手册 看起来像抄袭 其实是借鉴 我想有空再把所有样式删除 再自己写几遍 遇到不会写的 就看看上一遍怎么写的 以此来加深印象 促进技能进步！！
