随笔分类 - HTML5/CSS3
摘要：当图片大于div时，想要图片居中显示，如果图片等比例缩小可能会导致图片不能填充整个div，如果直接将图片不设置宽高，将其外层div设置overflow:hidden；这时即使外层div设置了水平垂直居中，图片也不是居中的效果： 解决方法： 1- 把图片设置为背景图片 2- 给图片设置相对div的10
阅读全文
摘要：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...
阅读全文
摘要：在模拟前端与后台进行数据交互之前需先进行环境配置： 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
阅读全文
摘要：静下来，好好思考。为了沉淀一下自己，缓解一下焦躁的情绪。磨刀不误砍柴工。 针对校友帮网站实现一个简单的模拟。具体效果图如下。这里的知识点涉及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—百分比 百分比是相对于父元素的。利用百分比可以将浏览器尺寸和元素尺寸联系起来，从而实现自适应。 2—auto auto为由浏览器自动计算。块级元素水平方向的auto，块级元素的margin、border、padding以及content宽度之和等于width。使用auto属性在父元素宽度变化时，
阅读全文
摘要：1--flex布局基本概念 弹性布局，为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局，当设置为flex布局之后，子元素的float、clear、vertical-align属性都将不再起作用。 使用flex布局的元素，称为flex容器。其内的所有子元素自动成为容器成员，称为flex
阅读全文
摘要：腾讯vue训练营昨天结束了，这将是一段特别难忘的经历。在这里，认识了一群可爱热情的小伙伴，群里经常是很活跃的。果然，团结就是力量。在这十天中，跟着老师学vue的相关知识及其实战，自己动手码代码，果然有种眼高手低的感觉，看着老师迅速的编码，感觉似乎没有那么难，可自己亲自动手时，却是各种奇葩问题都出现了
阅读全文
摘要：通过这几天的学习，初步实现了自定义的选择下拉框组件，其中，可以把下拉选项抽离出来作为子组件，整个组件为父组件，其主要由<div>、<input>、<custom-select>、<ul>、<li>等标签构成基本的选择组件页面结构。主要的功能项：输入框及button按钮，构成初次展现的页面，通过点击输
阅读全文
摘要：通过三方力量，对vue有了初步的了解，通过数据直接影响视图。通过vue实现todolist任务来巩固相关知识点。Todolist需要实现的主要功能有：任务的添加，回车添加（v-model、v-on）、删除（v-on）、选定重编辑（@dblclick）及取消重编辑（按esc）、对已完成任务、未完成任务
阅读全文
摘要：1.渐进式vue 构建用户界面的渐进式框架 只关注视图层 2.vue中的两个核心点 响应的数据绑定：当数据发生改变时，自动更新视图 利用Object.definedProperty（该属性IE8不兼容）中的setter/getter代理数据，监控对数据的操作 组合的视图组件：UI界面映射为组件树；划
阅读全文
摘要：二： 1--Position 属性值：static、fixed、absolute、relative absolute：脱离文档流，原先的位置会被其他元素占据。top、bottom、left、right用来设置元素的绝对位置，都是相对于浏览器窗口进行移动。top和bottom同时存在时，只有top起作
阅读全文
摘要：（暂时撇开内容、样式、行为的分离） 一： 1-语义化及语义化标签 标签的语义化，是指在看到标签名的情况下基本能理解它所代表的含义，比较直观，便于浏览器的解析和阅读。 语义化的优点， （1）为了在没有css的情况下，页面也能呈现出很好地内容结构、代码结构（2）有利于用户体验（3）有利于SEO和搜索引擎
阅读全文
摘要：通过组件式开发Web App，熟悉了前端项目开发的整个工作流程以及前端人员在整个项目中所处的位置。同时，也学会了MarkMan标注工具的使用和Photoshop的切图功能，也加强了利用Chrome调试和解决问题的能力。对整个前端知识也有了新的感受，也进一步肯定了自己对前端开发的兴趣所在。 smili
阅读全文
摘要：前端工程师：最贴近用户的程序员，完成产品基本功能，并进一步优化，实现界面交互，提升用户体验，借助nodejs还可实现服务器端的一些事情。前端性能优化可以使产品从90分优化到100分。前端工程师参与项目，快速有效地完成效果图，与团队成员合作，与UI、产品经理等都需要沟通协作，做好页面结构、页面重构及用
阅读全文
摘要：7.图表组件--雷达图 基于基本的图文组件对象H5ComponentBase创建雷达图组件对象H5ComponentRadar。加入画布用于制作网格线背景。arc()函数可以实现画圆功能。利用相应的公式计算出圆周上的点的坐标。（圆半径为cfg对象宽度的一半，圆周上点的个数取决于项目文本个数）将圆周上
阅读全文
摘要：1.实现梯形 利用边框我们可以得到梯形，首先我们给一个div添加边框，当给边框设置四个不同的颜色时，我们可以得到这样的样式，可以看到这里上边框是一个梯形，那么如果我们给其他边框设置颜色为透明(transparent)，就可以得到一个梯形了。梯形的高便是边框的宽度设置。 <!doctype html>
阅读全文
摘要：圆角（border-radius:8px）、 阴影（box-shadow:10px）、 对文字加特效（text-shadow）、 线性渐变（gradient）、 旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-
阅读全文
摘要：相同：不管sessionStorage localStorage 还是 cookie 都是存储用户数据的。 不同： 1、cookie的存储空间小， cookie的数据是会通过http请求带到服务器的（在浏览器和服务器间来回传递），同一域名下的所有请求都会带上它。可以想象，如果cookie很大是会影响
阅读全文
