草庐IT

CSS-LOADER

全部标签

CSS时间轴文本对齐

伙计们,我正在尝试与CSS建立时间表,并且我对那些红色圈子有问题。我想添加一些应该在红色圆圈内垂直和水平地以水平为中心的信息(最多一个或2个单词),我可以请求您的帮助吗?.timeline-image{text-align:center;margin:0auto;width:390px;height:390px;background:rgba(203,190,181,0.3);border-radius:50%;}.timeline-imageimg{position:relative;z-index:99999;top:-30px;}.timelineulli{list-style:none

第十六天前端HTML、CSS、JavaScript详细总结(内置VSCode安装教程)

目录HTML、CSS、JavaScriptWeb前端开发简介1.HTML1.1介绍1.2快速入门1.3VSCode安装使用1.4基础标签1.4图片、音频、视频标签1.5超链接标签1.6表格标签1.7布局标签1.8表单标签1.9表单项标签2.CSS2.1概述2.2css引入方式2.3css选择器2.4css属性3.JavaScript3.1JavaScript引入方式3.2JavaScript基础语法3.3变量3.4运算符3.5流程控制语句3.6函数HTML、CSS、JavaScript今日目标:了解课程中讲解的HTML标签的使用了解CSS的使用掌握JavaScript基础语法Web前端开发简介

js+html2canvas实现网页放大镜效果:放大镜图片使用css样式background背景图,鼠标移动使用样式background-position动态设置

实现效果:       鼠标移动到需要放大的网页上时,鼠标静止不动500毫秒后,一个长方形的放大镜框显示,放大镜中显示当前区域2.2倍的效果,并且这时候鼠标移动放大的区域也跟着变化。放大镜限制:放大镜只能在特定的区域内使用,即放大镜的移动范围有边界。实现思路:       使用html2canvas将需要使用放大镜效果的dom元素转换为图片,使用背景图的background-position属性实现鼠标移动展示对应的部分放大图片       需要注意的地方是,为了将鼠标单纯的经过、不触发放大镜效果这一情况区分开。我们可以使鼠标进入目标区域后,要求鼠标在静止不移动的状态下,等待500毫秒后才触发

CSS3 修改滚动条样式

上图:上代码:/*修改垂直滚动条*/.right-list::-webkit-scrollbar{width:2px;/*修改宽度*/height:5px;/*修改高度*/}/*修改滚动条轨道背景色*/.right-list::-webkit-scrollbar-track{background-color:#f1f1f1;}/*修改滚动条滑块颜色*/.right-list::-webkit-scrollbar-thumb{background-color:#888;border-radius:6px;/*修改滑块圆角*/}/*修改滚动条滑块悬停时的颜色*/.right-list::-webk

实现 抽屉效果 css3

 #box{width:2000px;height:328px;overflow:hidden;}#box>div{width:250px;height:328px;background-image:url('https://img0.baidu.com/it/u=1032314795,3433105171&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500');float:left;cursor:pointer;transition:width1s;}#box>div:hover{width:889px;}

CSS3样式详解之圆角、阴影及变形

目录前言一、圆角样式(border-radius)二、元素阴影(box-shadow)三、过渡动画样式(transition)1.transition-property(用于设置属性名称)2.transition-duration(设置时间)3.transition-timing-function(设置速度曲线)4.transition-delay(设置延长时间)5.缩写样式(transition)四、变形样式(transform)1.缩放样式(scaleX和scaleY)2.平移样式(translateX和translateY)3.旋转样式(rotate)4.倾斜扭曲样式(skew)5.变形

html+css+js实现简单的交互效果

.index-modeule-three{padding-top:124px;padding-bottom:124px;}.modeule-three-title{font-size:48px;font-family:"Overpass-Bold";line-height:61px;text-align:center;}.modeule-three-province{width:1430px;margin:auto;margin-top:64px;display:flex;box-shadow:5px5px8pxrgba(0,0,0,0.3);height:600px;position:rel

[HTML]Web前端开发技术6(HTML5、CSS3、JavaScript )DIV与SPAN,盒模型,Overflow——喵喵画网页

希望你开心,希望你健康,希望你幸福,希望你点赞!最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!!喵喵喵,你对我真的很重要!目录前言CSS盒模型简介CSS盒模型CSS盒模型结构盒模型的属性边框border边框宽度border-width边框样式border-style边框颜色border-color边框简写border边框的四个方向border-radius外边距margin内边距padding盒模型的大小课后练习应用CSS行内样式表使用border-radius属性制作圆角边框。网页标题:字体样式综合应用总结前言1盒模型简介2盒模型的属性3盒模型的大小4盒子的margin合

京东首页制作html+css+js

 index部分:京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!湖南你好,请登录免费注册我的订单我的京东京东会员企业采购客户服务网站导航手机京东 京东我的购物车0运动出游惠图书钜惠电脑免息品质男装抢拍好车旅游大奖品质家具牛排国庆放假秒杀优惠券PLUS会员品牌闪购拍卖京东家电京东超市京东生鲜全球国际京东金融家用电器手机/运营商/数码电脑/办公家居/家具/家装/厨具男装/女装/童装/内衣美妆/个护清洁/宠物女鞋/箱包/钟表/珠宝男鞋/运动/户外房产/

Nginx无法访问静态资源,Nginx访问静态资源没有带端口导致静态资源无法访问,内网穿透后无法访问本地静态资源文件 js css

​使用内网穿透后会生成一个免费的二级域名,通过此域名+远程服务器端口可以映射到本地的端口如:http://cn-2.openfrp.top:88888888是远程服务器端口映射本地端口80;错误的Nginx配置如server{listen80;server_nametest-emlog.com;root/www/wwwroot/emlog;indexindex.htmlindex.htmindex.php;location/blog{proxy_set_headerHost$host:$server_port;proxy_set_headerX-Real-IP$remote_addr;prox