CSS基础学习2

最新推荐文章于 2024-07-12 14:38:32 发布

小白CAD

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量832

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_44969215/article/details/107320478

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

设置标签内部内容前后面的信息

1、::before 设置文本前面信息。它设置信息是通过css设置的，通过content属性。

.redColor::before{
     content:"￥";
     font-size: 14px;
}
<div>
    <div>水杯健身户外运动水壶水杯便携学生杯子礼品 灰色 350ML</div>
    <div class="redColor">76</div>
 </div>

效果图：
在这里插入图片描述
2、::after 设置文本后面的信息。通过css的属性content来设置文本的信息。

.redColor::after{
    content:".00";
    font-size: 14px;
}

<div>
    <div>裤子男士夏季新品休闲裤宽松束脚裤潮流冰丝裤韩版九分...</div>
    <div class="redColor">69</div>
</div>

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

四种常用伪类的实现

1、link 表示未访问的的状态

.color2:link{
    color:green;  /*未被访问的颜色*/
}

<span>已注册<a id="login" class="color2" href="https://www.163.com">直接登录</a></span>

效果图：
在这里插入图片描述
2、hover 鼠标浮动在该标签上时，该标签的状态

.color2:hover{
    color: aqua;  /*鼠标浮动的颜色
}

<span>已注册<a id="login" class="color2" href="https://www.163.com">直接登录</a></span>

在这里插入图片描述
3、active : 点击还没有跳转时的状态

.color2:active{  /*点击没有跳转的颜色*/
    color:yellow;
}
<span>已注册<a id="login" class="color2" href="https://www.163.com">直接登录</a></span>

在这里插入图片描述
4、已经访问过的颜色

.color2:visited{
    color: rgb(182, 196, 235);/*已经访问过的颜色*/
}
<span>已注册<a id="login" class="color2" href="https://www.163.com">直接登录</a></span>

在这里插入图片描述

背景图片/颜色

1、背景颜色：background-color ;设置背景颜色，在设置背景颜色后，使用者仍然可以在这个背景颜色上面写信息。
2、背景图片：background-image ；设置背景图片，在设置背景图片后，使用者也可在背景图片上写信息
3、背景位置：background-position ；设置背景图片的位置，它的语法：background-position:x轴 y轴;
4、背景图片是否重复：background-repeat ；设置背景图片在宽的区域下，是否在x轴，y轴上重复，如果是，则是设置repeat-x,repeat-y,不重复则设置no-repeat.

html,body{
    background-color: #FAA8AC;
    background-image: url('bg.jpg');
    background-position: center 0px;
    background-repeat: no-repeat;
}

在这里插入图片描述

三角形的勾画

1、css中border可以勾画三角形，它是通过设置border-color,border-size以及border-style来设置三角形。首先我们去看下border勾画的图形。

