二十二世纪古墓奇兵爱慕影院

小梁建站專注重慶中小企業網站建設SEO優化,讓您網站更具價值!

當前位置:首頁 > WEB前端學習 > CSS3框模型-外邊距(margin)內邊距(padding)使用實戰教程【從入門到精通】

CSS3框模型-外邊距(margin)內邊距(padding)使用實戰教程【從入門到精通】

時間:2018-07-30 01:20 來源:重慶網站制作公司(www.l2qz.net) 作者:重慶網站建設公司

今天梁先國seo學習了關于css3框模型中外邊距(margin)屬性和內邊距(padding)屬性的定義及作用以及在網頁實際開發過程中需要運用的特定場合,如果不知道如何使用外邊距(margin)屬性內邊距(padding)屬性及它們之間的區別,可以觀看最新web前端開發原創視頻教程,希望對大家有所幫助。

下面以梁先國seo個人博客站為例,現在打開網站,把眼睛移到網站首頁分頁處.

梁先國seo個人博客站

我們可以看到頁碼顯示1-10位阿拉伯數字,也就是網站首頁被分成10頁顯示,我們憑肉眼直觀看是一個個綠色的小正方形,里面顯示的是1-10的白色阿拉伯數字還有首頁,末頁,下一頁,別小瞧這些數字,它們都是可以點擊的超鏈接(你不信可以親自試試,跳轉的首頁分頁樣式是引用的dedecms樣式效果,不好看,以后改進)當然這都是我們實際看到的樣式,而實現這些樣式效果需要需要運用css3對應的屬性功能

對于專業的網頁技術開發人員來說,我們在分析一個網頁樣式效果,一般是通過鍵盤上的快捷鍵F12,借助web開發者工具解決問題,

下面我們通過F12來分析梁先國seo博客首頁分頁處的css樣式效果 :

實際分析過程
顯示“首頁”字樣的a元素的整體尺寸大小是 44x24px, 這是瀏覽器通過處理后顯示的a元素的尺寸大小,那么這個“a”元素的尺寸大小是怎么計算的?下面具體分析一下 a元素“ 首頁”的文本尺寸大小是28x20px ,然后開發人員使用padding屬性給a元素上下各增加了2px,左右各增加了8px,而border和margin各自為0,所以 分析得出a元素“首頁”寬width 44px=28px+padding(16px) ;高height24px=20px+padding(4px) ,由此“首頁”字樣的a元素最終整體尺寸 大小為44x24px 。至于其他帶“1-10”的a元素的尺寸大小 跟上面的分析方法一樣,可以正確得出結果。

下面開始HTML網頁和css樣式編寫首先創建一個HTML文件,文件名為:www.l2qz.net-首頁分頁外邊距
(margin)與內邊距(padding)的使用方法.html注意w3c規定網頁html文件名為英文名稱), 這樣寫是梁先國seo站長幫助大家理解代碼。

HTML網頁如下:
<!doctype html>
<html>
<head>
<title>www.l2qz.net-首頁分頁外邊距(margin)與內邊距(padding)的使用方法</title>
<meta charset="utf-8">
</head>
<body>
<div id="content"></div>
<div id="pages">
<a href="http://www.l2qz.net">首頁</a>
<a href="http://www.l2qz.net/index_2.html">下一頁</a>
<a href="http://www.l2qz.net/index_10.html">末頁</a>
共10頁120條記錄
</div>
</body>
</html>

css內部樣式表如下:
<style>
#content{border:1px solid #D01EC2;
width:95%;
min-height:100px;
padding:30px;
margin-bottom:20px;
 
}
#pages a{border:1px solid #9cb12f ;
padding:3px 10px;
border-radius:5px;
background-color: #9cb12f;
color:#fff;
text-decoration:none;
}
</style>
最后網頁設計開發展示效果圖如下:
最后網頁設計開發展示效果圖如下:



版權聲明:本文:CSS3框模型-外邊距(margin)內邊距(padding)使用實戰教程【從入門到精通】 由重慶網站制作公司(www.l2qz.net)原創內容,如需要轉載請注明原文網址:重慶網站建設公司http://www.l2qz.net/

 
喜歡看,就分享到:

圍觀: 9999次 | 責任編輯:重慶網站建設公司

回到頂部
二十二世纪古墓奇兵爱慕影院 pc28大小单双无视1314 mg摆脱豪华版讲解 重庆时时现场开奖结果 北京pk10计划免费 赌大小规则 江苏时时开奖规则 欢乐生肖游戏上市 淘金娱乐官网 注册就送彩金真实网站 中信福彩app免费下载 bet007足球即时比分l 快三如何猜大小单双