HTML实现左图右文字网页设计

于 2024-05-15 23:55:16 发布
阅读量703 收藏 5
点赞数 4
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65230676/article/details/138928141
版权 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="https://fonts.googleapis.com/css?family=Just+Another+Hand|Open+Sans:300,400" rel="stylesheet">
    <link rel="stylesheet" href="css/styles-merged.css">
    <link rel="stylesheet" href="css/style.min.css">
    <link rel="stylesheet" href="css/custom.css">
    <!--[if lt IE 9]>
      <script src="js/vendor/html5shiv.min.js"></script>
      <script src="js/vendor/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <!-- START: header -->
  <div class="probootstrap-loader"></div>
  <header role="banner" class="probootstrap-header">
    <div class="container">
        <a href="首页.html" class="probootstrap-logo">小猪佩奇有限公司<span></span></a>
      <div class="mobile-menu-overlay"></div>
        <nav role="navigation" class="probootstrap-nav hidden-xs">
          <ul class="probootstrap-main-nav">
            <li><a href="首页.html">首页</a></li>
            <li class="active"><a href="about.html">关于佩奇</a></li>
            <li><a href="公司业务.html">佩奇业务</a></li>
            <li><a href="会展介绍.html">佩奇介绍</a></li>
            <li><a href="联系我们.html">联系我们</a></li>
            <li><a href="媒体中心.html">媒体中心</a></li>
          </ul>
          <div class="extra-text visible-xs"> 
            <ul class="social-buttons">
              <li><a href="#"><i class="icon-twitter"></i></a></li>
              <li><a href="#"><i class="icon-facebook2"></i></a></li>
              <li><a href="#"><i class="icon-instagram2"></i></a></li>
            </ul>
          </div>
        </nav>
    </div>
  </header>
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
    .photo{
        float:left;
        width:40%;
    }
    .intro{
        float:right;
        width:60%;
    }
</style>
</head>
<body>
    <div class="container">
          <h2 class="heading">关于佩奇</h2>
        </div>
<div class="title">
    <div class="photo"><img  src="img/i11.jpg" height="350px" width="550px"alt="用css实现图片右边有字" ></div>
    <div class="intro">
        <p>小猪佩奇公司是一家以小猪佩奇形象为核心的跨国儿童娱乐公司。公司成立于2004年，总部位于英国伦敦，目前已发展成为全球最受欢迎和知名度最高的儿童动画品牌之一。 </p>
            <p>小猪佩奇公司主要致力于以小猪佩奇为主角的动画片、图书、玩具和周边产品的开发和销售。通过动画片的播放和推广，以及图书和玩具的销售，该公司成功地打造了一个完整的儿童消费品牌。</p>
            <p>小猪佩奇公司秉承“快乐、教育、亲子”的理念，着力为孩子们提供有趣且富有教育意义的内容。动画片中的故事情节都围绕着小猪佩奇和她的家人展开，通过日常生活中的小事件，传递出积极向上的价值观和亲子关系的重要性。</p>
    </div>
</div>
<div class="gototop js-top">
        <a href="#" class="js-gotop"><i class="icon-chevron-thin-up"></i></a>
      </div>
      <script src="js/scripts.min.js"></script>
      <script src="js/main.min.js"></script>
      <script src="js/custom.js"></script>
</body>
</html>

