`
kidiaoer
  • 浏览: 824765 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

div左图右文布局效果 收藏

阅读更多
div左图右文布局效果 收藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>中国站长天空-网页特效-状态标题-标题栏上的倒计时</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
* {
    margin:0;
    padding:0;
}
img {
    height:100px;
    width:100px;
    border:1px solid #ccc;
    padding:2px;
}
h3 {
    font-size:12px;
    color:#09c;
    line-height:2em;
}
p {
    font-size:12px;
    text-indent:2em;
    line-height:1.5em;
}
#container {
    width:300px;
    margin:0 auto;
    margin-top:10px;
    padding-right:3px;
    border:1px dotted #666;
    position:relative;
}
#leftContent {
    position:absolute;
    top:4px;
    left:4px;
}
#rightContent {
    margin-left:120px;
}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="container">
  <div id="leftContent"><img src="http://www.zzsky.cn/effect/images/200810130850.gif"></div>
    <div id="rightContent">
      <h3>畅游五寨沟</h3>
      <p>醉江月酒店地处珞狮路,招牌菜脆皮蒜香鸡38元/份,此菜关键在选料上,采用了当年的童子鸡,突出蒜香味,分外诱人。鸡皮脆而肉鲜,菜式比较诱人,稍有些腻。</p>
    </div>
  </div>
</div>
</body>
</html>
分享到:
评论

相关推荐

    CSS实现左图右文混排布局的方法

    图片的div位于文本的div之前,这样才能达到左图右文的效果。 2. CSS样式的设计 首先,需要对全局样式进行初始化,这通常包括清除默认的margin和padding,确保不同浏览器的一致显示效果。 接下来,设置容器的样式,...

    微信小程序图片右边加两行文字的代码

    总之,实现微信小程序中图片右侧加两行文字的效果,可以通过使用 `display: flex` 的布局方式,配合合理的CSS样式来完成。在不同的应用场景中,开发者可以根据需要选择最合适的实现方法。通过本文的实例,相信读者能...

    CSS图文混排的几种方案

    1. 左图右文布局:这是一种常见的图文排版形式,图片位于内容的左侧,而文字描述位于图片的右侧。这种布局使得视觉上更为平衡,便于用户阅读。 2. 实例介绍:文件中提到了几个门户网站的图文混排方案。比如百度新闻...

    css 标题一行图片 两行文字的排列方法以及相关问题处理

    在CSS布局中,创建标题一行图片、两行文字的效果是一种常见的设计需求,它可以使页面更加生动和吸引用户注意力。以下是一些关于实现这种效果的关键知识点和常见问题的处理方法: ### 1. 图片与文字的布局方式 - **...

    网钛CMS ASP免费版 V2.90

    一、全站采用主流DIV+CSS框架布局,红色主色调,简洁大方。适合各类行业作为企业站使用。 二、后台直接配置网站所有信息,快捷建立站点; 三、可自定义首页各个栏目显示文章的条数和显示模式 四、首页栏目有4种样式:...

    网钛CMS ASP免费版 V2.93

    一、全站采用主流DIV+CSS框架布局,红色主色调,简洁大方。适合各类行业作为企业站使用。 二、后台直接配置网站所有信息,快捷建立站点; 三、可自定义首页各个栏目显示文章的条数和显示模式 四、首页栏目有4种样式:...

    网钛文章管理系统 V2.91最新版

    一、全站采用主流DIV+CSS框架布局,红色主色调,简洁大方。适合各类行业作为企业站使用。 二、后台直接配置网站所有信息,快捷建立站点; 三、可自定义首页各个栏目显示文章的条数和显示模式 四、首页栏目有4种样式:...

    微信H5页面兼容性解决方案 (2).docx

    &lt;div class="title"&gt;投·被保险人姓名&lt;/span&gt;&lt;/div&gt; &lt;div class="content"&gt; 请输入姓名" v-model="peopleList.name" @focus="changefocus()" @blur.prevent="changeBlur()"/&gt; &lt;/div&gt; &lt;/div&gt; ``` ```javascript ...

    香香企业管理系统 v5.0.rar

    香香企业文章管理系统是全站采用主流DIV CSS框架布局,功能强大,操作人性化,有五种不同模式,可以适用于广泛的新闻发布型网站,让不懂代码但又想建立自己网站的朋友,通过后台简单的配置,就能拥有一个个性化的...

    网钛文章管理系统

    网钛文章管理系统是全站采用主流DIV+CSS框架布局,功能强大,操作人性化,有五种不同模式,不但可以适用于广泛的新闻发布型网站,还适用于淘宝客网站,后续网钛科技将会不断升级优化,扩展功能,但不会往功能全面...

Global site tag (gtag.js) - Google Analytics