![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
浅浅一笑^*^
毕业于河北工程技术专修学院,主修计算机科学与技术,学习马克思主义、哲学、C语言、思想道德修养、法律基础、人工智能软件技术基础........
展开
-
css3+html仿小米官网商城项目。
效果图:代码:html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米商城 - 小米11 Ultra、Redmi K40 Pro、MIX FOLD,小米电视官方网站</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta原创 2021-09-30 18:01:39 · 4146 阅读 · 3 评论 -
box-show阴影的四个角设置,分别是。
分别是:兼容:-webkit-box-shadow:0px -10px 0px 0px #ff0000, /*上边阴影 红色*/ -10px 0px 0px 0px #3bee17, /*左边阴影 绿色*/ 10px 0px 0px 0px #2279ee, /*右边阴影 蓝色*/ 0px 10px 0原创 2021-09-29 09:44:47 · 2723 阅读 · 0 评论 -
iconfont阿里图标引入不生效的解决方法,三种引入方式详细步骤。
1.登录阿里图标官网2.注册自己的账户,创建项目3.加入自己使用的图标,加入购物车4.选中项目5.选中引入方式:第一种.使用统一码 Unicode第二种.使用class Font class使用步骤:第一种:1.点击Unicode2.创建一个css文件(iconfont.css)粘贴到css文件中3.html中link引入<link rel="stylesheet" href="../css/iconfont.css">4.使用<i class=原创 2021-09-28 17:25:57 · 9941 阅读 · 7 评论 -
css3全局公共样式,收藏直接使用。
代码如下:html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,a,address,em,img,ol,ul,li,fieldset,form,label,legend,table,tbody,tfoot,thead,tr,th,td,i,b,s{ margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-family:Helvetica,Arial;原创 2021-09-28 11:48:28 · 151 阅读 · 0 评论 -
bootstrap+css+html写官网博客效果。
效果图如下:pc端:移动端效果:代码如下:<!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"&g原创 2021-09-28 10:07:14 · 672 阅读 · 0 评论 -
CSS cursor 属性实现不同的光标效果。
代码如下:<html><body><p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p><span style="cursor:auto">Auto</span><br /><span style="cursor:crosshair">Crosshair</span><br /><span style="cursor:default">Default原创 2021-09-23 16:56:15 · 156 阅读 · 0 评论 -
bootstrap英文官网学习。
bootstrap官网https://getbootstrap.com/docs/4.3/content/reboot/原创 2021-09-18 09:52:34 · 133 阅读 · 0 评论 -
html5+css3手写代码实现三角形及水平和垂直居中div?
效果图:代码:<!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>手原创 2021-05-06 10:13:51 · 386 阅读 · 0 评论 -
Html+CSS实现水平垂直居中的方法?
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" />原创 2021-05-01 14:32:57 · 146 阅读 · 0 评论 -
Jquery制作实现图片--瀑布流
效果图:代码如下:<!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>原创 2021-04-11 05:21:53 · 243 阅读 · 2 评论 -
Viscode快捷键生成css, sass, less方法.
功能:1.将Html 文档结构直接生成对应 css, sass, less 组织结构2.viscode的功能插件 css Tree3.Ctrl+Shift+P快捷键可以直接生成如下图:1.点击2.复制代码3.粘贴到写样式文件夹里面,可以直接进行修改样式了,这样就省去写属性名的烦恼,节省时间。4.去掉view代码字段.否则回报错。...原创 2021-04-04 04:37:14 · 584 阅读 · 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>大原创 2021-03-20 06:41:17 · 178 阅读 · 0 评论 -
模仿京东的二维码头部的三角实现,用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>模原创 2021-03-16 05:54:51 · 474 阅读 · 0 评论 -
移动端使用rem+媒体查询使用,解决不同的设备样式
例子:总结:单独对一些样式做出改变时,可以用媒体查询通过控制视口的宽度来设置不同的样式,例子:font-size、color、width、height、padding、margin、position代码:<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>/* 变量声明 */原创 2021-03-12 06:47:38 · 215 阅读 · 1 评论 -
css中使用变量,可以将它们放在变量中,而不必一遍又一遍地复制和粘贴相同的颜色
示例子:CSS 变量var() 函数用于插入 CSS 变量的值。CSS 变量可以访问 DOM,这意味着您可以创建具有局部或全局范围的变量,使用 JavaScript 来修改变量,以及基于媒体查询来修改变量。使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中,而不必一遍又一遍地复制和粘贴相同的颜色1.传统方式的css代码:<!DOCTYPE html><html><head><style>body { backgro转载 2021-03-12 05:26:25 · 228 阅读 · 0 评论 -
移动端适配和rem布局的各种详细步骤。
效果图:代码如下:html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"/> <link rel="stylesheet" href="css/jd.css" > <原创 2021-02-02 01:21:03 · 321 阅读 · 0 评论 -
移动端项目px自动转换成rem,操作步骤。
1.开发工具是Visual Studio Code2.打开扩展工具下载插件3.打开文件->首选项->设置这里设置为1004.找到你的html文件,当前是px的,可以通过按钮直接转换成rem按键是Alt+z (选中要转换的html,在按键就可以成功转换成rem);如下面的例子:...原创 2021-02-01 15:22:45 · 928 阅读 · 0 评论 -
原生JS制作二级菜单+轮播图效果
效果图:d代码如下: <style> *{ margin:0; padding:0; } #box{ width: 1200px; height: 460px; margin: 0 auto; ...原创 2020-04-18 00:52:38 · 875 阅读 · 0 评论 -
原生JS实现轮播效果--新手专属
效果图:css代码:<style> *{ margin:0; padding:0; } #box{ width: 1200px; height: 460px; background: url("./img/bg2.jpg"); margin: 0 auto; ...原创 2020-04-17 21:44:43 · 174 阅读 · 0 评论 -
原生JS实现 --推拉门效果图片
效果图片如下:css代码:<style> *{ margin:0; padding:0; } #box{ width: 838px; position: relative; margin: 0 auto; } .img{ positio...原创 2020-04-15 04:48:50 · 368 阅读 · 0 评论 -
原生JS写三级联动 --省--市--区
效果如下:css代码<style> select{ width: 100px; height: 30px; }</style>html代码<div id="box"></div>JS代码<script src="js/check.js"></script><...原创 2020-04-15 03:12:14 · 477 阅读 · 0 评论