利用HTML和CSS实现的浮动布局

这篇具有很好参考价值的文章主要介绍了利用HTML和CSS实现的浮动布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .all{
      width: 960px;
      height: 1000px;
      margin: 0 auto;
    }
    
    .body_url{
      height: 80px;
      display: inline-block;
      margin-bottom: 10px;
      /* 去除换行空格距离 */
      font-size: 0;
    }
    .body_com{
      display: inline-block;
      text-align: center;
      line-height: 80px;
      background-color: rgb(171, 149, 149);
      font-size: 16px;
    }
    .logo{
      width: 200px;
    }
    .banner1{
      width: 540px;
      margin: 0 10px;
    }
    .banner2{
      width: 200px;
    }
    .menu{
      height: 30px;
      background-color: rgb(171, 149, 149);
      text-align: center;
      line-height: 30px;
      margin-bottom: 10px;
    }
    .nav_left{
      width: 760px;
      float: left;
      font-size: 0;
    }
    .left_one{
      display: inline-block;
      width: 368px;
      height: 198px;
      text-align: center;
      line-height: 100px;
      border: 1px solid black;
      margin-right: 10px;
      margin-bottom: 10px;
      font-size: 16px;
    }
   
    .left_two{
      display: inline-block;
      width: 178px;
      height: 198px;
      text-align: center;
      line-height: 100px;
      border: 1px solid black;
      margin-right: 10px;
      font-size: 16px;
    }
    .nav_right{
      width: 200px;
      float: right;
      font-size: 0;
    }
    .left_three{
      display: inline-block;
      width: 198px;
      height: 128px;
      text-align: center;
      line-height: 100px;
      border: 1px solid black;
      margin-bottom: 10px;
      font-size: 16px;
    }
    .foot_url{
      /* 清除浮动 */
      clear: both;
      height: 60px;
      text-align: center;
      line-height: 60px;
      background-color: rgb(171, 149, 149);
    }
  </style>
</head>
<body>
  <div class="all">
    <!-- 头部 -->
    <div class="body_url">
      <div class="body_com logo">logo</div>
      <div class="body_com banner1">banner1</div>
      <div class="body_com banner2">banner2</div>
    </div>
    <!-- 菜单 -->
    <div class="menu">
      菜单
    </div>
    <!-- 栏目 -->
    <div class="nav_url">
      <!-- 左边栏目 -->
      <div class="nav_left">
        <!-- top -->
        <span class="left_one">栏目一</span>
        <span class="left_one">栏目二</span>
        <!-- bottom -->
        <span class="left_two">栏目三</span>
        <span class="left_two">栏目四</span>
        <span class="left_two">栏目五</span>
        <span class="left_two">栏目六</span>
      </div>
      <!-- 右边栏目 -->
      <div class="nav_right">
        <span class="left_three">栏目七</span>
        <span class="left_three">栏目八</span>
        <span class="left_three">栏目九</span>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="foot_url">
      页脚
    </div>
  </div>
</body>
</html>

这是UI设计图
利用HTML和CSS实现的浮动布局,CSS,html,css,javascript
下面为实现的效果图
利用HTML和CSS实现的浮动布局,CSS,html,css,javascript文章来源地址https://www.toymoban.com/news/detail-791296.html

到了这里,关于利用HTML和CSS实现的浮动布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html+css 浮动、清除浮动、什么是BFC?、如何开启BFC

    介绍: 其实早期的浮动是用来文字环绕图片效果,但是后来发现浮动还可以设置页面布局问题 块元素在文档流中默认垂直排列,如果希望块元素在页面中水平排列,可以使块元素脱离文档流 特点: 哪个元素设置浮动,哪个元素就会脱离文档流 如果给上边的元素设置浮动时,

    2024年02月02日
    浏览(49)
  • 前端:运用HTML+CSS+JavaScript实现拼图游戏

    前一段时间突然来了一个想法,就是运用前端知识实现一个拼图游戏,但是不知道具体怎样实现。今天,想到既然实现不了现实中我们看到的那种拼块,那么就用正方形来代替吧! 效果如下: 想到就是当小的图片块放到合适的位置上时,表示拼图完成。 1. 前端布局 运用cs

    2024年02月08日
    浏览(57)
  • HTML+CSS+JavaScript实现网络购物车

    1 页面布局 购物车由一个table标签和一个div标签构成。案例在Chrome浏览器运行效果,如图所示。 table标签共有5行6列,第1行是表头,第2-5行的每一行都代表一个商品,依次用td标签存放商品的勾选框、商品缩略图及名称、商品单价、商品增减操作按钮以及小计、删除按钮等。

    2024年02月05日
    浏览(47)
  • 【HTML+CSS+JavaScript】实现鼠标点击烟花效果

    本文主要讲解三种烟花效果(爆炸型、心型、圆形),文章末尾附有完整的代码和图片获取链接。 效果图(一) - 心型 : 效果图(二) - 圆型 : 效果图(三) - 爆炸型 : (1) HTML部分代码 (2) CSS部分代码 (3) 内部的JavaScript部分代码 (1) HTML部分代码 (2) CSS部分代码 (3) 内部的JavaScript部分

    2024年02月01日
    浏览(87)
  • HTML、CSS和JavaScript实现简单天气预报

    使用 HTML、CSS和JavaScript实现简单天气预报 的步骤: 首先需要获取天气API的数据,可以通过向第三方天气数据服务商发送HTTP请求来获取数据。例如,可以使用Yahoo Weather API或OpenWeatherMap API等。这里以OpenWeatherMap API为例,获取当前城市的天气情况。 接着,将获取到的天气数据动

    2024年02月04日
    浏览(53)
  • HTML + CSS + JavaScript【实战案例】 实现动画导航栏效果

    ​Hello~ 咱们今天一起来学习一个动画导航的小项目 HTML结构

    2024年02月03日
    浏览(58)
  • 拖动排序功能的实现 - 使用HTML、CSS和JavaScript

    在现代Web应用程序中,拖动排序是一种常见的用户界面交互方式,它允许用户通过拖动元素来重新排列列表或项目的顺序。本文将介绍如何使用HTML、CSS和JavaScript来实现手动拖动排序功能。 首先,我们需要定义一个列表,并给每个项目添加一个唯一的标识符。下面是一个简单

    2024年02月16日
    浏览(45)
  • HTML+CSS+JavaScript:实现B站评论发布效果

    1、用户输入内容,输入框右下角实时显示输入字数  2、为避免用户输入时在内容左右两端误按多余的空格,在发送评论时,检测用户输入的内容左右两端是否带有空格,若有空格,发布时自动取消左右两端的空格 3、若用户发布的内容为空,则自动取消该条评论的发送,并弹

    2024年02月14日
    浏览(42)
  • HTML、CSS和JavaScript,实现换肤效果的原理

    这篇涉及到HTML DOM的节点类型、节点层级关系、DOM对象的继承关系、操作DOM节点和HTML元素 还用到HTML5的本地存储技术。 换肤效果的原理:是在选择某种皮肤样式之后,通过JavaScript脚本来加载选中的样式,再通过localStorage存储。 先来回忆一下HTML DOM的相关知识。 DOM模型就是通

    2024年02月06日
    浏览(44)
  • 使用CSS、HTML、JavaScript实现一个简单的身份验证页

      这是我在博客园的第一篇博客,也是我人生中的第一篇博客。希望它能够记录我的成长,帮助更多的人。   最近在写我们社团的社团网站,有一个页面不太希望普通访客能访问到,所以想做一个“统一身份验证验证”,但是又苦于社团网站搭建是纯静态站,没法做数据

    2024年02月08日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包