Python_day21--div、西開的網站重構、左側、水平導航欄
阿新 • • 發佈：2019-01-23
一、div簡介
1、定義
<div> 可定義文件中的分割槽或節（division/section）。
<div> 標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。
如果用 id 或 class 來標記 <div>，那麼該標籤的作用會變得更加有效。
2、用法
<div> 是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 <div> 固有的唯一格式表現。可以通過 <div> 的 class 或 id 應用額外的樣式。
不必為每一個 <div> 都加上類或 id，雖然這樣做也有一定的好處。
可以對同一個 <div> 元素應用 class 或 id 屬性，但是更常見的情況是隻應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解為某一類元素），而 id 用於標識單獨的唯一的元素。
3、注意
<div> 是一個塊級元素，也就是說，瀏覽器通常會在 div 元素前後放置一個換行符。
提示：請使用 <div> 元素來組合塊級元素，這樣就可以使用樣式對它們進行格式化。
二、div的居中對齊
首先我們要在樣式中對div進行定義和設定，分為兩種情況：
1）我們可以在標頭檔案中設定標籤的樣式，通過id或類屬性將其傳遞過去；
2）我們也可以在標籤內部直接進行設定
注意：我們對哪裡的物件進行設定就在對哪個標籤設定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08_div標籤居中</title> </head> <body> <div style="text-align: center;line-height:100px;border: 1px solid greenyellow;width: 300px;height: 300px;margin: auto;"> <P>NEWS WEBSITE</P> </div> <div style="width:200px;height:100px;border:1px solid red;text-align:center;line-height:100px;">居中對齊</div> </body> </html>
設定寬度：width
高度：height
div整體居中：margin:auto
邊框：border：邊框厚度1px solid
div內部文字居中：text-align:center;line-height:100px
三、css 和div重構西開官網
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<style>
#alogo {
width: 100%;
height: 91px;
text-align: center;
}
#logoLeft {
width: 49%;
height: 100%;
float: left;
text-align: center;
}
#logoRight {
width: 49%;
height: 100%;
float: right;
}
span {
vertical-align: middle;
font-size: 20px;
color: #323232;
margin-left: 10px;
}
#banner {
width: 100%;
height: 70px;
background-color: dodgerblue;
line-height: 70px;
}
#index {
font-size: 25px;
}
.children {
display: inline-block;
/*# 這個標籤佔用的權重*/
/*1 2 3 4*/
flex: 2;
text-align: center;
}
.children1{
display: inline-block;
/*# 這個標籤佔用的權重*/
/*1 2 3 4*/
flex: 1;
text-align: center;
}
#father{
display: flex;
width: 100%;
}
li a {
font-size: 20px;
color: white;
/*取消連結的下劃線等裝飾設定*/
text-decoration: none;
}
</style>
</head>
<body>
<!--先建立一個logo的盒子-->
<div id="alogo">
<div id="logoLeft">
<img src="img/01_logo.png" align="center">
<span>西部開源歡迎你！</span>
</div>
<div id="logoRight" style="line-height: 91px">
<img src="img/02_phone1.png" align="center">
<span>029-86699937 029-88262419</span>
</div>
</div>
<!--建立導航欄-->
<div id="banner">
<!--導航欄資訊無序列表-->
<ul id="father">
<li class="children1"><a id="index" href="#">首頁</a></li>
<li class="children"><a href="http://www.westos.org/curriculum-web">課程中心</a></li>
<li class="children"><a href="http://www.westos.org/course-features"> 教學體系</a></li>
<li class="children"><a href="http://www.westos.org/course-features">新聞資訊</a></li>
<li class="children"><a href="http://www.westos.org/course-features">學習資源</a></li>
<li class="children"><a href="http://www.westos.org/course-features">Linux企業文化</a></li>
</ul>
</div>
<img src="http://www.westos.org/wp-content/uploads/2017/10/28637F4B632210664E389C4EF4CF25A5_28.jpg" style="width: 100%">
</body>
</html>
四、左側導航欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左側導航欄</title>
<style>
ul{
/*清除無序列表前面的.*/
list-style-type: none;
/*外邊距*/
margin: 0;
/*內邊距*/
padding: 0;
/*設定背景顏色*/
background-color:#E0E0E0;
width: 10%;
}
li a{
/*去掉a標籤的下劃線*/
text-decoration: none;
/*設定子題顏色*/
color: black;
/*顯示塊元素的連結， 讓整體作為可點選的區域， 不止是文字*/
display:block;
/*設定內邊距*/
padding: 10px 30px;
}
li a:hover{
background-color: green;
color: white;
}
li a.active{
background-color: #323232;
color: white;
}
</style>
</head>
<body>
<!--先建立導航欄---建立無序列表-->
<ul>
<li><a class="active" href="#">首頁</a> </li>
<li><a href="#">新聞</a> </li>
<li><a href="#">聯絡</a> </li>
<li><a href="#">聯絡</a> </li>
</ul>
</body>
</html>五、水平導航欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_水平導航欄</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
/*去掉a標籤的下劃線*/
text-decoration: none;
/*設定子題顏色*/
color: black;
/*顯示塊元素的連結， 讓整體作為可點選的區域， 不止是文字*/
display: block;
/*設定內邊距*/
padding: 10px 30px;
}
/*jquery, bootstrap, vue*/
/*導航欄*/
li a.index {
background-color: green;
color: white;
font-size: 18px;
}
li a:hover {
background-color: darkgrey;
color: white;
}
</style>
</head>
<body>
<ul style="display: flex;width: 100%;">
<li><a class="index" href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">照片</a></li>
<li><a href="#">聯絡</a></li>
</ul>
</body>
</html>