浮动特性应用实例

最新推荐文章于 2024-03-04 17:24:32 发布

脆皮煎蛋

最新推荐文章于 2024-03-04 17:24:32 发布

阅读量89

点赞数

文章标签： servlet html javascript

本文链接：https://blog.csdn.net/m0_73304951/article/details/126818238

版权

一.图文排绕

浮动脱离文档流,不脱离标准流

最初只应用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐,要想图文环绕,需要给图片设置浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width: 500px;
            height: 500px;
           border: 3px solid green;
           
        }

        .wrap img{
         width: 200px;
         height: 200px;
         float: left;
         float: right;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <img src="../../图片.html/19e4d9fed881d131a1a488b7a241260.jpg" alt="">
        簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花簇拥烈日的花
 
  </div>

    </div>
</body>
</html>

二.两列自适应

实现:左边盒子固定宽度,添加 float:left

右边盒子宽度自适应,添加margin-left:左盒子宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            border: 2px solid red;
            height: 400px;
        }

        .wrap .left{
            width: 400px;
            height: 300px;
            background-color: blue;
            float: left ;
        }

        .wrap .right{
            height: 300px;
            background-color: blueviolet;
           margin-left: 400px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>
</html>

精灵图(雪碧图)

原理:

将页面中的背景图合并成一张图片,利用背景属性,使不同元素显示图片的不同部分

实现步骤:

要限定容器的大小

图片拼合

背景定位

优点:

减少网页的http请求,提高页面性能

减少在图片上的命名困扰

更换网页风格方便

缺点:

必须要限定容器的大小

背景图位置需要计算

适用场景:

适用于一般小图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 24px;
            width: 80px;
            background: url(../images/cts-suning.png) -670px -222px;
        }

        .wrap{
            width: 24px;
            height: 20px;
            background: url(../images/cts-taobao.png) 0 -264px;
        }

        .cot{
            width: 40px;
            height: 40px;
            background: url(../images/cts-网易.png) -387px 0;
        }

        .box1{
            height: 20px;
            width: 18px;
            background: url(../images/cts-网易.png) ;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="wrap"></div>
    <div class="cot"></div>
    <div class="box1"></div>
</body>
</html>

滑动门

为了使特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,出现了滑动门技术

实现要点

a span
      a用来撑开左边的括号
      span用来撑开右边的括号
      给a设置padding-left:让文字距离左边有点距离,美观
      给span设置padding-right:让文字距离右边有点距离,美观
      
      实际文字写在span里,span的宽度由文字和内边距撑开
      a的宽度由span撑开

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
    }

    .wrap {
      height: 74px;
      line-height: 74px;
      background: url(./images/css滑动.jpg) repeat-x;
      padding-left: 200px;
    }

    .wrap li {
      float: left;
      margin-left: 30px;
    }

    .wrap li a {
      color: #fff;
      display: inline-block;
      height: 33px;
      line-height: 33px;
      /* background: url(./images/huadongmen\ .png) no-repeat 0% 0%; */
      padding-left: 10px;
    }

    .wrap li a span {
      color: #fff;
      display: inline-block;
      height: 33px;
      line-height: 33px;
      /* background: url(./images/huadongmen\ .png) no-repeat 100% 100%; */
      padding-right: 10px;
    }

    .wrap li:hover a {
      background: url(./images/huadongmen\ .png) no-repeat 0% 0%;
    }

    .wrap li:hover span {
      background: url(./images/huadongmen\ .png) no-repeat 100% 100%;
    }
  </style>
</head>

<body>
  <!-- 为了使特殊形状的背景使能够自由拉伸滑动，以适应元素内部的文本内容 -->

  <ul class="wrap">
    <li>
      <!-- a负责左边背景图 -->
      <a href="#">
        <!-- span标签负责右边背景图 -->
        <span>首页</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span>帮助与反馈</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span>公众平台</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span>开发平台</span>
      </a>
    </li>
  </ul>
</body>

</html>