前端开发之CSS篇二

主要内容: 一.CSS的继承性和层叠性二.盒模型三.padding属性四.border属性五.margin属性六.标准文档流七.行内元素和块状元素转换 1️⃣ CSS的继承性和层叠性 1.继承:给父级设置一些属性,子级继承了父级的该属性,这就是css中的继承. 有一些属性是可以继承下来的:如color.font-*.text-*.line-*文本元素,而像一些盒子元素,定位的元素(浮动.绝对定位.固定定位)不能继承. 示例: <!DOCTYPE html> <html la…

前端开发之css篇

一.css简介 css(Cascading Style Sheets)层叠样式表,是一种为html文档添加样式的语言,主要有两个功能:渲染和布局.使用css主要关注两个点:查找到标签,属性操作二.css的引入方式 (1)行内式引入: <div style="color:red;font-size: 16px">hello</div> 直接在html语句的属性中设置,这种方法的缺点是html代码和css代码混合在一起,耦合性太强,维护困难 (2)嵌入式引入: &…

前端开发之CSS篇四

一.相对定位二.绝对定位三.固定定位四.z-index 前言定位有三种:1.相对定位 2.绝对定位 3.固定定位这三种定位,每种都暗藏玄机,所以要每个单独剖析. 1️⃣ 相对定位 1.三大特性 1.不脱标 (遵循标准流) 2.形影分离 3.老家留坑,占着茅坑不拉屎,很恶心所以说相对定位没什么太大的用处,还影响页面布局.不建议使用相对定位来做压盖效果 2.好处 ① 微调元素信息 ② 做绝对定位的参考(父相子地) 3.示例: <!DOCTYPE html> <html lan…

前端开发之CSS篇三

主要内容: 一.CSS布局之浮动二.清除浮动带来的问题三.margin塌陷问题和水平居中四.善用父级的的padding取代子级的margin 五.文本属性和字体属性六.超链接美化七.背景属性(颜色.图片.位置) 1️⃣ CSS布局之浮动 float:即浮动,CSS布局用得最多的一个属性. 效果:元素并排,并且两个元素都能够设置宽度和高度. 要想学好必须要知道的四个特性: (1)浮动的元素脱标: (2)浮动的元素互相贴靠: (3)浮…

前端开发之HTML篇二

主要内容: 一.表格标签 -- table 二.表单标签 -- form 三.常用标签属性和分类四.标签嵌套规则 1️⃣ 表格标签 -- table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表格数据(table data),即数据单元格的内容.数据单元格可以包含文本.图片.列表.段落.表单.水平线.表格等等. 主要标签如下图所示: 示例如下: <! DOCTYP…

前端开发之CSS入门篇

一.CSS介绍和语法二.CSS引入方式三.基本选择器四.高级选择器五.伪类选择器六.伪元素选择器 1️⃣ CSS介绍和语法 1. CSS的介绍 (1)为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力.而此时CSS就出现了. CSS的出现解决了以下问题: 首…

前端开发之JavaScript篇

一.JavaScript介绍前端三剑客之JavaScript,简称js,可能是这三个里面最难的一个了.很早以前,市面上流通着三种js版本,为了统一,ECMA(欧洲计算机制造协会)定义了规范的版本,即EcmaScript. 事实上ECMAScript只是JavaScript的一部分,完整的JavaScript是由以下三个部分组成的: 核心(ECMAScript) 文档对象模型(DOM)Document object model 浏览器对象模型(BOM)Broswer object model…

前端开发之HTML篇一

主要内容: 一.HTML简介二.HTML标签三.HTML文档结构和注释四.head标签及相关内容五.body标签及相关内容 1️⃣ HTML简介 (1)HTML HTML是一个网页的主体部分,也是一个网页的基础.因为一个网页可以没有样式,可以没有交互,但是必须要有网页需要呈现的内容.所以HTML部分是整个前端的基础. HTML,全称是超文本标记语言(HyperText Markup Language),它是一种用于创建网页的标记语言.…

前端开发之html篇

