实现页面的图文混排布局（Web作业）

最新推荐文章于 2023-12-26 02:24:17 发布
最新推荐文章于 2023-12-26 02:24:17 发布
阅读量7k 收藏 50
点赞数 9
分类专栏： 04-前端技术 文章标签： css html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44723773/article/details/109195336
版权

介绍

实现如下图的HTML+CSS的静态网页
在这里插入图片描述
给了一个JS的设计稿，可以查看各个元素的间距、颜色、样式代码等
在这里插入图片描述

仿写一个静态的网页

静态代码效果

在这里插入图片描述

代码

以上的代码，我会打包放在本文的链接中，需要学习交流的小伙伴们可以下载。
实践代码：20201021HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>周黑鸭网站</title>
    <style>
      body {
        background: #f2f2f2;
      }
      .box {
        width: 90%;
        height: 90%;
        margin: 0 auto;
      }
      .nav {
        margin-left: 87px;
      }
      .tit {
        color: #ff5500;
        font-family: Noto Sans SC;
        font-weight: regular;
        font-size: 22px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
      }
      .img-vector {
        float: left;
      }
      .tit {
        position: relative;
        top: -4px;
        vertical-align: bottom;
        left: 20px;
      }
      .categor {
        margin-left: 16px;
      }
      .content {
        height: 400px;
        width: 260px;
        margin: 4px 50px 0px 0px;
        display: flex;
        border-radius: 32px;
        background: #ffffff;
        border: 1px solid #ebebeb;
      }
      .content-box {
        border-radius: 10px;
      }
      .image-pic {
        position: relative;
        top: 2px;
        left: 2px;
        margin: 21px 21px 144px 21px;
        height: 178px;
        width: 218px;
      }
      .desc {
        color: #666666;
        font-family: Noto Sans SC;
        font-weight: regular;
        font-size: 12px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
      }
      .discount {
        width: 91px;
        height: 26px;
        margin-top: 10px;
        background: #ffffff;
        border: 1px solid #ff8000;
        color: #ff8000;
        line-height: 26px;
        text-align: center;
      }
      .bottom {
        margin-left: 22px;
        margin-right: 22px;
        position: relative;
        top: -120px;
      }
      .container {
        display: flex;
        justify-content: center;
      }
      .miaosha {
        color: #ff2200;
        font-family: Noto Sans SC;
        font-weight: regular;
        font-size: 12px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
        width: 50px;
      }
      .fz {
        font-size: 28px;
        color: #ff5000;
      }
      .fc {
        color: #999999;
        font-family: Noto Sans SC;
        font-weight: regular;
        font-size: 12px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
        text-decoration: line-through;
      }
      .hot-count {
        color: #ff2200;
        font-family: Noto Sans SC;
        font-weight: regular;
        font-size: 14px;
        line-height: normal;
        letter-spacing: 0px;
        text-align: left;
      }
      .hot-pic {
        width: 11px;
        height: 15px;
        vertical-align: middle;
      }
      .hot {
        margin-top: 8px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="nav">
        <div class="title">
          <img
            src="../热卖/data/exports/Vector-1@1x.png"
            class="img-vector"
            alt=""
          />
          <div class="tit">热卖单品</div>
        </div>
        <div class="category">
          <img src="../热卖/data/exports/牙膏@1x.png" alt="" />
          <img class="categor" src="../热卖/data/exports/口红@1x.png" alt="" />
          <img
            class="categor"
            src="../热卖/data/exports/帆布鞋@1x.png"
            alt=""
          />
          <img
            class="categor"
            src="../热卖/data/exports/沐浴露@1x.png"
            alt=""
          />
          <img class="categor" src="../热卖/data/exports/拖鞋@1x.png" alt="" />
        </div>
        <!-- <hr style="border: 1px solid #EBEBEB" /> -->
        <img src="../热卖/data/exports/Line-1@1x.png" alt="" />
      </div>
      <div class="container">
        <div class="content">
          <div class="content-box">
            <img
              class="image-pic"
              src="../热卖/static/imgs/O1CN01T3vKKu1Hgwj0UoVPV_!!2206976340788-0-scmitem6000.jpg_430x430q90.jpg"
              alt=""
            />
            <div class="bottom">
              <div class="desc">
                燕麦巧克力酥好吃的零食糖果牛奶燕麦片儿童网红休闲食品小吃农场...
              </div>
              <div class="discount">满200减50</div>
              <span class="miaoshabox">
                <span class="miaosha">秒杀价￥</span>
                <span class="miaosha fz">268</span>
                <span class="fc">￥588</span>
              </span>
              <div class="hot">
                <img class="hot-pic" src="../热卖/static/imgs/hot.png" alt="" />
                <span class="hot-count">卖爆15.6万件</span>
              </div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="content-box">
            <img
              class="image-pic"
              src="../热卖/static/imgs/O1CN01T3vKKu1Hgwj0UoVPV_!!2206976340788-0-scmitem6000.jpg_430x430q90.jpg"
              alt=""
            />
            <div class="bottom">
              <div class="desc">
                燕麦巧克力酥好吃的零食糖果牛奶燕麦片儿童网红休闲食品小吃农场...
              </div>
              <div class="discount">满200减50</div>
              <span class="miaoshabox">
                <span class="miaosha">秒杀价￥</span>
                <span class="miaosha fz">268</span>
                <span class="fc">￥588</span>
              </span>
              <div class="hot">
                <img class="hot-pic" src="../热卖/static/imgs/hot.png" alt="" />
                <span class="hot-count">卖爆15.6万件</span>
              </div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="content-box">
            <img
              class="image-pic"
              src="../热卖/static/imgs/O1CN01T3vKKu1Hgwj0UoVPV_!!2206976340788-0-scmitem6000.jpg_430x430q90.jpg"
              alt=""
            />
            <div class="bottom">
              <div class="desc">
                燕麦巧克力酥好吃的零食糖果牛奶燕麦片儿童网红休闲食品小吃农场...
              </div>
              <div class="discount">满200减50</div>
              <span class="miaoshabox">
                <span class="miaosha">秒杀价￥</span>
                <span class="miaosha fz">268</span>
                <span class="fc">￥588</span>
              </span>
              <div class="hot">
                <img class="hot-pic" src="../热卖/static/imgs/hot.png" alt="" />
                <span class="hot-count">卖爆15.6万件</span>
              </div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="content-box">
            <img
              class="image-pic"
              src="../热卖/static/imgs/O1CN01T3vKKu1Hgwj0UoVPV_!!2206976340788-0-scmitem6000.jpg_430x430q90.jpg"
              alt=""
            />
            <div class="bottom">
              <div class="desc">
                燕麦巧克力酥好吃的零食糖果牛奶燕麦片儿童网红休闲食品小吃农场...
              </div>
              <div class="discount">满200减50</div>
              <span class="miaoshabox">
                <span class="miaosha">秒杀价￥</span>
                <span class="miaosha fz">268</span>
                <span class="fc">￥588</span>
              </span>
              <div class="hot">
                <img class="hot-pic" src="../热卖/static/imgs/hot.png" alt="" />
                <span class="hot-count">卖爆15.6万件</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

其他

上面的代码主要使用了图文混排的display布局方式，图文混排是网页中常用的排版方式，本人资质尚浅，代码有误之处，还望指出，鄙人感激不尽！

王菜鸟
关注
专栏目录
《web课程设计》使用HTML+CSS制作大学生校园二手交易网站
html精品源码
08-04 1万+
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语...
HTML阶段案例 ——制作图文混排页面
qq_45870494的博客
12-11 5520
图文混排网页制作 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text"utf-8"/> <title>威海职业学院</title> </head> <body> <img src=...
Html图文混排系统
07-13
绝对酷的纯动力Html版本图文系统! 台登陆：admin_login.asp 用户名和密码：staxp
图文混排的页面
10-23
图文混排的结构，页面的左面是图，页面的右面是字。也可以改成上下的图文混排
webView实现图文混排
gavin__fan的博客
12-03 1561
在别的地方转的,源地址不可用了,收藏下留着以后用. 一开始做第一个新闻资讯项目的时候，不知道可以使用UIWebView实现图文并茂的效果，于是就用了最笨的方法，使用TableView解决的新闻浏览。当有点项目经验后知道可以使用UIWebView或者CoreText实现，一直也没有尝试。当上次面试被问到怎么使用WEbView进行新闻资讯展示时，当时就蒙圈了。回来以后，查阅资料发现原来如此简单；
HTML网页设计基础——图文混排
shengming_tutou的博客
01-21 3525
HTML网页设计基础——图文混排 案例： 该题主要用到了图像标签<img/>： <img src=”图像URL”/> 图像标签属性： 代码：
网页图文混排代码
管子（zero）的杂乱空间
12-10 2880
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
设计并制作图文混排网页，网页效果如下
最新发布
sankang2022的博客
12-26 1044
（1）新建以“班级+名字”命名的站点。 （2）新建图文混排网页文件index.html。 （3）网页标题使用2号标题，居中显示。 （4）在网页中加载图片并设置图片大小。 （5）使用段落标记，添加网页文字。 （6）加入水平线并设置其样式。 （7）插入超链接并设置其样式。 （8）为该页面添加css样式，美化网页文件。
如何利用 HBuilderX 制作图文混排的网页
热门推荐
听风者i的博客
08-31 1万+
如何利用 HBuilderX 制作图文混排的网页 实践项目： 1、在D盘创建名为web的基本web项目 2、创建一个空白网页文件，命名为gsjj.html 3、网页文件用于介绍公司的基本情况，要求包含标题，正文和图片。...
页面内容样式设计——图文混排
Ronny的博客
05-19 4741
目录图文混排实现一个图文混合单元模块1. HTML代码2. 浏览器显示效果 图文混排 图文混排是制作精美页面必须使用的技术，通过将适当的图像与文字有效地排列在一起，可以大大丰富版面内容。图文混排的结构没有统一标准，一般做法是把图像和文本信息同时封装在一个包含元素内，再嵌入其他布局元素或修饰元素。 实现一个图文混合单元模块 1. HTML代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="
webView图文混排.zip
05-26
欢迎大家下载,一起学习,一起交流
word操作练习题图文混排
06-23
word操作练习题图文混排01，内含素材、样文文档以及样文截图
【html5期末大作业】基于HTML+CSS+JavaScript管理系统页面模板
08-10
- **子页面**: 根据内容的不同，可能包含纯文字页面或图文混排页面，以及一些多媒体元素。 - **交互功能**: 例如表单提交、下拉菜单等，这些功能通常由JavaScript实现。 - **多媒体元素**: GIF动画、视频、音乐等...
用DIV+CSS技术设计的西安旅游网站18页（web前端网页制作课作业）HTML+CSS旅游网站设计与实现
08-10
- **图文混排**: 使用适当的CSS样式展示图文结合的信息。 - **分页**: 通过JavaScript实现内容分页加载。 - **评论系统**: 允许用户留下反馈或评价。 #### 3. 表单设计 - **用户注册/登录**: 提供简单的表单让用户...
2022 html网页制作 007 旅游专题6页面
06-28
"图文混排"则可能涉及JavaScript来调整内容的布局和响应式设计，确保在不同设备上都能良好显示。 "留言验证"功能通常涉及到JavaScript的表单验证，例如，检查用户输入的邮箱格式是否正确，或是否已填写必填项。这...
用DIV+CSS技术设计的网上书城网页与实现制作（大一Web课程设计）
html精品源码
08-12 870
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语......
Web实验四 CSS应用综合实验 5月19日
Yutouxn0的博客
05-22 632
【实验目的】 1．掌握CSS的图文混排。 2．掌握在网页上应用CSS的方法。 3. 掌握iframe的使用。 【实验重点及难点】 掌握CSS+DIV布局。 【实验内容】 1、制作下图所示的图文混排页面。 <!DOCTYPE html> <html> <head> <title>背影</title> <style type="text/css"> #all{width: 800px;height:730p
简单的图文混排页面设计
weixiaosamoyed的博客
01-22 1601
真的很简单，很简单，很简单，很简单。
html怎么制作图文混排页面,CSS 网页图文混排的10个技巧
weixin_36361396的博客
06-03 6876
1. 首行缩进你知道的，从小学，老师就教我们，段落的开头应该空两格。而你使用word的时候，也有首行缩进这个功能，但在html中你的空格键好像起不了作用了。当然，你可以用来代替一个空格，但这不是理想的方式，用CSS吧，简单，有效：你的内容这样的话，这个有style="text-indent:2em;"段落就会显示两个字符的缩进了。缩进更多? 修改2em, 2表示2个字符，你可以相应增加或者减少。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

王菜鸟

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

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

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

打赏作者

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

抵扣说明：

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

余额充值