HTML5 使用結構元素進行網頁佈局
阿新 • • 發佈：2019-01-25
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用結構元素進行網頁佈局</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<style>
<!--網頁的寬度和對齊方式-->
.main{
width: 1000px;
margin: 40px auto;
}
<!--導航的寬度、高度和整體樣式-->
.main nav{
width: 1000px;
height: 40px;
background: #999;/*背景顏色*/
border-radius: 5px;/*圓角邊框半徑*/
}
<!--導航個欄目的寬度、高度和對齊方式-->
.main nav li{
width: 70px;
height: 40px;
float: left; /*向左浮動*/
text-align: center;
line-height: 40px;/*行高為40px*/
}
<!--超連結初始狀態的樣式-->
.main nav ul li a{
color: #fff
font-family:"微軟雅黑";
font-size: 14px;
}
<!--超連結滑鼠懸停的樣式-->
.main nav ul li a:hover{
font-weight: bold;/*字型加粗*/
}
<!--娛樂新聞模組的CSS規則-->
.main.block1{
width: 430px;
height: 250px;
margin-top: 20px;/*上外邊距*/
float:left; /*向左浮動*/
}
<!--軍事新聞模組的CSS規則-->
.mian.block2{
width: 430px;
height: 250px;
margin-top: 20px;
float: right; /*向右浮動*/
}
<!--娛樂新聞和軍事新聞模組中標題的樣式-->
.mian.block1 h1,
.mian.block2 h1{
color: #333; /*字型顏色*/
font-size: 20px;/*字型大小*/
font-family: "微軟雅黑";
line-height: 50px;/*行高50px*/
text-indent: lem;
}
<!--列表規則-->
.mian.block1 ul,
.mian.block2 ul{
width: 390px;
margin:0 19px 10px 19px;/*上、右、下、左的外邊距依次為0px 19px 10px 19px*/
}
<!--列表各項高度和寬度-->
.mian.block1.ul li,
.mian.block2.ul li{
width: 390px;
height: 40px;
}
<!--列表各項的文字樣式-->
.mian.block1 ul li a,
.mian.block1 ul li time,
.mian.block2 ul li a,
.mian.block2 ul li time{
color: #333;
font-size: 14px;
font-family: "微軟雅黑";
line-height: 40px;
}
.main.block1 ul li a,
.mian.block2 ul li a{
float: left;
}
.mian.block1 ul li a:hover,
.mian.block2 ul li a:haver{
color: red; /*滑鼠懸停的字型的顏色為紅色*/
}
.mian.block1 ul time,
.mian.block2 ul time{
float: right;
}
<!--頁面底部的CSS規則-->
footer{
clear: both; /*清除兩邊的浮動*/
width: 1000px;
height: 200px;
margin: 0 auto;
text-align: center;
}
footer h1 span{
margin-right: 20px;/*右邊邊距*/
}
footer h1 span a{
color: #333;
font-family: "微軟雅黑";
font-size: 14px;
line-height: 200px;
}
footer h1 span a:hover{
color: red;
}
</style>
<body>
<div class="main">
<p><a id=FileTop></a></p>
<header>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#" style="color:#EF2D36;">新聞</a></li>
<li><a href="#">體育</a></li>
<li><a href="#">娛樂</a></li>
<li><a href="#">財經</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">軍事</a></li>
</ul>
</nav>
</header>
<div class="block1">
<section>
<h1>娛樂新聞</h1>
<ul>
<li><a href="#">香港古惑仔齊聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齊聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齊聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齊聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齊聚</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
<div class="block2">
<section>
<h1>軍事新聞</h1>
<ul>
<li><a href="#">韓國簽訂部署薩德引中方全民反對</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韓國簽訂部署薩德引中方全民反對</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韓國簽訂部署薩德引中方全民反對</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韓國簽訂部署薩德引中方全民反對</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韓國簽訂部署薩德引中方全民反對</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
<div class="block1">
<section>
<h1>體育新聞</h1>
<ul>
<li><a href="#">勇士做客亞特蘭大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亞特蘭大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亞特蘭大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亞特蘭大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亞特蘭大</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
<div class="block2">
<section>
<h1>財經新聞</h1>
<ul>
<li><a href="#">A股繼續上漲</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股繼續上漲</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股繼續上漲</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股繼續上漲</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股繼續上漲</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
</div>
<footer>
<h1><span><a href="#">關於我們</a></span><span><a href="#">聯絡我們</a></span></h1>
</footer>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>使用結構元素進行網頁佈局</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
</head>
<style>
<!--網頁的寬度和對齊方式-->
.main{
width: 1000px;
margin: 40px auto;
}
<!--導航的寬度、高度和整體樣式-->
.main nav{
width: 1000px;
height: 40px;
background: #999;/*背景顏色*/
border-radius: 5px;/*圓角邊框半徑*/
}
<!--導航個欄目的寬度、高度和對齊方式-->
.main nav li{
width: 70px;
height: 40px;
float: left; /*向左浮動*/
text-align: center;
line-height: 40px;/*行高為40px*/
}
<!--超連結初始狀態的樣式-->
.main nav ul li a{
color: #fff
font-family:"微軟雅黑";
font-size: 14px;
}
<!--超連結滑鼠懸停的樣式-->
.main nav ul li a:hover{
font-weight: bold;/*字型加粗*/
}
<!--娛樂新聞模組的CSS規則-->
.main.block1{
width: 430px;
height: 250px;
margin-top: 20px;/*上外邊距*/
float:left; /*向左浮動*/
}
<!--軍事新聞模組的CSS規則-->
.mian.block2{
width: 430px;
height: 250px;
margin-top: 20px;
float: right; /*向右浮動*/
}
<!--娛樂新聞和軍事新聞模組中標題的樣式-->
.mian.block1 h1,
.mian.block2 h1{
color: #333; /*字型顏色*/
font-size: 20px;/*字型大小*/
font-family: "微軟雅黑";
line-height: 50px;/*行高50px*/
text-indent: lem;
}
<!--列表規則-->
.mian.block1 ul,
.mian.block2 ul{
width: 390px;
margin:0 19px 10px 19px;/*上、右、下、左的外邊距依次為0px 19px 10px 19px*/
}
<!--列表各項高度和寬度-->
.mian.block1.ul li,
.mian.block2.ul li{
width: 390px;
height: 40px;
}
<!--列表各項的文字樣式-->
.mian.block1 ul li a,
.mian.block1 ul li time,
.mian.block2 ul li a,
.mian.block2 ul li time{
color: #333;
font-size: 14px;
font-family: "微軟雅黑";
line-height: 40px;
}
.main.block1 ul li a,
.mian.block2 ul li a{
float: left;
}
.mian.block1 ul li a:hover,
.mian.block2 ul li a:haver{
color: red; /*滑鼠懸停的字型的顏色為紅色*/
}
.mian.block1 ul time,
.mian.block2 ul time{
float: right;
}
<!--頁面底部的CSS規則-->
footer{
clear: both; /*清除兩邊的浮動*/
width: 1000px;
height: 200px;
margin: 0 auto;
text-align: center;
}
footer h1 span{
margin-right: 20px;/*右邊邊距*/
}
footer h1 span a{
color: #333;
font-family: "微軟雅黑";
font-size: 14px;
line-height: 200px;
}
footer h1 span a:hover{
color: red;
}
</style>
<body>
<div class="main">
<p><a id=FileTop></a></p>
<header>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#" style="color:#EF2D36;">新聞</a></li>
<li><a href="#">體育</a></li>
<li><a href="#">娛樂</a></li>
<li><a href="#">財經</a></li>
<li><a href="#">科技</a></li>
<li><a href="#">軍事</a></li>
</ul>
</nav>
</header>
<div class="block1">
<section>
<h1>娛樂新聞</h1>
<ul>
<li><a href="#">香港古惑仔齊聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齊聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齊聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齊聚</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">香港古惑仔齊聚</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
<div class="block2">
<section>
<h1>軍事新聞</h1>
<ul>
<li><a href="#">韓國簽訂部署薩德引中方全民反對</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韓國簽訂部署薩德引中方全民反對</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韓國簽訂部署薩德引中方全民反對</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韓國簽訂部署薩德引中方全民反對</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">韓國簽訂部署薩德引中方全民反對</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
<div class="block1">
<section>
<h1>體育新聞</h1>
<ul>
<li><a href="#">勇士做客亞特蘭大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亞特蘭大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亞特蘭大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亞特蘭大</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">勇士做客亞特蘭大</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
<div class="block2">
<section>
<h1>財經新聞</h1>
<ul>
<li><a href="#">A股繼續上漲</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股繼續上漲</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股繼續上漲</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股繼續上漲</a><time datetime="2017-3-7">2017-3-7</time></li>
<li><a href="#">A股繼續上漲</a><time datetime="2017-3-7">2017-3-7</time></li>
</ul>
</section>
</div>
</div>
<footer>
<h1><span><a href="#">關於我們</a></span><span><a href="#">聯絡我們</a></span></h1>
</footer>
</body>
</html>