随笔分类 - HTML/CSS
摘要：当图片大于div时，想要图片居中显示，如果图片等比例缩小可能会导致图片不能填充整个div，如果直接将图片不设置宽高，将其外层div设置overflow:hidden；这时即使外层div设置了水平垂直居中，图片也不是居中的效果： 解决方法： 1- 把图片设置为背景图片 2- 给图片设置相对div的10
阅读全文
摘要：背景图片自适应div，一种是设置background-size:cover；一种是设置背景图片no-repeat，background-size:100%;（1） background: url("../../../images/home-icon.png"); background-size: cover;ps：该种背景图片可能存在没有完全展现的可能（2） background: url("...
阅读全文
摘要：html： css： js：选中的表达方式：
阅读全文
摘要：html: css: (1)这种情况下图片可以填充整个div，但背景色和原背景图片不一致 background: url(../images/mall-bg.png) no-repeat center center fixed; height: 11.5rem; width: 100%; -webkit-background-size: cover; -moz-background-si...
阅读全文
摘要：eg.点击按钮即可实现将input标签中的内容复制到剪切板里
阅读全文
摘要：eg.一页面中有a、b两部分，a部分有个筛选图标，我希望一开始的时候a是显示的，b是隐藏的，当点击筛选图标时，a隐藏，b显示；然后在b页面里有个返回按钮，希望点击b中的返回按钮时a显示b隐藏，搞了半天，记录一下教训： 问题1：一开始点击筛选进入b页面，但点击b页面的返回时回不去了：问题出在一开始的b
阅读全文
摘要：当适用于手机端的图片想在电脑端显示时，可以通过background-size：100%；让其占满整个电脑屏幕： 当图片在手机上高度合适但电脑上不合适：
阅读全文
摘要：outline:none;input标签中加该样式可以去掉input点击时出现的边框或者聚焦时去掉也行
阅读全文
摘要：在模拟前端与后台进行数据交互之前需先进行环境配置： 1. 使用tomcat之前需先安装java环境jdk，jdk下载推荐：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html；jdk安装
阅读全文
摘要：在模拟前端与后台进行数据交互之前需先进行环境配置： 1. 使用tomcat之前需先安装java环境jdk，jdk下载推荐：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html；jdk安装
阅读全文
摘要：2017-7-12 1. 盒子模型 网页中的元素都可以看成是一个盒子模型，每个元素占有的空间包括content、padding、border、margin这四部分。盒子模型分为两种：W3C标准盒子模型、IE盒子模型。可通过box-sizing属性选择盒子模型，其属性值有content-box、bor
阅读全文
摘要：Css布局的核心概念：定位、浮动、外边距 思路： （1） 先把页面划分为大的结构性区域，如容器、页眉、内容区域、页脚。 （2） 然后，关注内容区域本身，开始建立网格结构。关注与内容区域的共同特征与不同的特征。 （3） 接着，在内容区域中寻找不同的布局结构。 （4） 结构设计完之后，关注不同类型的内容
阅读全文
摘要：静下来，好好思考。为了沉淀一下自己，缓解一下焦躁的情绪。磨刀不误砍柴工。 针对校友帮网站实现一个简单的模拟。具体效果图如下。这里的知识点涉及div+css、JavaScript、jQuery、vue.js、css3、localStorage。整个过程涉及到五个页面，即首页、发起项目页、浏览项目页、我
阅读全文
摘要：Problem：父元素内包含两个子元素，一个定高，另一个高度自适应 Ans： <div class="box"> <div class="ele1"></div> <div class="ele2"></div></div> （1） .box { width:200px; height:300px;
阅读全文
摘要：1--当display不为none时，float起作用 当display为none时，float不起作用 2--当display不为none时，position起作用 当display为none时，position不起作用 3--当display不为none，且float与position同时存在时
阅读全文
摘要：（1） .div1{ /!*水平居中*!/ margin:0 auto; width:100px; height:100px; background: #1FC195; }（2） .div1{ /*水平居中*/ position:relative; ...
阅读全文
摘要：1—百分比 百分比是相对于父元素的。利用百分比可以将浏览器尺寸和元素尺寸联系起来，从而实现自适应。 2—auto auto为由浏览器自动计算。块级元素水平方向的auto，块级元素的margin、border、padding以及content宽度之和等于width。使用auto属性在父元素宽度变化时，
阅读全文
