html+css
关注
分享
扫一扫
文章平均质量分 59
lelara
这个作者很懒，什么都没留下…
展开
-
第212天：15种CSS居中的方式，最全了
CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。1 水平居中1.1 内联元素水平居中利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-bl...原创 2018-04-02 22:11:00 · 113 阅读 · 0 评论 -
第64天：CSS常用命名规范，有用！
CSS常用命名，必须记住一、常用命名标题：title摘要：summary箭头：arrow商标：label网站标志：logo转角/圆角：corner横幅广告：banner子菜单：subMenu搜索框：searchBox登录：login登录条：loginbar工具条：toolbar下拉：drop标签页：tab当前的：current列表...原创 2017-10-25 22:56:00 · 73 阅读 · 0 评论 -
第85天：HTML5语义化标签
一，语义标签语义标签对于我们并不陌生，如<p>表示一个段落，<ul>表示一个无序列表<h1>〜<h6>表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。传统的做法我们或许通过增加类名如类= “标题”，类= “页脚”，使HTML页面具有语义性，但是不具有通用性。HTML5则是...原创 2017-11-15 23:00:00 · 101 阅读 · 0 评论 -
第86天：HTML5应用程序标签和智能表单
一，HTML5应用程序标签1，数据列表需要数据载体输入列表属性指向数据源2，进步进度条-webkit-appearance：none; / *如果要改变默认样式要先取消默认样式* / .my-progress :: - moz-progress-bar { / *选中背景元素* / / *兼容火狐浏览器* / 黄色;} .my-progress :: - w...原创 2017-11-16 23:30:00 · 166 阅读 · 0 评论 -
第87天：HTML5中新选择器querySelector的使用
一，HTML5新选择器1，文件。querySelector（“selector”）; 选择器：根据CSS选择器返回第一个匹配到的元素，如果没有匹配到，则返回null ; 支持：Chrome 4.0 +，FireFox 3.5 +，Safari 3.2 +，Opera 10.1 +，IE 8+ 2，文档。querySelectorAll（“selector”）; 选择器：根据CSS选择器返回所有...原创 2017-11-17 23:00:00 · 536 阅读 · 0 评论 -
第88天：HTML5中使用classList操作css类
在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增，删除，修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。一，Element.classList这个classList对象里有很多最有用的方法：1 {2 length: {number}, /* # o...原创 2017-11-18 23:31:00 · 176 阅读 · 0 评论 -
第89天：HTML5中 访问历史、全屏和网页存储API
一，访问历史API通过历史对象实现前进，后退和刷新之类的操作历史上新增的两个方法history.replaceState（）和history.pushState（）方法属于HTML5浏览器新增的属性，所以IE9以下的是不支持的。1、history.replaceState() ；顾名思义就是替换的意思，所以它的作用就是替换当前地址栏的urlhistory.replaceState(...原创 2017-11-19 23:01:00 · 97 阅读 · 0 评论 -
第90天：HTML5中文件API和拖放操作
一，文件APIFile API：提供客户端本地操作文件的可能multiple是让文件域可以多选 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文件API</titl原创 2017-11-20 23:05:00 · 90 阅读 · 0 评论 -
第91天：CSS3 属性选择器、伪类选择器和伪元素选择器
一，属性选择器特点其通过的英文属性来选择元素，具体有以下5种形式：1，E [attr]表示存在attr属性即可; DIV [类]2，E [attr = val]表示属性值完全等于val ; DIV [类= mydemo]3，E [ATTR * = VAL]表示的属性值里所有游戏VAL字符并且在“ 任意 ”位置; div [class * = mydemo...原创 2017-11-21 22:47:00 · 168 阅读 · 0 评论 -
第92天：CSS3中颜色和文本属性
一，颜色的表示方式1，rgba（255,0,0,0.1） rgba是代表红（红色）绿（绿色）蓝（蓝色）和Alpha 透明度。虽然它有的时候被描描为一个颜色空间新增了RGBA，HSLA模式，其中的甲 表示透明度通道，即可以设置颜色值的透明度，相较不透明度，它们不具有继承性，即不会影响子元素的透明度。红，绿，蓝，阿尔法即RGBA2，色调，饱和度，亮度，阿尔法即HSLAR，G，B...原创 2017-11-22 23:01:00 · 140 阅读 · 0 评论 -
第93天：CSS3 中边框详解
CSS3边框详解其中边框圆角，边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。一，边框圆角 border-radius 每个角可以设置两个值，x值，y值圆角处理时，脑中要形成圆，圆心，横轴，纵轴的概念，正圆是椭圆的一种特殊情况。 柯林斯椭圆分别设置长，短半径，以“/”进行分隔，遵循“1,2,3,4”规则，“/”前面的1〜...原创 2017-11-23 23:00:00 · 121 阅读 · 0 评论 -
第94天：CSS3 盒模型详解
CSS3盒模型详解盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定盒模型即可以指定 属性width的计算方式 ...原创 2017-11-24 22:13:00 · 97 阅读 · 0 评论 -
第95天：CSS3 边框、背景和文字效果
1，CSS3边框：border-radius：CSS3圆角边框。在CSS2中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在CSS3中，创建圆角是非常容易的，在CSS3中，border-radius属性用于创建圆角.border：2px solid; box-shadow：CSS3边框阴影。在CSS3中，box-shadow用于向方框添加阴影.box-shadow：10px 1...原创 2017-11-25 22:30:00 · 148 阅读 · 0 评论 -
第96天：CSS3 背景详解
一、背景大小background: url("images/bg.jpg") no-repeat;控制背景的大小1、具体数值background-size: 500px 500px;2、百分比background-size: 50% 50%;3、cover、contain参数cover 完全覆盖盒子，不一定全部显示 background-size: cover; con...原创 2017-11-26 22:40:00 · 149 阅读 · 0 评论 -
第21天：京东页面轮播图
一，轮播图小圆点HTML代码1 <ul class="circle"><!--小圆点-->2 <li class="current">1</li>3 <li>2</li>4 <li>3&am原创 2017-09-03 23:15:00 · 579 阅读 · 0 评论 -
第19天：京东头部小三角制作
京东头部小三角制作方法：1、在需要小三角的地方加入“<i><s>◇</s></i>”，如下：<div class="dt">送至：北京 <i><s>◇</s></i></div>2、原创 2017-09-01 23:16:00 · 148 阅读 · 0 评论 -
第213天：12个HTML和CSS必须知道的重点难点问题
12个HTML和CSS必须知道的重点难点问题这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。这12个知识点是我个人认为的，下面我们就来看看这12个知识点。1.怎么让一个不定宽高的 DIV，垂直水平居中?使用Flex只需要在父盒子设置：dis...原创 2018-04-03 22:07:00 · 135 阅读 · 4 评论 -
第1天：CSS基本样式
今天学习了CSS基本样式和属性。在做练习的时候遇到一个小问题，最后解决了。。记住：浏览器有默认余量和填充样式最开始记得一定写：* {保证金：0;填充：0}。学习经验：1，边缘值相邻两个元素的余量会叠加在一起2，边缘子元素的值会传递给父元素3，能用填充，尽量不用余量，余量浏览器兼容性较差。4，H标签不能直接写在UL中，必须用立包起来。简言之，UL下只能是李标签。下面是CS...原创 2017-08-14 23:26:00 · 168 阅读 · 0 评论 -
第2天：HTML常用标签
今天学完主要对所学知识点进行了整理。一，超链接ahref：www.baidu.com（跳转页面）; id名（锚点跳到相应div位置）; 01.rar（压缩包）target：_blank（新窗口打开）; _ self（当前窗口打开）二，文件路径绝对路径：（1）线上：线上绝对路径（2）线下：完整路径相对路径：src = .. / img / bg.jpg（../是上一级目录）三，HTML常...原创 2017-08-15 23:20:00 · 139 阅读 · 0 评论 -
第3天：CSS浮动、定位、表格、表单总结
今天学的是浮动，定位，表格，表单等内容，这些是CSS中最容易混淆的知识，有许多小技巧在写代码过程中需要注意下面是主要知识点：一，浮浮动1，块元素在一行显示2，内联元素支持宽高3，默认内容撑开宽度4，脱离文档流5，层级提升half-层二，明确清除浮动1，加高（扩展性不好）给浮动元素的父级设置同样的高度2，给父级加浮动（页面中所有元素都要加浮动，margin左右失效）3，inline-block（...原创 2017-08-16 23:06:00 · 151 阅读 · 0 评论 -
第4天：JS入门-给div设置宽高背景色
今天学习了JS的入门课程，听的不多，做了个小练习，给DIV设置宽高，背景色一点点都是进步核心代码如下。：<！DOCTYPE html> <html lang =“en”> <head> <meta charset =“UTF-8”> <title> JS入门_设置div宽，高，背景色</ title> <style&原创 2017-08-17 23:30:00 · 1126 阅读 · 0 评论 -
第7天：input和label标签
今天学的不多，就只学了表单元素中的输入和标签标签。搬了房子，收拾了一下东西，太累了，所以没有学很多。明天还上班，今天就先到这。一，输入input标签类型属性有以下几个：text，password，textarea，radio，checkbox，button，submit，reset按钮1，<input type =“button”value =“确定”> 2，<input...原创 2017-08-20 22:38:00 · 699 阅读 · 0 评论 -
第8天：CSS制作导航栏
今日主要学习了网页导航栏的制作。注意：引入外部CSS样式时，如果使用背景：url（../ images / 1.png），一定记得用..跳出当前文件夹，回到上级目录。一，导航栏实现步骤：如图1所示，网页整体分为头部，内容，尾部。网页中心内容部分为版心。版心是定宽的。2，设定版心宽度。其余每部分内容只需要设置高度即可。3，报头部分分为左，中，右三部分。分别用DIV包起来，可以设置填充...原创 2017-08-21 23:26:00 · 243 阅读 · 0 评论 -
第9天：CSS精灵图
今天重点学习了CSS精灵图。“CSS精灵”，英语css sprite，所以也叫做“CSS雪碧”技术。是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css 的背景定位来显示需要显示的图片部分。CSS精灵有什么优点，就是减少了HTTP 请求。比如4张小图片，原本需要4个HTTP请求。但是用了CSS精灵，小图片变为了一张图，HTTP请求只有1个了。用PS选框工...原创 2017-08-22 23:10:00 · 138 阅读 · 0 评论 -
第10天：CSS初始化操作
在写页面过程中，每个浏览器都会有默认样式，为了避免浏览器的样式兼容问题，我们会在样式开始部分对常用标签进行重置样式。这样我们在写样式时，就不会有误差。常用的CSS初始化标签如下：@charset "UTF-8";/*css 初始化 */html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, f...原创 2017-08-23 23:24:00 · 150 阅读 · 0 评论 -
第13天：页面布局实例-博雅主页
今天写了个简单的页面，再熟悉了一下DIV + CSS布局，写的还可以，以后还要多练习。此外还进一步学习了定位相关知识。如图1所示，相对定位：相对定位有坑，所以一般不用于做“压盖”效果页面中，效果极小就两个作用。：1）微调元素2）做绝对定位的参考，子绝父相2，绝对定位：绝对定位的参考点，如果用上面描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角。绝对定位的盒子，...原创 2017-08-26 23:40:00 · 334 阅读 · 0 评论 -
第16天：函数的定义和调用
函数：1，函数，是一种封装。就是将一些语句，封装到函数里面。通过调用的形式，执行这些语句。2，函数如果不调用，等于白写。3，函数实参和形参个数要相同。4，函数可以没有返回语句，如果有，只能有一个。一些简单的函数如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <m...原创 2017-08-29 22:37:00 · 85 阅读 · 0 评论 -
第17天：CSS引入、选择器优先级（中级）
一，CSS位置 1，行内式css <div class =“fr”style =“color：red;”> aa </ div> 2，内嵌式样式 <style> .one { width：200px; } </ style> 3，外链式 <link rel =“styles...原创 2017-08-30 23:17:00 · 95 阅读 · 0 评论 -
第18天：京东网页头部制作
一，京东页面制作开始（头部）1，浮动的盒子宽度由内容定，不需要设置宽度2，绝对定位不占位置，相对定位占位置3，不一定是子绝父相，还可能是子绝父绝，要根据情况来定。如果是子绝父绝，那父级的父级一定是相对定位。二，中间分割线制作给需要竖线的地方添加空的利，每个立设置类样式，设置宽高，背景色刚开始做的也不多，目前进度如下： ...原创 2017-08-31 23:26:00 · 690 阅读 · 0 评论 -
第97天：CSS3渐变和过渡详解
一，渐变渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变，径向渐变1， 线性渐变 （gradient变化） 线性梯度线性渐变指沿着某条直线朝一个方向产生渐变效果。 linear-gradient:方向，起始颜色，终止颜色 方向：to left/ to right...原创 2017-11-27 23:05:00 · 277 阅读 · 0 评论 -
第98天：CSS3中transform变换详解
变换变换详解本文主要介绍变形变换。变换字面上就是变形，改变的意思。在CSS3中变换主要包括以下几种：旋转旋转，扭曲倾斜，缩放尺度和移动翻译以及矩阵变形矩。下面我们一起来看看CSS3中变的旋转旋转，扭曲倾斜，缩放规模和移动翻译具体如何实现，老样子，我们就从变换的语法开始吧。语法： transform ： none | <transform-function> [ <...原创 2017-11-28 23:06:00 · 181 阅读 · 0 评论 -
第153天：关于HTML标签嵌套的问题详解
HTML标签 如图1所示，块级元素 格，H1〜H6，地址，BLOCKQUOTE，中心，DIR，DL，DT，DD，字段集，形式，小时，ISINDEX，菜单，无框架，无脚本，醇，P，预，表，UL ...... 特点：总是在新行上开始，高度，行高以及顶和底边距都可控制，宽度缺省的它的容器的100％，除非设定一个宽度。 功能：主要用来搭建网站构架，页面布局，承载内容。 2，行...原创 2018-01-22 22:02:00 · 252 阅读 · 0 评论 -
第154天：canvas基础（一）
一，帆布简介<canvas> 的英文 HTML5 新增的，一个可以使用脚本（通常为JavaScript）其中在绘制图像的 HTML 元素。它可以用来制作照片集或者制作（也不是那么简单）的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过Gecko内核的浏览器（...原创 2018-01-24 11:53:00 · 134 阅读 · 0 评论 -
第155天：canvas(二）
一，添加样式和颜色在前面的绘制矩形章节中，只用到了默认的线条和颜色。如果想要给图形上色，有两个重要的属性可以做到。 fillStyle = color 设置图形的填充颜色 strokeStyle = color 设置图形轮廓的颜色 备注： 1. `color` 可以是表示 `css` 颜色值的字符串、渐变对象或者图案对象。 2. 默认情况下，线条...原创 2018-01-24 22:43:00 · 144 阅读 · 0 评论 -
第156天：canvas（三）
一、变形1.1 translatetranslate(x, y) 用来移动 canvas 的原点到指定的位置 translate方法接受两个参数。x 是左右偏移量，y 是上下偏移量，如右图所示。在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。又如果你是在一个循环中做位移但没有保存和恢复canvas 的状态，很可...原创 2018-01-25 22:50:00 · 182 阅读 · 0 评论 -
第157天：canvas基础知识详解
目录一、canvas简介 1.1 什么是canvas？（了解） 1.2 canvas主要应用的领域（了解） 二、canvas绘图基础 2.0 sublime配置canvas插件（推荐） 2.1 Canvas标签 2.1.1 canvas标签语法和属性 （重点） 2.1.2 浏览器不兼容处理（重点） 2.2 canvas绘图上下文context 62.2.1 ...原创 2018-01-26 22:01:00 · 623 阅读 · 0 评论 -
第161天：CSS3实现兼容性的渐变背景(gradient)效果
CSS实现兼容性的渐变背景（梯度）效果一，有点俗态的开场白在对CSS3的支持日趋完善的今天，实现兼容性的渐变背景效果已经完全成为可能，本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中，目前不支持歌剧浏览器。本文实例效果都是同样的效果，就是垂直渐变，起始颜色红色，结束颜色蓝色，结束的蓝色的透明度是0.5。二，IE浏览器下的渐变背景IE浏览器下渐变背景的使用需要使用IE渐...原创 2018-01-30 23:12:00 · 146 阅读 · 0 评论 -
第162天：canvas中Konva库的使用方法
本篇接着上一篇：第157天：帆布知识基础详解 继续来写。五，Konva的使用快速上手5.1 Konva的整体理念 阶段 | + ------ + ------ + | | 图层 | | ...原创 2018-01-31 22:52:00 · 1097 阅读 · 0 评论 -
第165天：canvas绘制圆环旋转动画
画布绘制圆环旋转动画 - 面向对象版1，HTML注意引入Konva.js库 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用Konva绘制圆环旋转动画</ti原创 2018-02-03 23:18:00 · 797 阅读 · 0 评论 -
第166天：canvas绘制饼状图动画
画布绘制饼状图动画1，HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, i原创 2018-02-04 23:00:00 · 226 阅读 · 0 评论