css样式教程:图文混排[图上文字下]

css样式教程:图文混排[图上文字下],标题不知道怎么写所以就搞得很乱,很多的,下我们先看看混文混排的效果图片你就会知道是怎么的效果了哦.

看css 布局代码.

 代码如下 复制代码
 <ul class="hotGroup">
            <li><a href="#"></a><span>圈子名称</span></li>
            <li><a href="#"></a><span>圈子名称</span></li>
            <li><a href="#"></a><span>圈子名称</span></li>
            <li><a href="#"></a><span>圈子名称</span></li>
            <li><a href="#"></a><span>圈子名称</span></li>
            <li><a href="#"></a><span>圈子名称</span></li>
            </ul>

            样式代码是不是很简洁啊,下面我们就看看在css 样式是怎么控制的吧.

 

 代码如下 复制代码

ul.hotGroup,ul.livelyGroup {
 padding-top: 12px;
}
ul.hotGroup li,ul.livelyGroup li {
 float: left;
 width: 65px;
 text-align: center;
}
ul.hotGroup li a,ul.livelyGroup li a {
 display: block;
 height: 50px;
 width: 50px;
 background-color: #CCCCCC;
 margin-right: auto;
 margin-left: auto;
 white-space: nowrap;
 overflow: hidden;
}
ul.hotGroup li img, ul.livelyGroup li img {
 height: 50px;
 width: 50px;
}

ul.hotGroup li span,ul.livelyGroup li span {
 line-height: 22px;
 display: block;
 height: 22px;
 width: 50px;
 margin-right: auto;
 margin-left: auto;
 white-space: nowrap;
 overflow: hidden;
}

最后就完了,申明站原创转载请注明:  www.111cn.net

时间： 2024-12-31 19:12:00

css样式教程:图文混排[图上文字下]的相关文章

css教程:css+div图文混排

css教程:css图文混排今天我们看看比较高级的css+div进行图文混排吧,我们先来看看下面图的效果图片. 效果还不错吧,我们看看css代码. <dl  class="week1" id="no1">      <dt><a><img src="images/unknow.gif" height="100" width="133"></a><

图文混排怎么做

问题描述 图文混排怎么做 解决方案 图文混排思路:把文字和图片的url一起放在消息的扩展里面.然后一起发送 接收到 布局到自己定义的cell里面.

css图文混排样式代码

本文章来讲css图文混排样式代码吧,这对新手是很有帮助了,下面我们先看看是以什么样式排列的吧. 就这种效果哦.好了我们先来看看他的css 代码吧.  代码如下 复制代码 <div id="ployMain">             <h4><img src="../imgs/ploy_04.gif"></h4>    <dl>             <dt></dt>      

css+div图文混排多列多行

好了今天我们来看看css+div图文混排多列多行的图文排版方式的代码编写方式吧,先来看看效果图片. 这是效果图片,我们来看看css如何布局的; <dl class="sitemapdl">          <dt class="sitemapdt">加盟妙趣</dt>          <dd><a href="http:///jmmq/jmly.php">加盟理由</a>

css左图右内容(图文混排)的实现方法

先看效果图 列表实现图文混排"> 百度新闻首页的方案:  代码如下 复制代码 <table>  <tbody>  <tr>  <td class="topic-pic"><a href=""><img src=""></a></td>  <td class="topic-txt">-</td>

Word2013新工具：图文混排编辑更加轻松简单

以前我们在Word文档中尝试移动图像或者图表时常常会碰到各种莫名其妙的位置偏差问题,令人抓狂,在新版的Word2013中专门针对这个用户抱怨颇多的问题提供了一些方便图片控制和操作的新功能.一起来详细了解一下. "布局选项"按钮,可以方便用户在文档编辑时快速选择和改变图片布局. 实时布局,方便用户在对图片做移动.调整大小或者旋转时实时看到文档的新布局效果. 对齐参考线,帮助用户在调整图文时更加直观地查看重要区域是否对齐. "布局选项"按钮 我们在Word2013的文档

如何让图文混排好看又好用？

  来看看高手是怎么做的!今天搜集了一组值得同学们借鉴学习的图文混排优秀案例,为了同学们能有所收获,案例都附有到位的分析,几乎每个案例都有特别的排版技巧,对提升版式设计能力很有帮助,来学习咯. 从过去到现在,设计师们总是对方位性的问题格外敏感,可能还有些轻微的强迫症.比如有的网页设计师特别偏好黄金比例的使用,从而忽视了用户的视觉感官体验. 其实,所有的法则或规律都需要设计师们的弹性使用,生搬硬套可能只会适得其反.以下是AnyForWeb为大家搜集的值得借鉴的图文混排案例,供大家评论欣赏. Nat

Word2013中最为全面的图文混排攻略

  图文混排,相信熟悉Word的朋友肯定不会对这个词语感到陌生.图文混排应用到各个领域,最为常见的是一些杂志.报刊,图文混排,重点是这个"混"字,合理的对图片进行版式布局,能够为文档增色不少!下面,小编就来分享一篇图文混排的实例. 什么是图文混排? 顾名思义,所谓图文混排,就是将文字与图片混合排列,文字可在图片的四周.嵌入图片下面.浮于图片上方等. 实例演示 ①我们启动Word2013,首先复制一段文字进去,光标定位到需要插入图片的地方,单击菜单栏--"插入"--&

winform图文混排-C# winform程序图文混排文章的添加、删除、编辑、展示

问题描述 C# winform程序图文混排文章的添加.删除.编辑.展示 有一个winform程序需要添加图文混排文章,文章来源于word,使用什么方式可以进行文章添加,并如何取出文章内容,通过何种形式保存入数据库.在文章展示时候,又如何从数据库取出展示到winform程序界面中.另外程序功能还提供对于这个图文混排文章的编辑功能. (注:数据库采用SQL 2008数据库.文章中图片文字搭配方式文章不同排版方 方式也不同.不建议使用任何第三方付费插件) 解决方案 最简单的是用richtextbox或