展会信息港展会大全

css左图右内容(图文混排)的实现方法
来源:互联网   发布日期:2016-03-25 16:27:54   浏览:3548次  

导读:左图右内容其实就是一个很简单的布局了,我们经常会在种大的门户网站经常看到的图文混排效果了,下面我来给大家介绍一下实例过程。先看效果图百度新闻首页的方案:代码如下复制代码...

左图右内容其实就是一个很简单的布局了,我们经常会在种大的门户网站经常看到的图文混排效果了,下面我来给大家介绍一下实例过程。

先看效果图

百度新闻首页的方案:

代码如下

复制代码

<table>

<tbody>

<tr>

<td class="topic-pic"><a href=""><img src=""></a></td>

<td class="topic-txt">…</td>

</tr>

</tbody>

</table>

html结构丑陋,但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;}

大部分应试者都是这个答案。用了浮动就必须定宽,结构就失去灵活性,同时必须解决浮动带来的一系列问题。

网易首页方案:

代码如下

复制代码

<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; }

这些写法都是欠缺对css基本概念的理解。如果理解block formatting context(块级格式化上下文)的概念, 就不会这么写了。触发了BFC的块级元素,它的边缘不会和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 */

我写的一个实例

代码如下

复制代码

<!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>左图右内容的效果实现 </header>

<div class="item">

<div class="pic">

</div>

<div class="content">

<h3><a href="">标题标题标题标题</a></h3>

<ul>

<li><a href="">内容内容内容内容1</a></li>

<li><a href="">内容内容内容内容2</a></li>

<li><a href="">内容内容内容内容3</a></li>

<li><a href="">内容内容内容内容4</a></li>

</ul>

</div>

</div>

</body>

</html>

总结

用的不是技术,更多是技巧

由于在学校里没有系统的前端开发课程,导致对html/css/javascript基本概念的理解非常薄弱。大部分人的学习方式是:先看书,然后觉得书和实践离得很远就直接实践,遇到问题就去网上搜,而搜到的基本都是“技巧”性的东西。或者是跟着学校里的“牛人”学,掺着各种好的、坏的经验全盘接受。比如实现一个左图右内容的显示效果,写出html和css(见下图)。这是我的一道笔试题,看起来很简单吧。但是还没有人答出最佳答案。如果去网上看,国内那些大网站们是怎么实现的,就不能怪他们了。

赞助本站

人工智能实验室

相关热词: 开发 编程 android

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港