Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 亚洲精品一区二区三区电影网,欧美一级黄色免费电影,在线亚洲综合 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          解決html布局塊上下左右間距保持一致
          
        
           
          
	
	
          
		
                        
          決html布局中的塊上下左右間距保持一致，常用在一些欄目展示欄中，要使上下左右的間距等距離，使用該方法非常簡單！效果：
          html:
          css:
          家好，我是IT共享者，人稱皮皮。這篇我們來講講CSS網(wǎng)頁布局。
          一、網(wǎng)頁布局
          網(wǎng)頁布局有很多種方式，一般分為以下幾個部分：頭部區(qū)域、菜單導(dǎo)航區(qū)域、內(nèi)容區(qū)域、底部區(qū)域。
          1. 頭部區(qū)域
          頭部區(qū)域位于整個網(wǎng)頁的頂部，一般用于設(shè)置網(wǎng)頁的標(biāo)題或者網(wǎng)頁的 logo：
          例
          <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 項目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}


/* 頭部樣式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>


<div class="header">
  <h1>頭部區(qū)域</h1>
</div>


</body>
</html>
          2. 菜單導(dǎo)航區(qū)域
          菜單導(dǎo)航條包含了一些鏈接，可以引導(dǎo)用戶瀏覽其他頁面：
          例
          /* 導(dǎo)航條 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 導(dǎo)航鏈接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 鏈接 - 修改顏色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
          3. 內(nèi)容區(qū)域
          內(nèi)容區(qū)域一般有三種形式:
          • 1 列：一般用于移動端。
          • 2 列：一般用于平板設(shè)備。
          • 3 列：一般用于 PC 桌面設(shè)備。
          不相等的列
          不相等的列一般是在中間部分設(shè)置內(nèi)容區(qū)域，這塊也是最大最主要的，左右兩次側(cè)可以作為一些導(dǎo)航等相關(guān)內(nèi)容，這三列加起來的寬度是 100％。
          例：
          .column {
  float: left;
}
 
/* 左右側(cè)欄的寬度 */
.column.side {
  width: 25%;
}
 
/* 中間列寬度 */
.column.middle {
  width: 50%;
}
 
