整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          DIV+CSS標準化網頁布局

          IV+CSS標準化布局的優勢

          使用“DIV+CSS”對網站進行布局符合W3C標準,采用這種方式布局通常是為了說明與HTML表格定位方式的區別。因為現在的網站設計標準中,已經不再使用表格定位技術,而是采用DIV+CSS的方式實現各種定位。通過使用div盒子模型結構將各部分內容劃分到不同的區塊,然后用css來定義盒子模型的位置、大小、邊框、內外邊距、排列方式等。簡單地說,div用于搭建網站結構(框架)、css用于創建網站表現(樣式/美化)。該標準簡化了HTML頁面代碼,獲得一個較優秀的網站結構,有利于日后網站維護、協同工作和便于搜索引擎抓取。當然并不是所有的網頁都需要用div布局,例如數據頁面、報表之類的頁面,還是使用HTML的表格會比較方便,web標準里并沒有說要拋棄table。

          DIV+CSS標準的優點

          • 表現和內容相分離
          • 代碼簡潔,提高頁面瀏覽速度
          • 易于維護和改版
          • 提高搜索引擎對網頁的索引效率

          各個瀏覽器之間的差異

          • 安裝多種瀏覽器,對比差異進行調試
          • 在FF瀏覽器中安裝firebug

          Firebug 為你的 Firefox 集成了瀏覽網頁的同時隨手可得的豐富開發工具。你可以對任何網頁的 CSS、HTML 和 JavaScript 進行實時編輯、調試和監控

          就算在不同的瀏覽器中效果不完全一致,也要做到大概一至

          “無意義”的元素div和span

          • HTML只是賦予內容的手段,大部分HTML標簽都有其意義(例如,標簽p創建段落,h1標簽創建標題等等)的,然而div和span標簽似乎沒有任何內容上的意義,聽起來就像一個泡沫做成的錘子一樣無用。但實際上,與CSS結合起來后,它們被用得十分廣泛。你所需要記住的是span和div是“無意義”的標簽。它們的存在純粹是應用樣式,所以當樣式表失效時它就沒有任何的作用
          • 它們被用來組合成一大塊的HTML代碼并賦予一定的信息,大部分用類屬性class和標識屬性id與元素聯系起來。span和div的不同之處在于span是內聯的,用在一小塊的內聯HTML中。而div(division)元素是塊級的(簡單地說,它等同于其前后有斷行),用于組合一大塊的代碼,為HTML 文檔內大塊的內容提供結構和背景的元素,可以包含段落、標題、表格甚至其他部分,這使div便于建立不同集成的類。
          • div的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的,其中所包含元素的特性由div標簽的屬性來控制,或者是通過使用樣式表格式化這個塊來進行控制。

          盒子模型

          每個HTML元素都可以看作一個裝了東西的盒子,盒子具有寬度(width)和高度(height),盒子里面的內容到盒子的邊框之間的距離即填充(padding),盒子本身有邊框(border),而盒子邊框外和其他盒子之間,還有邊界(margin)。

          布局中的主要樣式

          • font
          • line-height
          • color
          • margin
          • padding
          • border
          • text-align
          • background

          定位屬性

          區塊屬性(區塊模型)

          區塊框浮動

          雖然使用絕對定位可以實現頁面布局,但由于調整某個區塊框時其它區塊的位置并不會跟隨著改變,所以并不是布局的首選方式。而使用浮動的區塊框可以向左或向右移動,直到它的外邊緣碰到包含它區塊的邊框或另一個浮動框的邊框為止。并且由于浮動框不在文檔的普通流中,所以文檔的普通流中的區塊框表現得就像浮動框不存在一樣。

          設置浮動

          行框和清理

          在進行頁面布局時,經常需要設置多個區塊框并列在一行中排列。最常見的方式就是使用float屬性,再通過left或right值移動區塊框向左或向右浮動。但當前面并列的多個區塊框總寬度不足包含框的100%時,就會在行框中留出一定的寬度,而下面的某個區塊框又恰好滿足這個寬度,則很可能會向上提,和上一行并列的區塊框在同一行排列。而這不并是我們想要的結果,所以可以使用clear屬性解決這一問題,該屬性的值可以是 left、right、both 或 none,它表示框的哪些邊不應該挨著浮動框。

          使用區塊框設計頁面布局

          • 區塊居中設計

          高度和寬度固定的區塊居中(position)

          高度和寬度可變的區塊居中(margin)

          • 布局頁面居中
          • 設置兩列浮動的布局
          • 設置三列浮動的布局
          • 設置多列浮動的布局
          TML中的表格是由<table>標簽進行定義的,表格在HTML中的表現形式與使用方法與word中的表格非常類似。多數情況使用Dreamweaver的可視化視圖只做表格更為簡單、方便。本文主要講述如何使用代碼來編寫表格,讓大家掌握表格的代碼書寫格式與其對應的屬性。

          表格的標簽組成

          HTML中的表格是由<table>為主體標簽,瀏覽器會將該標簽解釋為一個表格。表格中的行使用<tr>標簽進行定義。<tr>標簽為<table>標簽的子類,設置若干個<tr>標簽可以將表格分割為若干個行。<td>標簽用于定義表格的列,<td>標簽為又是<tr>標簽的子類,因此每個行都需要設置相應數量的<td>標簽來分割列,形成一個完整的表格。

          表格的標簽組合關系為:

          <table>

          <tr>

          <td>我是單元格1</td>

          <td>我是單元格2</td>

          </tr>

          </table>

          表格中可以插入文本、圖片、列表、段落、表單、水平線等任何html標簽,甚至可以用來做頁面布局。但是table布局存在代碼冗余過長、不符合HTML規范、搜索引擎不友好等問題。因此建議大家盡量不要使用table進行頁面布局,除非頁面中確實需要一張表格。

          剩下的<th>、<thead>、<tbody> 和 <tfoot>很少被用到,這是由于瀏覽器對它們的支持不太好。

          表格和邊框屬性

          表格自身可以定義border屬性來決定表格邊框的寬度,該屬性的值默認是以數字單位進行顯示,例如border=”1″該值的單位為px。注意,不要在border的數值后面加上任何單位,否該值無法正確識別。

          表格的表頭

          在<table>中可以通過<th>標簽設置表頭,表頭的<th>標簽與<tr>標簽屬于平級,并且表頭一般出現在<tr>標簽的前面。對于一個表格來說,表頭并不是必須的,可以根據需要插入表頭。<th>標簽內的文字會被自動加粗。

          單元格的合并

          單元格的合并分為垂直合并與水平合并,在合并時需要確定其他行與列中是否有對應數量的單元格。

          水平合并單元格使用colspan屬性,其值是用數字的形式確定需要合并的單元格數量,例如colspan=”2″即代表向右合并兩個單元格。

          垂直合并單元格使用rowspan屬性,與水平合并的屬性相同,同樣也是以數字形式確定需要合并的單元格數量,例如rowspan=”2″代表向下合并兩個單元格。

          實例演示代碼:

          <table border=“1”>

          <tr>

          <th>姓名</th>

          <th colspan=“2”>電話</th>

          </tr>

          <tr>

          <td>Bill Gates</td>

          <td>555 77 854</td>

          <td>555 77 855</td>

          </tr>

          </table><h4>橫跨兩行的單元格:</h4>

          <table border=“1”>

          <tr>

          <th>姓名</th>

          <td>Bill Gates</td>

          </tr>

          <tr>

          <th rowspan=“2”>電話</th>

          <td>555 77 854</td>

          </tr>

          <tr>

          <td>555 77 855</td>

          </tr>

          </table>

          單元格邊距

          表格具有與padding樣式類似的內邊距功能。通過在<table>標簽內定義cellpadding屬性,來為其標簽下的所有<td>元素設置內邊距。cellpadding屬性的參數是值是以數字的形式來確定邊距的大小,例如cellpadding=”10″ 則表示table中的所有<tr>標簽內邊距為10px

          單元格間距

          單元格的間距是設置<tr>標簽的外邊距,這個也與css樣式中的margin類似,通過在<table>標簽內定義cellspacing屬性,來為其標簽下的所有td元素設置外邊距。該屬性也是以數字的形式來確定外邊距的大小,例如cellspacing=”10″則表示這個table中的所有<tr>標簽的外邊距為10px

          為表格設置背景

          表格可以通過background屬性為表格或單元格設置任意圖片作為背景,其使用方法非常像css中的background。為background設置對應的圖片路徑,即可使單元格顯示相應的圖片。例如background=”table_bg.gif”

          表格內容的對齊排列

          表格的對齊分為水平對齊和垂直對齊。它們分別是align屬性與valign屬性,將這兩個屬性插入到對應的<td>標簽中即可完成單元格內文本或圖像的對齊。

          水平對齊align分別有三個值:left左對齊、center水平居中、right右對齊

          垂直對齊valign也有三個值:top頂端對齊、middle垂直居中、bottom底部對齊、baseline為基線對齊。

          其中基線對齊可能無法從字面上理解,其實基線對齊也就是文本出現在表格的中上部而不是正中央。如果文字不大的話,效果和middle差不多,比middle稍微靠上一點。

          私信發送【前端】有驚喜!

          TML是超文本標記語言。

          web標準是由W3C和其它標準化組織制成集合。

          web標準的構成

          結構(對網頁元素進行整理和分類-HTML)

          表現(設置網頁元素的版式,顏色,大小等外觀樣式-CSS)

          行為(模型的定義及交互的表現-JS)

          HTML常用標簽

          加粗:<strong>和<b>

          傾斜:<em>和<i>

          刪除線:<del>和<s>

          下劃線:<ins>和<u>

          <div>分割分區<span>跨度跨距

          圖片標簽<img/>

          屬性: src圖片路徑

          alt替換文本,圖片無法正常顯示

          title提示文本,鼠標放到圖像顯示

          width寬度,height高度(只需要修改其中一個)

          border邊框(無需單位直接寫數值)

          注意:

          ①圖像標簽可以擁有多個屬性,必須寫在標簽名后面

          ②屬性之前不分先后順序,標簽名與屬性,屬性與屬性之間需要空格分開

          ③屬性采取鍵值對的格式

          相對路徑:以引用文件所在位置為參考基礎

          (同一級路徑,下一級路徑/,上一級路徑../)

          絕對路徑:從盤符開始的路徑(\)

          常用屬性

          img ——vspace垂直邊距 ,hspace水平邊距 align對齊

          details,summary,鼠標點擊時顯示或隱藏

          mark 文本中高亮顯示,和strong相似

          cite 用于引用標記,斜體顯示

          draggable true選中后可以拖動操作

          font定義 font-style font-weight font-size/line-height font-family 順序不能改變

          word-wrap break-word長單詞或url地址自動換行

          letter-spacing字間距

          word-spacing單詞間距

          line-height行間距

          text-decorantion文本裝飾unline下劃線,overline上劃線,line-through刪除線

          text-indent 2em 首行縮進兩個字符

          white-space空白符處理 pre

          box-sizing:content-box當widthh和height的時候不包括margin和panding

          更換圖層位置,z軸偏移z-index:-10

          align-items:center居中對齊

          align-self:center


          超鏈接標簽<a>

          href鏈接目標地址

          target鏈接頁面打開的方式(_self當前窗口打開,_blank新窗口中打開方式)

          外部鏈接,內部鏈接,空鏈接,下載鏈接,網頁元素鏈接,錨點鏈接(快速定位到頁面的某個位置- 添加id屬性)

          去除超鏈接樣式:text-decoration:none


          特殊字符

          空格符 &nbsp;

          小于號&lt; 大于號&gt;


          表格標簽

          align對齊方式

          bolder表格邊框

          cellpadding單元格與內容之間空白

          cellspacing單元格與單元格之前空白

          合并單元格:rowspan colspan


          列表標簽

          無序列表:ul li

          有序列表:ol li

          自定義列表:dl dt dd


          表單標簽

          完整表單:表單域<form>,表單控件,提示信息

          <form>

          ——action(指定接受并處理表單數據的服務器程序的url地址)

          ——method(get/post設置表單數據的提交方式)

          ——name(指定表單名稱)


          <input>輸入元素

          type屬性:button(點擊按鈕)checkbox(復選框)file(輸入字段和“瀏覽”按鈕)hidden(隱藏輸入字段)image(圖片形式提交按鈕)password(密碼字段)radio(單選按鈕)reset(重置按鈕)sumbit(提交按鈕)text(單行輸入字段,默認20個字符)

          name屬性:(相同的名字——單選框和復選框)區別不同表單元素

          value屬性:定義input元素值

          checked屬性:頁面首次加載是否選中

          maxlength屬性:輸入字段的最大值


          <lable>標簽

          用于綁定一個表單元素,當點擊<lable>標簽內的文本時,瀏覽器會自動將焦點轉到或者選擇對應的表單元素上,用來增加用戶體驗。

          <lable>標簽的for屬性與相關元素的id屬性相同

          <select>下拉列表元素

          -<option>

          -selected="selected"默認選中

          <textarea>文本域

          -cols rows (每行每列字數)


          主站蜘蛛池模板: 国产日本亚洲一区二区三区| 国产午夜精品一区二区三区| 中文字幕一区二区三区有限公司 | 日本一区二区三区在线看| 中文字幕一区二区三区在线播放| 亚洲电影唐人社一区二区| 在线精品亚洲一区二区三区| 欧洲精品码一区二区三区免费看 | 国产精品被窝福利一区 | 国产成人AV一区二区三区无码| 国产大秀视频一区二区三区| 激情无码亚洲一区二区三区| 日韩精品一区二区三区中文精品| 久久精品免费一区二区三区| 八戒久久精品一区二区三区| 最新欧美精品一区二区三区 | 国产精品无码一区二区在线观 | 国产成人av一区二区三区在线观看| 日韩一区二区a片免费观看| 亚洲一区二区免费视频| 91福利视频一区| 一区二区中文字幕| 亚洲一区二区三区精品视频| 国产伦精品一区二区三区女| 99热门精品一区二区三区无码| 国产精品高清一区二区三区不卡| 精品一区二区三区在线观看视频 | 中文字幕一区二区三区在线不卡| 国产av福利一区二区三巨| 国产成人高清视频一区二区| 国产亚洲情侣一区二区无| 国产亚洲一区二区手机在线观看| 久久国产精品视频一区| 亚洲一区二区三区在线| 亚洲另类无码一区二区三区| 国产伦精品一区二区三区视频小说| 国产乱码精品一区三上 | 日本精品高清一区二区2021| 日韩一区二区三区精品| 国产成人久久精品一区二区三区 | 国产伦一区二区三区免费|