前端入门 | 易学教程

web前端入门到实战：CSS最容易出错的两大地方

阅读更多关于 web前端入门到实战：CSS最容易出错的两大地方

css大家都很熟悉了，这里就不多介绍了。主要介绍一下两个在日常操作css最容易出错的地方。 margin-top 与 padding-top 这两个属性大家都很熟悉了，margin-top表示外部的上边距，padding-top表示内部的上边距。取值可以是一个具体的值或者一个百分比，如： margin-top: 10px; margin-top: 10%; padding-top: 20px; margin-top: 20%; 当取值为具体的值时，没有什么好说的。当取值为百分比时，需要特别注意：百分比不是相对于父元素的高度的，而是相对于父元素的宽度的。直接看例子：用处：可以用来在页面中显示固定宽高比的图片。注意： height 、 top 的百分比取值，总是相对于父元素的高度。这里提一下，w3cSchool中文站中，关于 margtin-top 的描述是错误的。地址在这里： http://www.w3school.com.cn/css/pr_margin-top.asp position: fixed 一提到position:fixed，自然而然就会想到：相对于浏览器窗口进行定位。但其实这是不准确的。如果说父元素设置了transform，那么设置了position:fixed的元素将相对于父元素定位，否则，相对于浏览器窗口进行定位。看例子：给

初识前端 HTML入门

阅读更多关于初识前端 HTML入门

Web前端有三大主流语言 : HTML 网页的布局负责放你需要显示的内容，可以形象比喻为骨架 CSS 网页的调试让你的HTML更加的漂亮，可以形象比喻为皮肤 JS 网页的动态效果可以给网页添加动态效果，可以比喻为肌肉 HTML 入门 html概述 HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。 html 基本结构如下：标签的学习标签又称为元素,对象,节点标签的分类 1.根据元素是否独自占据一行可以分为块级元素和内联元素块级元素要独自占据一行比如p标签内联元素不会独自占据一行比如font标签 2.根据标签的布局可以分为单标签和双标签双标签<*></*> 单标签<*/> 基本标签及其属性 1.body标签 <body text="字体颜色" bgcolor="背景颜色" background="路径/背景图片"> 　　网页显示内容 </body> 　　注:背景颜色与背景图片同时存在,背景颜色会被覆盖掉，背景图片的优先级更高 2.标题标签 <h1>计算机科学</h1> <h2>IT行业</h2> <h3>计算机编程</h3> <h4>后台编程<

web前端入门到实战：CSS页面底部固定的6种方法

阅读更多关于 web前端入门到实战：CSS页面底部固定的6种方法

当我们在写页面时经常会遇到页面内容少的时候，footer会戳在页面中间或什么？反正就是不在最底部显示，反正就是很难看，下面要讲的布局就是解决如何使元素粘住浏览器底部，方法一：footer高度固定+绝对定位 html <div class="dui-container"> <header>Header</header> <main>Content</main> <footer>Footer</footer> </div> CSS web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频） .dui-container{ position: relative; min-height: 100%; } main { padding-bottom: 100px; } header, footer{ line-height: 100px; height: 100px; } footer{ width: 100%; position: absolute; bottom: 0 } 方法二：在主体content上的下边距增加一个负值等于底部高度 html <header>Header</header> <main>Content</main> <footer>Footer</footer> CSS

web前端入门到实战：五个最新的CSS特性以及如何使用它们

阅读更多关于 web前端入门到实战：五个最新的CSS特性以及如何使用它们

虽然CSS简单，但CSS是一门非常有意思的语言，CSS每年都有变化，而且都有不同的博主都在不同的时间段总结一些CSS的新特性。虽然这些新特性无法立刻得到众多浏览器的支持，但总是随着时间的发展，这些特性都会得到浏览器的支持。哪怕未得到支持，也有一些方法让浏览器支持，比如最为出外的 cssnext ，就可以让很多未来的CSS特性就立马使用，并且不用花太多时间来考虑浏览器的兼容性。接下来要介绍的五个CSS新特性是： CSS Display Module Level 3 ： display:contents CSS Conditional Rules Module Level 3 ： @support(...){...} CSS Overscroll Behavior Module Level 1 ： overscroll-behavior: contain CSS Selectors Module Level 4 ： :focus-within ， :placeholder-shown CSS Containment Module Level 1 ： contain:paint 这些CSS特性，估计有些同学已经接触过了，如果你未接触过，建议你继续跟随着下面的步骤继续往下阅读。案例：创建一个新闻提要（Newsfeed）通过一个新闻提要为例