/* 響應(yīng)式布局 - 寬度小于600px時設(shè)置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}


          4. 底部區(qū)域
          底部區(qū)域在網(wǎng)頁的最下方，一般包含版權(quán)信息和聯(lián)系方式等。
          例
          .footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

          二、響應(yīng)式網(wǎng)頁布局
          通過以上等學(xué)習(xí)我們來創(chuàng)建一個響應(yīng)式等頁面，頁面的布局會根據(jù)屏幕的大小來調(diào)整：
          案例
          <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>項目</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 頭部標(biāo)題 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 導(dǎo)航條 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 導(dǎo)航條鏈接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 鏈接顏色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 創(chuàng)建兩列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右側(cè)欄 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 圖像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮動 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 響應(yīng)式布局 - 屏幕尺寸小于 800px 時，兩列布局改為上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 響應(yīng)式布局 -屏幕尺寸小于 400px 時，導(dǎo)航等布局改為上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>


<div class="header">
  <h1>我的網(wǎng)頁</h1>
  <p>重置瀏覽器大小查看效果。</p>
</div>


<div class="topnav">
  <a href="#">鏈接</a>
  <a href="#">鏈接</a>
  <a href="#">鏈接</a>
  <a href="#" style="float:right">鏈接</a>
</div>


<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>文章標(biāo)題</h2>
      <h5>xx 年xx月 xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
      <p>文本...</p>
      <p>當(dāng)熱誠變成習(xí)慣，恐懼和憂慮即無處容身。缺乏熱誠的人也沒有明確的目標(biāo)。熱誠使想象的輪子轉(zhuǎn)動。一個人缺乏熱誠就象汽車沒有汽油。
      善于安排玩樂和工作，兩者保持熱誠，就是最快樂的人。熱誠使平凡的話題變得生動。！</p>
    </div>
    <div class="card">
      <h2>文章標(biāo)題</h2>
      <h5>xx 年 xx 月xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
      <p>文本...</p>
      <p>一切事無法追求完美，唯有追求盡力而為。這樣心無壓力，出來的結(jié)果反而會更好！</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>關(guān)于我</h2>
      <div class="fakeimg" style="height:100px;"></div>
      <p>6666</p>
    </div>
    <div class="card">
      <h3>熱門文章</h3>
      <div class="fakeimg"><img src="img/fy2_wp.png">\</div>
    
    </div>
    <div class="card">
      <h3>關(guān)注我</h3>
      <p>本站發(fā)布的系統(tǒng)與軟件僅為個人學(xué)習(xí)測試使用，請在下載后24小時內(nèi)刪除，
      不得用于任何商業(yè)用途，否則后果自負(fù)，請支持購買正版軟件！如侵犯到您的權(quán)益,請及時通知我們,我們會及時處理。


聲明：為非贏利性網(wǎng)站 不接受任何贊助和廣告。</p>
    </div>
  </div>
</div>


<div class="footer">
  <h2>底部區(qū)域</h2>
</div>


</body>
</html>

          三、總結(jié)
          本文主要介紹了Html的網(wǎng)頁布局結(jié)構(gòu)，如何去了解網(wǎng)絡(luò)的布局，介紹了常見的移動設(shè)備的三種網(wǎng)頁模式，最后通過一個小項目，總結(jié)之前講解的內(nèi)容。
          代碼很簡單，希望可以幫助你學(xué)習(xí)。
          頁布局對改善網(wǎng)站的外觀非常重要。
          請慎重設(shè)計您的網(wǎng)頁布局。
          在線實例
          使用 <div> 元素的網(wǎng)頁布局
          如何使用 <div> 元素添加布局。
          使用 <table> 元素的網(wǎng)頁布局
          如何使用 <table> 元素添加布局。
           網(wǎng)站布局
          大多數(shù)網(wǎng)站會把內(nèi)容安排到多個列中（就像雜志或報紙那樣）。
           大多數(shù)網(wǎng)站可以使用 <div> 或者 <table> 元素來創(chuàng)建多列。CSS 用于對元素進(jìn)行定位，或者為頁面創(chuàng)建背景以及色彩豐富的外觀。
          雖然我們可以使用HTML table標(biāo)簽來設(shè)計出漂亮的布局，但是table標(biāo)簽是不建議作為布局工具使用的 - 表格不是布局工具。
           HTML 布局 - 使用<div> 元素
          div 元素是用于分組 HTML 元素的塊級元素。
          下面的例子使用五個 div 元素來創(chuàng)建多列布局：
          實例
          <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><divid="container"style="width:500px"><divid="header"style="background-color:#FFA500;"><h1style="margin-bottom:0;">主要的網(wǎng)頁標(biāo)題</h1></div><divid="menu"style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</div><divid="content"style="background-color:#EEEEEE;height:200px;width:400px;float:left;">內(nèi)容在這里</div><divid="footer"style="background-color:#FFA500;clear:both;text-align:center;">版權(quán) ? runoob.com</div></div></body></html>
          上面的 HTML 代碼會產(chǎn)生如下結(jié)果：
           HTML 布局 - 使用表格
          使用 HTML <table> 標(biāo)簽是創(chuàng)建布局的一種簡單的方式。
           大多數(shù)站點可以使用 <div> 或者 <table> 元素來創(chuàng)建多列。CSS 用于對元素進(jìn)行定位，或者為頁面創(chuàng)建背景以及色彩豐富的外觀。
          即使可以使用 HTML 表格來創(chuàng)建漂亮的布局，但設(shè)計表格的目的是呈現(xiàn)表格化數(shù)據(jù) - 表格不是布局工具！
          下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來橫跨兩列：
          實例
          <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鳥教程(runoob.com)</title></head><body><tablewidth="500"border="0"><tr><tdcolspan="2"style="background-color:#FFA500;"><h1>主要的網(wǎng)頁標(biāo)題</h1></td></tr><tr><tdstyle="background-color:#FFD700;width:100px;"><b>菜單</b><br>HTML<br>CSS<br>JavaScript</td><tdstyle="background-color:#eeeeee;height:200px;width:400px;">內(nèi)容在這里</td></tr><tr><tdcolspan="2"style="background-color:#FFA500;text-align:center;">版權(quán) ? runoob.com</td></tr></table></body></html>
          上面的 HTML 代碼會產(chǎn)生以下結(jié)果：
           HTML 布局 - 有用的提示
           Tip: 使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護(hù)。通過編輯單一的文件，就可以改變所有頁面的布局。如需學(xué)習(xí)更多有關(guān) CSS 的知識，請訪問我們的CSS 教程。
           Tip: 由于創(chuàng)建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費(fèi)的網(wǎng)站模板（您可以使用這些預(yù)先構(gòu)建好的網(wǎng)站布局，并優(yōu)化它們）。
           HTML 布局標(biāo)簽
          標(biāo)簽描述
          <div>定義文檔區(qū)塊，塊級(block-level)
          <span>定義 span，用來組合文檔中的行內(nèi)元素。
          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
无码国产精品一区二区免费虚拟VR|
色婷婷香蕉在线一区二区|
久久久久人妻精品一区二区三区|
国产精品无码一区二区三区毛片|
国产激情无码一区二区|
99热门精品一区二区三区无码|
狠狠综合久久av一区二区|
中文字幕乱码人妻一区二区三区|
四虎永久在线精品免费一区二区
|
国产乱码精品一区二区三区中
|
精品无码国产一区二区三区51安
|
日本精品一区二区三区视频|
日本一区二区三区精品中文字幕|
丰满岳乱妇一区二区三区|
麻豆果冻传媒2021精品传媒一区下载|
99久久精品国产免看国产一区
|
四虎永久在线精品免费一区二区|
国产精品久久一区二区三区|
久久久久久综合一区中文字幕|
日韩毛片一区视频免费|
国产一区二区三区免费看|
精品国产一区二区麻豆|
国产免费私拍一区二区三区|
男人的天堂av亚洲一区2区|
夜色福利一区二区三区|
国99精品无码一区二区三区|
国产午夜福利精品一区二区三区|
国产一区二区三区高清视频|
日韩精品成人一区二区三区|
国产精品熟女一区二区|
亚洲AV无码一区二区二三区软件
|
中文字幕日本一区|
97精品国产福利一区二区三区|
国产成人无码AV一区二区在线观看
|
日韩av片无码一区二区三区不卡
|
AV天堂午夜精品一区|
亚洲一区AV无码少妇电影☆|
亚洲一区二区三区免费观看|
鲁丝丝国产一区二区|
国产在线精品一区二区夜色|
亚洲一区二区三区在线网站|