随笔分类 -  HTML/CSS

响应式
摘要:附上例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form class="form-horizontal login-location" i 阅读全文
posted @ 2021-10-22 16:20 moppet蔡蔡 阅读(102) 评论(0) 推荐(0)
摘要:参考的页面:遍历全树(推荐);遍历全树;设置图标;设置隐藏 var idList = []; var jsonNodes = $('#tree').jstree(true).get_json('#', { flat: true }); $.each(jsonNodes, function (i, v 阅读全文
posted @ 2020-12-29 17:22 moppet蔡蔡 阅读(1174) 评论(0) 推荐(0)
摘要:转自:巧用margin/padding的百分比值实现高度自适应 设置容器的padding-bottom/top 处理列表中响应式图片的时候,宽度可以设置百分比进行自适应, 但是高度没办法控制 ,如果图片宽高不一致,宽度设置一样,高度会参差不齐 这时就可以使用padding来控制图片的高度,让列表中的 阅读全文
posted @ 2020-12-23 12:05 moppet蔡蔡 阅读(355) 评论(0) 推荐(0)
摘要:使用data-parent属性的时候须使用 .panel类,具体要求: panel类必须是 data-parent这个父容器的直接子元素 collapse类必须是 panel类的直接子元素 阅读全文
posted @ 2020-08-06 15:28 moppet蔡蔡 阅读(509) 评论(0) 推荐(0)
摘要:HTML代码 <a href="#" class="look-more transition">查看我的课程</a> CSS代码 1 .look-more{border: solid 1px #0dbba1;padding: 5px 10px;text-decoration: none;margin 阅读全文
posted @ 2020-08-04 14:00 moppet蔡蔡 阅读(257) 评论(0) 推荐(0)
摘要:一、首页,设置导航效果: $(function () { //获取要定位元素距离浏览器顶部的距离 let p= $('#zsjz-nav').offset().top; $(window).bind("scroll",function () { //获取滚动条的滑动距离 let scroH = $( 阅读全文
posted @ 2020-03-30 16:11 moppet蔡蔡 阅读(1684) 评论(0) 推荐(0)
摘要:如何引用阿里巴巴家的图标做自己的项目? 登录账号,选择图标建成项目就略过了. 步骤1: 搜索具体需要的图标,选择加入项目 步骤2: 有三种方式,我选用Symbol方式,获得在线链接. 步骤3: 将在线链接放入html文件. 因为Symbol方式获得的是js文件,因此使用script标签.默认的是没有 阅读全文
posted @ 2020-03-17 11:23 moppet蔡蔡 阅读(236) 评论(0) 推荐(0)
摘要:链接:https://www.jianshu.com/p/a87e48052fad来源:简书 不同浏览器兼容性问题解决:添加浏览器前缀:-webkit- 实际工作:安装插件postCss插件 -》不需要手动加前缀 父级身上的属性: display: flex; justify-content: 子元 阅读全文
posted @ 2020-03-12 12:09 moppet蔡蔡 阅读(553) 评论(0) 推荐(0)
摘要:自适应布局:多套 自适应布局是是为了解决如何才能在不同大小的设备上呈现同样的网页;它的缺点是当屏幕缩放过小时,虽然能显示但太过拥挤/不能够自动适应调整网页的布局! 响应式网站:一套 响应式布局就是为了解决它的缺点而来的, 可以根据屏幕的缩放,不仅可以自动适应,还能自动调整页面的布局,使页面更加的美观 阅读全文
posted @ 2019-12-10 11:01 moppet蔡蔡 阅读(301) 评论(0) 推荐(0)
摘要:<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> 手机页面中在<head></head>中加入 阅读全文
posted @ 2019-12-06 14:47 moppet蔡蔡 阅读(1886) 评论(0) 推荐(0)