web前端入门到实战：CSS的一些新东西

阅读更多关于 web前端入门到实战：CSS的一些新东西

很多同学估计都有类似的问题，怎么才能第一时间获取到有关于CSS相关的新特性呢？有关于这个问题，并不是一个很复杂的问题如何理解规范的形成任何一个规范的形成都是一个漫长的过程，到目前为止， W3C 对Web标准制定的 Web标准和草案接近 1161 个，包括 WD 、 CR 、 PR 、 PER 、 REC 、 ret 和 Note 这 7 种： WD （Working Draft 工作草案）：不稳定也不完整。目的是创建当前规范的一个快照，也能征求 W3C 和公众的意见 CR （Candidate Recommendation 候选推荐标准）：所有的已知 issues 都被解决了，向 implementor 征集实现；AC 正式审查，可能有三种结果：成为标准、返回工作组继续完善、废弃(此阶段的很有可能成为标准，且如有改动，则需给出改动原因) PR （Proposed Recommendation 提案推荐标准）：从 CR 到 PR 需要全面的 test suite 和实现报告，以证明每个特性都在至少2款浏览器里实现了，意味着其质量足以成为REC。此时，W3C 成员再最后一次 review 下规范(一般不会有实质性的改动；若有，则只能再发布一个新的WD或CR) PER （Proposed Edited Recommendation 已修订的提案推荐标准） REC

前端-css入门

阅读更多关于前端-css入门

CSS cascading（层叠） style（样式） sheet（表） css注释 /* 注释内容 */ 快捷键:ctrl ? 引入方式  <div style="width:100px;height:100px;"></div>  <head> <style> div{ background-color: red; height: 100px; width: 100px; } </style> </head>  <link rel="stylesheet" href="css文件路径" > css选择器　　基本选择器元素选择器 div{ } id选择器 #demo 在html中(id="demo") 类选择器 .demo 在html中(class="demo") 通用选择器 *{ } 组合选择器后代选择器 div a 找div下所有的a 直接子元素选择器 div>a 只找下一代a 兄弟选择器 div.a 只找下一个兄弟弟弟选择器 div~a 找到所有兄弟属性选择器 [title] 分组选择器 demo1，demo2 伪类选择器 a:link a:visited a:hover a:sctive input:focus 伪元素选择器 p::before p

vue-cli + webpack 多页面实例应用

阅读更多关于 vue-cli + webpack 多页面实例应用

文章转载自: http://www.pythonheidong.com/blog/article/3054/ 常用学习资源 JS参考与基础学习系列 [MDN]JS标准参考 es6教程 JS标准参考教程编程类中文书籍索引深入理解JS系列前端开发仓库《JavaScript 闯关记》 JavaScript 初学者教程（指南） JS讲义李炎恢JavaScript教程第一季逐行分析jQuery源码的奥秘 JS常用框架、库、插件 [vue] vue官网 [vue] 饿了么element UI [vue] vue-router路由 [vue] vuex状态管理 [vue] mint-ui移动端UI组件 [vue] VUX [vue] vue相关UI组件收集 [vue] Ant Design of Vue (UI组件) 报表UI组件viser-vue axios请求 ajax：Fetch jQuery中文文档 webpack中文文档深入浅出 Webpack zeptojs中文版 bootstrap官网 echarts 微信组件weui weui github官网实例推荐团队与博客 w3cplus w3school 前端观察汤姆大叔博客腾讯Web前端 Alloy 团队 Blog 张鑫旭博客牧云云博客 qq前端月报 JS基础与技能 JS设计模式腾讯全端 AlloyTeam

前端入门一年体会

阅读更多关于前端入门一年体会

