懒人的府邸。只是为了学习备份。收藏精品。

添加banner样式

本文最后更新于2018年11月7日,已超过 1 年没有更新,涉及的内容可能已经失效!
文章目录[隐藏]

CSS


/* focusbanner =================================*/
.focusbanner {
text-align: center;
margin-bottom: 20px;
height: 200px;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.focusbanner .container {
padding-top: 88px;
padding-right: 60px;
text-align: right;
}
.focusbanner .btn {
margin-left: 10px;
}
/* btn====================================================================================== */
.btn {
display: inline-block;
padding: 6px 15px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 2px;
}
.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.btn:hover, .btn:focus, .btn.focus {
color: #333;
text-decoration: none;
}
.btn:active, .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
a.btn.disabled, fieldset[disabled] a.btn {
pointer-events: none;
}
.btn-default {
color: #555;
background-color: #fff;
border-color: #d6d6d6;
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
color: #333;
background-color: #e6e6e6;
border-color: #bbb;
}
.btn-primary {
color: #fff;
background-color: #00AAEE;
border-color: #00AAEE;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
color: #fff;
background-color: #00A1EC;
border-color: #00A1EC;
}
.btn-success {
color: #fff;
background-color: #50CD7C;
border-color: #50CD7C;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
color: #fff;
background-color: #3CC76D;
border-color: #3CC76D;
}
.btn-danger {
color: #fff;
background-color: #FF8966;
border-color: #FF8966;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
color: #fff;
background-color: #FF6F44;
border-color: #FF6F44;
}
.btn-whrite {
color: #555;
background-color: #fff;
border-color: #fff;
}
.btn-whrite:hover, .btn-whrite:focus, .btn-whrite:active {
color: #333;
background-color: #fff;
border-color: #fff;
}
.btn-xs {
padding: 2px 6px;
font-size: 12px;
}
.btn-sm {
padding: 4px 12px;
}
.btn-lg {
font-size: 20px;
border-radius: 4px;
padding: 10px 25px;
}
.btn-block {
width: 100%;
}
/* ebox===================================================================================== */
.eboxx {
overflow: hidden;
font-size: 12px;
text-align: center;
background-color: #fff;
margin-bottom: 20px;
}
.eboxx h4 {
font-size: 14px;
color: #444;
margin: 10px 0;
}
.eboxx-i {
position: relative;
float: left;
width: 20%;
padding: 20px;
background-color: #fff;
color: #777;
}
.eboxx-01, .eboxx-02, .eboxx-03, .eboxx-04 {
border-right: 2px solid #eee;
}
.eboxx-i:hover {background-color: #F9F9F9;}
.eboxx-i p {height: 36px;overflow: hidden;color: #bbb;}
@media (max-width: 1024px) {
.eboxx .btn-default {display: none;}
.eboxx h4 {height: 20px;overflow: hidden;}
}
@media (max-width: 860px) {
.eboxx .eboxx-100 {display: none;}
.eboxx-i {width: 25%;}
.eboxx-04 {border-right: none;}
}
@media (max-width: 640px) {
.eboxx-i {width: 50%;}
.eboxx-01 {border-bottom: 2px solid #eee;}
.eboxx-02 {border-right: none;border-bottom: 2px solid #eee;}
}
@media (max-width: 480px) {
.eboxx-i {padding: 10px 15px 15px;}
.eboxx h4 {margin-bottom: 0;}
.eboxx-i p {margin: 5px 0}
}

fou


<div class="focusbanner" style="background-image:url(http://themebetter.com/static/bg/bg_04.jpg)">
<div class="container"> <a href="javascript:;" class="signin-loader"><p class="btn btn-primary">登录 NPIE</p></a> <a href="javascript:;" class="signup-loader"><p class="btn btn-whrite">我要注册</p></a> </div>
</div>
 
 
<div class="container">
<ul class="eboxx">
<li class="eboxx-i eboxx-01">
<h4>DUX主题</h4>
<p>扁平化、简洁白色、多设备支持、多功能配置</p>
<a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="https://lvnn.cn">IT技术</a>
<a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="https://lvnn.cn">查看演示</a>
</li>
<li class="eboxx-i eboxx-02">
<h4>XIU主题</h4>
<p>扁平化、简洁风格,适用于图片展示站点和个人博客</p>
<a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="https://lvnn.cn">专题</a>
<a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="https://lvnn.cn">查看演示</a>
</li>
<li class="eboxx-i eboxx-03">
<h4>D8主题</h4>
<p>大气设计,适用于企业站、行业垂直站、团站及个人博客</p>
<a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="https://lvnn.cn">专题</a>
<a class="btn btn-sm btn-default" target="_blank" rel="nofollow" href="https://lvnn.cn">查看演示</a>
</li>
<li class="eboxx-i eboxx-04">
<h4>D-Simple主题</h4>
<p>简洁2栏,适用于个人站点及团队博客</p>
<a class="btn btn-sm btn-primary" target="_blank" rel="nofollow" href="https://lvnn.cn">专题</a>
</li>
<li class="eboxx-i eboxx-100">
<h4>WordPress主题定制</h4>
<p>完全按照您的需求量身打造,此项服务需要排期,具体请联系我们</p>
<a class="btn btn-sm btn-danger" target="_blank" rel="nofollow" href="https://lvnn.cn">联系我们</a>
</li>
</ul>
</div>
赞(0) 打赏
未经允许不得转载:懒人驿站 » 添加banner样式
分享到: 更多 (0)
标签:

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