常用布局效果01-登录用户信息展示布局

登录用户信息展示布局

效果图：

网页布局代码：

<div class="g-user-card"><div class="card-inner"><div class="card-top clearfix"><a class="fl" href=""><img src="img/icon01.jpg"></a><div class="card-top-right-box fl"><a href=""><span class="name text-ellipsis">Dear_JACK</span></a><div class="meta"><a href="">经验<b>12588</b></a><a href="">积分<b>3000</b></a></div></div></div><div class="user-center-box"><ul class="clearfix"><li class="fl"><a href=""><i class="icon-brand140 user-center-icon mr8"></i>订单中心</a></li><li class="fl"><a href=""><i class="icon-brand140 user-center-icon mr8"></i>订单中心</a></li><li class="fl"><a href=""><i class="icon-brand140 user-center-icon mr8"></i>订单中心</a></li><li class="fl"><a href=""><i class="icon-brand140 user-center-icon mr8"></i>订单中心</a></li></ul></div><div class="card-history"><span class="history-item"><span class="tit text-ellipsis">哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈啊哈哈哈哈哈哈啊哈</span><span class="media-name text-ellipsis">哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈啊哈</span><i class="icon-brand124 icon-clock"></i><a class="continue" href="">继续</a></span></div><div class="card-sets clearfix"><a class="fl" href="">安全退出</a></div></div></div>

基本样式代码：

@charset "UTF-8";/*css 初始化 */html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }   /*去掉input等聚焦时的蓝色边框*/ul, ol { list-style:none; }input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}select, input { vertical-align:middle;}select, input, textarea { font-size:12px; margin:0; }textarea { resize:none; } /*防止拖动*/img {border:0; vertical-align:middle; }  /*  去掉图片低测默认的3像素空白缝隙，或者用display：block也可以*/table { border-collapse:collapse; }body {    font:12px/150% Arial,Verdana,"\5b8b\4f53";    color:#666;    background:#fff}.clearfix:before,.clearfix:after {  /*清楚浮动*/    content:"";    display:table;}.clearfix:after{clear:both;}.clearfix{    *zoom:1;/*IE/7/6*/}a {color:#666; text-decoration:none; }a:hover{color:#C81623;}h1,h2,h3,h4,h5,h6 {text-decoration:none;font-weight:normal;font-size:100%;}  /*设置h标签的大小，设置跟父亲一样大的字体font-size:100%;*/s,i,em{font-style:normal;text-decoration:none;}.col-red{color: #C81623!important;}/*公共类*/.w {  /*版心 提取 */    width: 1210px;    margin:0 auto;}.fl {    float:left}.fr {    float:right}.al {    text-align:left}.ac {    text-align:center}.ar {    text-align:right}.hide {    display:none}.text-ellipsis {    overflow: hidden;}.font12{ font-size: 12px;}.font14{ font-size: 14px;}.font16{ font-size: 16px;}.mr8{margin-right: 8px;}/*公共部分*//*头部导航开始*//*尾部部导航开始*/

字体样式代码：

@font-face {  font-family: 'icomoon';  src:  url('fonts/icomoon.eot?2zavpy');  src:  url('fonts/icomoon.eot?2zavpy#iefix') format('embedded-opentype'),    url('fonts/icomoon.ttf?2zavpy') format('truetype'),    url('fonts/icomoon.woff?2zavpy') format('woff'),    url('fonts/icomoon.svg?2zavpy#icomoon') format('svg');  font-weight: normal;  font-style: normal;}i {  /* use !important to prevent issues with browser extensions that change fonts */  font-family: 'icomoon' !important;  speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  line-height: 1;  /* Better Font Rendering =========== */  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}.icon-brand92:before {  content: "\e95b";  color: #4386fc;}.icon-brand94:before {  content: "\e95d";  color: #607d8b;}.icon-brand96:before {  content: "\e95f";  color: #005ea5;}.icon-brand116:before {  content: "\e973";  color: #1f8ded;}.icon-brand122:before {  content: "\e979";  color: #5091cd;}.icon-brand123:before {  content: "\e97a";  color: #4679a4;}.icon-brand124:before {  content: "\e97b";}.icon-brand140:before {  content: "\e98b";  color: #00b0ea;}.icon-brand151:before {  content: "\ebd1";}.icon-brand178:before {  content: "\ebec";  color: #fc7e0f;}.icon-brand192:before {  content: "\ebfa";  color: #93c;}

布局样式代码：

.g-user-card{width: 306px;box-shadow: 0 8px 16px 0 rgba(7,17,27,.2);border-bottom-right-radius: 8px;    border-bottom-left-radius: 8px;}.g-user-card .card-inner{background-color: #fff;padding: 24px;box-sizing: border-box;}.g-user-card .card-top a {    color: #93999f;}.g-user-card .card-top img {    width: 72px;    height: 72px;    border-radius: 50%;    border: 2px solid #fff;    margin-right: 12px;    background: url(../img/icon01.jpg) no-repeat;}.g-user-card .card-top .card-top-right-box {    margin-top: 14px;}.g-user-card .card-top .name {    display: inline-block;    font-size: 16px;    color: #07111b;    width: 170px;}.g-user-card .card-top .meta a {    margin-right: 12px;}.g-user-card .card-top .meta b {    margin-left: 2px;}.g-user-card .user-center-box{margin-top: 16px;margin-bottom: 14px;}.g-user-card .user-center-box ul li{width: 128px;height: 36px;line-height: 36px;background: #FAFAFC;border-radius: 2px;color: #4d555d;font-size: 12px;margin-right: 2px;margin-bottom: 2px;box-sizing: border-box;}.g-user-card .user-center-box ul li:nth-child(2n) {    margin-right: 0;}.g-user-card .user-center-box ul li:hover {    color: #4d555d;    background: #F3F5F7;}.g-user-card .user-center-box ul li a {display: block;    width: 100%;    height: 36px;    line-height: 36px;    padding-left: 12px;    text-align: left;    box-sizing: border-box;    color: #787d82;    -webkit-transition: background-color .2s;    -moz-transition: background-color .2s;    transition: background-color .2s;}.g-user-card .user-center-box ul li .user-center-icon{position: relative;    top: 3px;    font-size: 16px;}.g-user-card .card-history {    padding-bottom: 16px;    border-bottom: 1px solid #edf1f2;}.g-user-card .card-history .history-item {    display: block;    position: relative;    padding-left: 24px;    font-size: 12px;    color: #787d82;    transition: background-color .2s;}.g-user-card .card-history .history-item .text-ellipsis{text-overflow: ellipsis;white-space: nowrap;}.g-user-card .card-history .history-item .icon-clock {    position: absolute;    left: 0;    top: 2px;    font-size: 16px;    font-weight: 700;}.g-user-card .card-history .history-item .tit {    display: block;    margin-bottom: 8px;    font-weight: 700;}.g-user-card .card-history .history-item .media-name {    display: block;    width: 200px;}.g-user-card .card-history .history-item .continue {    position: absolute;    right: 0;    top: 26px;    color: rgba(0,180,60,.6);}.g-user-card .card-history .history-item .continue:hover {    color: #00b43c;}.g-user-card .card-sets {    margin-top: 16px;    font-size: 12px;    line-height: 12px;}.g-user-card .card-sets a {    color: #93999F;}.g-user-card .card-sets a:hover {    color: #4d555d;    background: 0 0;}

代码地址：https://github.com/Easy-MJ/csdn-blog-demo/tree/master/project-02/layout-demo-01