1.关于如何将3列内容对齐,如图所示
可以用BootsTrap中的 栅格系统来做并且设置col-md属性
html代码
<section id="tese">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<a href="#">
<div class="media">
<div class="media-left">
<i class="icon-uniE907"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全程保障支付安全</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-4">
<a href="#">
<div class="media">
<div class="media-left">
<i class="icon-uniE907"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全程保障支付安全</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-4">
<a href="#">
<div class="media">
<div class="media-left">
<i class="icon-uniE907"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全程保障支付安全</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-4">
<a href="#">
<div class="media">
<div class="media-left">
<i class="icon-uniE907"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全程保障支付安全</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-4">
<a href="#">
<div class="media">
<div class="media-left">
<i class="icon-uniE907"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全程保障支付安全</p>
</div>
</div>
</a>
</div>
<div class="col-sm-6 col-md-4">
<a href="#">
<div class="media">
<div class="media-left">
<i class="icon-uniE907"></i>
</div>
<div class="media-body">
<h4 class="media-heading">支付交易保障</h4>
<p>银联支付全程保障支付安全</p>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
css代码
#tese{
padding:50px 0;
border-bottom: 1px solid #c0c0c0;
}
.icon-uniE907::before{
content:"\e907";
}
#tese i{
font-size:34px;
}
#tese > .container > .row >div{
margin-top:20px;
margin-bottom:20px;
}
2.如何将文字左右布局(如图),这就要用到pull-left,pull-right来让左右浮动,不会出现一上一下的情况。
html代码
<section id="ljyy">
<div class="container">
<p class="pull-left"><i class="icon-uniE906"></i>现在有 <span>458</span>人在排队,累计预约交易成功 <span>7409</span>次。
什么是预约投标?<a href="">立即预约</a></p>
<p class="pull-right">
<i class="icon-uniE905"></i>
微金所企业宣传片
</p>
</div>
</section>
css代码
#ljyy{
border-bottom:1px solid #c0c0c0;
}
#ljyy >.container p{
line-height:50px;
font-size:14px;
}
#ljyy >.container .pull-left span,#ljyy >.container .pull-left a{
color:#E92322;
}
#ljyy >.container > .pull-left > a:hover{
text-decoration: none;
}
.icon-unoE906:before{
content:"\906";
}
.icon-uniE905:before{
content:"\e905";
}
3.如何做这种盒子中的栅格布局
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="panel panel-czbk">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
<h5>新手体验表0008期</h5>
<div class="row">
<div class="col-xs-6 text-left">
<p>起步价</p>
<p><strong>1000.00</strong><sub>万</sub></p>
</div>
<div class="col-xs-6 text-right">
<p>起步价</p>
<p><strong>1000.00</strong><sub>万</sub></p>
</div>
<div class="col-xs-6 text-left">
<p>起步价</p>
<p><strong>1000.00</strong><sub>万</sub></p>
</div>
<div class="col-xs-6 text-right">
<p>起步价</p>
<p><strong>1000.00</strong><sub>万</sub></p>
</div>
</div>
</div>
</div>
</div>
css代码,因为p标签在bootstrap中自带margin-bottom10像素,所以会被撑开,我们将他消除。
#products > .container > .tab-content p{
margin-bottom:0px;
}
4如何实现tab选项卡加下拉菜单的样式并且点击下拉菜单也可以进行跳转如图
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation" class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">落下</a>
<ul class="dropdown-menu" aria-labelledby="myTabDrop1" >
<li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown2">@fat</a></li>
<li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
</ul>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">.21</div>
<div role="tabpanel" class="tab-pane" id="messages">.212.</div>
<div role="tabpanel" class="tab-pane" id="dropdown1">
bbbbb
</div>
<div role="tabpanel" class="tab-pane" id="dropdown2">
aaaaaaaa
</div>
</div>
5.针对这种缩放之后超出了手机屏幕宽度(如图),我们可以采用overflow-x:scroll,给他添加横向滚动条,
首先解决排版乱的问题,因为父元素没有宽度,所以先动态设置一个宽度
/*控制标签页的标签容器宽度*/
var $ulContainer = $('.nav-tabs');
//获取所有子元素的宽度和
var width = 30; //因为原本ul上有padding-left:20
//遍历子元素
$ulContainer.children().each(function(index,element){
//console.log(element.clientWidth)
width += element.clientWidth;
});
//此时width等于所有li宽度的总和
$ulContainer.css('width',width);
这样就让字在同一行显示了,并会出现上面超出手机宽度的问题,如何解决给父元素添加一行css代码
#products > .container >.ul-wapper{
overflow-x: scroll;
}
这下就没有下面的横向滚动条了。
6.如何修改radio默认样式如图,其实就是伪元素的应用
html代码
<div class="radio">
<label>
<input type="radio" class="radio_type" name="optionsRadios" id="optionsRadios1" value="option1" checked>
<p>购买设计</p>
</label>
</div>
<div class="radio">
<label>
<input type="radio" class="radio_type" name="optionsRadios" id="optionsRadios2" value="option2">
<p>购买设计 + 尺寸</p>
</label>
</div>
css代码
input[type="radio"]:hover,
input[type="radio"]:focus {
outline: none;
}
.radio_type {
width: 20px;
height: 20px;
appearance: none;
position: relative;
}
.radio_type:before {
content: "";
width: 15px;
height: 15px;
border: 1px solid #000;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked::before {
content: "";
width: 15px;
height: 15px;
border: 1px solid #c30e23;
display: inline-block;
border-radius: 50%;
vertical-align: middle;
}
.radio_type:checked::after {
content: "";
width: 9px;
height: 9px;
text-align: center;
background: #c30e23;
border-radius: 50%;
display: block;
position: absolute;
top: 8px;
left: 3px;
}