CSS 之实现它们它们和它们

最新推荐文章于 2024-07-18 20:18:47 发布
最新推荐文章于 2024-07-18 20:18:47 发布
阅读量229 收藏
点赞数 1
分类专栏： CSS 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haotian1997/article/details/119741735
版权

一、CSS画图形

1、用CSS画三角形

首先，需要把元素的宽度、高度设为0。然后设置边框样式

<!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>
</head>
<style>
  /* 写一个以顶边为底的三角型 至少设置三条边完成形状*/
  .parent {
    width: 0;
    height: 0;
    border-top: 100px solid #000;
    border-right: 100px solid transparent;
    /* transparent透明属性 */
    border-left: 100px solid transparent;
  }
</style>

<body>
  <div class="parent">
    <!--空盒子-->
  </div>
</body>
</html>

在这里插入图片描述
2、用CSS画扇形

<!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>
    /* 写一个扇形 */
    .parent {
      width: 0;
      height: 0;
      border: 100px;
      border-style: solid;
      border-color: #000 transparent transparent;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="parent">
  </div>
</body>

</html>

在这里插入图片描述
4、画一个饼图

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

<head>
  <meta charset="UTF-8">
  <title>实现饼图</title>
  <style>
    .pie,
    .pie::before {
      /* display: inline-block; */
      width: 0;
      border-radius: 50%;
    }

    .pie {
      position: relative;
      border: solid 75px;
      border-color: green green tomato tomato;
      box-sizing: border-box;
      transform: rotate(45deg);
    }

    .pie::before {
      content: '';
      position: absolute;
      border: solid 75px;
      border-color: tomato tomato transparent transparent;
      transform: translate(-50%, -50%) rotate(.33turn);
    }
  </style>
</head>

<body>
  <div class="pie"></div>
</body>

</html>

在这里插入图片描述

3、画一个正方体

<!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>
</head>
<style>
  .cube {
    font-size: 4em;
    width: 2em;
    margin: 1.5em auto;
    transform-style: preserve-3d;
    transform: rotateX(-35deg) rotateY(30deg);
  }

  .side {
    position: absolute;
    width: 2em;
    height: 2em;
    background: rgba(255, 99, 71, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    line-height: 2em;
  }

  .front {
    transform: translateZ(1em);
  }

  .bottom {
    transform: rotateX(-90deg) translateZ(1em);
  }

  .top {
    transform: rotateX(90deg) translateZ(1em);
  }

  .left {
    transform: rotateY(-90deg) translateZ(1em);
  }

  .right {
    transform: rotateY(90deg) translateZ(1em);
  }

  .back {
    transform: translateZ(-1em);
  }
</style>

<body>
  <div class="cube">
    <div class="side front">1</div>
    <div class="side back">6</div>
    <div class="side right">4</div>
    <div class="side left">3</div>
    <div class="side top">5</div>
    <div class="side bottom">2</div>
  </div>
</body>

</html>

在这里插入图片描述
4、画一个等宽高的自适应正方形

  • vw/vh
  • 使用外层 relative，内层 absolute，与百分比设置宽度,实现里面带内容一起自适应变化
<!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>
</head>
<style>
  .outer {
    padding-top: 50%;
    height: 0;
    background: #ccc;
    width: 50%;
    position: relative;
  }

  .inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: red;
  }
</style>

<body>
  <div class="outer">
    <div class="inner">HELLO</div>
  </div>
</body>

</html>

在这里插入图片描述
5、画一个箭头

<!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>
    div {
      margin: 100px;
      height: 100px;
      width: 100px;
      border-top: 1px solid #000;
      border-left: 1px solid #000;
      transform: rotate(-0.125turn);
      /*指向左*/
      /*设置0.375turn就是指向右*/
    }
  </style>
</head>

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

</html>

在这里插入图片描述

二、实现水平垂直居中对齐

1、水平居中

水平居中可分为行内元素水平居中和块级元素水平居中

1.1 行内元素水平居中

行内元素是指文本text、图像img、按钮超链接a等，只需给父元素设置text-align:center即可实现。

.center{
    text-align:center;
}
<div class="center">水平居中</div>

1.2 块级元素水平居中

  • 定宽块级元素水平居中
    只需给需要居中的块级元素加margin:0 auto即可，但这里需要注意的是，这里块状元素的宽度width值一定要有
  .center{
      width:200px;
      margin:0 auto;
      border:1px solid red;
  }
  <div class="center">水平居中</div>
  • 不定宽块级元素水平居中
    不定宽，即块级元素宽度不固定

方法1：设置table
通过给要居中显示的元素，设置display:table，然后设置margin:0 auto来实现

  .center{
      display:table;
      margin:0 auto;
      border:1px solid red;
  }
  <div class="center">水平居中</div>

方法2：设置inline-block（多个块状元素）
子元素设置inline-block，同时父元素设置text-align:center

  .center{
      text-align:center;
  }
  .inlineblock-div{
      display:inline-block;
  }
  <div class="center">
      <div class="inlineblock-div">1</div>
      <div class="inlineblock-div">2</div>
  </div>

方法3：设置flex布局
只需把要处理的块状元素的父元素设置display:flex;justify-content:center;

  .center{
      display:flex;
      justify-content:center;
  }
  <div class="center">
      <div class="flex-div">1</div>
      <div class="flex-div">2</div>
  </div>

方法4：position + 负margin；
方法5：position + margin：auto；
方法6：position + transform；

2、垂直居中

2.1 单行文本垂直居中

  • 设置padding-top=padding-bottom;
  • 设置line-height=height;

2.2 多行文本垂直居中
通过设置父元素table，子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部
在这里插入图片描述
2.3 块级元素垂直居中
方法1：flex布局
在需要垂直居中的父元素上，设置display:flex和align-items：center
要求：父元素必须显示设置height值

.center {
  width: 200px;
  height: 300px;

  display: flex;
  align-items: center;

  border: 2px solid blue;
}

<div class="center">
  <div>垂直居中</div>
</div>

方法2：利用position和top和负margin（需知宽高）
1、设置元素为absolute/relative/fixed
2、margin=负一半

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

<head>
  <meta charset="UTF-8">
  <style>
    .parent {
      position: relative;
      height: 200px;
      width: 200px;
      border: 1px solid blue;
    }

    .child {
      position: absolute;
      height: 100px;
      width: 150px;
      top: 50%;
      margin-top: -50px;
      line-height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">已知高度垂直居中</div>
  </div>
</body>
</html>

效果如下：
在这里插入图片描述
方法3：利用position和top/bottom和margin:auto（注意不是margin:0 auto）
1、position：absolute/relative/fixed
2、top/bottom：0
3、margin：auto
在这里插入图片描述
效果同上

方法4：利用position和top和transform
transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>flex布局</title>
  <style>
    .parent {
      position: relative;
      height: 200px;
      width: 200px;
      
      border: 1px solid blue;
    }
    /* 不用提前知道被居中元素的尺寸 */
    .child {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      line-height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">已知高度垂直居中</div>
  </div>
</body>
</html>

注：

  • 上述的块级垂直居中方法，稍加改动，即可成为块级水平居中方法，如top/bottom换成left/right
  • transform方法，可用于未知元素大小的居中

3、水平垂直居中

方法1：绝对定位+margin:auto

    div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

方法2：绝对定位+负margin

    div{
        width:200px;
        height: 200px;
        background:green;
        
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

方法3：绝对定位+transform

    div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:50%;    /* 定位父级的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }

方法4：flex布局

   .box{
         height:600px;  
         
         display:flex;
         justify-content:center;  //子元素水平居中
         align-items:center;      //子元素垂直居中
           /* aa只要三句话就可以实现不定宽高水平垂直居中。 */
    }
    .box>div{
        background: green;
        width: 200px;
        height: 200px;
    }

方法5：table-cell实现居中

    .child {
      height: 200px;
      width: 200px;
      background-color: red;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

三、Flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
在这里插入图片描述

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

1、容器的属性

  • flex-direction 属性决定主轴的方向（即项目的排列方向）。
  • flex-wrap 认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
  • flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
  • justify-content 属性定义了项目在主轴上的对齐方式。
  • align-items 属性定义项目在交叉轴上如何对齐。
  • align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

2、项目的属性

  • order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  • flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  • flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
  • flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
    该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
  • align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

阮一峰老师：Flex 布局教程：语法篇
聊聊Flexbox布局中的flex的演算法
flex:0 flex:1 flex:none flex:auto应该在什么场景下使用？

四、三栏布局

  • 左右固定，中间自适应
  • 中间栏放在文档流前面，保证优先加载。

理想的实现方案有三种：flex布局、圣杯布局、双飞翼布局

1、flex布局

  • 将中间盒子放置html最开始，保证优先加载
  • 使用flex order属性决定三个盒子顺序，左，中，右
  • 左盒子和右盒子固定宽度，中间盒子flex:1
    在这里插入图片描述
<!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>flex三栏布局</title>
  <style>
    .box {
      height: 200px;
      min-width: 700px;
      background-color: gray;
      display: flex;
    }

    .middle {
      background-color: tomato;
      /* width: 100%; */
      flex: 1;
      order: 1;
    }

    .left {
      width: 200px;
      background-color: yellow;
      order: -1;
    }

    .right {
      width: 200px;
      background-color: green;
      order: 2;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="middle">中</div>
    <div class="left">左</div>
    <div class="right">右</div>
  </div>
</body>

</html>

圣杯布局和双飞翼布局的实现

事实上,圣杯布局其实和双飞翼布局就是一回事,实现思路都是三个盒子浮动,两边的盒子宽度固定,中间的盒子自适应.实现的效果都是一样的。
差别在于其实现的思想, 敲黑板啦! 这种自适应布局适合边栏宽度为固定的页面!!!, 缺点是当浏览器宽度缩小到一定程度时,布局会乱掉,记得设置页面最小宽度就可以解决了

两者本质
在这里插入图片描述

2. 圣杯布局

  • 三个盒子都设置浮动
    在这里插入图片描述
  • 左盒子走负margin-left:100%，右盒子走负自身的宽度
    在这里插入图片描述
  • 大盒子padding left和right左右盒子宽度

在这里插入图片描述

  • 左右盒子相对定位，left，right-往回走
    在这里插入图片描述
<!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>圣杯布局</title>
  <style>
    .box {
      overflow: hidden;
      padding: 0 210px;
      /* 防止布局错乱 */
      min-width: 300px;
    }

    .middle {
      float: left;
      width: 100%;
      height: 200px;
      background-color: tomato;
    }

    .left {
      float: left;
      width: 200px;
      height: 200px;
      background-color: yellow;

      margin-left: -100%;
      position: relative;
      left: -210px;
    }

    .right {
      float: left;
      width: 200px;
      height: 200px;
      background-color: green;

      margin-left: -200px;
      position: relative;
      right: -210px;
    }

  </style>
</head>

<body>
  <div class="box">
    <div class="middle">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
</body>

</html>

3. 双飞翼布局

  • 三个盒子都设置浮动
    在这里插入图片描述
  • 左盒子走负margin-left:100%，右盒子走负自身的宽度
    在这里插入图片描述
  • 调整中间盒子margin
    *
<!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>双飞翼布局</title>
  <style>
    .box {
      overflow: hidden;
    }

    .content {
      margin: 0 210px;
      height: 200px;
      background-color: tomato;
    }
    .middle {
      float: left;
      width: 100%;
    }

    .left {
      float: left;
      width: 200px;
      height: 200px;
      background-color: yellow;

      margin-left: -100%;
    }

    .right {
      float: left;
      width: 200px;
      height: 200px;
      background-color: green;

      margin-left: -200px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="middle">
      <div class="content">中间</div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>

</body>

</html>

圣杯布局双飞翼布局总结：

  • 三栏全部float:left，中间栏div内容不被遮盖
  • 圣杯是中间添加相对定位，并配合left和right属性
  • 双飞翼是中间栏的div在嵌套一个div，对嵌套的div设置margin-left和margin-right

补充：float和绝对定位实现三栏布局

<!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>三栏布局</title>
  <style>
    .box {
      /* overflow: hidden; */
    }
    .box::after {
      content: '';
      display: block;
      clear: both;
    }

    .left {
      float: left;
      width: 200px;
      height: 200px;
      background-color: gray;
    }

    .right {
      float: right;
      width: 200px;
      height: 200px;
      background-color: gray;
    }
    .middle {
      margin-left: 210px;
      margin-right: 210px;
      height: 100px;
      background-color: yellowgreen;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">左边</div>
    <div class="right">右边</div>
    <div class="middle">中间</div>
  </div>
  下面de内容
</body>

</html>

<!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>三栏布局</title>
  <style>
    .box {
      position: relative;
    }

    .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 200px;
      background-color: gray;
    }

    .right {
      position: absolute;
      right: 0;
      top: 0;
      width: 200px;
      height: 200px;
      background-color: gray;
    }
    .middle {
      margin-left: 210px;
      margin-right: 210px;
      height: 200px;
      background-color: yellowgreen;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
  </div>
  下面de内容
</body>

</html>

参考文章

如何用CSS绘制饼图

yxiuzhu
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3位移,旋转,渐变,缩放
qq_53791154的博客
10-04 703
css有关2d的位移,旋转,缩放,渐变色
CSS之实现线性渐变背景
weixin_43599321的博客
10-15 3276
`background: linear-gradient`是CSS中用于创建**线性渐变**背景的属性，这个属性允许你定义一个在元素的背景中进行渐变的效果，可以从一个颜色过渡到另一个颜色。
css实现翻页
weixin_52099241的博客
05-06 2147
css实现翻页特效
使用 HTML、CSS 和 JavaScript 的简单模拟时钟
热门推荐
努力是为了站在万人之中，成为别人的光
08-16 3万+
如果你想使用 JavaScript 制作一个模拟时钟，那么本文将对你有所帮助。我们都知道时钟有两种，一种是模拟的，一种是数字的。虽然数字时钟被广泛使用，但模拟时钟也被很多人所喜爱。 ????使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? JavaScript 模拟时钟 [现场演示]???? 使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? 第 1 步：创建时钟的基本结构???? 第 2 步：在时钟上标记 1 到 12???? 第 3 步：制作三只指针来指示
【css】css动画实现的3种方式
t13965688123的博客
05-25 1万+
css实现动画主要有3种方式，①、transition实现过渡动画，②、transform转变动画，③、animation实现自定义动画。
用html和css实现五星红旗
10-07
要用HTML和CSS实现五星红旗，首先需要明确五星红旗的结构。五星红旗总共由两个部分组成：红色背景和五颗黄色五角星。因此，我们可以利用HTML中的div标签作为容器，来实现五星红旗的布局。 要用HTML和CSS实现五星...
CSS3实现六边形网格布局样式特效代码
03-20
在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了丰富的样式控制和布局可能性，其中之一就是创建独特而引人注目的六边形网格布局。本知识点将深入探讨如何利用CSS3来实现这样的效果。 首先，CSS3中的伪元素...
css实现毛毛虫爬行动作
12-07
总结来说，这个CSS实现的毛毛虫爬行动作是通过巧妙地运用CSS定位、动画关键帧和变形属性来完成的。理解这个过程不仅可以帮助我们创建更复杂的动画效果，还能提升我们在网页设计中的创新能力。如果你对CSS动画有更...
HTML5+CSS3实现Tabs选项卡特效特效代码
03-20
特别是CSS3的过渡（transition）和动画（animation）属性，它们是实现下划线跟随动画的关键。通过定义时间和关键帧，可以创建出平滑的动画效果，使选项卡在切换时具有动态美感。 在具体实现过程中，HTML5可能会创建...
html+css 移动端商城网页设计实现
04-27
总结来说，HTML5和CSS是实现移动端商城网页设计的强大工具，它们提供了丰富的语义化标签、强大的布局和样式控制，以及优秀的交互和动画效果。通过熟练掌握这些技术，开发者能够创建出既美观又功能完善的移动商城网站...
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 95
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 239
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 114
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1235
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
拖拽上传（预览图片）
喵喵的博客
07-18 189
/创建一个url的blob ，在当前会话下生效，不像base64那样在哪里都能用，如在浏览器中用，当你关掉浏览器再开浏览器用则不生效，是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮，点在Input身上即可 */点击+上传图片，或直接拖拽图片到红色方框里面也可上传图片，上传后预览图片。//拿到input当前上传的文件，拿不到url，想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob，不可持续。
前端学习（二）之HTML
最新发布
2302_79795489的博客
07-18 643
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
【CSS in Depth 2 精译_019】3.2 CSS 的盒模型
PeacefulWinter的博客
07-18 1067
本篇为《CSS in Depth》全新第二版第3.2小节内容，主要介绍了盒模型的相关概念及注意事项，并对第一版内容上做了大幅更新。建议基础薄弱的朋友先收藏起来，再跟着书中示例慢慢学习体会盒模型的用法。
scss 语法
True Truth
07-14 222
scss 是 css 的超集， 主要是引入了 变量， 函数， 继承， 算术计算。
CSS-0_3 CSS和单位
乡亲们啊的博客
07-15 827
直到iphone4诞生，彻底改变人们对“上网”这个行为的思维方式。原来我们可以在一个方砖大小的设备上访问页面，那我们将来是不是可以在一个几十上百寸的巨幕上访问页面？在一张A4纸大小的板子上访问页面？人们用千奇百怪的设备访问你的网页，这时候如果你依然墨守成规，那就只能在用户糟糕体验之后的唾弃声中抱着你的电脑屏幕退场。
使用Vue和CSS实现过渡动画
05-26
下面是一个使用Vue和CSS实现过渡动画的示例： ```html !show">Toggle <p v-if="show">Hello, World! .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值