css布局实现服务器购买选择配置付款页面代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现服务器购买选择配置付款页面代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFW NEW PAGE</title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.range.css"> <style> .text-center {text-align: center;} .auto { margin: 0 auto; min-width: 1000px; max-width: 1200px } .line-introduction a:hover { color: #009FD9; } span.ip-unit { margin-left: 10px; } .btn-ctrl-layout .up, .btn-ctrl-layout .down { display: block; width: 28px; height: 14px; } .btn-ctrl-layout .up { } .btn-ctrl-layout .down { margin-top: 2px; } .btn-ctrl-layout .up:hover, .btn-ctrl-layout .down:hover { background-position-y: bottom; } .original-price { font-size: 16px; color: #555; } body { background-color: #fafafa; } a { text-decoration: none; } input { outline: none; font-family: "microsoft yahei"; } /* * 原åç±» */ .p-relative { position: relative; z-index: 10; } .margin-left-10 { margin-left: 10px; } /* * é‡ç½®ç»„件类(去除buy.cssåŽè¡¥å……çš„æ ·å¼ï¼‰ */ .ui-slider { position: relative; z-index: 10; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .ui-slider-horizontal { height: 26px; background-color: #ececec; } .ui-slider-range { position: absolute; height: 100%; border: 1px solid #009ed8; border-right: none; border-radius: 2px 0 0 2px; background: #00c0ef; } .ui-slider-handle { position: absolute; top: -4px; z-index: 10; width: 12px; height: 32px; cursor: pointer; } .input-reset { width: 280px; height: 30px; border: 1px solid #e0e0e0; padding-left: 10px; line-height: 30px; color: #4c4c4c; } .ny-number-input { padding-left: 10px; } .button-group { max-width: 614px; float: left; border: 0px; } .button-group a { float: left; position: relative; z-index: 10; width: 100px; height: 30px; margin-left: -1px; margin-bottom: 5px; border: 1px solid #dddddd; background-color: #fff; line-height: 30px; text-align: center; font-size: 12px; color: #4c4c4c; text-decoration: none } .button-ipa a { width: 70px; } .button-group a:first-child { border-radius: 2px 0 0 2px; } .button-group a:last-child { border-radius: 0 2px 2px 0; } .button-group a.single-btn { border-radius: 2px; } .button-group a.slt { z-index: 20; border-color: #009ed8; background-color: #00c0ef; color: #fff; } .button-group a.disable { background-color: #f2f2f2; border: 1px solid #dddddd; color: #4c4c4c; } .button-group a.disable:after { content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 16px; } .button-group.months-button-12 a { width: 47px; } .button-group.months-button-7 a { width: 70px; } .slider-length-middle { width: 460px; } .slider-length-long { width: 540px; } .slider-higher { height: 30px; } .slider-higher .ui-slider-handle { top: -5px; height: 40px; } /*线路特价*/ .button-group .area { float: left; position: relative; width: 100px; } .button-group .area i{ overflow: hidden; height: 21px; width: 22px; right: 5px; top: -16px; line-height: 20px; padding-bottom: 4px; display: block; text-align: center; position: absolute; font-style: normal; color: #fff; z-index: 100; -webkit-background-size: 100% 100%; background-size: 100% 100%; } /* * 去除common_f.cssåŽè¡¥å……çš„æ ·å¼ */ .main-content { /* 若直接使用`padding: 30px 0`则会导致`.auto`类在1200px以下的padding-left丢失 */ padding-top: 30px; padding-bottom: 30px; font-size: 12px; color: #777; } .goods-title { height: 40px; line-height: 40px; font-size: 22px; font-weight: normal; color: #555; } .goods-description { line-height: 26px; font-size: 14px; color: #999; } .config-panel { float: none; margin-right: 300px; } .shopping-area { margin-top: 15px; padding: 25px 15px 35px; border: 1px solid #eee; border-top: 3px solid #ff8400; } .config-row { margin-top: 20px; line-height: 30px; } .config-tier-panel .config-row:first-child { margin-top: 0; } .config-row-title { float: left; width: 90px; text-align: right; font-size: 12px; font-weight: normal; color: #999; } .config-row-title-shorter { line-height: 30px; } .config-row-content { float: left; margin-left: 15px; } .line-introduction { float: left; margin-left: 25px; padding-left: 20px; color: #009FD9; } .line-introduction a { color: #009fd9; } .line-slogan { position: absolute; left: 0; top: -25px; z-index: 10; margin-left: 160px; padding-bottom: 5px; } .line-slogan-content { height: 18px; padding: 0 10px; background: #ff8800; line-height: 18px; font-family: "Simsun"; font-size: 12px; color: white; } .config-input-container { margin-left: 10px; float:left; } .config-slider-input { float: left; width: 40px; height: 30px; border: 1px solid #ddd; border-radius: 2px 0 0 2px; line-height: 30px; text-align: center; color: #4c4c4c; } .config-input-unit { float: left; width: 30px; height: 30px; border: 1px solid #ddd; border-radius: 0 2px 2px 0; margin-left: -1px; background-color: #f5f5f5; line-height: 30px; text-align: center; } .config-slider-ruler { width: 460px; } .config-slider-ruler i { position: relative; float: left; width: 25%; height: 30px; line-height: 40px; font-style: normal; text-align: center; } .config-slider-ruler i:before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 6px; background: #ddd; } i.config-last-scale { width: 12.4%; text-align: right; } i.config-last-scale:before { left: inherit; right: 0; } .config-slider-ruler i:first-child { text-align: left; width: 12.5%; } .config-slider-ruler i:first-child:before { left: 0; } .config-view-outer { position: absolute; top: 30px; right: 0; z-index: 10; } .config-view-outer, .config-view-inner { width: 280px; } .config-view-title { height: 38px; padding-left: 20px; background: #009FD9; line-height: 38px; font-weight: normal; font-size: 16px; color: #fff; } .config-view-list { padding-top: 10px; padding-bottom: 10px; border: 1px solid #eee; background: #fff; color: #444; } .config-view-list li { padding: 7px 0; } .config-view-item-title { display: inline-block; width: 98px; padding-left: 20px; text-align: left; font-weight: normal; color: #999; vertical-align: top; } .config-view-list em { display: inline-block; max-width: 170px; font-style: normal; } .origin-price-outer { line-height: 1; } .config-view-item-price { font-weight: bold; font-size: 24px; color: #f60; } .config-view-list .padding-indent { padding-left: 40px; } .config-view-item-submit { margin-top: 10px; text-align: center; } .button-submit { display: inline-block; width: 220px; height: 32px; background: #ff8400; line-height: 32px; font-size: 16px; font-weight: normal; color: #fff; cursor: pointer; } .button-submit:hover { background: #ff6e00; } /* æ”¹ç‰ˆæ ·å¼ */ .buy-top { height: 62px; line-height: 60px; background-color: #fff; box-shadow: 1px 1px 3px rgba(58, 58, 58, 0.2); } .buy-top-title { border-left: 3px solid #009FD9; padding-left: 15px; } .server-slogan { margin-left: 10px; font-size: 12px; } .buy-top-right { padding-left: 27px; font-size: 14px; } .server-warn { margin-bottom: 20px; } .config-tier { position: relative; width: 100%; border: 1px solid #eee; background-color: #fff; margin-bottom: 10px; padding: 15px 0; } .config-tier-title { position: absolute; left: 0; top: 0; bottom: 0; width: 30px; background: #edf1f2; } .config-tier-title span { position: absolute; top: 50%; left: 50%; width: 1em; margin-top: -30px; margin-left: -6px; line-height: 1; color: #999; } .config-tier-title-4 span { margin-top: -24px; } .config-tier-panel { margin-left: 30px; padding: 10px 0; } .config-tier:hover .config-tier-title { background: #009FD9; } .config-tier:hover .config-tier-title span { color: #fff; } li.price-container { padding-top: 3px; } .price-title { width: 94px; vertical-align: bottom; } .server-price { font-size: 24px; } .rmb-symbol { font-size: 16px; } .gift-outer { margin-top: 10px; } .favorable-reminder { position: relative; display: inline-block; } .favorable-reminder:before { content: ""; position: absolute; top: -2px; left: -27px; width: 20px; height: 20px; } .server-buy-btn { display: inline-block; width: 88%; height: 36px; border: none; border-radius: 2px; margin-top: 10px; background-color: #ff8800; line-height: 36px; font-size: 16px; color: #fff; text-align: center; cursor: pointer; } .server-buy-btn:hover { background-color: #f37d00; color:#FFF; text-decoration: none } .server-buy-btn[disabled] { background-color: #ccc; cursor: not-allowed; } .add-disk-row { margin-top: 10px; } .show-disk-amount { margin-left: 20px; } .add-disk { display: inline-block; height: 30px; line-height: 30px; padding-left: 37px; color: #009FD9; } .delete-disk-row { display: inline-block; width: 10px; height: 10px; cursor: pointer; } .delete-disk-row:hover { } .buyfooter { background-color: #fff; } .footer-buyfooter { width: 100%; padding: 20px 0px 30px 0px; } .footer-buyfooter p, .footer-buyfooter a { margin-top: 8px; font-size: 12px; color: #999999; } .buyfooter-nav { margin-top: 20px; } .buyfooter-nav-list li { position: relative; float: left; margin: 0px 10px; height: 20px; line-height: 20px; } .buyfooter-nav-list li:before { position: absolute; left: -10px; top: 4px; content: ""; height: 14px; width: 1px; background: #aaaaaa; } .buyfooter-nav-list li:first-child:before { width: 0px; height: 0px; } .buyfooter-nav-list li a { display: inline-block; font-size: 14px; color: #4c4c4c; } .config-tip { display: inline-block; position: relative; width: 16px; height: 16px; z-index: 100; margin-left: 10px; vertical-align: middle; } .config-tip:hover .config-tip-content { display: block; } .config-tip-content { display: none; position: absolute; top: -96px; left: -43px; padding: 20px; width: 260px; line-height: 20px; background-color: #fff; -webkit-box-shadow: 1px 1px 3px 2px rgba(58, 58, 58, 0.2); border: 1px solid #ccc; } .config-tip .config-tip-content.config-tip-one { top: -74px; } .config-tip-content:before, .config-tip-content:after { content: ""; position: absolute; } .config-tip-content:before { border: 8px solid transparent; border-top-color: #fff; bottom: -16px; left: 20%; z-index: 10; margin-left: -8px; } .config-tip-content:after { border: 10px solid transparent; border-top-color: #ccc; bottom: -21px; left: 48px; z-index: 9; margin-left: -8px; } .ny-slider { /*margin: 100px 300px;*/ float: left; position: relative; width: 451px; height: 30px; padding: 0 8px; border: 1px solid #dddddd; border-left: none; background-color: #ffffff; border-radius: 2px; } .ny-slider-item { box-sizing: border-box; float: left; line-height: 29px; border-left: 1px solid #dddddd; text-align: right; cursor: pointer; } .ny-slider-item:first-child { border-left: none; } .slider-item-number { color: #999; margin-right: 8px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ny-slider-range { position: absolute; top: 0; left: 0; width: 0; height: 100%; padding: 0 8px; height: 30px; line-height: 30px; overflow: hidden; background-color: #00c0ef; transition: width 0.1s; -webkit-transition: width 0.1s; border: 1px solid #009fd9; border-right: none; border-radius: 2px 0 0 2px; margin-top: -1px; } .ny-slider-item-box { width: 450px; } .ny-slider-range-current { width: 450px; } .ny-slider-range-item { box-sizing: border-box; float: left; text-align: right; border-right: 1px solid #009fd9; cursor: pointer; } .ny-slider-range-item:last-child { border-right: none; } .range-item-number { color: #fff; margin-right: 8px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ny-slider-btn { position: absolute; top: -5px; left: 0; width: 16px; height: 40px; cursor: pointer; z-index: 3; transition: left 0.1s; -webkit-transition: left 0.1s; } /*bootstrap*/ .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; } .clearfix:after { clear: both; } .p-relative { position: relative; z-index: 10; } .line-row { position: relative; } /*主机详情*/ .show-configuration-box { padding: 15px 0px; margin-left: 30px; } .show-configuration-box hr { border: none; margin: 5px 30px 15px; background-color: #ddd; height: 1px; } .show-configuration-box .configuration-item { float: left; width: 50%; height: 40px; line-height: 40px; font-size: 12px; padding:10px; box-sizing: border-box; list-style: none; } .configuration-item .config-name { float: left; width: 90px; text-align: right; color: #999999; } .configuration-item .config-value { float: left; display: block; padding-left: 15px; color: #000033; } .line-tip { position: absolute; height: 23px; padding: 0 10px; margin-top: -30px; margin-left: 55px; line-height: 18px; color: rgb(255, 255, 255); font-size: 12px; z-index:99; } .hui-icon { display: none; position: absolute; width: 18px; height: 16px; top: -1px; right: -1px; z-index: 9; } .number-control .number-control-up { top: 0; background-image: url(//repo.bfw.wiki/bfwrepo/image/6070ea24c5c5f.png); } .number-control .number-control-down { bottom: 0; background-image: url(//repo.bfw.wiki/bfwrepo/image/6070ea4e4bd1a.png); } .number-container { float: left; position: relative; border: 1px solid #ddd; border-radius: 2px; } .number-container input { height: 29px; width: 35px; border: none; line-height: 29px; margin-right: 5px; } .number-unit { color: #999; width: 30px; height: 100%; background: #f2f2f2; line-height: 31px; text-align: center; border-left: 1px solid #ddd; } .number-control { display: inline-block; position: relative; z-index: 10; width: 31px; height: 31px; border-left:1px solid #ddd; } .number-control span { display: block; width: 31px; height: 15px; cursor: pointer; } .number-control-down{ border-top:1px solid #ddd; } .number-input-box,.ny-number-input,.number-control,.number-unit{ float: left; } } .warn-panel{ display: none; width: 863px; padding-left: 37px; background-color: #fff3e5; border: 1px solid #ff8800; color: #ff8800; font-size: 14px; line-height: 4em; margin-bottom: 10px; } .warn-panel img{ display: inline-block; padding-right: 10px; } .warn-panel i{ font-style: normal; font-size: 16px; font-weight: bold; color: red; } .info-panel{ margin-right: 300px; padding:20px 0 10px 30px; background-color: #e9f9ff; border: 1px solid #009fd9; color: #009fd9; font-size: 14px; margin-bottom: 10px; line-height: 2em} .info-panel img{ display: inline-block; padding-right: 10px; } /*.info-panel i{ font-style: normal; font-size: 16px; font-weight: bold; color: red; } .info-panel h3{line-height: 35px;font-size: 16px;} .info-panel p{line-height: 26px;margin-left: 40px;}*/ .success-panel{ width: 863px; padding-left: 37px; background-color: #f8fff7; border: 1px solid #32ca00; color: #32ca00; font-size: 14px; line-height: 4em; margin-bottom: 10px; } .success-panel img{ display: inline-block; padding-right: 10px; } .success-panel i{ font-style: normal; font-size: 16px; font-weight: bold; color: red; } .config-view-list{ list-style: none; padding: 0; margin: 0; } .theme-green .back-bar { height: 32px !important; } </style> </head> <body> <div class="main-content auto clearfix p-relative"> <div class="config-choices config-panel" id="serverConfigsChoose"> <div class="config-tier"> <div class="config-tier-title"> <span>地域与配置</span> </div> <div class="config-tier-panel"> <div class="config-row clearfix"> <span class="config-row-title">地域:</span> <div class="config-row-content"> <div class="butBox button-group" id="areas"> <div class="area"><a href="javascript:;" class="slt enable">香港多线</a></div> <div class="area"><a href="javascript:;" class=" enable">韩国多线</a></div> <div class="area"><a href="javascript:;" class=" enable">中国多线</a></div> </div> <div class="introUrl line-introduction"><a href=""></a></div> </div> </div> <div class="config-row clearfix"> <span class="config-row-title">套餐:</span> <div class="config-row-content"> <div class="butBox button-group" id="taocan"> <a href="javascript:;" data-id="2" data-cpu="4" data-memory="2" data-disk="60" data-wide="2" data-price="168" class="slt">标准型</a><a href="javascript:;" data-id="3" data-cpu="4" data-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0