　　去年的这个时候，我还是一个从来没有接触过前端的某公司实习生，之前学了一段时间的java，但是学得确实不怎么样。公司对于刚进的新人会有一个短期的培训，培训内容当然是前后端统统来一遍，这里讲一个笑话，开始我一心想搞java，结果因为培训的时候觉得电脑跑公司框架太慢了（哪来钱换电脑啊），所以果断选择了前端，因为它实在不怎么吃电脑（后来发现代码量大了还是很吃电脑的）。那时候我真实是一个前端小白，啥也不会，但好在前端上手还是很快的，而且感觉自己写出来的东西立马就能在浏览器上面得到展示，这对当时的我来说还是很舒服的。　　公司培训的话除了一些基础的js和css，还有的就是vue.js，第一次接触框架级别的东西，感觉用着比较方便，但是对于我这种基础不太好的人来说，无疑是一个很不好的开端，因为这样很容易忽视一些js里面原生的东西，比如只是知道vue数据双向绑定，却不知道它是通过调用调用js原生的事件完成的，只知道vue的实例内容怎么写，却忽视了它也不过是一个object对象而已。可能是因为这是所有初级前端的命，刚进门能做的只是不断地搬砖，公司的平台是vue+element-ui为基础，在原来的element-ui组件的基础上面进行新组件的封装和使用，然后根据不同的业务场景构成业务模板，整合到一个前端框架里面，当然这些都是后面才慢慢明白的。当时刚进公司没有什么正事给我做

写给同事的前端学习路线

阅读更多关于写给同事的前端学习路线

前端要学习三个部分：HTML，CSS，JavaScript（简称JS），因此首先明确三个概念： HTML是内容层，它的目的是表示一个HTML标签在页面里是个什么角色。 CSS是样式层，它的目的是表示一块内容以什么样的样式（字体、大小、颜色、宽高等）显示。 JS是行为层，它要做的是当用户触发某些行为时，会给内容和样式带来什么样的改变。 1，HTML，CSS部分。 HTML/CSS初学，就照着http://www.w3cschool.cn/的实验做，把http://www.w3cschool.cn/index-6.html 和 http://www.w3cschool.cn/index-7.html 两套做完了就入门了，一般而言css学个几天就可以了，因为现在很多的高级前端工程师甚至于不用写css,而初级前端工程师又面临就业难的问题，所以我们的学习重点应该放在js以及一些前端框架甚至于源码方面学习完成后就是一个较为熟练的HTML/CSS使用者了.这时候如果想继续深入学习相关类库和框架，推荐Sass和Compass，推荐两篇阮一峰的博客：http://www.ruanyifeng.com/blog/2012/06/sass.html http://www.ruanyifeng.com/blog/2012/11/compass.html 和这本书：《Sass and Compass

前端开发HTML&css入门——HTML

阅读更多关于前端开发HTML&css入门——HTML

　　HTML究竟为何物？其实HTML就是一种标记语言，英文全称为Hypertext Markup Language，翻译过来就叫超文本标记语言。它的作用就是负责负责网页的三个要素之中的结构。 HTML使用标签的的形式来标识网页中的不同组成部分。所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面。点一下试试。　　那么既然是文本标记语言，我们自然能用txt来编辑HTML语言。打开windows自带的记事本工具，键入以下内容：这是我第一个网页　　因为我们编写的是HTML网页，所以一定要将后缀名改为HTML（以前还有htm后缀名，因为早期系统不支持那么长的后缀名，但是二者是相同的）：让我们看一下图标：，变成了浏览器的logo。证明此文件可以用浏览器打开。我们打开这个网页：　　？？这哪是网页啊？你在骗我把？为什么和我们看到的网页不同？因为我们只加入了文本，我们未加入标签内容以及排版样式。　　接下来让我们先来上一组基本的html标签，这样的一组标签能构成一个最基本，最简单的一个网页。每个标签都是由一组<>来构成（就是M右边的两个键）。 1 <html> 2 <head> 3 <title>这是一个非常好的网页</title> 4 </head> 5 6 <body> 7 <h1>这是我的第一个网页</h1> 8 </body> 9 </html>

订阅前端入门