浮动及滑动门技术

最新推荐文章于 2024-07-24 11:09:48 发布

初见766

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量133

点赞数

分类专栏： html css 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_60488295/article/details/121653882

版权

html css 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

浮动

什么是浮动？

标签的浮动是指设置了浮动属性的标签会脱离标准流的控制，移动到其父标签的指定位置

浮动属性

float
- left
- right
- none 默认

浮动的作用

图文环绕：注意：图片和文字不会到浮动标签的下方
页面布局

浮动的宽度

浮动的宽度就是内容的宽度

浮动的问题

标签浮动以后，脱离的正常文档流，导致父标签无法被撑开，会影响后续正常布局

清浮动的几种方法

给浮动标签的父标签固定高度（不够灵活）
给父标签加overflow属性，overflow为visible以外的其他值时可以帮助实现
在浮动标签的最后加一个div（块标签），标签本身不符动，且添加样式 clear:both;(代码冗余)
推荐方法：给浮动标签的父标签添加 .clearfix
- .clearfix {
- *zoom:1; //这是针对于IE6/7的
- }
- .clearfix:after {
- content:"";
- clear:both;
- display:block;
- }

伪元素

 /* 单冒号的兼容性比双冒号好 */
    /* :before 在当前元素的第一个子元素的前面添加一个伪元素 */
    .wrap:before {
      content: '111';
      display: block;
      width: 100px;
      height: 100px;
      background-color: #009;
    }
    /* :after 在当前元素的最后一个子元素的后面添加一个伪元素 */
    .wrap:after {
      content: '';
      display: block;
      width: 100px;
      height: 100px;
      background-color: pink;

    }

CSS滑动门技术

滑动门核心技术就是利用 CSS 精灵（主要是背景位置）和盒子 padding 撑开宽度 , 以便能适应不同字数的导航栏。

先给一个 a 标签，用来装背景图的左边圆角，a 不给宽度，由文字撑开宽度，再在 a 里面加一个 span 盒子， span 盒子还是用之前的背景图的，但是是装背景图的右边圆角，字写在 span 里面的，span 又是属于 a 的，里面装上字就会把它的宽度撑开。

  <style>
    * {
      margin: 0;
      padding: 0;
      text-decoration: none;
    }

    li {
      list-style: none;
      float: left;
      margin-top: 20px;
      margin-left: 10px;
    }

    .clearfix:after {
      content: '';
      display: block;
      clear: both;
    }

    a {
      display: block;
      height: 33px;
      background-image: url(../课堂案例/images/wx02.png);
      line-height: 33px;
      color: white;
      padding-left: 15px;
    }

    span {
      display: block;
      height: 33px;
      line-height: 33px;
      background-image: url(../课堂案例/images/wx02.png);
      background-position: right;
      padding-right: 15px;
    }

    .wrap {
      height: 500px;
      background-image: url(../课堂案例/images/wx01.jpg);
    }

    li:hover a {
      background-image: url(../课堂案例/images/wx03.png);
    }

    li:hover span {
      background-image: url(../课堂案例/images/wx03.png);
    }
  </style>
</head>

<body>
  <div class="wrap">
    <ul class="clearfix">
      <li><a href="#">
          <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>
      <li><a href="#">
          <span>表情开放平台表情开放平台</span>
        </a></li>
    </ul>
  </div>

CSS精灵

什么是 CSS 精灵
英文叫法 CSS sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位“

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Document</title>

   <style>

•       .box {

•           width: 50px;

•           height: 50px;

•           background-image: url(./images/jingling.jpg);

•      }

•       .box1 {

•           background-position: -150px 0;

•      }

•       .box2 {

•           background-position: -200px -50px;

•      }

   </style>

</head>

<body>

</body>

</html>

CSS 精灵优缺点
优点：
- 减少网页的 http 请求，从而大大的提高页面的性能；
  
  图片命名上的困扰；
  
  更换风格方便。
缺点：
- 必须要限定容器大小符合背景图元素位置，需要计算

初见766

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动及滑动门技术

浮动什么是浮动？标签的浮动是指设置了浮动属性的标签会脱离标准流的控制，移动到其父标签的指定位置浮动属性 float left right none 默认浮动的作用图文环绕：注意：图片和文字不会到浮动标签的下方页面布局浮动的宽度浮动的宽度就是内容的宽度浮动的问题标签浮动以后，脱离的正常文档流，导致父标签无法被撑开，会影响后续正常布局清浮动的几种方法给浮动标签的父标签固定高度..
复制链接

扫一扫

专栏目录