Kandungan halaman utama pembangunan responsif H5 (2)
Kandungan halaman utama
Kami terus menambah kandungan halaman utama apabila bahagian atas kandungan kami dipaparkan.
Anda boleh menambah kandungan terperinci pada setiap lajur di sini.
Buat kotak <tab2>, tambah bekas baharu dan bahagikan bekas kepada dua bahagian, satu bahagian untuk meletakkan gambar. Sebahagian daripadanya digunakan untuk meletakkan teks.
<div class="tab2"> <div class="container"> <div class="row"> <div class="col-md-6 "> <h3>師資力量</h3> <p>PHP中文網(wǎng)的課程及時(shí)的更新，讓我們自學(xué)的學(xué)員有更好的路線。</p> </div> <div class="col-md-6"> <img src="https://img.php.cn/upload/course/000/000/004/581ae02a3af3d343.jpg" class="img-responsive center-block" alt=""> </div> </div> </div> </div>
Kemudian kawal gaya
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#myCarousel{
margin: 50px 0 0 0;
}
.logo{
padding: 0;
}
.daohang{
margin-top: 0;
}
.carousel-inner img{
margin: 0 auto;
}
.tab-h2{
font-size: 30px;
text-align: center;
color: #0059b2;
}
.tab-p{
font-size: 18px;
text-align: center;
letter-spacing: 1px;
color: #999;
margin: 20px 0 40px 0 ;
}
.tab1{
margin: 30px 0;
color: #666;
}
.tab1 .text-muted{
color: #999;
text-decoration: line-through;
}
.tab1 .media-heading{
margin: 5px 0 20px 0 ;
}
.tab1 .col{
padding: 20px;
}
.tab2{
background-color: #eee;
padding: 60px 20px;
text-align: center;
}
.tab2 img{
width: 40%;
height: 40%;
}
Teruskan menambah gaya kandungan dan mengubah suainya.
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>PHP中文網(wǎng)</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
#myCarousel{
margin: 50px 0 0 0;
}
.logo{
padding: 0;
}
.daohang{
margin-top: 0;
}
.carousel-inner img{
margin: 0 auto;
}
.tab-h2{
font-size: 30px;
text-align: center;
color: #0059b2;
}
.tab-p{
font-size: 18px;
text-align: center;
letter-spacing: 1px;
color: #999;
margin: 20px 0 40px 0 ;
}
.tab1{
margin: 30px 0;
color: #666;
}
.tab1 .text-muted{
color: #999;
text-decoration: line-through;
}
.tab1 .media-heading{
margin: 5px 0 20px 0 ;
}
.tab1 .col{
padding: 20px;
}
.tab2{
background-color: #eee;
padding: 60px 20px;
text-align: center;
}
.tab2 img{
width: 40%;
height: 40%;
}
.tab3{
padding: 40px 0 ;
text-align: center;
}
.tab3 img{
width: 40%;
height: 30%;
}
.text h3{
font-size: 26px;
}
.tab4{
background-color: #eee;
padding: 60px 20px;
text-align: center;
}
.tab4 img{
width: 40%;
height: 40%;
}
.tab5{
padding: 40px 0 ;
text-align: center;
}
.tab5 img{
width: 40%;
height: 30%;
}
.text h4{
font-size: 26px;
}
.text{
padding-top: 20px;
}
.text p{
font-size: 18px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand logo" ><img src="https://img.php.cn/upload/course/000/000/004/5819475ea4910787.png" height="50" alt="PHP中文網(wǎng)"></a>
<button type="button"class="navbar-toggle"data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse"id="navbar-collapse">
<ul class="nav navbar-nav navbar-right daohang " >
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首頁(yè)</a></li>
<li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> 資訊</a></li>
<li><a href="#"><span class="glyphicon glyphicon-fire"></span> 實(shí)例</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 關(guān)于我們</a></li>
</ul>
</div>
</div>
</nav>
<div id="myCarousel" class="carousel slide">
<!-- 輪播（Carousel）指標(biāo) -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 輪播（Carousel）項(xiàng)目 -->
<div class="carousel-inner">
<div class="item active" style="background: #E2DACF">
<img src="https://img.php.cn/upload/course/000/000/004/58195a76b3e4e324.jpg" alt="第一張">
</div>
<div class="item" style="background: #000000">
<img src="https://img.php.cn/upload/course/000/000/004/58195a9240209277.jpg" alt="第二張">
</div>
<div class="item" style="background: #FEDF85">
<img src="https://img.php.cn/upload/course/000/000/004/58195abe6d829108.jpg" alt="第三章">
</div>
</div>
<!-- 輪播（Carousel）導(dǎo)航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="tab1">
<div class="container">
<h2 class="tab-h2">為什么選擇在PHP中文網(wǎng)學(xué)習(xí)編程？</h2>
<p class="tab-p">PHP中文網(wǎng)有著海量的編程資源，在線答疑，專人解惑。</p>
<div class="row">
<div class="col-md-6 col" >
<div>
<div class="media-left">
<a href=""><img src="https://img.php.cn/upload/course/000/000/004/581ae307c59ff537.jpg" class="media-object" alt=""></a>
</div>
<div class="media-body">
<h4 class="media-heading">學(xué)習(xí)質(zhì)量</h4>
<p class="text-muted">其他教育視頻網(wǎng)站的資源雜亂，內(nèi)容缺失，課程不完整，自學(xué)難度大。</p>
<p>PHP中文網(wǎng)的課程及時(shí)的更新，讓我們自學(xué)的學(xué)員有更好的路線。</p>
</div>
</div>
</div>
<div class="col-md-6 col">
<div class="media-left">
<a href=""><img src="https://img.php.cn/upload/course/000/000/004/581ae307c59ff537.jpg" class="media-object" alt=""></a>
</div>
<div class="media-body">
<h4 class="media-heading">師資力量</h4>
<p class="text-muted">其他教育視頻網(wǎng)站的資源雜亂，內(nèi)容缺失，課程不完整，自學(xué)難度大。</p>
<p>PHP中文網(wǎng)的課程及時(shí)的更新，讓我們自學(xué)的學(xué)員有更好的路線。</p>
</div>
</div>
<div class="col-md-6 col" >
<div class="media-left">
<a href=""><img src="https://img.php.cn/upload/course/000/000/004/581ae307c59ff537.jpg" class="media-object" alt=""></a>
</div>
<div class="media-body">
<h4 class="media-heading">學(xué)習(xí)安排</h4>
<p class="text-muted">其他教育視頻網(wǎng)站的資源雜亂，內(nèi)容缺失，課程不完整，自學(xué)難度大。</p>
<p>PHP中文網(wǎng)的課程及時(shí)的更新，讓我們自學(xué)的學(xué)員有更好的路線。</p>
</div>
</div>
<div class="col-md-6 col" >
<div class="media-left">
<a href=""><img src="https://img.php.cn/upload/course/000/000/004/581ae307c59ff537.jpg" class="media-object" alt=""></a>
</div>
<div class="media-body">
<h4 class="media-heading">服務(wù)團(tuán)隊(duì)</h4>
<p class="text-muted">其他教育視頻網(wǎng)站的資源雜亂，內(nèi)容缺失，課程不完整，自學(xué)難度大。</p>
<p>PHP中文網(wǎng)的課程及時(shí)的更新，讓我們自學(xué)的學(xué)員有更好的路線。</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab2">
<div class="container">
<div class="row">
<div class="text col-md-6 col-sm-6">
<h3>師資力量</h3>
<p>PHP中文網(wǎng)的課程及時(shí)的更新，讓我們自學(xué)的學(xué)員有更好的路線。</p>
</div>
<div class="col-md-6">
<img src="https://img.php.cn/upload/course/000/000/004/581ae02a3af3d343.jpg" class="img-responsive center-block" alt="">
</div>
</div>
</div>
</div>
<div class="tab3">
<div class="container">
<div class="row">
<div class="col-md-6 ">
<img src="https://img.php.cn/upload/course/000/000/004/581ae2d64702c292.png" class="img-responsive center-block" alt="">
</div>
<div class=" text col-md-6 col-sm-6">
<h3>學(xué)習(xí)體系</h3>
<p>PHP中文網(wǎng)的課程及時(shí)的更新，讓我們自學(xué)的學(xué)員有更好的路線。</p>
</div>
</div>
</div>
</div>
<div class="tab4">
<div class="container">
<div class="row">
<div class="text col-md-6 col-sm-6">
<h3>師資力量</h3>
<p>PHP中文網(wǎng)的課程及時(shí)的更新，讓我們自學(xué)的學(xué)員有更好的路線。</p>
</div>
<div class="col-md-6">
<img src="https://img.php.cn/upload/course/000/000/004/581ae02a3af3d343.jpg" class="img-responsive center-block" alt="">
</div>
</div>
</div>
</div>
<div class="tab5">
<div class="container">
<div class="row">
<div class="col-md-6 ">
<img src="https://img.php.cn/upload/course/000/000/004/581ae2d64702c292.png" class="img-responsive center-block" alt="">
</div>
<div class=" text col-md-6 col-sm-6">
<h3>學(xué)習(xí)體系</h3>
<p>PHP中文網(wǎng)的課程及時(shí)的更新，讓我們自學(xué)的學(xué)員有更好的路線。</p>
</div>
</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
//輪播自動(dòng)播放
$('#myCarousel').carousel({
//自動(dòng)4秒播放
interval : 4000,
});
});
</script>
</body>
</html>Ini melengkapkan senarai separuh kedua kandungan kami. Anda juga boleh membuat sebarang pelarasan yang anda suka pada gaya.
