发表于： 2020-03-26 21:36:12
1 1531
今日完成
task8页面二 企业列表
明日计划
完成task8页面三
成果
使用bootstrap的滑动门组件完成
并根据屏幕大小自适应改变样式
html
<img class="d-block w-100" src="../../img/task8/task8_coop.jpg" alt="标题图片">
<div class="container">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">首页</a></li>
<li class="breadcrumb-item active" aria-current="page">合作企业</li>
</ol>
<div class="main-coop-list ">
<!-- 列表头 -->
<div class="coop-list-wrap">
<h3>合作企业</h3>
<div id="coop-list" class="nav coop-list-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="coop-list-01-tab" data-toggle="pill" href="#coop-list-01"
aria-controls="coop-list-01" aria-selected="ture"><span>阿里巴巴  </span></a>
<a class="nav-link" id="coop-list-02-tab" data-toggle="pill" href="#coop-list-02"
aria-controls="coop-list-02" aria-selected="false"><span>腾讯视频  </span></a>
<a class="nav-link" id="coop-list-03-tab" data-toggle="pill" href="#coop-list-03"
data-controls="coop-list-03"
aria-selected="false"><span>土豆网    </span></a>
<a class="nav-link" id="coop-list-04-tab" data-toggle="pill" href="#coop-list-04"
data-controls="coop-list-04" aria-selected="false"><span>北京葡萄藤</span></a>
<a class="nav-link" id="coop-list-05-tab" data-toggle="pill" href="#coop-list-05"
data-controls="coop-list-05"
aria-selected="false"><span>金山云    </span></a>
<a class="nav-link" id="coop-list-06-tab" data-toggle="pill" href="#coop-list-06"
data-controls="coop-list-06" aria-selected="false"><span>环信通讯云</span></a>
<a class="nav-link" id="coop-list-07-tab" data-toggle="pill" href="#coop-list-07"
data-controls="coop-list-07" aria-selected="false"><span>容联云通信</span></a>
<a class="nav-link" id="coop-list-08-tab" data-toggle="pill" href="#coop-list-08"
data-controls="coop-list-08" aria-selected="false"><span>七牛云储存</span></a>
</div>
</div>
<div id="coop-list-tabcontent" class="tab-content">
<div id="coop-list-01" class="coop-list-01 coop-list-introduction tab-pane fade show active"
role="tabpanel " aria-lavelledby="coop-list-01-tab">
<div class="introduction-content-wrap">
<div class="introduction-content-header">
<img src="../../img/task8/task8_logo02.jpg" alt="阿里巴巴">
<p>.....</p>
</div>
<div class="introduction-content">
<p>.....</p>
<p>.....</p>
</div>
</div>
</div>
..............
</div>
css
.coop-list-tab span {
position: relative;
font-size: 1.5rem;
color: #32c086;
}
#coop-list a.active span,
.coop-list-tab span:hover {
color: #ff650e;
}
.coop-list-tab span::before {
content: '';
position: absolute;
top: 0.3rem;
left: -2rem;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
background-color: #fff;
border: 0.15rem solid #ff650e;
border-radius: 50%;
}
#coop-list a.active span::before,
.coop-list-tab span:hover:before {
background-color: #f9a372;
}
.coop-list-wrap h3 {
color: #333;
text-align: center;
line-height: 6rem;
font-weight: bold;
border-bottom: 0.1rem solid #e6e6e6;
}
.coop-list-introduction {
background-color: #fff;
}
.introduction-content-header {
font-size: 1.4rem;
border-bottom: 0.1rem solid #e6e6e6;
}
.introduction-content-wrap p {
margin: 1rem 0;
font-size: 1.4rem;
color: #999;
line-height: 3rem;
padding: 0 15px;
}
.breadcrumb {
background-color: #fafafa;
line-height: 4rem;
font-size: 2rem;
}
.breadcrumb-item.active {
color: #32c086;
}
.breadcrumb-item+.breadcrumb-item::before {
content: ">";
/* display: inline-block;
padding-right: .5rem;
color: #6c757d; */
}
/* ---------- pc端 ------------- */
@media screen and (min-width:768px) {
.main-coop-list {
display: flex;
align-items: flex-start;
margin: 0 auto 3rem auto;
}
.coop-list-wrap {
float: left;
width: 25rem;
background-color: #fff;
border-radius: 0.5rem;
box-shadow: 1px 2px 3px rgba(0, 0, 0, .2);
}
.coop-list-tab {
flex-direction: column;
align-items: center;
margin-left: -1rem;
width: 30rem;
}
.coop-list-tab a {
margin: 1rem 0;
}
.coop-list-introduction {
min-height: 70rem;
margin-left: 4rem;
border-radius: 0.5rem;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .2);
}
.introduction-content-header {
display: flex;
align-items: center;
padding: 0 5rem;
}
.introduction-content-header img {
margin-right: 3rem;
}
.introduction-content {
padding: 0 5rem;
}
.introduction-content p:last-child {
padding-bottom: 10rem;
}
.introduction-content-wrap {
flex: 1;
}
}
@media screen and (max-width:992px) {
.introduction-content-header {
flex-direction: column;
width: 100%;
}
}
/* --- 移动端---- */
@media screen and (max-width:767px) {
.coop-list-wrap {
width: 100%;
margin-top: 3rem;
background-color: #fff;
color: #32c086;
border-radius: 0.3rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.coop-list-tab {
margin-bottom: 2rem;
}
.coop-list-tab a {
padding-left: 4rem;
}
.coop-list-introduction {
width: 100%;
background-color: #fff;
border-radius: 0.3rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.introduction-content-header {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
}
返回列表
评论