一.什么是html? 1.我们说socket网络编程的时候,提到过一个cs模型,就是客户端—服务端模型,前端开发也是基于网络编程,但是这时就应该是bs模型了,是浏览器与服务端的通信. 我们可以模拟一个bs模型: #服务端 import socket sock=socket.socket() sock.bind(('127.0.0.1',8989)) #绑定ip和端口 sock.listen(5) while True: conn,addr=sock.accept() print('conn',c…

前端开发之jQuery篇--选择器

主要内容: 1.jQuery简介 2.jQuery文件的引入 3.jQuery选择器 4.jQuery对象与DOM对象的转换一.jQuery简介 1.介绍 jQuery是一个JavaScript库:极大简化了JavaScript编程,所以学习难度大大降低. jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库. 2.特性 jQuery是一个javascript函数库. 3.jquery 和 JavaScript的区别 Javascript是一门编程语言,我们用它来编写…

前端开发之css

<!--页面中的组成部分通常随便打开一个网页,有文字,图片,视频,表格,音频,表单(注册信息) css 属性/尺寸/边框/背景 1.css的尺寸属性,就是大小width max-width min-widthheight max-height min-height 2.css的边框属性border-style 边框风格 none:无边框. border-color和boder-width都将被忽略 hidden:隐藏边框. dotted:点状边框. dashed:虚线边框. solid:实线边框…

高效开发之SASS篇灵异留白事件——图片下方无故留白你会用::before、::after吗 link 与 @import之对比学习前端前必知的——HTTP协议详解深入了解——CSS3新增属性菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

高效开发之SASS篇作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,也不可以引用等等.作为一名程序员,不能编程怎么能忍受,这就是sass存在的意义,工业化生产,让CSS程序范儿. 主要目的就是让你写CSS时不在重复. SASS优点可以简单的规纳为以下几点: 增加了一些编程特性…

移动前端开发之viewport,devicePixelRatio的深入理解

移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备. 一.viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又…

＃笔记＃移动前端开发之viewport

一般移动设备的浏览器都默认设置了一个 viewport ,并初始定义一个虚拟的layout viewport(布局视口),用于解决早期的页面在手机上显示的问题.下面我们来认识几个与 viewport 相关的名词: layout viewport(布局视口) 布局视口是页面布局的实际宽度.iOS, Android基本都将这个视口初始设置为 980px. 网页缩放比例(initial-scale) CSS像素与设备逻辑像素的比例即为网页的缩放比例.如果网页没有缩放,那么一个CSS像素就对应一个 di…

Mobile开发之meta篇

Mobile开发之meta篇 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> width: viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 ) height: viewport 的高度 (范围从 223 到 10,000 ) initial-scale: 初始的缩放…

UWP开发之Template10实践二：拍照功能你合理使用了吗？（TempState临时目录问题）

最近在忙Asp.Net MVC开发一直没空更新UWP这块,不过有时间的话还是需要将自己的经验和大家分享下,以求共同进步. 在上章[UWP开发之Template10实践:本地文件与照相机文件操作的MVVM实例(图文付原代码)]已经谈到了使用FileOpenPicker进行文件选择,以及CameraCaptureUI进行拍照. 对于文件选择一般进行如下设置就能实现: // 选择多个文件 FileOpenPicker openPicker = new FileOpenPicker(); openPic…

前端开发之JavaScript HTML DOM理论篇二

主要内容: 1.HTML DOM元素 2.HTML DOM事件一.DOM元素主要操作有添加.删除和替换HTML元素 1.创建新的HTML元素 (1)方法一: appendChild() 追加如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上. 实例和解析: <div id="box1"> <p id="p1">This is first paragraph.</p> <p id=&…

前端开发之JavaScript基础篇二

主要内容: 1.流程控制条件语句和switch语句 2.for循环和while循环 3.Break语句和Continue语句 4.数组和数组常用方法 5.函数 6.对象一.流程控制条件语句和switch语句 1.条件语句(用于基于不同的条件来执行不同的动作) if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码 if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码 if...else if....else 语句- 使用该语句来选择多…

前端开发之javascript BOM篇