<!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>
        div{
            margin: auto;
            width: 10px;
            height: 10px;
            border-left: 10px solid yellow;
            border-top: 10px solid green;
            border-right: 10px solid red;
            border-bottom: 10px solid blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

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

2、当我们将width,height设置为0，可以看到如下效果：
在这里插入图片描述
3、当我们想要三角形时，我们可以设置不能够成三角形的border去设置为透明色，想要设置三角形要至少有3条边。例如我们想要朝上的三角形，我们可以设置border-bottom，其他的颜色设为透明。

<!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>
        div{
            margin: auto;
            width: 0px;
            height: 0px;
            border-left: 10px solid yellow;
            border-top: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

图片的旋转

1、animation 属性是一个简写属性，用于设置六个动画属性：

animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
2、transform:rotate3d 表示3d旋转

transform:rotate3d(x轴,y轴,z轴,角度)   x/y/z使用1表示绕着该轴旋转，用0表示不绕着该轴旋转

#loop{
    width: 500px;
    height: 400px;
    border: 1px solid red;
    background: url("1.jpg.webp");
    margin: auto;
    animation: myloop 16s 2s infinite;
    transition: all 0.5s;
}
@keyframes myloop{
    25%{
        background: url("2.jpg.webp");
        transform: rotate3d(1,1,1,360deg);
    }
    50%{
        background: url("3.jpg");
        transform: rotate3d(1,1,1,720deg);
    }
    75%{
        background: url("4.jpg");
        transform: rotate3d(1,1,1,1080deg);
    }
    100%{
        background: url("1.jpg.webp");
        transform: rotate3d(1,1,1,1440deg);
    }
}

<div id="loop"></div>

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

弹性布局flex

本次借鉴一个博主的不错的博客：flex详细介绍信息
1、display:flex；设置弹性窗口。
在这里插入图片描述
2、弹性布局中的设置属性

1、flex-direction: row | row-reverse | column | column-reverse;

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2、flex-wrap: nowrap | wrap | wrap-reverse;  /*如果一条轴线排不下，如何换行*/

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

 3、justify-content: flex-start | flex-end | center | space-between | space-around;  /*属性定义了项目在主轴上的对齐方式。*/

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

4、align-items: flex-start | flex-end | center | baseline | stretch;  // 定义项目在交叉轴上如何对齐。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

/*align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用*/
5、align-content：flex-start | flex-end | center | space-between | space-around | stretch

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

6、flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

3、关于弹性窗口中项目/标签的属性

3.1、 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order: 0/1/2；

3.2、flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 . 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-grow:1/2/3；

3.3、flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-shrink:0/1/2；

3.4、flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex-basis:300px/350px/360px;

3.5、flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

3.6、align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

阴影设置

1、box-shadow用于边框阴影的设置。

box-shadow: x轴 y轴 size color;

具体操作代码：

box-shadow: 2px 2px 3px #999;

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

过渡属性的设置

1、transition处理样式过渡的属性，

transition: property duration timing-function delay;

transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

1.1、transition-property none/all/property //过渡的属性

none表示所有属性都不获取过渡效果
all表示所有属性都获取过渡效果
property:表示具体的属性获取效果，例如height,width,color……….

1.2、transition-duration:time; //过渡多久

time表示具体过渡效果的时间，例如：1s/0.5s/20s………

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

1.4、transition-delay: time; //何时过渡

time表示具体过渡要等多久时间，例如：1s/0.5s/20s………

关于图标字体的设置

在这里插入图片描述
在现在的一些网页上有一些单色的图标，这些图标并不是图片，而是一些图标字体。这个字体很汉字，英文一样，可以通过color来设置他们的颜色。上面看到的图标就是文字图标。
1、如何获取到这些图标？
阿里巴巴矢量图标
2、使用方式：

@charset "UTF-8";
@font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1594726695892'); /* IE9 */
    src: url('iconfont.eot?t=1594726695892#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAiIAAsAAAAADygAAAg7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEHgqPaIxyATYCJAMsCxgABCAFhG0HgRUbzwwjESaUVEf2z4RsTpi+Gp3OAmEUIRDc96rRjPadyZ7orK/X3TOO9yRlYcyewByI3BeRAzDDcil087TT5JiaQJiJkC88R1I1i0y+potrNngiIaPeHcrZJ4++66W9rEDpKAD+b63VA688QtGPaSjUuCaz3A4qlsiUSEgnohGVkCE0cqUmLNYWg1Vg9Rp5Uc8zNBAAHQ3RHhQRlZABFQJCIiwbMdQqhdpogBjJIKh1MuFSgNZAgsqWss8AwOrs5+kKWEIqwCBxiLBSqiIrMDjkCl3jc2yGAr4Uc/ZrA6DrAziA9gCErmwk1TWATG4mhz5XoAKAW/rHgZA7VC/UMdQjNCjkD1XbNrC7OKZTq/teXpTghhdhSTUp2OdQIYNBhwIBDZL1x5MhZBMpSyZ1IOSKSoGAkBuD26guMFSgesCQgToCgwF1B70H6gEMBWgQMASQHxgaUDU2QAIAGImLmgBaA2wUwJMglIxsrgIZBCavTQVBgQRq7jQ0vYavlqZ5dL2fwyFMj+nzkmlqtcyaHo1XdbtdzjqPRy+Znc7d64GGRz1vfTmWpomQJxwspalp+e3VOMZ1sW2TaMcZ1YGz7D0trudtb2Z+hUaU5KWFFxfSQMuSatB0M/Fh95qxuIQQFLmd6W0yJSIVeQ7Or3ZGEa09y2R6PaGo8KmY7rq6bWPHIZjm1ysCRUDP00UyS+IpRipOiKma9v6UdYmNM4ne6V0Ywije0SrF3Z7MsqebpXOdw3FlINwhjd5YJdjZ7nkTjYoZvTS5GCW6SzJ6ZqCIOdDwbWZHApA0Toureim574l1zqj22GRnwjb1kdwyPPQ0ULzsP3zAqXU63kD1jYSuxy/vIswPRAsWY5H36UJDz4TY3p353ZPDuk6QY2a8SESGfuq6z/gYn/tR9zx6477b77EadGJweLfonWhklPCiNBLTs6Kua1LH/vbCXj2yV3SzLt7z0OIqvps70S0uVaYRU8ykgdB6aX/GzhfifaPu12u8YAamJS7cVJzhrGWj5fnFB+LyBt8dQ/xuVnWFJYtUI4UnEWaKQMNKkHrnlW77F/RMOBnZuzIgv3v88bCuOyxZC0hMRSdCUmb4yyRADGhZEAYGChMAKbEBuQWp2YrlTVOvDxoJgwfzuFGASXINNCpXKvnt4735F02BaKC4eTHwdcv6I/1rVHNl9wmjat0mLS1hZL9A8z2bW02NiB02KDxpY2xccdl7iVsz66TXbjmm897kptO6xdTxy60mNV6ndxlxqml0fuba1unKLPPQMiUjOy9zXes0Zbbj4NKXlW1zet19d/7wHiMndf/ir+VDzww5+1LJF5M2lf05JDc66d69lWuVcbJ8HdUP1PAXv3H56sHnYdVRyaUN69zZU1L3TqRzabtRY+red+w8lTh900cD9tfq9c6s/AvfIASbe6nuqI9XLKHN7LM0Ph9xcVMjOjUbMWuQ/EoT7819rdnU43sGVtSY0mZy2wdtHl44kZL40HZJm8X3p/DRZwIz2Xx2PMBGSwJE4evuoQfLetTNnRo5dOMwZ2b9jK8GT6g/8ayDaSJiXFB/IcZ3WCEX9QuNSPL41/zapYYnp4MfpzNaHPdtj1vf8qMeO9VocmW3258044d+ctGKgc5oQ+jCM1Kavm7PHDabBfZwPNLTdmVEP0eX05VHGhxhbGuDiFTV2kZ9Wxk70qT5KAQfPFtk/Tbhs+C5Wb8Fg+eDvysEhM+L2NB17TW2+PCRJTSPnTjB5snlZ0RCvvVP59tWfL72HB00sl2wcdMeNtFekLCSvf46W6kMO28mFlonrje/fsJKKgyayjAKvPiilt6+9j9Wwgp3cjmbd+LEPLaEDh9hi5XtvlTtBzkC8RC1rU0dNlkf13Lb/2HDZdMtu7GToHiKQzxw9r10T/nevZNrLN65o7r2H7qWFQzac4aePVtlONCYz/pJNG4k/SSJRP1JoK1RI5ES/Bq7jQ7r0T2+Rc0h29vHdqDk6VY+pWFKuit8cDKsUoqpNelczwR5rZA8zdYc8ivOrdxkSsCwXApvfvKTTg7UZdmXj+u/a3MH/54acKCe11MPnxix4Xfhb2MilHoP5G0lB0siatZ9oGxrm++uvPkbIK6aP8jEwZuXPd3vAinVsiFNMqxET7X3NiBbsvZJK+7Jsv7pmAFO47oScI7ylWpbvAHzOnpuvmvxdHfpmnjJfAYw+A/sqdi7d1KNRTt3WrWvG1rU+eDzOc/PncvSHJj9F4BtA0LjSwH7DwHe1Fl1jh/nPQCgrSU7aKhvcWl/MGDf5tv4AABgb9InsD6X23w2YO/l8bwxxVx9TGHDGt+AYlf/e6ryjzT8a7dXWmWCLdDc8waggg11EnCtwYJszUPe4wS9B6XQ2VEiemWugSlQxxgAXV4ArjM9Xvyxv1JjNnNZU2pUwKCgAXCoaJ4gUtqDBAPdQYaKQaCjHaLdG/BhHDhIaADaYiEDghungMGJN4HDjc8TRMrvIKEmroEMN3HQkUU+Hw0MfSW6e8soGCfYnoBk8Cps5rt8+TfqakWuc1nWP+ZCwzC0fXv6Cz3mPeyUvR6ZFagcHHyy8NDaADGHHUpuZ+a46TpF2W1lcIs7vGUUnBSdANtTTZLBq8v5rvP936irFXlkX7fmP+ZCVwcMaNHPSPiS/ax972Vt2esRzNsURFtzcIBP3oZWTgRApI3tUHKLecVY3KDj56m5cnu+4n5vGT/fgeJaDGLESZBEMimkkkY6GWTiegp5K7y+PiCV64dVSmtZw8vHMd7IHEppSqoZb1suGQvfHUmcZ+GNoKsF+m50qIc6CXoolKIH6hcL') format('woff2'),
    url('iconfont.woff?t=1594726695892') format('woff'),
    url('iconfont.ttf?t=1594726695892') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1594726695892#iconfont') format('svg'); /* iOS 4.1- */
  }
.font_icon{
    font-family: "iconfont";
    font-style: normal;
    font-size: 16px;
    color: #2E82FF;
}

<div class="footer">
    <a class="flex_foot1" href="javascript:;">扫码登录</a>
    <i class="line1"></i>
    <a class="flex_foot2" href="javascript:;">
        <i class="font_icon">&#xe610;</i>
        <i class="font_icon">&#xe60f;</i>
        <i class="font_icon">&#xe62e;</i>
    </a>
    <a class="flex_foot3" href="javascript:;">立即注册</a>
</div>

通过这些代码的设置，可以看到上面的百度的图标的设计。

小白CAD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习2

设置标签内部内容前后面的信息1、::before 设置文本前面信息。它设置信息是通过css设置的，通过content属性。.redColor::before{ content:"￥"; font-size: 14px;}<div> <div>水杯健身户外运动水壶水杯便携学生杯子礼品灰色 350ML</div> <div class="redColor">76</div> </div>效
复制链接

扫一扫