css布局模仿微信朋友圈效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局模仿微信朋友圈效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE HTML> <html> <head> <title>我的朋友圈</title> <meta charset="utf-8"> <style> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; } .clearfix:after { content: "." ; display: block ; height: 0 ; clear: both ; visibility: hidden ; } .clearfix{ display: inline-block; } /* Hides from IE-mac */ *html .clearfix{ height:1%; } .clearfix{ display:block; } /* End hide from IE-mac */ table { border-collapse: collapse; border-spacing: 0; } fieldset, img { border: 0 none; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } ol, ul { list-style: outside none none; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } q::before, q::after { content: ""; } abbr, acronym { border: 0 none; font-variant: normal; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; } legend { color: #000000; } a { cursor: pointer; text-decoration: none; } input{ -webkit-appearance: none; } *{ -webkit-tap-highlight-color:transparent; } html{ background-color: #f8f8f8; font-family: Arial,sans-serif; font-size: 13px; } @media screen and (min-width:350px){ html{ font-size: 15px; } .cmt-wrap{ font-size: 14px; } .time{ font-size: 13px; } } .hide{ display: none; } header{ position: relative; } #bg{ width: 100%; } #user-name{ position: absolute; text-align: right; right: 114px; bottom: 15px; color: #ffffff; font-weight: bold; font-size: 15px; text-shadow: 0 1px .5px #000000; } #avt{ width: 74px; height: 74px; border: 1px solid #dbdbdb; position: absolute; right: 15px; bottom: -22px; padding: 1px; background-color: #ffffff; } #list{ overflow: hidden; padding: 30px 0px 10px; } #list li{ clear: both; line-height: 1.5; overflow: hidden; position: relative; border-bottom: 1px solid #e2e2e2; margin-top: 15px; padding-bottom: 15px; } .po-hd{ overflow: hidden; position: relative; } .ads{ color: #999999; position: absolute; right: 5px; top: 0; } .ads img{ width: 10px; padding-left: 8px; } .ad-link{ color: #3b5384; } .post .ad-link img{ width: 11px; padding: 0; display: inline-block; } .po-avt-wrap{ padding-left: 10px; } .po-avt{ width: 40px; height: 40px; position: absolute; top: 0; left: 10px; } .r { clear: both; border-bottom: 8px solid #eeeeee; border-left: 8px solid transparent; border-right: 8px solid transparent; width: 1px; margin-top: 5px; margin-left: 10px; } .po-cmt{ float: left; padding-left: 60px; padding-right: 10px; width: 100%; box-sizing: border-box; } .po-name{ /* font-weight: bold; */ color: #576b95; } .post{ color: #252525; overflow: hidden; padding-bottom: 10px; } .post img{ padding: 10px 5px 0 0; display: block; max-height: 130px; } .post .list-img:nth-child(1){ float: left; } .list-img{ height: 160px; padding-right: 10px; float: left; } .time{ clear: both; color: #b1b1b1; float: left; } .c-icon{ width: 20px; float: right; } .cmt-wrap{ clear: both; width: 100%; background-color: #eeeeee; } .like{ color: #576b95; padding: 5px 5px 3px 12px; /* border-bottom: 1px solid #dfdfe0; */ } .like img{ width: 12px; padding-right: 5px; } .cmt-list{ padding: 5px 12px 5px; color: #454545; } .cmt-list p{ padding-top: 3px; } b{ font-weight: normal; } .cmt-list span{ color: #3b5384; } /*2015-12-30 s*/ #share a{ border-radius: 5px; background-color: #26337e; color: #ffffff; text-align: center; display:block; line-height: 3.5; font-size: 14px; width: 80%; margin:2em auto; } #share p{ padding: 45px 0 10px; color: #999999; text-align: center; } /*2015-12-30 end*/ #guide { position: fixed; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 9999; background-image:url(../picture/guide.png); background-repeat: no-repeat; background-position: right top; background-color: #191919; background.........完整代码请登录后点击上方下载按钮下载查看
网友评论0