課程
/前端開發
/JavaScript
/商城分類導航效果
添加了也沒啥變化。
2015-01-22
源自:商城分類導航效果 2-6
正在回答
獨立成塊是有原因才獨立成塊顯示的。a標簽里樣式加上display:block的話,當鼠標點擊范圍就是以塊顯示的。這樣比較好識別點擊區域。當然需要a標簽里面的寬和高才有效果。獨立成塊的話就包含了左浮動效果!
<a?target="_blank"?style="display:block;?width:100px;?height:50px;?line-height:50px;?border:1px?solid?#ccc;"?src="#"?>慕課網</a>
display值
描述
none ? ?此元素不會被顯示。 ? ?
block ? ?此元素將顯示為塊級元素,此元素前后會帶有換行符。 ? ?
inline ? ?默認。此元素會被顯示為內聯元素,元素前后沒有換行符。 ? ?
inline-block ? ?行內塊元素。
list-item ? ?此元素會作為列表顯示。 ? ?
run-in ? ?此元素會根據上下文作為塊級元素或內聯元素顯示。 ? ?
compact ? ?CSS 中有值 compact,不過由于缺乏廣泛支持,已經從 CSS2.1 中刪除。 ? ?
marker ? ?CSS 中有值 marker,不過由于缺乏廣泛支持,已經從 CSS2.1 中刪除。 ? ?
table ? ?此元素會作為塊級表格來顯示(類似 <table>),表格前后帶有換行符。 ? ?
inline-table ? ?此元素會作為內聯表格來顯示(類似 <table>),表格前后沒有換行符。 ? ?
table-row-group ? ?此元素會作為一個或多個行的分組來顯示(類似 <tbody>)。 ? ?
table-header-group ? ?此元素會作為一個或多個行的分組來顯示(類似 <thead>)。 ? ?
table-footer-group ? ?此元素會作為一個或多個行的分組來顯示(類似 <tfoot>)。 ? ?
table-row ? ?此元素會作為一個表格行顯示(類似 <tr>)。 ? ?
table-column-group ? ?此元素會作為一個或多個列的分組來顯示(類似 <colgroup>)。 ? ?
table-column ? ?此元素會作為一個單元格列顯示(類似 <col>) ? ?
table-cell ? ?此元素會作為一個表格單元格顯示(類似 <td> 和 <th>) ? ?
table-caption ? ?此元素會作為一個表格標題顯示(類似 <caption>) ? ?
inherit ? ?規定應該從父元素繼承 display 屬性的值。 ? ?
NOM 提問者
定義為display block是為了 添加padding值啊~~~~這樣才能拉開與border-left的距離。以及更好的去調整margin或padding來美化頁面~
舉報
兩種方法實現分類導航,同時擴展講解其它商城分類導航的制作方法
2 回答dl不是塊級元素嗎,為什么還要設display:block?
2 回答為什么沒有鼠標浮動效果?
1 回答二級懸浮窗不顯示,截了代碼圖。
4 回答為什么二級菜單離左邊220px會和一級菜單重疊?
2 回答a標簽本來就是內聯塊狀元素 為何還要定義display:block;
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2015-01-22
獨立成塊是有原因才獨立成塊顯示的。a標簽里樣式加上display:block的話,當鼠標點擊范圍就是以塊顯示的。這樣比較好識別點擊區域。當然需要a標簽里面的寬和高才有效果。獨立成塊的話就包含了左浮動效果!
display值
描述
none ? ?此元素不會被顯示。 ? ?
block ? ?此元素將顯示為塊級元素,此元素前后會帶有換行符。 ? ?
inline ? ?默認。此元素會被顯示為內聯元素,元素前后沒有換行符。 ? ?
inline-block ? ?行內塊元素。
list-item ? ?此元素會作為列表顯示。 ? ?
run-in ? ?此元素會根據上下文作為塊級元素或內聯元素顯示。 ? ?
compact ? ?CSS 中有值 compact,不過由于缺乏廣泛支持,已經從 CSS2.1 中刪除。 ? ?
marker ? ?CSS 中有值 marker,不過由于缺乏廣泛支持,已經從 CSS2.1 中刪除。 ? ?
table ? ?此元素會作為塊級表格來顯示(類似 <table>),表格前后帶有換行符。 ? ?
inline-table ? ?此元素會作為內聯表格來顯示(類似 <table>),表格前后沒有換行符。 ? ?
table-row-group ? ?此元素會作為一個或多個行的分組來顯示(類似 <tbody>)。 ? ?
table-header-group ? ?此元素會作為一個或多個行的分組來顯示(類似 <thead>)。 ? ?
table-footer-group ? ?此元素會作為一個或多個行的分組來顯示(類似 <tfoot>)。 ? ?
table-row ? ?此元素會作為一個表格行顯示(類似 <tr>)。 ? ?
table-column-group ? ?此元素會作為一個或多個列的分組來顯示(類似 <colgroup>)。 ? ?
table-column ? ?此元素會作為一個單元格列顯示(類似 <col>) ? ?
table-cell ? ?此元素會作為一個表格單元格顯示(類似 <td> 和 <th>) ? ?
table-caption ? ?此元素會作為一個表格標題顯示(類似 <caption>) ? ?
inherit ? ?規定應該從父元素繼承 display 屬性的值。 ? ?
2015-09-15
定義為display block是為了 添加padding值啊~~~~這樣才能拉開與border-left的距離。以及更好的去調整margin或padding來美化頁面~