CSS圖文混排的幾種方案
更新時(shí)間:2013年11月08日 10:17:23 作者:
左圖右內(nèi)容其實(shí)就是一個(gè)很簡單的布局了,我們經(jīng)常會(huì)在種大的門戶網(wǎng)站經(jīng)??吹降膱D文混排效果了,下面給大家介紹一下實(shí)例
百度新聞首頁的方案:
<table>
<tbody>
<tr>
<td class="topic-pic"><a href=""><img src=""></a></td>
<td class="topic-txt">…</td>
</tr>
</tbody>
</table>
html結(jié)構(gòu)丑陋,但css簡單。
新浪微博首頁的方案:
<div class="twit_item MIB_linedot2">
<div class="twit_item_pic">
<a href="" target="_blank">
<img src="" ...>
</a>
</div>
<div class="twit_item_content">
....
</div>
</div>
CSS:
.twit_list dd .twit_item_pic{float:left;width:66px;padding-top:2px;} .twit_list dd .twit_item_content{float:left;width:316px;color:#666;line-height:18px;}
大部分應(yīng)試者都是這個(gè)答案。用了浮動(dòng)就必須定寬,結(jié)構(gòu)就失去靈活性,同時(shí)必須解決浮動(dòng)帶來的一系列問題。
網(wǎng)易首頁方案:
<ul>
<li class="list-figure"><a href=""><img src=""></a></li>
<li><a href="">…</a></li>
<li><a href="">…</a></li>
<li><a href="">…</a></li>
</ul>
CSS:
.list-figure { float: left; _display: inline; width: 130px; margin-left: -140px; margin-top: 6px; }
這些寫法都是欠缺對(duì)css基本概念的理解。如果理解block formatting context(塊級(jí)格式化上下文)的概念, 就不會(huì)這么寫了。觸發(fā)了BFC的塊級(jí)元素,它的邊緣不會(huì)和float box重疊。
推薦的方案:
<div class="item">
<div class="pic">...</div>
<div class="content">...</div>
</div>
CSS:
.item .pic { float:left;margin-right:10px; }
.item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */
我寫的一個(gè)實(shí)例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<style type="text/css">
body {
margin: 0;
padding: 1em 0;
background-color: #f3f3f3;
font:16px/1.7 Arial, Helvetica, sans-serif;
color:#5a5a5a
}
a {
color: #08c;
text-decoration: none
}
header h1{
text-align:center
}
ul{margin: 0;padding: 0}
ul li{list-style: none;margin: 0;font-size: 13px;}
h3{line-height: 1.7;margin: 0}
.item .pic { float:left;margin-right:10px; }
.item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>左圖右內(nèi)容的效果實(shí)現(xiàn) </header>
<div class="item">
<div class="pic">
</div>
<div class="content">
<h3><a href="">標(biāo)題標(biāo)題標(biāo)題標(biāo)題</a></h3>
<ul>
<li><a href="">內(nèi)容內(nèi)容內(nèi)容內(nèi)容1</a></li>
<li><a href="">內(nèi)容內(nèi)容內(nèi)容內(nèi)容2</a></li>
<li><a href="">內(nèi)容內(nèi)容內(nèi)容內(nèi)容3</a></li>
<li><a href="">內(nèi)容內(nèi)容內(nèi)容內(nèi)容4</a></li>
</ul>
</div>
</div>
</body>
</html>
總結(jié)
用的不是技術(shù),更多是技巧
由于在學(xué)校里沒有系統(tǒng)的前端開發(fā)課程,導(dǎo)致對(duì)html/css/javascript基本概念的理解非常薄弱。大部分人的學(xué)習(xí)方式是:先看書,然后覺得書和實(shí)踐離得很遠(yuǎn)就直接實(shí)踐,遇到問題就去網(wǎng)上搜,而搜到的基本都是“技巧”性的東西?;蛘呤歉鴮W(xué)校里的“牛人”學(xué),摻著各種好的、壞的經(jīng)驗(yàn)全盤接受。比如實(shí)現(xiàn)一個(gè)左圖右內(nèi)容的顯示效果,寫出html和css(見下圖)。這是我的一道筆試題,看起來很簡單吧。但是還沒有人答出最佳答案。如果去網(wǎng)上看,國內(nèi)那些大網(wǎng)站們是怎么實(shí)現(xiàn)的,就不能怪他們了。
復(fù)制代碼 代碼如下:
<table>
<tbody>
<tr>
<td class="topic-pic"><a href=""><img src=""></a></td>
<td class="topic-txt">…</td>
</tr>
</tbody>
</table>
html結(jié)構(gòu)丑陋,但css簡單。
新浪微博首頁的方案:
復(fù)制代碼 代碼如下:
<div class="twit_item MIB_linedot2">
<div class="twit_item_pic">
<a href="" target="_blank">
<img src="" ...>
</a>
</div>
<div class="twit_item_content">
....
</div>
</div>
CSS:
復(fù)制代碼 代碼如下:
.twit_list dd .twit_item_pic{float:left;width:66px;padding-top:2px;} .twit_list dd .twit_item_content{float:left;width:316px;color:#666;line-height:18px;}
大部分應(yīng)試者都是這個(gè)答案。用了浮動(dòng)就必須定寬,結(jié)構(gòu)就失去靈活性,同時(shí)必須解決浮動(dòng)帶來的一系列問題。
網(wǎng)易首頁方案:
復(fù)制代碼 代碼如下:
<ul>
<li class="list-figure"><a href=""><img src=""></a></li>
<li><a href="">…</a></li>
<li><a href="">…</a></li>
<li><a href="">…</a></li>
</ul>
CSS:
復(fù)制代碼 代碼如下:
.list-figure { float: left; _display: inline; width: 130px; margin-left: -140px; margin-top: 6px; }
這些寫法都是欠缺對(duì)css基本概念的理解。如果理解block formatting context(塊級(jí)格式化上下文)的概念, 就不會(huì)這么寫了。觸發(fā)了BFC的塊級(jí)元素,它的邊緣不會(huì)和float box重疊。
推薦的方案:
復(fù)制代碼 代碼如下:
<div class="item">
<div class="pic">...</div>
<div class="content">...</div>
</div>
CSS:
復(fù)制代碼 代碼如下:
.item .pic { float:left;margin-right:10px; }
.item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */
我寫的一個(gè)實(shí)例
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<style type="text/css">
body {
margin: 0;
padding: 1em 0;
background-color: #f3f3f3;
font:16px/1.7 Arial, Helvetica, sans-serif;
color:#5a5a5a
}
a {
color: #08c;
text-decoration: none
}
header h1{
text-align:center
}
ul{margin: 0;padding: 0}
ul li{list-style: none;margin: 0;font-size: 13px;}
h3{line-height: 1.7;margin: 0}
.item .pic { float:left;margin-right:10px; }
.item .content { overflow:hidden;zoom:1; } /* 或用display:table-cell */
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>左圖右內(nèi)容的效果實(shí)現(xiàn) </header>
<div class="item">
<div class="pic">
</div>
<div class="content">
<h3><a href="">標(biāo)題標(biāo)題標(biāo)題標(biāo)題</a></h3>
<ul>
<li><a href="">內(nèi)容內(nèi)容內(nèi)容內(nèi)容1</a></li>
<li><a href="">內(nèi)容內(nèi)容內(nèi)容內(nèi)容2</a></li>
<li><a href="">內(nèi)容內(nèi)容內(nèi)容內(nèi)容3</a></li>
<li><a href="">內(nèi)容內(nèi)容內(nèi)容內(nèi)容4</a></li>
</ul>
</div>
</div>
</body>
</html>
總結(jié)
用的不是技術(shù),更多是技巧
由于在學(xué)校里沒有系統(tǒng)的前端開發(fā)課程,導(dǎo)致對(duì)html/css/javascript基本概念的理解非常薄弱。大部分人的學(xué)習(xí)方式是:先看書,然后覺得書和實(shí)踐離得很遠(yuǎn)就直接實(shí)踐,遇到問題就去網(wǎng)上搜,而搜到的基本都是“技巧”性的東西?;蛘呤歉鴮W(xué)校里的“牛人”學(xué),摻著各種好的、壞的經(jīng)驗(yàn)全盤接受。比如實(shí)現(xiàn)一個(gè)左圖右內(nèi)容的顯示效果,寫出html和css(見下圖)。這是我的一道筆試題,看起來很簡單吧。但是還沒有人答出最佳答案。如果去網(wǎng)上看,國內(nèi)那些大網(wǎng)站們是怎么實(shí)現(xiàn)的,就不能怪他們了。
相關(guān)文章
關(guān)于HTML的語義化標(biāo)簽和無語義化標(biāo)簽
這篇文章主要介紹了關(guān)于HTML的語義化標(biāo)簽和無語義化標(biāo)簽,語義化的標(biāo)簽,旨在讓標(biāo)簽有自己的含義,讓瀏覽器認(rèn)識(shí)這個(gè)標(biāo)簽所傳達(dá)的信息,是干什么的有什么作用,需要的朋友可以參考下2023-04-04HTML相關(guān)知識(shí)點(diǎn)總結(jié)
本文詳細(xì)總結(jié)了HTML的相關(guān)知識(shí)點(diǎn),有助于大家初步的學(xué)習(xí)或之后的復(fù)習(xí),感興趣的小伙伴一起來看看吧,可以參考一下2021-08-08