洛丽糖 - 美化
type: channel
link: https://www.luolt.cn/tag/%E7%BE%8E%E5%8C%96/
items: 重新优化一下html代码标签等样式
items: 纯CSS实现的卡片切换效果
items: N款纯CSS制作Switch动画开关按钮
items: “各项提示美化”css代码分享
items: 文章页添加免责声明美化代码教程分享
items: 利用css生成首字母文字头像代码
items: 一款好看的文章列表源码，非常精简
items: html简单美化的右边悬浮功能
items: URL跳转离开页面提示页面
items: 有趣好看的小组件盒子 1.5.4

重新优化一下html代码标签等样式
type: item
date: 2024-01-30T20:04:57+08:00
description: 去别人的网站偷了一点html标签美化样式:heo(倚墙笑)，顺便也新添加了几个短代码和其他标签。:heo(偷偷看)

纯CSS实现的卡片切换效果
type: item
date: 2024-01-30T12:13:00+08:00
description: css代码* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100vh; font-family: "Open Sans", sans-serif; } body { display: flex; justify-content: center; align-items: center; background: #cecece; } .container.dwo { display: flex; justify-content: center; align-items: center; } .card { position: absolute; height: 350px; width: 100%; max-width: 850px; margin: auto; background: #ffffff; border-radius: 25px; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3); } .card .inner_part { display: flex; align-items: center; justify-content: center; padding: 0 0 0 30px; height: 350px; position: absolute; } #slideImg:checked ~ .inner_part { padding: 0; transition: 0.1s ease-in; } .inner_part .img { height: 260px; width: 260px; overflow: hidden; flex-shrink: 0; border-radius: 20px; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2); } #slideImg:checked ~ .inner_part .img { height: 350px; width: 850px; z-index: 99; transition: 0.3s 0.2s ease-in; } .img img { height: 100%; width: 100%; cursor: pointer; opacity: 0; transition: 0.6s; } #slide_1:checked ~ .inner_part .img_1, #slide_2:checked ~ .inner_part .img_2, #slide_3:checked ~ .inner_part .img_3 { opacity: 1; transition-delay: 0.2s; } .content { padding: 0 20px 0 35px; width: 530px; margin-left: 50px; opacity: 0; transition: 0.6s; } #slideImg:checked ~ .inner_part .content { display: none; } #slide_1:checked ~ .inner_part .content_1, #slide_2:checked ~ .inner_part .content_2, #slide_3:checked ~ .inner_part .content_3 { opacity: 1; margin-left: 0; z-index: 100; transition-delay: 0.3s; } .content .title { font-size: 30px; font-weight: 700; color: #0d0925; margin: 0 0 20px 0; } .content .text { font-size: 19px; color: #4e4a67; margin: 0 auto 30px auto; line-height: 1.5em; text-align: justify; } .content a { padding: 15px 20px; border: none; font-size: 16px; color: #fff0e6; font-weight: 600; letter-spacing: 1px; border-radius: 50px; cursor: pointer; outline: none; background: #000000; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2); flo…

N款纯CSS制作Switch动画开关按钮
type: item
date: 2024-01-30T12:02:35+08:00
description: 代码来自别人分享的模板，博主只是搬运工而已。css代码* { user-select: none; -webkit-tap-highlight-color: transparent; } *:focus { outline: none; } body { font-family: Arial, Helvetica, sans-serif; margin: 0; background-color: #f1f9f9; } #app-cover { display: table; width: 600px; margin: 40px auto; counter-reset: button-counter; } .row { display: table-row; } .toggle-button-cover { display: table-cell; position: relative; width: 200px; height: 140px; box-sizing: border-box; } .button-cover { height: 100px; margin: 20px; background-color: #fff; box-shadow: 0 10px 20px -8px #c5d6d6; border-radius: 4px; } .button-cover:before { counter-increment: button-counter; content: counter(button-counter); position: absolute; right: 0; bottom: 0; color: #d7e3e3; font-size: 12px; line-height: 1; padding: 5px; } .button-cover, .knobs, .layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .button { position: relative; top: 50%; width: 74px; height: 36px; margin: -20px auto 0 auto; overflow: hidden; } .button.r, .button.r .layer { border-radius: 100px; } .button.b2 { border-radius: 2px; } .checkbox { position: relative; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 3; } .knobs { z-index: 2; } .layer { width: 100%; background-color: #ebf7fc; transition: 0.3s ease all; z-index: 1; } /* Button 1 */ #button-1 .knobs:before { content: 'YES'; position: absolute; top: 4px; left: 4px; width: 20px; height: 10px; color: #fff; font-size: 10px; font-weight: bold; text-align: center; line-height: 1; padding: 9px 4px; background-color: #03a9f4; border-radius: 50%; transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all; } #button-1 .checkbox:checked + .knobs:before { content: 'NO'; left: 42px; background-color: #f44336; } #button-1 .checkbox:checked ~ .layer { background-color: #fcebeb; } #button-1 .knobs, #button-1 .knobs:before, #button-1 .layer { transition: 0.3s ease all; } /* Button 2 */ #button-2 .knobs:before, #button-2 .knobs:after { content: 'YES'; position…

“各项提示美化”css代码分享
type: item
date: 2023-04-20T22:02:00+08:00
description: 以上代码扒自“handsome主题”，仅供学习参考，如果用于商业请自行承担相关后果。css代码.xm-wx-tip{ display: inline-block; width: calc(100% - 40px); background: #eef6fd; padding: 8px 20px; border-radius: 4px; margin-bottom: 5px; margin-top: 5px; color: #777; } .xm-wx-tip:before { background: #38a3fd; border-radius: 50%; color: #fff; content: "i"; font-size: 15px; height: 21px; line-height: 21px; margin-left: -32px; margin-top: 5px; position: absolute; text-align: center; width: 21px; } .xm-wx-tip-info{ border-left: 3px solid #38a3fd; } .xm-wx-tip-info:before { background: #38a3fd; color: #fff; content: "i"; } .xm-wx-tip-success{ border-left: 3px solid #2e9f0f; } .xm-wx-tip-success:before { background: #2e9f0f; color: #fff; content: "\221a"; } .xm-wx-tip-share{ border-left: 3px solid #404040; } .xm-wx-tip-share:before { color: #fff; background:#404040; content:"\0040" } .xm-wx-tip-warning{ border-left: 3px solid #ff7800; } .xm-wx-tip-warning:before { color: #fff; background:#ff7800; content:"\0021" } .xm-wx-tip-error{ border-left: 3px solid #ed0000; } .xm-wx-tip-error:before { color: #fff; background:#ed0000; content:"\00D7" } html代码 购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买 购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买 购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买 购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买 购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买 演示

文章页添加免责声明美化代码教程分享
type: item
date: 2023-01-09T21:36:00+08:00
description: 教程介绍怎么给文章内页添加免责声明？这个没有什么技术含量，新手傻瓜式套入操作，懂点基础的随便看看就懂。添加CSS代码/*文章内页版权声明*/ .mzsm{position:relative;margin:25px 0;padding:45px 45px 30px;border-color:#c0c6cc;background-color:#f8f8fa;font-family:Lantinghei SC,Open Sans,Arial,Hiragino Sans GB,Microsoft YaHei,5fae8F6F96c59ED1,STHeiti,WenQuanYi Micro Hei,SimSun,sans-serif} .mzsm:before{top:20px;left:20px;background:url(/upFiles/infoImg/202005021007133605.png) no-repeat 0 0} .mzsm:after,.mzsm:before{position:absolute;display:block;width:1pc;height:14px;content:''} .mzsm:after{right:20px;bottom:20px;background:url(/upFiles/infoImg/202005021007133605.png) no-repeat -1pc 0} .mzsm p{ display: block; line-height: 30px; margin-bottom: 15px;} 然后再将下面的代码放到你合适的文章内容html页面里面即可。 免责声明： 本站提供的资源，都来自网络，版权争议与本站无关，所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您必须在下载后的24个小时之内，从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。侵删请致信E-mail：x@x.x 文章来源于：https://www.zxki.cn/wydm/4806.html

利用css生成首字母文字头像代码
type: item
date: 2023-01-09T21:24:39+08:00
description: 在做模版时为了美观好看，会在一些地方显示一些图片，通过代码获取文章中的图片来显示，而在文章中没有图片时，我们可以使用一张默认的图，总是搞这些默认的图不是很好看，这时我们可以用css来生成文章标题首字母的头像为图片，这样会不会看起来很美观，那么如何利用css生成首字母文字头像？把下方的css代码复制到css文件中，html代码复制到需要的地方，就可以实现利用css生成首字母文字头像的功能，要注意中文与英文数字要设置不同搞的css样式，还需要把css样式复制一份改个名字，然后修改其中的text-indent和letter-spacing值，其它属性可按需求自行修改。￼.lanye-textavatar{ width: 48px; height: 48px; line-height: 48px; background-color: #718af5; vertical-align: middle; overflow: hidden; font-size: 20px; text-indent: 11px; text-align: center; letter-spacing: 11px; color: #fff; border-radius: 60%; } html调用代码 字母头像

一款好看的文章列表源码，非常精简
type: item
date: 2022-11-27T19:00:00+08:00
description: 三栏设计，可以整合到自己网站，调用自己的文章就好。代码（只有body里面的内容）： 最新公告 你知道吗？一个薄云顶五个百度云 2020-10-04 百度云被云南知名企业薄云集团正式收购 2020-06-03 查看更多 最新资讯 薄云科技全资收购Alibaba公司 2020-10-03 薄云科技全资收购百度公司 2020-10-02 查看更多 行业动态 如何成为VPS提供商 2020-09-08 香港服务器 一同迎接数字化未来 2020-08-28 查看更多

html简单美化的右边悬浮功能
type: item
date: 2022-07-30T11:59:11+08:00
description: css代码/*右侧悬浮客服*/ .sideBar-youce { position: fixed; right: -182px; background-color: #fff; border: #eea236 solid 1px; transition: right 0.5s; border: solid 1px #6262625e; bottom: 10%; font-size: 13px; border-top-left-radius:5px; border-bottom-left-radius:5px; } .sideBar-youce:hover { right:0; } .sideBar-youce>div { position:relative; } .sideBar-youce .tips { position: absolute; height: 100px; background-color: #FFFFFF87; width: 35px; left: -35px; top: 50px; text-align: center; box-sizing: border-box; padding: 10px 10px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; color: #919191; font-size: 12px; } .sideBar-youce .list { padding:0; list-style:none; width:180px; margin:0; } .sideBar-youce .list>li { padding:16px; border-top:#eea236 dashed 1px; } .sideBar-youce .list>li img{ width:100%; } .sideBar-youce .list>li:hover { background-color:#f0ad4e; color:#ffffff; } .sideBar-youce .list>li:first-child { border-top:none; } /*右侧悬浮客服结束*/ html代码 服务中心 Q Q:1340326824 邮箱:vipshiyi@qq.com 非诚勿扰

URL跳转离开页面提示页面
type: item
date: 2022-07-11T14:43:00+08:00
description: URL跳转离开页面提示页面 即将离开 某某博客 您即将离开某某博客，请注意您的帐号和财产安全。 http://xx.xx.xx 继续访问 x

有趣好看的小组件盒子 1.5.4
type: item
date: 2022-05-19T10:03:00+08:00
description: 重要说明软件不是全部免费，部分功能免费，可以满足日常需求。软件介绍「小组件盒子」是一个桌面小组件合集，根据你的个人喜好来设置手机桌面，实现个性化，除此之外，我们还有许多信息类小组件，为你提供各行各业有用的信息。小组件预览：系统信息：在桌面上查看你手机的各种状态，如内存、电量、系统版本等每日诗词：感受五千年的文学精粹摸鱼组件：让上班充满动力...目前初版组件还比较少，我们将定期推出更多有趣的小组件。软件权限android.permission.BLUETOOTH_CONNECT, android.permission.READ_PHONE_STATE, android.permission.ACCESS_WIFI_STATE, android.permission.CHANGE_WIFI_STATE, android.permission.BLUETOOTH, android.permission.BLUETOOTH_ADMIN, android.permission.ACCESS_COARSE_LOCATION, android.permission.ACCESS_FINE_LOCATION, android.permission.ACCESS_BACKGROUND_LOCATION, android.permission.ACCESS_NETWORK_STATE, android.permission.INTERNET, android.permission.PACKAGE_USAGE_STATS, android.permission.FOREGROUND_SERVICE, oppo.permission.OPPO_COMPONENT_SAFE, android.permission.READ_EXTERNAL_STORAGE, android.permission.WRITE_EXTERNAL_STORAGE, android.permission.QUERY_ALL_PACKAGES, android.permission.CAMERA, android.permission.REQUEST_IGNORE_BATTERY_OPTIMIZATIONS, com.android.launcher.permission.INSTALL_SHORTCUT, com.android.launcher.permission.UNINSTALL_SHORTCUT, com.bbk.launcher2.permission.READ_SETTINGS, com.android.launcher.permission.READ_SETTINGS, com.android.launcher2.permission.READ_SETTINGS, com.android.launcher3.permission.READ_SETTINGS, android.permission.VIBRATE, android.permission.REQUEST_INSTALL_PACKAGES, android.permission.WAKE_LOCK, android.permission.ACCESS_LOCATION_EXTRA_COMMANDS, com.asus.msa.SupplementaryDID.ACCESS, freemme.permission.msa[wl=https://www.coolapk.com/apk/io.iftech.android.box]点击进入酷安[/wl=酷安]