规播圃享佩僻刊乖疙落伪浑变
分块完成图示部分:
index.php
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>疯一般的男人 http://65676666.qzone.qq.com</title> <!-- 引入自定义css文件--> <link rel="stylesheet" type="text/css" href="static/css/site.css"> <!-- 引入bootstrap--> <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css"> <!-- 引入图标库font-awesome--> <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css"> </head> <body> <!--头部开始--> <div class="header"> <!--顶部中间部分div开始--> <div class="container"> <!-- 左边部分--> <div class="left"> <a href="" class="logo"></a> <a href=""><i class="fa fa-home"> </i>他的主页</a> <a href=""><i class="fa fa-user"> </i>他的动态</a> </div> <!-- 左边部分--> <!-- 右边部分--> <div class="right"> <div class="search-box"> <input type="text" placeholder="用户/游戏/动态"> <a href=""><i class="fa fa-search" aria-hidden="true"></i></a> </div> <div class="personal"> <span>|</span> <a href=""> 返回个人中心 </a> <span>|</span> </div> <div class="user-info"> <img src="static/images/userinfo.jpg" > <a href="">追疯少年</a> <a href="">[退出]</a> <a href=""> <i class="fa fa-cog" aria-hidden="true"> </i></a> <a href=""><i class="fa fa-diamond" aria-hidden="true"></i></a> </div> </div> <!-- 右边部分--> </div> <!--顶部中间部分结束--> </div> <!--头部结束--> <!--body开始--> <div class="body"> <div class="container"> <!-- 用户信息顶部--> <div class="userinfo-top"> <span>追疯少年</span> <a href="" class="lv"></a> <a href="fly"class="fly"></a> </div> <!-- 用户信息中间部分--> <div class="userinfo-center"> <div class="left"> <span> 追疯少年 http://77886.qzone.qq.com </span> </div> <div class="right"> <span><a href=""><i class="fa fa-plus" aria-hidden="true"> 加好友</i></a></span> <a href=""><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 赞 | 1</i></a> </div> </div> <!-- 用户信息底部--> <div class="userinfo-bottom"> </div> </div> </div> <!--body结束--> <!--底部开始--> <div class="footer"></div> <!--底部结束--> </body> </html>
site.css
/*去除body与div之间的空隙*/ body { margin: 0; padding:0; } /*头部css样式开始*/ /*****************************************************************/ .header { /*添加背景好布局*/ /*查看仿站颜色值的方法*/ /*1.鼠标放在想仿制的位置,审查元素 查看css颜色值*/ /*2.截图查看rgb值*/ background: #d18b00; /*background: rgb(209,139,0);*/ height: 40px; /*让内部元素垂直居中*/ line-height: 40px; } .header .container .left { /*左浮动*/ float: left; /*background: red;*/ /*宽度小于40 避免颜色覆盖*/ height:30px; width: 320px; } .header .container .left .logo { background-image: url('../images/icon.png'); background-position: 0px 0px; width:90px; height: 40px; /*必须左浮动,否则图片出不来*/ float: left; } .header .container .left a { color:white; text-decoration: none; } .header .container .left i { margin-left: 20px; font-size: 18px; } .header .container .right { float:right; /*background: red;*/ height:30px; width:460px; } .header .container .right .search-box { float: left; } .header .container .right .search-box input { width:135px; height:20px; background-color: rgb(221,168,63); border:none; border-radius: 4px; padding: 5px 8px; } .header .container .right .search-box input::-webkit-input-placeholder { color:white; font-size:10px; } .header .container .right .search-box i { color:white; margin-left:-30px; } .header .container .right .personal { float: left; margin-left: 15px; } .header .container .right .personal a { color:white; text-decoration: none; } .header .container .right .personal span { color:lightsalmon; } .header .container .right .user-info { float: left; margin-left: 10px; } .header .container .right .user-info img { width:30px; height:30px; } .header .container .right .user-info a { color:white; text-decoration: none; } /*头部css样式结束*/ /*****************************************************************/ /*body css开始*/ .body { background: lightcoral; height:500px; } .body .container { background:lightseagreen; width:100%; height:283px; } .body .container .userinfo-top { background: lightgreen; height: 64px; line-height: 64px; } .body .container .userinfo-top span { font-size: 36px; } .body .container .userinfo-top .lv { display:inline-block; background-image:url('../images/icon3.png'); background-repeat: no-repeat; background-position: -36px 0px; width:16px; height: 16px; } .body .container .userinfo-top .fly { display:inline-block; background-image:url('../images/icon.png'); background-repeat: no-repeat; background-position: -204px -76px; width:34px; height: 22px; } .body .container .userinfo-center { background: lightyellow; height:38px; } .body .container .userinfo-center .left { float: left; background:lightgrey; width:228px; height:20px; line-height: 20px; } .body .container .userinfo-center .right { background: lime; width:227px; height:37px; line-height: 37px; float: right; } .body .container .userinfo-center .right a { display: inline-block; border:1px solid #cdcdcd; margin:0px 10px; width:80px; height:38px; border-radius: 30px; color: #ffffff; text-decoration: none; text-align: center; background-color:grey; } /*body css 结束*/ /*****************************************************************/ /*底部css开始*/ .footer { background: aqua; height: 100px; } /*底部css结束*/ /*****************************************************************/
执行:
完成图示布局
index.php
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>疯一般的男人 http://65676666.qzone.qq.com</title> <!-- 引入bootstrap--> <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css"> <!-- 引入图标库font-awesome--> <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css"> <!-- 引入自定义css文件--> <link rel="stylesheet" type="text/css" href="static/css/site.css"> </head> <body> <!--头部开始--> <div class="header"> <!--顶部中间部分div开始--> <div class="container"> <!-- 左边部分--> <div class="left"> <a href="" class="logo"></a> <a href=""><i class="fa fa-home"> </i>他的主页</a> <a href=""><i class="fa fa-user"> </i>他的动态</a> </div> <!-- 左边部分--> <!-- 右边部分--> <div class="right"> <div class="search-box"> <input type="text" placeholder="用户/游戏/动态"> <a href=""><i class="fa fa-search" aria-hidden="true"></i></a> </div> <div class="personal"> <span>|</span> <a href=""> 返回个人中心 </a> <span>|</span> </div> <div class="user-info"> <img src="static/images/userinfo.jpg" > <a href="">追疯少年</a> <a href="">[退出]</a> <a href=""> <i class="fa fa-cog" aria-hidden="true"> </i></a> <a href=""><i class="fa fa-diamond" aria-hidden="true"></i></a> </div> </div> <!-- 右边部分--> </div> <!--顶部中间部分结束--> </div> <!--头部结束--> <!--body开始--> <div class="body"> <div class="container"> <!-- 用户信息顶部--> <div class="userinfo-top"> <span>追疯少年</span> <a href="" class="lv"></a> <a href="fly"class="fly"></a> </div> <!-- 用户信息中间部分--> <div class="userinfo-center"> <div class="left"> <span> 追疯少年 http://77886.qzone.qq.com </span> </div> <div class="right"> <span><a href=""><i class="fa fa-plus" aria-hidden="true"> 加好友</i></a></span> <a href=""><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> 赞 | 1</i></a> </div> </div> <!-- 用户信息底部--> <div class="userinfo-bottom"> <div class="avatar"> <img src="static/images/userinfo.jpg" width="128"height="128"> </div> <div class="user-detial"> <div class="user-name"> <span>追疯少年@123.com</span> </div> <div class="user-lv"> <div class="vip"> <img src="static/images/vip_year_8.png" > </div> <div class="grow-value"> <div class="top"> <span>成长值 360000 成长速度 35点/天 </span> </div> <div class="bottom"> <!-- bootstrap进度条--> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> </div> </div> <div class="vip-year"> <a href=""><img src="static/images/icon-vip-fee-year.png" ></a> <a href="" class="level"></a> </div> </div> <div class="nav"> <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 class="weather"> <img src="static/images/weather-cloudy-sunny.png" > <span class="temperature">30º</span> <div class="city" style="float: right;width:100px;height:181px;"> <span>重庆</span> </div> </div> </div> </div> </div> <!--body结束--> <!--底部开始--> <div class="footer"></div> <!--底部结束--> </body> </html>
site.css
/*去除body与div之间的空隙*/ body { margin: 0; padding:0; } /*头部css样式开始*/ /*****************************************************************/ .header { /*添加背景好布局*/ /*查看仿站颜色值的方法*/ /*1.鼠标放在想仿制的位置,审查元素 查看css颜色值*/ /*2.截图查看rgb值*/ background: #d18b00; /*background: rgb(209,139,0);*/ height: 40px; /*让内部元素垂直居中*/ line-height: 40px; } .header .container .left { /*左浮动*/ float: left; /*background: red;*/ /*宽度小于40 避免颜色覆盖*/ height:30px; width: 320px; } .header .container .left .logo { background-image: url('../images/icon.png'); background-position: 0px 0px; width:90px; height: 40px; /*必须左浮动,否则图片出不来*/ float: left; } .header .container .left a { color:white; text-decoration: none; } .header .container .left i { margin-left: 20px; font-size: 18px; } .header .container .right { float:right; /*background: red;*/ height:30px; width:460px; } .header .container .right .search-box { float: left; } .header .container .right .search-box input { width:135px; height:20px; background-color: rgb(221,168,63); border:none; border-radius: 4px; padding: 5px 8px; } .header .container .right .search-box input::-webkit-input-placeholder { color:white; font-size:10px; } .header .container .right .search-box i { color:white; margin-left:-30px; } .header .container .right .personal { float: left; margin-left: 15px; } .header .container .right .personal a { color:white; text-decoration: none; } .header .container .right .personal span { color:lightsalmon; } .header .container .right .user-info { float: left; margin-left: 10px; } .header .container .right .user-info img { width:30px; height:30px; } .header .container .right .user-info a { color:white; text-decoration: none; } /*头部css样式结束*/ /*****************************************************************/ /*body css开始*/ .body { background: lightcoral; height:500px; } .body .container { background:lightseagreen; height:283px; } .body .container .userinfo-top { background: lightgreen; height: 64px; line-height: 64px; } .body .container .userinfo-top span { font-size: 36px; } .body .container .userinfo-top .lv { display:inline-block; background-image:url('../images/icon3.png'); background-repeat: no-repeat; background-position: -36px 0px; width:16px; height: 16px; } .body .container .userinfo-top .fly { display:inline-block; background-image:url('../images/icon.png'); background-repeat: no-repeat; background-position: -204px -76px; width:34px; height: 22px; } .body .container .userinfo-center { background: lightyellow; height:38px; } .body .container .userinfo-center .left { float: left; background:lightgrey; width:228px; height:20px; line-height: 20px; } .body .container .userinfo-center .right { background: lime; width:227px; height:37px; line-height: 37px; float: right; } .body .container .userinfo-center .right a { display: inline-block; border:1px solid #cdcdcd; margin:0px 10px; width:80px; height:38px; border-radius: 30px; color: #ffffff; text-decoration: none; text-align: center; background-color:grey; } .body .container .userinfo-bottom { background:red; height:181px; } .body .container .userinfo-bottom .avatar { background:coral; width:128px; height:181px; float:left; line-height: 181px; padding:0 auto; } .body .container .userinfo-bottom .avatar img { border:2px solid white; border-radius: 3px; } .body .container .userinfo-bottom .user-detial { background:green; width:684px; height:181px; float:left; margin-left:20px; } .body .container .userinfo-bottom .user-detial .user-name { background:blue; height:30px; line-height: 30px; } .body .container .userinfo-bottom .user-detial .user-name span { font-size: 20px; } .body .container .userinfo-bottom .user-detial .user-lv { background:deeppink; height:60px; line-height: 60px; } .body .container .userinfo-bottom .user-detial .user-lv .vip { background:yellowgreen; width:60px; height:60px; line-height: 60px; float: left; } .body .container .userinfo-bottom .user-detial .user-lv .grow-value { background:black; width:200px; height:60px; line-height: 60px; float: left; margin-left: 10px; } .body .container .userinfo-bottom .user-detial .user-lv .grow-value .top { background: yellow; width:200px; height:30px; line-height: 30px; } .body .container .userinfo-bottom .user-detial .user-lv .grow-value .top span { font-size: 8px; } .body .container .userinfo-bottom .user-detial .user-lv .grow-value .bottom { background: red; width:200px; height:30px; line-height: 30px; } .body .container .userinfo-bottom .user-detial .user-lv .grow-value .bottom .progress { height:8px; } .body .container .userinfo-bottom .user-detial .user-lv .vip-year { background: red; width:200px; height:30px; line-height: 30px; float: left; margin-left:10px; } .body .container .userinfo-bottom .user-detial .user-lv .vip-year .level { display: inline-block; background:url('../images/profile-v9-adg.png'); background-position: -1372px -50px; width: 25px; height: 25px; padding: 10px; } .body .container .userinfo-bottom .user-detial .nav { background:palegreen; height:91px; width:500px; } .body .container .userinfo-bottom .user-detial .nav ul { list-style: none; margin-top:45px; margin-left:-40px; } .body .container .userinfo-bottom .user-detial .nav ul li { float:left; margin-left:10px; } .body .container .userinfo-bottom .user-detial .nav ul li a { color:#337ab7; font-size: 18px; } .body .container .userinfo-bottom .weather { background:peru; width:210px; height:181px; line-height: 181px; float:right; } .body .container .userinfo-bottom .weather .img { width:56px; height:56px; } .body .container .userinfo-bottom .weather .temperature { font-size: 20px; } /*body css 结束*/ /*****************************************************************/ /*底部css开始*/ .footer { background: aqua; height: 100px; } /*底部css结束*/ /*****************************************************************/
执行:
案慧伙杀燎佳羚缔圃回寸操欣