您的位置：首页 > 新闻 > 会展 > 图片制作在线制作免费_免费域名服务_招代理最好的推广方式_如何软件网站优化公司

图片制作在线制作免费_免费域名服务_招代理最好的推广方式_如何软件网站优化公司

2025/2/25 1:57:54 来源：https://blog.csdn.net/liqian_ken/article/details/145500500  浏览:  次   关键词：图片制作在线制作免费_免费域名服务_招代理最好的推广方式_如何软件网站优化公司
图片制作在线制作免费_免费域名服务_招代理最好的推广方式_如何软件网站优化公司

学习视频：https://www.bilibili.com/video/BV1zN2UYoEEo/

目录

  • 浮动
    • 浮动的几种应用效果
      • 设置img浮动，去掉空隙
      • 设置div重叠，位于上下层
      • 多个div水平排列
      • 宽度不足时，会自动换行
      • li元素水平排列
    • 浮动的副作用
    • 解决副作用——清除浮动
      • 方法1：为父元素设置高度
      • 方法2：受影响元素添加clear属性
      • 方法3：overflow清除浮动
      • 方法4：伪对象方式
  • 定位
    • 相对定位
    • 绝对定位
    • 固定定位
    • 总结
    • z-index
  • CSS3新特性
    • 圆角border-radius
    • 阴影box-shadow
    • 动画
    • 媒体查询
      • 设置meta标签
      • 媒体查询语法
  • 雪碧图
  • 字体图标

浮动

浮动，就是增加一个浮层来放置内容。
可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面：

在这里插入图片描述

通过float属性定义元素往哪个方向浮动（只有左右浮动，没有上下浮动），
任何元素都可以浮动，浮动后元素脱离文档流。
float属性有两个值：left和right。

浮动的几种应用效果

设置img浮动，去掉空隙

    <style>img{float: left;width: 200px;}</style>
</head>
<body><img src="girl.png" /><img src="girl.png" />
</body>

设置div重叠，位于上下层

<head><style>.top{width: 100px;height: 100px;background-color: antiquewhite;float: left;}.bottom{width: 300px;height: 200px;background-color: aquamarine;}</style>
</head>
<body><div class="top"></div><div class="bottom"></div>
</body>

在这里插入图片描述
也可以设置float为right，使其向右浮动。

多个div水平排列

