Contenu de la page d'accueil du développement réactif H5 (1)
Contenu de la page d'accueil
Nous écrivons le contenu et utilisons le plug-in fence bootsrap pour mettre en page la page Web.
Créer une bo?te <tab1>, utiliser le conteneur pour créer un conteneur et créer un nouveau titre de colonne
<h2 class="tab-h2">為什么選擇在PHP中文網(wǎng)學(xué)習(xí)編程？</h2> <p class="tab-p">PHP中文網(wǎng)有著海量的編程資源，在線答疑，專人解惑。</p>
Contr?lez le style CSS dessus, alignez-le au centre, ajustez la couleur et la taille de la police
Créez une nouvelle cl?ture et donnez-lui 6 de chaque c?té.
<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/581ad5b11106f471.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/581ad5b11106f471.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>
Les styles utilisés par les classes ci-dessus sont tous fournis par bootstrap. Vous pouvez les vérifier vous-même sur Baidu.
Contr?lez le style de la liste de contenu.
<!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>
#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;
}
</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="img/11.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/581ad5b11106f471.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>
</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>La première moitié du contenu est pratiquement terminée et la quantité de contenu est augmentée. Effectuez des ajustements détaillés.
<!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>
#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;
}
</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/581ad5b11106f471.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/581ad5b11106f471.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/581ad5b11106f471.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/581ad5b11106f471.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>
<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>La mise en page du contenu de la première moitié est terminée. La cl?ture fournie par boorstrap peut rapidement mettre en page l'interface réactive. Si vous ne la connaissez pas encore, vous pouvez vous connecter au site officiel pour consulter le manuel. et utilisez-le.
