700行无用 纯 CSS 祝考生 金榜高粽《1_bit 的无用 CSS 代码 》_css 无用代码(5)

最新推荐文章于 2024-06-14 14:36:26 发布
最新推荐文章于 2024-06-14 14:36:26 发布
阅读量816 收藏 14
点赞数 26
分类专栏： 程序员 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84183545/article/details/138409100
版权 
height: 20px;
width: 20px;
left: 130px;
top: 20px;

}

.sunshine-bottom-left {
height: 30px;
width: 30px;
left: -20px;
top: 120px;
}

.sunshine-bottom-right {
height: 10px;
width: 10px;
left: 110px;
top: 120px;
}


再调用即可：





![在这里插入图片描述](https://img-blog.csdnimg.cn/7ea5e6c43e754e639d9da5fb07fd8ea1.png)


### 2.2 添加粽子


#### 2.2.1 粽子 body


粽子的话就是里面的白花花的米和外面两块叶子和简单的四肢：


![在这里插入图片描述](https://img-blog.csdnimg.cn/dce19b29cdca49c596dacdc97ee0bc06.png)


做起来是挺简单的，叶子的话纹路我没有添加，可以简便加上去就好了，首先我们制作里面白花花的糯米和绿油油的叶子部分。


其实这个部分我是分为了上、右、下、左四个部分制作的：


![在这里插入图片描述](https://img-blog.csdnimg.cn/7591001ee8c244edad4a675b3d639af2.png)


并且再考虑这些部分都是同一个物体，所以也需要一个容器对其进行包裹，首先给予一个容器样式：

.rice-dumplings {
height: 400px;
width: 400px;
position: absolute;
transform: scale(0.5);
left: 0;
}


接着先制作粽子的左半部分，其实左半部分也就是一个半圆进行变换而来， 左右两边的样式本质上是一致的，所以直接给予粽子上部分左右两边相同的样式：

.rice-dumplings-body-left-top,
.rice-dumplings-body-right-top {
position: absolute;
background-color: #ffffff;
height: 300px;
width: 300px;
border-top-left-radius: 100%;
border: 4px black solid;
border-right: 0px;
}


在上面的样式中，由于右边编剧是有边框线的，直接去掉即可，所以使用了代码 `border-right: 0px;`。


接着给予左右两边不一样的变换以及位置信息：

.rice-dumplings-body-left-top {
left: 25px;
top: 25px;
transform: rotateY(30deg) rotate(-10deg);
}

.rice-dumplings-body-right-top {
left: 235px;
top: 25px;
transform: rotateY(210deg) rotate(-10deg);
}


![在这里插入图片描述](https://img-blog.csdnimg.cn/76e9d241b2be458fb0688080a943dd7d.png)


这个时候就应该给这个目前来说像半个饭团的东西一点“遮羞布”了，也就是两张叶子。


这两张叶子的制作方式相似，也就是给圆角然后进行旋转即可，在这里需要注意的是不同大小、角度的叶子变换效果不一样，可以适当的调整效果，并且其内部的叶子纹路也可以通过渐变制作，在这里我是用了渐变色，也可以使用阴影为其添加层次感：

.rice-dumplings-body-left-bottom,
.rice-dumplings-body-right-bottom {
position: absolute;
background: linear-gradient(to bottom right, #459712 15%, #8ad35d 80%, #459712 100%);
border-top-left-radius: 0%;
border: 4px black solid;
}

.rice-dumplings-body-left-bottom {
height: 200px;
width: 400px;
top: 240px;
left: 50px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-top-right-radius: 100%;
transform: rotate(15deg);
}

.rice-dumplings-body-right-bottom {
height: 200px;
width: 250px;
top: 260px;
left: 250px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 20%;
border-top-right-radius: 100%;
transform: rotateY(180deg);
}


接着在代码中进行调用：





此时效果如下：


![在这里插入图片描述](https://img-blog.csdnimg.cn/329fbb0a78a94602a1d8ca5212b12672.png)


#### 2.2.2 粽子 face


接着咱们开始制作这个粽子的脸部，这个脸部也需要在一个容器之内，所以继续设置一个父容器：

.rice-dumplings-face {
position: absolute;
}


接着制作这个脸部的眼睛，这个眼睛可以看到其内部还有一个亮点：


![在这里插入图片描述](https://img-blog.csdnimg.cn/b0c63f38f43c484c903d891199784525.png)


这个亮点制作其实就是一个缩小版的白色圆点而已，所以现在就知道这个怎么做了，直接设置两个黑点和两个白点，使其在近似的位置就解决了：

.rice-dumplings-face {
position: absolute;
}

.rice-dumplings-eye {
position: absolute;
height: 30px;
width: 30px;
border-radius: 100%;
background-color: black;
}

.eye-left {
left: 250px;
top: 80px;
}

.eye-right {
left: 350px;
top: 70px;
}

.rice-dumplings-eye>.light {
position: absolute;
height: 10px;
width: 10px;
border-radius: 100%;
background-color: white;
}

.rice-dumplings-eye>.postion {
right: 20%;
top: 10%;
}

.rice-dumplings-eye>.right {
right: 20%;
top: 10%;
}


以上样式中 light 为亮点，创建一个基础样式后再创建左右样式进行调用就可以了：





![在这里插入图片描述](https://img-blog.csdnimg.cn/55b7b18b972b4638abbcf5be5f553205.png)


接着制作两个小脸蛋，也就是一个宽度大于高度的椭圆，设置其 before 文本为“///” 颜色为白就完美解决：

/*脸颊*/

.cheek {
position: absolute;
top: 120px;
background-color: #fd8373;
border-radius: 100%;
}

.cheek::before {
position: absolute;
content: “/ / /”;
color: white;
left: 23%;
top: 13%;
}

.cheek-left {
height: 40px;
width: 80px;
left: 190px;
}

.cheek-right {
height: 40px;
width: 60px;
left: 380px;
}


![在这里插入图片描述](https://img-blog.csdnimg.cn/3b5757fc0d5e46119ebb21bc6100afa5.png)


接着嘴巴的样式跟太阳的一样，在这里只需要设置对应的渐变色一半为红色一半为粉红色即可：

.smile {
position: absolute;
width: 60px;
height: 80px;
background: linear-gradient( #fdc2a6 50%, #fa7768 50%);
top: 120px;
left: 300px;
border: 4px black solid;
border-top-left-radius: 8%;
border-top-right-radius: 16%;
border-bottom-left-radius: 80%;
border-bottom-right-radius: 90%;
}


![在这里插入图片描述](https://img-blog.csdnimg.cn/becdb440de564064af7dd57b684c49da.png)


由于其本身太阳也是相同样式，所以背景色也应用到了太阳嘴巴之中，都是同一款嘴型。


#### 2.2.3 粽子四肢


粽子的四肢制作那就更简单了，直接设置一个 div 留有边框，去掉其他边框之后使用 before 或者 after 做手掌或者脚掌部分就可以了：


![在这里插入图片描述](https://img-blog.csdnimg.cn/eb3e3ff9816a49aa901f5776d689fe18.png)


此时我们给予样式，调整好位置即可：

/*四肢*/
.arm-left {
position: absolute;
height: 100px;
width: 100px;
border: 6px black solid;
border-top: 0px;
border-left: 0px;
transform: rotate(45deg);
left: 160px;
top: 160px;
}

.arm-left::before {
position: absolute;
content: “”;
height: 50px;
width: 30px;
right: -15%;
border-radius: 100%;
background-color: black;
}

.arm-left::after {
position: absolute;
content: “”;
height: 20px;
width: 10px;
right: 8%;
top: 15%;
border-radius: 100%;
background-color: black;
transform: rotate(-45deg);
}

.arm-right {
position: absolute;
height: 130px;
width: 100px;
border-right: 6px black solid;
left: 390px;
top: -52px;
transform: rotate(45deg);
}

.arm-right::before {
position: absolute;
content: “”;
height: 50px;
width: 30px;
right: -15%;
border-radius: 100%;
background-color: black;
}

.leg-left {
position: absolute;
height: 50px;
width: 50px;
border: 6px black solid;
border-top: 0px;
border-left: 0px;
left: 160px;
top: 435px;
}

.leg-left::before {
position: absolute;
content: “”;
height: 30px;
width: 15px;
left: -15%;
bottom: -30px;
border-radius: 100%;
background-color: black;
}

.leg-right {
position: absolute;
height: 100px;
width: 50px;
border-right: 6px black solid;
left: 250px;
top: 463px;
}

.leg-right::before {
position: absolute;
content: “”;
height: 30px;
width: 15px;
right: -35%;
bottom: -10px;
border-radius: 100%;
background-color: black;
transform: rotate(-90deg);
}


四肢位置代码比较简单，就是给予不同的边框位置并且旋转即可，然后 before 和 after 就是一个圆嘛，拿上背景色放到合适位置就可以了。


粽子角色该部分 html 如下：





## 三、所有内容


最后加上文字后效果如下：


![在这里插入图片描述](https://img-blog.csdnimg.cn/a724d4c77989497191d7b5c7c8dbdb15.png)


由于文字部分其样式就是很基础了，在此没必要赘述了，在最后我祝各位考生 **金榜高粽**！


最后在这里附加上所有代码：


完整代码：
Demo test

.demo-area {
height: 400px;
width: 1200px;
position: relative;
background-color: #8bb72b;
overflow: hidden;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}

.rice-dumplings {
height: 400px;
width: 400px;
position: absolute;
transform: scale(0.5);
left: 0;
}

.rice-dumplings-body-left-top,
.rice-dumplings-body-right-top {
position: absolute;
background-color: #ffffff;
height: 300px;
width: 300px;
border-top-left-radius: 100%;
border: 4px black solid;
border-right: 0px;
}

.rice-dumplings-body-left-top {
left: 25px;
top: 25px;
transform: rotateY(30deg) rotate(-10deg);
}

.rice-dumplings-body-right-top {
left: 235px;
top: 25px;
transform: rotateY(210deg) rotate(-10deg);
}

.rice-dumplings-body-left-bottom,
.rice-dumplings-body-right-bottom {
position: absolute;
background: linear-gradient(to bottom right, #459712 15%, #8ad35d 80%, #459712 100%);
border-top-left-radius: 0%;
border: 4px black solid;
}

.rice-dumplings-body-left-bottom {
height: 200px;
width: 400px;
top: 240px;
left: 50px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-top-right-radius: 100%;
transform: rotate(15deg);
}

.rice-dumplings-body-right-bottom {
height: 200px;
width: 250px;
top: 260px;
left: 250px;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 20%;
border-top-right-radius: 100%;
transform: rotateY(180deg);
}

.rice-dumplings-face {
position: absolute;
}

.rice-dumplings-eye {
position: absolute;
height: 30px;
width: 30px;
border-radius: 100%;
background-color: black;
}

.eye-left {
left: 250px;
top: 80px;
}

.eye-right {
left: 350px;
top: 70px;
}

.rice-dumplings-eye>.light {
position: absolute;
height: 10px;
width: 10px;
border-radius: 100%;
background-color: white;
}

.rice-dumplings-eye>.postion {
right: 20%;
top: 10%;
}

.rice-dumplings-eye>.right {
right: 20%;
top: 10%;
}

.smile {
position: absolute;
width: 60px;
height: 80px;
background: linear-gradient( #fdc2a6 50%, #fa7768 50%);
top: 120px;
left: 300px;
border: 4px black solid;
border-top-left-radius: 8%;
border-top-right-radius: 16%;
border-bottom-left-radius: 80%;
border-bottom-right-radius: 90%;
}

.cheek {
position: absolute;
top: 120px;
background-color: #fd8373;
border-radius: 100%;
}

.cheek::before {
position: absolute;
content: “/ / /”;
color: white;
left: 23%;
top: 13%;
}

.cheek-left {
height: 40px;
width: 80px;
left: 190px;
}

.cheek-right {
height: 40px;
width: 60px;
left: 380px;
}

.arm-left {
position: absolute;
height: 100px;
width: 100px;
border: 6px black solid;
border-top: 0px;
border-left: 0px;
transform: rotate(45deg);
left: 160px;
top: 160px;
}

.arm-left::before {
position: absolute;
content: “”;
height: 50px;
width: 30px;
right: -15%;
border-radius: 100%;
background-color: black;
}

.arm-left::after {
position: absolute;
content: “”;
height: 20px;
width: 10px;
right: 8%;
top: 15%;
border-radius: 100%;
background-color: black;
transform: rotate(-45deg);
}

.arm-right {
position: absolute;
height: 130px;
width: 100px;
border-right: 6px black solid;
left: 390px;
top: -52px;
transform: rotate(45deg);
}

.arm-right::before {
position: absolute;
content: “”;
height: 50px;
width: 30px;
right: -15%;
border-radius: 100%;
background-color: black;
}

.leg-left {
position: absolute;
height: 50px;
width: 50px;
border: 6px black solid;
border-top: 0px;
border-left: 0px;
left: 160px;
top: 435px;
}

.leg-left::before {
position: absolute;
content: “”;
height: 30px;
width: 15px;
left: -15%;
bottom: -30px;
border-radius: 100%;
background-color: black;
}

.leg-right {
position: absolute;
height: 100px;
width: 50px;
border-right: 6px black solid;
left: 250px;
top: 463px;
}

.leg-right::before {
position: absolute;
content: “”;
height: 30px;
width: 15px;
right: -35%;
bottom: -10px;
border-radius: 100%;
background-color: black;
transform: rotate(-90deg);
}
/*太阳*/

.sun {
position: absolute;
height: 150px;
width: 150px;
}

.sun-body {
position: absolute;
height: 95px;
width: 95px;
background-color: #ff5f47;
border-radius: 100%;
border: 4px black solid;
left: 30px;
top: 30px;
}

.sun-eye {
position: absolute;
height: 10px;
width: 10px;
background-color: black;
border-radius: 100%;
}

.sun-body>.eye-left {
top: 60px;
left: 70px;
}

.sun-body>.eye-right {
top: 50px;
left: 40px;
}

.sun-body>.smile {
position: absolute;
width: 10px;
height: 10px;
background-color: #fdc2a6 50%;
top: 70px;
left: 45px;
border: 4px black solid;
border-top-left-radius: 8%;
border-top-right-radius: 16%;
border-bottom-left-radius: 80%;
border-bottom-right-radius: 90%;
transform: rotate(20deg);
}

.sunshine-top-left,
.sunshine-top-right,
.sunshine-bottom-left,
.sunshine-bottom-right {
position: absolute;
background-color: #a54a29;
border-radius: 100%;
}

.sunshine-top-left {
height: 10px;
width: 10px;
left: -30px;
top: -20px;
}

.sunshine-top-right {
height: 20px;
width: 20px;
left: 130px;
top: 20px;
}

.sunshine-bottom-left {
height: 30px;
width: 30px;
left: -20px;
top: 120px;
}

.sunshine-bottom-right {
height: 10px;
width: 10px;
left: 110px;
top: 120px;
}

.circle {
position: absolute;
height: 400px;
width: 1200px;
}

.circle1,
.circle2,
.circle3,
.circle4,
.circle5,
.circle6,
.circle7,
.circle8 {
position: absolute;
border-radius: 100%;
background-color: #0f893c;
}

.circle1 {
height: 300px;
width: 300px;
bottom: -130px;
}

.circle2 {
height: 150px;
width: 150px;
bottom: -30px;
left: 270px
}

.circle3 {
height: 30px;
width: 30px;
bottom: 10px;
left: 430px
}

.circle4 {
height: 60px;
width: 60px;
bottom: 10px;
left: 530px
}

.circle5 {
height: 160px;
width: 260px;
bottom: -130px;
left: 530px
}

.circle6 {
height: 60px;
width: 160px;
bottom: -30px;
left: 730px
}

.circle7 {
height: 60px;
width: 160px;
bottom: -30px;
left: 780px
}

.circle8 {
height: 160px;
width: 160px;
bottom: -80px;
left: 880px
}
/*黄色圈*/

.y-circle1,
.y-circle2,
.y-circle3,
.y-circle4 {
position: absolute;
border-radius: 100%;
background-color: #cdd622;
}

.y-circle1 {
height: 60px;
width: 60px;
bottom: 180px;
left: 880px
}

.y-circle2 {
height: 30px;
width: 30px;
bottom: 280px;
left: 780px
}

.y-circle3 {
height: 10px;
width: 10px;
bottom: 380px;
left: 720px
}

.y-circle4 {
height: 20px;
width: 20px;
bottom: 290px;
left: 680px
}
/* 云朵 */

.cloud {
position: absolute;
width: 175px;
height: 55px;
background-color: white;
border-radius: 100px;
box-shadow: 0 1px 5px 0px rgba(50, 50, 50, 0.05);
}

.cloud:after,
.cloud:before {
content: “”;
position: absolute;
background-color: white;
}

.cloud:after {
width: 50px;
height: 50px;
border-radius: 50%;
top: -54%;
left: 14%;
}

.cloud:before {
width: 100px;
height: 100px;
border-radius: 50%;
top: -90%;
right: 10%;
}

.cloud1 {
transform: scale(1);
opacity: 0.8;
left: 100px;
top: 410px;
z-index: 1;
}

.cloud2 {
left: 260px;
top: 360px;
transform: scale(1);
opacity: 0.9;
z-index: 1;
}
/* 文本内容 */

.stroke {
-webkit-text-stroke: 1px black;
}

img
img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

x;
background-color: white;
border-radius: 100px;
box-shadow: 0 1px 5px 0px rgba(50, 50, 50, 0.05);
}

.cloud:after,
.cloud:before {
content: “”;
position: absolute;
background-color: white;
}

.cloud:after {
width: 50px;
height: 50px;
border-radius: 50%;
top: -54%;
left: 14%;
}

.cloud:before {
width: 100px;
height: 100px;
border-radius: 50%;
top: -90%;
right: 10%;
}

.cloud1 {
transform: scale(1);
opacity: 0.8;
left: 100px;
top: 410px;
z-index: 1;
}

.cloud2 {
left: 260px;
top: 360px;
transform: scale(1);
opacity: 0.9;
z-index: 1;
}
/* 文本内容 */

.stroke {
-webkit-text-stroke: 1px black;
}

[外链图片转存中…(img-YJ4oT7as-1714695921537)]
[外链图片转存中…(img-z69tZTK9-1714695921537)]
[外链图片转存中…(img-rNbF67WL-1714695921538)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

2401_84183545
关注
  • 26
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
700行无用 纯 CSS 祝考生 金榜高粽《1_bit 的无用 CSS 代码 》
1_bit 的博客
06-04 1万+
今天才想起来这回事，没办法就急急忙忙的赶工一下，接下来我就画一下这个海报试试手了：先给整个网页制作一个布局吧，直接 flex 搞定，并且使其居中 justify-content、align-items 都要赋值为 center： 接下来直接创建一个 div ，给予一个 demo 样式： 那么此刻咱们需要做的准备工作就搞定了，那么接下来咱们就在这个框内画东西：首先咱们就先画一个云朵吧，云朵就在粽子的脚底下，制作起来很简单；哦，提一下，为了简单（主要是懒），就直接在 style 标签中添加样式吧。我们先看一下一
700行无用 纯 CSS 祝考生 金榜高粽《1_bit 的无用 CSS 代码 》_css 无用代码
2401_84183545的博客
05-03 5
}.sunshine-top-left { height: 10px; width: 10px; left: -30px; top: -20px; }.sunshine-top-right { height: 20px; width: 20px; left: 130px; top: 20px; }.sunshine-bottom-left { height: 30px; width: 30px; left: -20px; top: 120px; }.sunshine-bottom-right { heigh
700行无用 纯 CSS 祝考生 金榜高粽《1_bit 的无用 CSS 代码 》_css 无用代码(1)
2401_84183492的博客
05-03 783
}.cloud2 { left: 260px; top: 360px; transform: scale(1.1); opacity: 0.9; z-index: 1; } .circle { position: absolute; height: 400px; width: 1200px; }.circle1, .circle2, .circle3, .circle4, .circle5, .circle6, .circle7, .circle
700行无用 纯 CSS 祝考生 金榜高粽《1_bit 的无用 CSS 代码 》_css 无用代码(3)
2401_84164617的博客
04-29 592
}.y-circle4 { height: 20px; width: 20px; bottom: 290px; left: 680px } /*太阳*/ .sun { position: absolute; height: 150px; width: 150px; } .sun-body { position: absolute; height: 95px; width: 95px;
700行无用 纯 CSS 祝考生 金榜高粽《1_bit 的无用 CSS 代码 》_css 无用代码(2)
2401_84164672的博客
04-27 398
如果你想做一些效果还可以沿着垂直方向变换一下，都可以。
Firefox浏览器插件Firebug和CSS减肥工具CSS Usage(清理无用CSS样式的CSS精简工具)
03-28
同时,CSS Usage还提供给我们关于CSS某个选择器被实用多少次的统计,就是CCS文件后面的(1 scans) 如果我们一直使用 Auto Scan功能的话,我们的Scan次数也是在累积的,比如我们从首页到博文目录、再到图片、最后到达关于...
清理无用的CSS样式比较有用的几个工具
12-12
这些无用的浪费了一些服务器空间和带宽消耗，也会增大我们的维护成本。那么有没有一些办法来清理那些无用的样式呢？今天就让我们来了解一下几个比较有用的工具。 Dust-Me selectors ...支持CSS1选择器、大部分CSS
day02_CSS预习笔记1
08-03
1.什么是 CSS 2.CSS 的语法规范 3.CSS 的注释 4.开发人员工具 5.CSS 的引入方式 6.CSS 选择器 1.不要在页面上写一些无用的样式
helium-检测网页中无用的css
07-08
helium-检测网页中无用的css
CSS实现经典打字小游戏《生死时速》
坚信万物皆可切的切图仔
06-11 985
游戏开始后，警察在3秒后开始出动，如果警察抓到小偷（位置重合）即游戏失败。你需要根据页面底部的对话正确输入单词，即可让小偷不断运动，拉开与警察的距离，如果在输入全部对话前没有被警察逮到，即闯关成功。整个游戏其实实现起来很简单，只需要在设置offset路径动画的基础上加一点点细节就完成了。学如逆水行舟，不进则退～
主题切换之CSS文件篇
一名全栈开发工程师
06-11 559
利用HTML的标签，可以通过JavaScript动态改变其href属性来加载不同的CSS文件。这意味着我们可以在运行时切换整个页面的样式表，从而实现主题的变化。
CSS 列表样式（ul）全面解析
2401_83810323的博客
06-11 296
属性用于定义列表项的标记类型。常见的值包括disc（实心圆）、circle（空心圆）、square（方块）以及none（无标记）。此外，也可以使用decimal（十进制数字）、（小写字母）、（大写罗马数字）等来生成不同的编号效果。ul {/* 方块标记 */ol {/* 大写罗马数字 */
HOW - CSS 常见效果实现
weixin_58540586的博客
06-11 951
常见 CSS 效果实现总结。
CSS 提示工具：增强网站互动性与用户体验
lsx202406的博客
06-13 254
在网页设计中，CSS（层叠样式表）不仅用于美化网站，还能增强网站的互动性和用户体验。CSS 提示工具（Tooltips）是一种常见的交互元素，它能在用户鼠标悬停在某个元素上时显示额外的信息。本文将探讨CSS提示工具的原理、应用和最佳实践，以帮助开发者创建更加友好和互动的网页。
Html_Css问答集(3)
最新发布
白话魔法师
06-14 479
html与css学习中的一些疑问，问答中轻松获取知识。
HTML5+CSS3+JS小实例：网格图库
艾恩小灰灰的博客
06-05 1389
实例：网格图库。技术栈：HTML+CSS+JS。
CSS id选择器
m0_73614626的博客
06-11 423
选择器类似，那么它们的区别是什么呢？一般情况下，都推荐使用类选择器。选择器与我们上一关中学习的类选择器类似，但在使用上有不同。选择器的方式完成页面菜单栏样式布局，栏目导航等任务。使用类选择器时，指定一个元素属于某类，使用的是关键字。文档中，可以为任意多个元素指定类，但。选择器在页面中定义锚，在编写。对于上面类选择器的例子，用。中想要应用类样式的元素，指定。它们最大的区别在于，在一个。选择器时，使用的是关键字。然后，书写相应类的样式。选择器只能使用一次，一个。在样式表中，指定对应。同理，我们可以看出，
js轮播图有，移入移出事件，左右滑动事件功能
tianxianghuiwei的博客
06-14 86
具体的轮播可以根据需求进行调整；
css中设置div水平居中，margin:0px auto无用的情况
05-20
当使用`margin: 0px auto`无法实现div水平...5. 使用CSS Grid布局。设置父元素的`display: grid`和`justify-items: center`即可实现水平居中。 以上方法中，建议使用Flex布局或CSS Grid布局，因为它们更加灵活和方便。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值