css布局实现问答排行用户排行专家求助效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现问答排行用户排行专家求助效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* 公共样式表css */html,body { color: #333; margin: 0; height: 100%; font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: normal; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; color: #000; } img { border: 0; } body { background: #f8f8f8; color: #666; } html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td { margin: 0; padding: 0; } a { text-decoration: none; color: #08acee; } button { outline: 0; } img { border: 0; } button,input,optgroup,select,textarea { margin: 0; font: inherit; color: inherit; outline: none; } li { list-style: none; } a { color: #666; } a:hover { color: #eee; } .clearfix::after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix {}/* 必要布局样式css */.ques-section { width: 960px; margin: 0 auto 10px; padding: 20px; border-radius: 2px; background-color: #fff; } .ques-section-item { width: 293px; position: relative; float: left; } .ques-item-title { font-size: 18px; line-height: 24px; margin-bottom: 15px; font-weight: normal; color: #333; } .ques-section-card { position: relative; height: 424px; text-align: center; border: 1px solid #f2f2f2; border-radius: 2px; background-color: #fafafa; } .ques-card-head { position: absolute; top: 0; left: 0; width: 100%; height: 30px; padding-top: 48px; border-radius: 2px 2px 0 0; } .ques-card-gul { background-color: #f55727; background-image: -webkit-radial-gradient(50% 3%,circle,#f07a56,#f55727); background-image: radial-gradient(circle at 50% 3%,#f07a56,#f55727); height: 78px; } .ques-card-org { background-color: #f59b00; background-image: -webkit-radial-gradient(50% -6%,circle,#ffb83d 2%,#f59b00); background-image: radial-gradient(circle at 50% -6%,#ffb83d 2%,#f59b00); height: 78px; } .ques-card-bul { background-color: #397bee; background-image: -webkit-radial-gradient(50% -45%,circle,#53a7f5,#397bee); background-image: radial-gradient(circle at 50% -45%,#53a7f5,#397bee); height: 78px; } .ques-card-title { font-size: 18px; font-weight: 500; line-height: 24px; position: relative; padding-top: 15px; color: #fff; } .ques-card-text { line-height: 18px; position: relative; margin-top: 6px; opacity: .7; color: #fff; font-weight: normal; } .ques-card-num { overflow: hidden; margin: 40px auto 0; border-radius: 50%; position: relative; display: block; width: 80px; height: 80px; } .ques-card-num:before { position: absolute; top: 0; left: 0; width: 76px; height: 76px; content: ''; border: 2px solid rgba(255,255,255,.9); border-radius: 100%; } .ques-card-num:hover:before { background-color: rgba(0,0,0,.3); } .ques-card-num img { width: 100%; height: auto; display: block; border: none; } .ques-card-name { font-size: 18px; line-height: 24px; margin-top: 10px; } .ques-card-major { line-height: 18px; margin-top: 6px; color: #a3a3a3; } .ques-card-field { font-size: 12px; line-height: 18px; height: 18px; margin-top: 25px; text-align: center; color: #000; } .ques-card-tag { font-size: 12px; margin: 6px 0 25px; } .ques-card-tag span { line-height: 17px; display: inline-block; max-width: 84px; height: 18px; padding: 0 6px; color: #fa9600; border: 1px solid #f5cc84; border-radius: 2px; margin: 0 4px; } .ques-card-help { display: block; margin: 20px auto; line-height: 29px; width: 90px; height: 30px; text-align: center; color: #fff; border-radius: 2px; background-color: #2fa9f1; } .ques-card-bots { line-height: 18px; margin-top: 25px; color: #a3a3a3; } .ques-section-item+.ques-section-item { margin-left: 20px; } .ques-card-title-top { padding: 27px 0; } .ques-card-list { text-align: left; } .ques-card-list li { position: relative; } .ques-card-list-noe:before { position: absolute; z-index: 2; top: 6px; left: 37px; display: block; content: ''; background-position: -115px -44px; width: 20px; height: 20px; background-image: url("//repo.bfw.wiki/bfwrepo/image/60fd522056356.png"); } .ques-card-list-three:before { position: absolute; z-index: 2; top: 6px; left: 37px; display: block; content: ''; background-position: -115px -88px; width: 20px; height: 20px; background-image: url("//repo.bfw.wiki/bfwrepo/image/60fd522056356.png"); } .ques-card-list li:after { position: absolute; bottom: 0; left: 10px; display: block; width: 280px; height: 1px; content: ''; background-color: #ededed; } .ques-list-box { position: relative; display: block; height: 69px; padding: 16px 15px 17px; } .ques-list-head { position: relative; float: left; padding-right: 8px; } .ques-list-image { position: relative; display: block; width: 36px; height: 36px; z-index: 2; margin: 0 auto; } .ques-list-image:before { position: absolute; top: 0; left: 0; width: 32px; height: 32px; content: ''; border: 2px solid #f87851; border-radius: 100%; } .ques-list-image img { border-radius: 100%; width: 100%; height: auto; display: block; border: none; } .ques-list-name { overflow: hidden; margin-right: 33px; } .ques-list-name-head { line-height: 18px; color: #333; } .ques-list-name-text { font-size: 12px; line-height: 16px; margin-top: 2px; color: #a3a3a3; } .ques-list-name-icon { font-size: 12px; line-height: 24px; position: absolute; top: 50%; right: 14px; display: block; margin-top: -13px; text-align: center; color: #fff; background-position: 0 -60px; width: 25px; height: 25px; background-image: url("//repo.bfw.wiki/bfwrepo/image/60fd522056356.png") } .item-icon001 { background-position: -62px -27px; width: 25px; height: 25px; display: block; } .item-icon002 { background-position: -62px 0; width: 25px; height: 25px; } .item-icon003 { background-position: -28px -32px; width: 25px; height: 25px; } .item-icon004 { background-position: 0 -60px; width: 25px; height: 25px; } .item-icon005 { background-position: 0 -60px; width: 25px; height: 25px; } .ques-list-box:hover { cursor: pointer; background-color: #f5f5f5; } .ques-card-list-two:before { background-position: -115px -66px; width: 20px; height: 20px; position: absolute; z-index: 2; top: 6px; left: 37px; display: block; content: ''; background-image: url(//repo.bfw.wiki/bfwrepo/image/60fd522056356.png); } </style> </head> <body> <div style="height:50px;"></div> <div class="ques-section clearfix"> <div class="ques-section-item"> <h2 class="ques-item-title">问问专家</h2><div class="ques-section-card"> <div class="ques-card-head ques-card-gul"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="323px" height="30px" xml:space="preserve"><defs><pattern id="water" width=".25" height="1.1" patternContentUnits="objectBoundingBox"><path fill="#fff" d="M0.25,1H0c0,0,0-0.659,0-0.916c0.083-0.303,0.158,0.334,0.25,0C0.25,0.327,0.25,1,0.25,1z"></path></pattern><g id="eff"><rect fill="url(#water)" x="-119.461" y="0" width="1200" height="120" opacity="0.1"><animate attributeType="xml" attributeName="x" from="-300" to="0" repeatCount="indefinite" dur="10s"></animate></rect><rect fill="url(#water)" y="5" width="1600" height="125" opacity="0.1" x="-399.447"><animate attributeType="xml" attributeName="x" from="-400" to="0" repeatCount="indefinite" dur="13s"></animate></rect></g></defs><use xlink:href="#eff" opacity="1" style="mix-blend-mode:normal;"></use></svg> </div> <div class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0