HTML、CSS笔记
关注
分享
扫一扫
文章平均质量分 81
沐风的心
热爱前端的开发者
展开
-
代码初识、盒模型详解笔记
1、 html为超文本标记语言（在写网页中主要起搭建结构的作用），css为层叠样式表（做样式），js为javascript（主要做出控制的行为）。2、 表示为标签。表示为标签对，前者叫开标签，后者叫做闭合标签，/表示闭合，在两个标签对中间可放入代码。3、 表示页面骨架结构，表示页面的头，表示页面的主体，表示页面头部里面的标题（放在中）。4、 浏览器解析页面的文件的后缀只能为.h原创 2016-03-26 15:08:37 · 558 阅读 · 0 评论 -
HTML整站规划笔记
1. 网站的首页一般用index.html命名，如此命名是因为与服务器的默认设置有关系。导航栏的其他二级页面，都用英文命名，一是显示专业性，二是更加适合搜索引擎进行收录。2. 一般主页HTML文件和二级页面HTML文件都放在同一个项目文件夹内。在这个项目文件夹内，一般会并列的建立如下文件夹：css、js、img和pages，或者是其他更新比较频繁的二级页面文件夹。Pages原创 2016-03-26 16:22:54 · 905 阅读 · 0 评论 -
CSS动画 vs JS动画：谁更快？
重要申明：感谢翻译者——MZhou，想看翻译原文请戳这里！我只是个转载者！转载过程中有些翻译，我在看了英文原文之后，用了在我看来更为舒服的表达，望请勿怪！这篇文章翻译自 Julian Shapiro 的 CSS vs. JS Animation: Which is Faster?。Julian Shapiro 也是 Velocity.js 的创造者。这是一个非常高效、简单易用的JS动画库。他在Web转载 2017-03-13 22:15:39 · 1011 阅读 · 0 评论 -
CSS 元素居中对齐大法
重要声明：感谢翻译者——张小伦爱学习，欲看原文请戳这里，我只是个转载者！我增强了模块的区分和修改了一些原文行文不是很通畅的地方，望请勿怪！ 原文标题：Centering in CSS: A Complete Guide**（强烈建议阅读英文原文）** 原文链接：http://css-tricks.com/centering-css-complete-guide/ 在 CSS转载 2017-04-16 17:05:49 · 2487 阅读 · 0 评论 -
CSS相关面试题汇总笔记
<map></map>表示热区。<area/>这是点击链接区域。shape="circle"，说明点击区域是个圆形；coords="圆心点X值,圆心点Y值,圆的半径"，说明圆的位置及大小。shape="rect"，说明点击区域是个矩形；coords="左上角X值,右上角Y值,左下角X值,右下角Y值"，说明矩形的位置及大小。shape="poly"，说明点击区域是个多边形；coords="第一个点原创 2017-07-10 18:57:18 · 516 阅读 · 0 评论 -
<meta> 标签详解
一、定义和用法<meta> 元素可记录并提供有关页面的元信息（meta-information），比如针对搜索引擎优化（SEO）、定义页面使用语言、自动刷新并指向新的页面、实现网页转换的动效、控制页面显示窗口、更新频度的描述和关键词。<meta> 标签位于文档的头部 <head> 标签中，innerHTML 中不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值（content）对。原创 2017-08-08 11:02:34 · 1073 阅读 · 0 评论 -
标签类型转换、样式重置笔记
默认样式重置（css reset）：第一种方法（推荐这种方式虽然不方便，但是稳定性和性能很好，提倡！还需要重置字的颜色，字体等）：body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px; /*font-family:XX字体;*/}ol,ul{ list-style:none;padding:0; margin:0;}a{ text-dec原创 2017-09-04 21:29:11 · 514 阅读 · 0 评论 -
浮动原理及清浮动笔记
1. 浮动的定义一句话解释：元素浮动后，会脱离文档流，接着会按照指定的方向移动，一直到碰到父级的边界或另外一个元素为止。浮动的代码：folat: left/right/none ，none 表示为不浮动，完全没有浮动的效果。2. 浮动的特性（inline-block的进化版）：使块元素在一行显示；使内嵌支持宽高；不设置宽度时，宽度由内容撑开；脱离文档流（文档流是文档中可显示对象在排列时所占用原创 2017-09-18 10:33:16 · 902 阅读 · 0 评论 -
兼容性问题（下）笔记
1. Png-24的透明兼容问题：在IE6下，png-24图片的透明效果会消失，变成白底。a) 解决办法：运用插件或者是别人写的文件来将png图片的透明效果显现回来。2. 条件注释语句：“ xxx”，number可以不填，也可以填上数字。不填，则表示整条语句为：当浏览器为IE浏览器时，就执行这个标签对内的xxx代码；当number为具体数字时，则整条语句表原创 2016-03-26 16:12:21 · 465 阅读 · 0 评论 -
兼容性问题（上）笔记
1. 宽高的计算精确性问题：a) 如果超出，在IE6下，子元素会撑开设置好的宽高，从而子元素会折行显示。b) 不要让子元素的总宽高超出父级设置的宽高。2. 在IE6，7下父级元素浮动，子级块元素会独占一行显示并且撑开至原先父级设置的宽度的问题： i. 解决办法：如果原创 2016-03-26 16:11:42 · 524 阅读 · 0 评论 -
标签、选择符、超链接及SEO笔记
1. ，这个标签是专门放图片的，他是个单标签。2. 该网址在页面中显示的文字等样式，这个标签是放超链接的，叫a标签，他是个双标签。Target表示网页的打开方式，有“_blank”——表示以一个新的页面打开、“_self”——表示在原页面上跳转到指定页面等，默认是“_self”打开方式。3. 在头文件中，即在这个标签对之间加入表示所有的a标签都是以原创 2016-03-26 15:09:54 · 755 阅读 · 0 评论 -
IE6、7中的关于浮动的BUG笔记
1. 在IE6、7下元素浮动时，并在同一行的元素都要加浮动，才能让在IE6、7下两个不同块的元素在浮动时，其之间不存在空隙。2. IE6下的双边距BUG问题：在IE6下，块元素浮动且具有横向的margin值时，横向的margin值会被放大成两倍。解决办法：在元素的样式中加入“display:inline;”。3. 在IE6、7下li的几个像素的间隙问题：在IE原创 2016-03-26 15:18:40 · 1580 阅读 · 0 评论 -
标签嵌套规范、网站结构制作实例笔记
1. 标签嵌套规范：p标签里不能包含块标签。如果p标签内放入了块标签，将导致解析错误，比如说可能会解析出两个块。但是可以将内嵌元素放入到p标签后，让内嵌元素display成block。这时，就不会出现上述解析错误。2. 两种结构进行优劣比较：a) #b)原创 2016-03-26 15:24:10 · 454 阅读 · 0 评论 -
定位详解、层级、滤镜遮罩笔记
1. margin属性数值既可以是正值，也可以是负值（负值代表的是按原方向反方向移动）。2. 元素的相对定位：position:relative;，它是相对原来的位置来定位的。元素相对定位后，定位元素的位置控制用”top/right/bottom/left:number”来定位元素偏移量。元素相对定位后，有以下特性：a) 不影响元素本身的特性（原来是块，加原创 2016-03-26 15:29:47 · 1114 阅读 · 0 评论 -
表格表单及样式重置、特性笔记
1. 完整表格标签： （一般thead这个标签对不写） （一般tbody这个标签对不写） （一般tfoot这个标签对不写）原创 2016-03-26 15:44:40 · 2427 阅读 · 0 评论 -
滑动门css精灵、圆角及其扩展笔记
1. 滑动门： a) 三层嵌套是利用中间的平铺元素进行内容伸缩的，而两边是各加一个背景；两层嵌套是利用背景图左边本身的最大宽度来对按钮进行伸缩的，然后在其右边加一个背景。b) 三层嵌套是针对于扩展要求高的，图片比较大的滑动门；c) 两层嵌套是针对于扩展要求低的，图片比较小的滑动门。2. 元素的宽度由内容撑开：a)原创 2016-03-26 15:57:18 · 641 阅读 · 0 评论 -
浅谈Web自适应
感谢原文作者——卖烧烤夫斯基，想看原文请戳这里。我只是个大自然的搬运工！当然，我也添加了两块自己很感兴趣的东西。一、前言随着移动设备的普及，移动 web 在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设...转载 2017-03-25 20:38:45 · 645 阅读 · 0 评论