<head><style>div{width: 100px;height: 100px;float: left;}.box1{background-color: red;}.box2{background-color: green;}.box3{background-color: blue;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body>

在这里插入图片描述

宽度不足时，会自动换行

在上面基础上，给body设置宽度：

        body{width: 250px;}

则由于宽度不够，第三个盒子自动换行了：
在这里插入图片描述
如果宽度为50px，则变成垂直排列了：

在这里插入图片描述

li元素水平排列

<head><style>li{float: left;margin-left: 50px;}</style>
</head>
<body><ul><li>导航1</li><li>导航2</li><li>导航3</li><li>导航4</li></ul>
</body>

效果：
在这里插入图片描述

浮动的副作用

使用浮动前，在一个灰色div内有三个小的红色div盒子：

<head><style>.container{width: 500px;height: 400px;background-color:#aaa;}.box{width: 100px;height: 100px;background-color:red;margin: 20px;}</style>
</head>
<body><div class="container"><div class="box"></div><div class="box"></div><div class="box"></div></div>
</body>

在这里插入图片描述

现在想让三个div水平排列，并且随着宽度变化可以自动换行，于是使用浮动，也就是为box类添加float: left;，得到效果图如下：

在这里插入图片描述
发现灰色背景的div不见。调试可发现该div高度为0，所以不可见。

由此产生了问题：浮动导致父元素高度塌陷。（浮动不会参与父元素高度的计算）

可以再添加一个非浮动的子元素，则父元素的高度只是按这个非浮动子元素的高度进行计算。

也就是添加了p样式，以及div内外两个p元素：

        p{background-color: aqua;}<div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><p>Hello world!</p></div><p>Hello world!</p>

在这里插入图片描述

总结一下浮动的副作用：

  • 浮动元素会造成父元素高度塌陷
  • 后续元素会受到影响

解决副作用——清除浮动

方法1：为父元素设置高度

为父元素设置高度300px：
在这里插入图片描述
存在问题：父元素内部的子元素仍会被浮动元素遮挡、父元素高度写死了不灵活。

方法2：受影响元素添加clear属性

为父元素内部的p元素添加clear属性（为了简洁，就为所有p都添加了clear属性）：

        p{            clear: both;}

在这里插入图片描述

clear属性有三个值：left、right、both，可以选择清除某一个方向的浮动，也可以都清除。

使用clear属性后，也可以同时为父元素添加高度，效果如下：

在这里插入图片描述

方法3：overflow清除浮动

父元素可以不设置高度，而是为父元素添加属性overflow和clear：

        .container{width: 500px;/* height: 300px; */background-color:#aaa;overflow: hidden;clear: both;}

效果（父元素外部的会排在父元素下方，而父元素内部的还是会被挡住）：

在这里插入图片描述
如果想让父元素内部元素不被浮动元素挡住，则同时使用方法2，为内部的p元素添加clear:both。

方法4：伪对象方式

为父元素添加伪类after，设置空的内容，设置为块级元素，并使用clear: both：

        .container{width: 500px;/* height: 300px; */background-color:#aaa;}.container::after{content: '';display: block;clear: both;}

效果图和方法3的效果图一样。

定位

position属性指定了定位的类型：

  • relative，相对定位
  • absolute，绝对定位
  • fixed，固定定位

绝对定位和固定定位会脱离文档流，设置定位后，可以使用left、right、top、bottom四个属性调整位置。

相对定位

相对定位，是在文档流内调整位置。

<head><style>div {width: 200px;height: 100px;background-color: #18e709;opacity: 0.4;position: relative;top:10px;left:50px;}</style>
</head>
<body><p>Hello world!</p><div></div>
</body>

在这里插入图片描述

绝对定位

绝对定位则脱离了文档流。

在上面代码基础上，修改position为absolute，效果图：

在这里插入图片描述
不像浮动（都是在一层中），每一个元素的绝对定位都是单独的一层。所以如果要实现多个元素的压盖，则可以使用绝对定位。

固定定位

与绝对定位的区别：当内容多出现滚动条，随着页面滚动，固定定位的元素不会滚动，而是始终在一个位置处。

总结

设置定位后，相对定位和绝对定位是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。

<head><style>html, body{margin: 0;}.container {width: 200px;height: 200px;background-color: antiquewhite;position: relative;margin: 20px;}.box {width: 100px;height: 80px;background-color: red;position: absolute;left: 20px;}</style>
</head><body><div class="container"><div class="box"></div></div>
</body>

在这里插入图片描述

z-index

z-index表示堆叠顺序。

当发生堆叠时，z-index的值越大，堆叠顺序越高，越排在上层显示。

CSS3新特性

圆角border-radius

    <style>div{width: 100px;height: 50px;background-color:aquamarine;border-radius:20px;}</style>
</head>
<body><div></div>
</body>

在这里插入图片描述

在这里插入图片描述
设置宽高相同且border-radius值为50%（大于50%时的效果和50%一样），则变成圆形：

        div{width: 100px;height: 100px;background-color:aquamarine;border-radius: 50%;}

在这里插入图片描述

阴影box-shadow

在这里插入图片描述
box-shadow第一个值是水平偏移距离，例如设置为10px，则向右偏移10px：

        div{width: 200px;height: 140px;background-color:aquamarine;border-radius: 10px;margin: auto auto;box-shadow: 10px 0 0 #999;}

在这里插入图片描述
如果是-10px，则向左偏移10px：

在这里插入图片描述

同理，box-shadow第二个值是垂直偏移量，正值向下偏移，负值向上偏移。

通常习惯设置两个正值，即向右向下偏移。

box-shadow: 10px 10px 0 #999;

在这里插入图片描述

box-shadow第三个值是模糊距离（应该是在偏移的基础上再向外渐变一定距离），例如分别设置为5px、10px、20px，则效果：

在这里插入图片描述

动画

动画，使元素从一种样式逐渐变化为另一种样式的效果。

使用@keyframes关键词（后面紧跟着动画名称）创建动画，一种是使用百分比（可以写很多个百分比，支持多种变化），一种是只有from/to（只有开始和结束，只有两种变化）：

    <style>@keyframes myAnimi {from{background-color: antiquewhite;}to{background-color: aqua;}}@keyframes myAnimi2 {0%{background-color: antiquewhite;}50%{background-color: aqua;}100%{background-color: blue;}}</style>

然后调用动画：

        div{width: 100px;height: 100px;background-color: azure;animation: myAnimi 2s linear 0s infinite;animation-play-state: running;}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以添加鼠标悬浮时动画暂停：

        div:hover{animation-play-state: paused;}

媒体查询

媒体查询能在不同的设备条件下使用不同的样式。

设置meta标签

使用设备的宽度作为视图宽度步兵禁止初始的缩放，在head标签里加入meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width，宽度等于当前设备的宽度
  • initial-scale=1.0初始的缩放比例，默认设置为1.0
  • maximum-scale=1允许用户缩放到的最大比例，默认设置为1.0
  • user-scalable=no用户是否可以手动缩放，默认设置为no

下面对比一下添加和不添加上面meta标签的区别，首先绘制一个div：

        div{width: 300px;height: 300px;background-color: red;}

下图上面是保留meta标签，下面是去掉meta标签的效果对比：
在这里插入图片描述
第二张图中的300px不是真正的300px，而是根据pc端的页面进行缩放了，不是按照原比例显示的。

媒体查询语法

        /* 小于768px时 */@media screen and (max-width: 768px) {div {background-color: red;}}/* 大于等于768px，小于996px */@media screen and (min-width: 768px) and (max-width: 996px){div {background-color: green;}}/* 大于等于996px时 */@media screen and (min-width: 996px) {div {background-color: blue;}}

雪碧图

CSS Sprite也叫做CSS精灵图/CSS雪碧图，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中。

例如有下面一张图，里面有很多小图：

在这里插入图片描述

只需要向服务器请求一次，获得该大图，前端再根据需要选择具体某些小图，从而减少对服务器的请求次数。

原理：

  1. 通过background-image引入背景图片
  2. 通过background-position把背景图片移动到自己需要的位置
    <style>span{width: 90px;height: 90px;display: block; background-image: url(icons.png);border: 1px solid #000;}.icon{background-position: -17px -27px;}.icon2{background-position: -136px -27px;}</style>
</head><body><span class="icon"></span><span class="icon2"></span>
</body>

在这里插入图片描述

字体图标

优点：

  • 轻量性：加载速度快，减少http请求
  • 灵活性：可以利用CSS设置大小颜色等
  • 兼容性：网页字体支持所有现代浏览器，包括IE低版本

到阿里巴巴矢量图标库下载图标代码：

  1. 注册账号并登录
  2. 搜索图标、选择图标
  3. 将图标添加到购物车
  4. 下载图标代码，获得压缩包
  5. 将压缩包解压

例如，解压后得到如下文件：

在这里插入图片描述

打开里面的html文件，可以看到有几种引用图标的方式，此处采用font-class 引用的方式：

  1. 引入项目下面生成的 fontclass 代码
<link rel="stylesheet" href="./iconfont.css">
  1. 挑选相应图标并获取类名，应用于页面
<span class="iconfont icon-xxx"></span>

然后可以像修改字体一样修改图标：

    <style>.myicon{font-size: 40px;color: red;}</style>
</head><body><span class="iconfont icon-jianzhuye myicon"></span>
</body>

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

最新新闻

热搜词

震撼今世的北京之旅，托付一生的网管事业 开源项目备忘-MiniMind 北京大兴机场平台创造新发展 Autolab搭建教程 （s25_0225） 《覆盖率COV的命令设置及收集》【verdi打开cov】 EmEdit设置缓存目录临时文件夹

声明：本站所有新闻及新闻图片来源于其他网站，如有侵权，请及时联系我们！

客户服务 | 关于我们 | 版权声明

版权所有：

Copyright 2024 尧图网 All Rights Reserved.QQ:809451989