主要内容: 1.BOM输出 2.BOM的对象 3.client的相关属性 4.offset的相关属性 5.scroll的相关属性前情提要: 何谓BOM? 所谓 BOM 指的就是浏览器对象模型 Browser Object Model,它的核心就是浏览器. 一.BOM输出主要输出方式有以下几种: 二.BOM的对象 1.open和close方法 --- 打开和关闭网页的几种方法: <!DOCTYPE html> <html lang="en"> <head…

二十二、【轻量级开源框架】EFW框架Web前端开发之JqueryEasyUI

回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu.com/s/1o6MAKCa 前言:EFW框架主要用于行业软件软件开发,所以软件的界面需要体现专业.漂亮.风格统一的效果:在Web方便这种界面框架还是有不少,如强大的EXT,基于Jquery的JqueryUI,还有一些国产的也都比较漂亮:而EFW框架中推荐的是JqueryEasyUI,为什么选择…

前端开发之JavaScript HTML DOM实战篇

实战案例一: “灯泡发光” <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javaScript案例之点亮灯泡</title> <style type="text/css"> img{ width:100px; height:180px; margin:50px 50%;…

前端开发之JavaScript HTML DOM理论篇一

主要内容: 1.DOM简介 2.DOM 节点 3.DOM 方法和属性 4.DOM 访问和修改一.DOM简介 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: “W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式.” W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 H…

前端开发之JavaScript基础篇三

主要内容: 1.创建对象的几种方式 2.JavaScript内置对象 3.JavaScript错误--Throw.Try 和 Catch 4.JavaScript 表单验证一.创建对象的几种方式 1.使用Object或者对象字面变量创建对象 (1)使用Object创建对象例如: var student = new Object(); student.name = "cc"; student.age = 20; 这样,一个student对象就创建完毕,拥有2个属性name以及age,…

前端开发之JavaScript基础篇一

主要内容: 1.JavaScript介绍 2.JavaScript的引入方法和输出及注释 3.javaScript变量和命名规则 4.五种基本数据类型 5.运算符 6.字符串处理 7.数据类型转换一.JavaScript介绍 1.JavaScript是什么? javaScript是一种web前端的描述语言,也是一种基于对象(object)和事件驱动(Event Driven)的.安全性好的脚本语言. 它运行在客户端从而减轻服务器的负担. 具有如下特点: (1)javaScript主要用来向…

二十六、【开源框架】EFW框架Winform前端开发之Grid++Report报表、条形码、Excel导出、图表控件

回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu.com/s/1o6MAKCa 前言:本章介绍除DotNetBar2控件套件之外的另外一些常用控件,包括Grid++Report报表.条形码.Excel导出.图表控件ZedGraph:类似这些控件网上免费开源的太少了,经过一番对比和使用感受最后决定把这几个控件整合到EFW框架中供大家选择使用: 本…

指尖下的js ——多触式web前端开发之二：处理简单手势(转)

这篇文章将描述多触式网页开发中对手势(Gesture)事件的处理. 水果设备中的Gesture,广义的说包括手指点击(click),轻拂(flick),双击(double-click),两只手指的分开.闭合(scale).转动(rotate)等一切手指能在屏幕上做的事情.iOS上设计了了一系列手势来模拟和扩展鼠标操作,比如手指放下后迅速提起会触发click事件,手指向上滑动,停止,会触发body的onscroll事件等等.但是,狭义的Gesture事件,也就是能够addEventList…

前端开发之JavaScript基础篇四

主要内容: 1.定时器 2.正则表达式入门 3.元字符 4.正则表达式实战运用一.定时器 javaScript里主要使用两种定时器,分别是:setInterval()和setTimeout(). 1.第一种 --- setInterval() (1)含义: setInterval() 启动后不停地调用. (2)实例: var n = 0; var time = setInterval(function(){ n ++; document.write(n); },1000); // 1000单位…

移动前端开发之viewport的深入理解

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备. 一.viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览…

转载：移动前端开发之viewport的深入理解

原文作者:无双原文链接:http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备. 一.viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个a…

移动前端开发之viewport的深入理解（转载）

本文为转载文章,原文网址:http://www.cnblogs.com/2050/p/3877280.html 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备. 一.viewport的概念通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个a…

【前端开发之CSS篇二】的更多相关文章