图文编排之HTML身份介绍浮动(图片换成自己的就行啦)

<!DOCTYPE html >  

<html>  

<head>  

<meta charset="utf-8" />  

<title>自我介绍</title>

<style>  

body{

    font-size:12px;

    line-height:2px;

    width:1000px;

    margin:auto;}  

*{ margin:0; padding:0;}  

#tu{border:white;

    width:900px;

    background:#76c6df;}  /*内容以外的背景*/

#tu dl{width:860px;

     height:200px;

     margin:20px;

     background:#76c6df;}  /*边框颜色*/

#tu dt{width:180px; /*人物图片设置参数*/

      height:180px;

      float:left;

      margin:10px;

      border: solid 10px #76c6df;

      /* background:rgb(252, 247, 247);  */

    border:#76c6df;}

#tu dd{width:410px;  /*介绍文字设置参数*/

     height:160px;

     float:left;

     margin:10px 10px 10px 0;

     padding:10p

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是一个简单的图文混排的物品介绍页面的HTML代码示例,供参考: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>物品介绍页面</title> </head> <body> <header> <h1>物品介绍</h1> </header> <main> <section> <h2>物品信息</h2> <ul> <li>名称:Apple iPhone 12</li> <li>颜色:黑色</li> <li>存储容量:128GB</li> <li>售价:¥6,299.00</li> </ul> </section> <section> <h2>物品特点</h2> <article> <h3>5G网络支持</h3> <img src="5G.jpg" alt="5G" width="200" height="150"> <p>iPhone 12支持5G网络,下载速度更快,网页打开更流畅,游戏体验更加出色。</p> </article> <article> <h3>A14仿生芯片</h3> <img src="A14.jpg" alt="A14" width="200" height="150"> <p>iPhone 12搭载A14仿生芯片,性能更强劲,能够满足用户对于高性能和多任务处理的需求。</p> </article> <article> <h3>6.1英寸Super Retina XDR显示屏</h3> <img src="display.jpg" alt="Display" width="200" height="150"> <p>iPhone 12采用6.1英寸的Super Retina XDR显示屏,色彩更鲜艳,屏幕更加逼真,非常适合观看视频和玩游戏。</p> </article> <article> <h3>双12MP后置摄像头</h3> <img src="camera.jpg" alt="Camera" width="200" height="150"> <p>iPhone 12配备了双12MP后置摄像头,支持夜景模式和人像拍摄,能够满足用户对于拍摄功能的需求。</p> </article> <article> <h3>MagSafe无线充电</h3> <img src="magsafe.jpg" alt="MagSafe" width="200" height="150"> <p>iPhone 12支持MagSafe无线充电,充电更加便捷,不需要插充电线,只需要将手机靠近充电器就能够自动吸附充电。</p> </article> </section> <section> <h2>用户评价</h2> <ul> <li>“很棒的手机,运速度非常快,拍照效果也很好。”</li> <li>“这款手机的屏幕非常漂亮,色彩鲜艳,非常适合看视频。”</li> <li>“MagSafe无线充电真的很方便,不用再插充电线了。”</li> </ul> </section> </main> <footer> <p>版权所有 © 2021 物品介绍页面</p> </footer> </body> </html> ``` 以上是一个简单的图文混排的物品介绍页面的HTML代码示例,包括了物品信息、物品特点和用户评价等内容。请注意,该示例代码只是一个演示,实际物品介绍页面的代码可能更加复杂和详细。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

长不大的树袋熊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值