![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
林不羁
这个作者很懒,什么都没留下…
展开
-
css 解决fixed 布局下不能滚动的问题
如果我们布局的是后是fixed并且想要高度为100%的时候,我们一般会这样设置:div {display:fixed;height:100%;overflow:scroll;}但是这样并不会出现滚动条,正确的做法应该设置top和bottom为0:.fixed-content {top: 0;bottom:0;position:fixed;overflow-y:scrol...转载 2020-05-07 14:01:38 · 3988 阅读 · 0 评论 -
移动端设置固定比例的盒子,让图片铺满盒子,并设置默认图片
需求:因为后端传过来的照片比例是不固定的,所以前端得固定一个统一的比例。又因为是在移动端所以图片盒子还得适配移动端。再者因为图片比较多,所以给一个默认图片可以优化用户的体验。1.固定比例的盒子2.盒子适配移动端3.图片铺满盒子4.默认图片1.固定比例的盒子&盒子适配移动端现在需要将一个盒子的尺寸定义为固定比例,且尺寸需根据视图的尺寸来进行缩放,也就是响应式。有多种...原创 2020-03-19 12:39:45 · 1689 阅读 · 0 评论 -
input标签type=number时怎么不要后面的上下箭头
修改样式即可<style type="text/css"> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appear...转载 2020-01-16 14:33:43 · 710 阅读 · 0 评论 -
css样式中,那些会引发重绘,那些会引发回流。
改变页面元素的大小、位置、是否隐藏等都会引起回流;如果只改变外观、风格,不影响布局,会引发重绘那么问题来了什么是重绘什么是回流1.html 加载时发生了什么在页面加载时,浏览器把获取到的HTML代码解析成1个DOM树,DOM树里包含了所有HTML标签,包括display:none隐藏,还有用JS动态添加的元素等。浏览器把所有样式(用户定义的CSS和用户代理)解析成样式结构体DOM Tr...转载 2019-12-30 21:05:35 · 6011 阅读 · 0 评论 -
css样式的书写规范和顺序
使用良好的CSS书写规范来写CSS代码,可以提升代码的阅读体验,这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考:CSS书写顺序1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, let...转载 2019-12-30 20:52:44 · 1278 阅读 · 0 评论 -
jquery让自定义的弹出框动态定位在指定的位置
1.业务是这样的每一组数据中有一个待审核按钮,点击后在按钮下面显示审核理由框。2.样式<div class="text-center reason d-none" > <textarea rows="4" cols="30" placeholder="请输入审核理由" class="form-control" id="reason" nam...原创 2019-11-12 11:00:09 · 2120 阅读 · 0 评论 -
仿京东首页
仿京东首页一、整体布局二、代码及知识点通用样式2.1 J_event(顶部通栏的广告)一、整体布局J_event(顶部通栏的广告)快捷导航栏shortcutheader内容区域jd底部footer二、代码及知识点通用样式*{ margin: 0; padding: 0;}2.1 J_event(顶部通栏的广告)<div class="J_even...原创 2019-08-27 17:07:29 · 681 阅读 · 0 评论 -
实战项目:医院挂号网(ui组件开发)
实战项目:医院挂号网1 首页.UI组件-UiSearch1.1 代码2.首页.UI组件-UiTab2.1 代码2.2 注意点3.首页.UI组件-UiBackTop3.13.24.首页.UI组件-UiSlider4.14.25.首页.UI组件-UiCascading 多级联动菜单5.15.2本文所用的css名为ui.css,js名为ui.js首页的html代码如下<!DOCTYPE h...原创 2019-07-31 13:50:41 · 993 阅读 · 0 评论 -
jquery input内容改变时触发事件(实现qq邮箱:写邮件的界面)
效果:input内容不为空时,发送按钮颜色不透明,并且点击后可以执行跳转内容为空时,发送按钮颜色透明,点击后无反应主要代码如下:需要引用jquery<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>可以引用菜鸟教程编辑器里的jquery,也可以自己自行下载...原创 2019-07-26 10:57:03 · 290 阅读 · 0 评论 -
min-height和min-width的使用场景
min-height:我们有时设置一个对象盒子时候避免对象没有内容时候不能撑开,但内容多少不能确定所以又不能固定高度,这个时候我们就会需要css来设置min-height最小高度撑高对象盒子。当内容少时候最小高度能将内容显示出,如果内容多余最小高度能装下时候,对象也会再随内容增多而增高。转载自:https://www.cnblogs.com/wangrongxiang/p/5284390.ht...转载 2019-07-25 10:45:12 · 2526 阅读 · 0 评论 -
CSS自适应实现图标右上角消息数字提示
效果如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .msg { position:...原创 2019-07-25 10:19:16 · 10080 阅读 · 1 评论