手机网站怎么提高关键词,wordpress主页大小,图片制作app,网站多次提交目录 前言#xff1a;
一、向右箭头
1.原理#xff1a;
2.代码实现
3.结果展示#xff1a;
二、钟表
1.原理#xff1a;
2.代码展示#xff1a;
3.最终效果#xff1a;
三、小手机
1.原理#xff1a;
2.代码展示#xff1a;
3.最后效果#xff1a;
四、结…目录 前言
一、向右箭头
1.原理
2.代码实现
3.结果展示
二、钟表
1.原理
2.代码展示
3.最终效果
三、小手机
1.原理
2.代码展示
3.最后效果
四、结束语 前言
CSS是一种强大且灵活的样式语言可以通过控制样式的各种属性来实现对网页的精确控制使网页更具有吸引力和可读性。所以我们可以利用CSS来做我们的一些icon图标灵活运用CSS中旋转拉伸扭曲裁剪伪元素选择器实现icon小图标利用css来画小图标可以减少浏览器的请求当然使用img标签或icon图标会大大提高我们开发的速度。
本节内容展示 一、向右箭头
1.原理
利用border属性只添加相邻两个边框使用transform属性进行旋转
2.代码实现
html代码
div classright/div
css代码 .right {/* 设置盒子的宽和高 */width: 8px;height: 8px;/* 添加边框颜色以及边框样式为实线*/border: #666 solid;/* 只添加上边框和右边框 下边框和左边框为0*/border-width: 2px 2px 0 0;/* 旋转45度 */transform: rotate(45deg);}
3.结果展示 总结同样的我们可以利用旋转来实现其他方向的箭头也可以给下边框以及有边框添加边框属性。
二、钟表
1.原理
利用一个div盒子以及他自身的伪元素属性相当于拥有三个盒子利用定位圆角来实现一个钟表图标。
2.代码展示
html:
div classclock/div
css: /* 钟表 */.clock {/* 主体盒子 */width: 24px;height: 24px;/* 添加宽高 */border: 1px solid rgb(250, 250, 250);/* 圆角为50%就是圆形*/border-radius: 50%;/* 添加定位 */position: relative;}/* 利用伪元素 */.clock::after {/* 默认属性 */content: ;/* 转换为块级元素*/display: block;/* 定位父相子绝*/position: absolute;/* 设置宽高*/width: 1px;height: 10px;/* 添加背景*/background: rgb(250, 250, 250);/* 相对于主体的位置*/top: 3px;left: 11px;}.clock::before {content: ;display: block;position: absolute;/* 设置宽高*/width: 1px;height: 6px;/* 设置背景*/background: rgb(250, 250, 250);/* 旋转作为时针*/transform: rotate(45deg);/* 相对于主体的位置 */top: 12px;left: 9px;}
3.最终效果 三、小手机
1.原理
利用border属性添加不同的边框宽度实现。
2.代码展示
html:
div classmoney/div
css: /* money图标 */.money {/* 利用flex布局让其垂直水平居中显示 */display: flex;justify-content: center;align-items: center;/* 去除字体默认样式 */font-style: normal;/* 设置宽高 */width: 15px;height: 24px;/* 添加边框 实线 */border: rgb(250, 250, 250) solid;/* 上右左2px 下3px*/border-width: 2px 2px 3px 2px;/* 添加圆角属性 */border-radius: 3px;}
3.最后效果 四、结束语
今天我们主要学习了向右箭头钟表小手机图标的实现下一节继续来使用纯css完成小图标,本节css画icon图标就结束了下一节再见。