M小慕同学
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html实现 左图右文_一个左图右文的简单CSS布局
weixin_35786588的博客
12-24 1852
CSS布局-www.mb5u.com*{margin:0;padding:0;border:0; list-style:none}body{background:white;}.event{ width:442px;height:90px; margin:5px; clear:both; border:1px white solid; }.event .pic{ float:left;margi...
html左文右图布局方法,常见的图文布局
weixin_33274610的博客
07-02 3641
图文布局的效果图文布局的代码常见的图文布局.all {width: 900px;margin: 0 auto;}.title {float: left;width: 100%;background-color: yellowgreen;height: 40px;margin: 20px 0;border-radius: 20px;/*弹性盒子*/display: flex;flex-directi...
html+css 左边是图片，右边是文字
热门推荐
zhao_hong_ran的博客
06-16 10万+
&lt;div class="golf"&gt; &lt;div class="photo"&gt;&lt;img src="images/ql36.jpg"&gt;&lt;/div&gt; &lt;div class="intro"&gt;     &lt;h3&gt;高尔夫&lt;/h3&gt;     &
AIO（Asynchronous Input and Output）异步讲解
PanPa_WoNiu的博客
09-10 375
写的比较好的文章: https://www.cnblogs.com/loveer/p/11493705.html
html左文右图布局方法,左图右文与左文右图
weixin_42609225的博客
06-10 2850
应该有不少小伙伴在平时在使用各种APP阅读新闻资讯时遇到过这样的问题：同样是新闻资讯类的APP，为什么有些的布局是左文右图，而有些则是左图右文？刚开始发现这个问题的时候自己也比较困惑，便和一些设计伙伴进行讨论，也在网上查看了其他人的理解。当中不少人认为这样的差异是因为不同新闻平台侧重点不一样，像今日头条侧重的是保证用户阅读信息的流畅性便采用左文右图的布局，而网易则想让用户更加注重深度阅读，同时图片...
如何用HTML实现一个简单的图文混排及思路
qq_66573934的博客
01-23 1万+
编写思路： 准备好一张图片，使用图像标签<img />插入需要的图片； 在图像标签<img />内使用相应的属性设置图片的左对齐(align=“left”） 、水平边距(hspce)和宽度(width) 使用标题标签<h2>来突出标题并设置相关属性(字体:face、字号:size、颜色:color) 使用段落标签<p>来实现三段文字(可以用相关的属性来设置文字的样式 怎么设置请看第三段文字) 源代码： 实现效果: ...
CSS实现左图右文混排布局的方法
09-25
主要为大家介绍了CSS实现左图右文混排布局的方法,涉及css图文混排布局的相关技巧,非常简单实用,需要的朋友可以参考下
C# Winform按钮中图片实现左图右字的效果实例
12-16
在C# Winform开发中，有时我们希望按钮不仅有文字提示，还能展示图标，实现左图右字的效果，这样既能增强界面的美观性，又能更直观地表达按钮的功能。下面我们将详细探讨如何实现这一效果。 首先，我们需要创建一个...
使用CSS的table-cell属性实现左图右文的排版方法详解
09-24
一些情况下使用table-cell比float来得更加简单有效,比如水平菜单的样式编写,这里我们则来看一下使用CSS的table-cell属性实现左图右文的排版方法详解:
html怎么让图片在左侧文字在右边,网页设计 怎么让图片在左 文字在右
weixin_35146639的博客
06-03 1万+
使用PS设计网站的话，有很多要注意的地方，按我自己的理解，大致有屏幕大小和文字表现两个特别需要注意的方面。我们都知道，现在的电脑屏幕有大有小，既要考虑到大屏幕又要考虑到10寸小本。。。所以，大家根据主流显示器的分辨率，一般都会把页面的宽度限制在1000像素以内，同时，大多页面都会设置居中。具体的分辨率以及尺寸你可以百度一下相关的内容与说明。一般来说，960和980是两个比较常用的宽度。第二个关键的...
HTML5+css3图片文本文字位置（绝对位置）
Lucky1019的博客
10-09 3339
一、position: absolute; left+距离px right+距离px top+距离px bottom+距离px 注：以浏览器左上角为原点，向下向右延申为正。 绝对位置可设置图片以及文本文字位置 二、相对位置（通过距离浏览器四边距离确定的位置） 1、padding padding-left（左内边距）padding-top（上内边距） padding-right（右内边距）padding-bottom（下内边距） 2、margin margin-l...
H5如何实现图文一行分布且图片在左侧而文字在右侧
长高
02-20 1万+
这几天总有人问我关于Web前端设计的作业怎么做呀，有什么代码可以实现啊。 我看了下作业内容，说是难点在于让图文在同一行且图片在左侧而文字在右侧且进行布局。 看完作业内容后我想说的是：“有问题能尽量百度就百度，别问这么基础的问题啊洗吧！” 关于如何实现图文在一行分布且图片在左侧而文字在右侧 <table border="0"> <tr> <td rowspan =...
html图文混排结构dt,dl,dt,dd实现的图文混排（左边图片右边文字）
weixin_35241415的博客
06-05 3476
/p>Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档body{font-family:Arial; font-size:12px; color:#000000; margin:0auto; padding:0; border:0;}p{ margin:0; padding...
html左边图片右边文字_有了这些网站，不用PS也可以做出文字云效果
weixin_39926311的博客
11-02 615
工作中的PPT汇报、广告海报经常会用到关键词或者标签展示。这样的这样的不仅具备视觉冲击，而且很好地突出了内容。那要怎样达到上述效果？非得用PS或AI？NO，no，no~一款好用的文字云工具可以一键分析热词并生成。效率！完美！今天就给大家介绍一些超级好用的文字云生成器，让枯燥的文字变成具有视觉效果的图微词云一款实用、操作简单的在线文字云生成工具。主要是提供智能分词，智能生成文字云图。网站上拥有超清海...
html 图片hover右滑,jq实现左侧显示图片右侧文字滑动切换效果
weixin_32232809的博客
06-04 419
分享一款jQuery左侧图片右侧文字滑动切换代码。这是一款基于jQuery实现的列表图片控制图片滑动切换代码。效果图如下：下面给大家分享下基于jq实现左侧显示图片右侧文字滑动切换效果，用div+css布置表单借用jq实现特效，具体不多说了，请看下面代码。html代码： 设计院开展扶贫济困募捐活动根据总局文明委《关于开展扶贫济困募捐活动的通知》精神，在总局机关和直属单位...
html左文右图布局方法,UIButton 左文右图,上文下图 ,上图下文
weixin_36448205的博客
07-02 885
1.设置左文右图时button.titleLabel.intrinsicContentSize.width+button.imageView.bounds.size.width 值要小于button.size.width2.设置上图下文或者上图下文时button.titleLabel.intrinsicContentSize.height +button.imageView.b...
html左边显示文字右边显示图片
最新发布
06-09
可以使用HTML和CSS实现左边显示文字右边显示图片的布局。具体的实现方法可以参考以下代码： ``` <div class="container"> <div class="text"> <h2>这里是文字标题</h2> <p>这里是文字内容，可以换行，可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长。</p> </div> <div class="image"> <img src="图片地址" alt="图片描述"> </div> </div> ``` 这里使用了一个包含两个子元素的父容器，左边是一个文本容器，右边是一个图片容器。接下来，可以使用CSS设置这些元素的样式，具体的实现方法可以参考以下代码： ``` .container { display: flex; flex-direction: row; align-items: center; justify-content: center; } .text { flex: 1; padding: 20px; } .text h2 { font-size: 24px; margin-bottom: 10px; } .text p { font-size: 16px; line-height: 1.5; } .image { flex: 1; } .image img { width: 100%; height: auto; } ``` 这里使用了CSS的flex布局来实现左右两个容器的对齐，并且设置了适当的内边距和字体大小来调整文本容器的样式。图片容器的样式设置了flex属性，使其占据剩余的空间，并使用CSS的样式来设置图片的宽度和高度自适应容器的大小。 这样就可以实现左边显示文字右边显示图片的布局了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值