css布局pc端服务介绍页面代码
代码语言:html
所属分类:布局界面
代码描述:css布局pc端服务介绍页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>云生态计划</title> <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: #fff; 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 */ .banner-background{ margin-top: -60px; height: 532px; background: #333 url(//repo.bfw.wiki/bfwrepo/image/60e197d4ac32a.png) center top no-repeat; background-size: 1920px 542px; padding: 80px 0; text-align: center; } .banner-container{ width:1180px; margin:0 auto; position:relative; } .banner-container h2{ font-size: 42px; line-height: 64px; color: #FFF; margin-top: 70px; font-weight:normal; } .banner-container p{ margin-top: 10px; font-size: 16px; color: #FFF; opacity: .8; filter: alpha(opacity=80); line-height: 30px; } .banner-btn a{ display: inline-block; width: 158px; height: 36px; background-color: #108CEE; border: 1px solid #108CEE; color: #FFF; font-size: 14px; line-height: 35px; cursor: pointer; margin-top: 40px; } .banner-btn a:hover{ background-color: #1F9AFD; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .banner-btn .banner-btn-02{ margin-left: 20px; background-color: transparent; border: 1px solid #FFF; } .banner-btn .banner-btn-02:hover{ background-color: #FFF; color: #333; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .banner-list{ padding: 0; text-align: center; } .b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0