前端学习之路之CSS （三）

Infi-chu: http://www.cnblogs.com/Infi-chu/ 创建CSS有三种方法:外部样式表.内部样式表.内联样式.优先级:内联样式>内部样式>外部样式表>浏览器默认样式 CSS背景: CSS 背景属性用于定义HTML元素的背景. 常用属性: background-color /*属性定义了元素的背景颜色*/ background-image /*属性描述了元素的背景图像*/ background-repeat /*设置背景图像是否及如何重复*/ b…

前端学习之路之CSS （四）

Infi-chu: http://www.cnblogs.com/Infi-chu/ CSS盒子模型概念:CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容.盒模型允许我们在其它元素和周围元素边框之间的空间放置元素. 如下所示: 不同部分的说明: Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距…

前端学习之路之CSS （二）

Infi-chu: http://www.cnblogs.com/Infi-chu/ id选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,CSS 中 id 选择器以 "#" 来定义. #id_name { color:red; text-align:center; } class选择器class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用, 在 CSS 中,类选择器以一个点"."号显示.…

前端学习之路之CSS （一）

Infi-chu: http://www.cnblogs.com/Infi-chu/ 简介: CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一优点: CSS 样式表极大地提高了工作效率语法:CSS 规则由两…

前端学习之路-CSS介绍，Html介绍，JavaScript介绍

CSS介绍学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式利用标签中的style属性来改变显示样式 <p style="background-color: #FFF000"> p标签 </p> 在head中加入style标签 <head> <style type="text/css"> p { color: #FFF000…

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项淡入效果对不支持JavaScript浏览器的降级处理水平滚动容器内水平滚动容器内垂直滚动…

Day3前端学习之路——CSS基本知识

课程目标初步了解什么是CSS,掌握基本的CSS概念,语法,针对选择器特殊性的计算处理,以及学习如何设置一些简单的样式任务一:回答问题 1.什么是CSS,CSS是如何工作的? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一 2.CSS的基本语法是怎样的?…

前端学习之路CSS基础学习二

CSS属性相关样式操作: (1)width:为元素设置宽度 (2)height:为元素设置高度 ps:块儿级标签才能设置长宽行内标签设置长宽没有任何影响 p{ width: 30px; height: 30px; } 文字操作 /*字体样式: 关键字:font-family 作用:更改字体的样式*/ { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } /*字体大小: 关…

前端学习之路CSS基础学习一

CSS CSS定义如何显示HTML元素,当浏览器读到一个样式表,它就按照这个样式表来对文档进行格式化. CSS实例每个CSS样式由两个组成部分:选择器和声明.声明又包括包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这就是注释*/ CSS的三种引入方式内部样式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中.格式如下: <head> <meta charset=&q…

web前端学习之路

test 随着自己对于web前端知识了解的越多,越来越发现自己真的好菜一脸茫然阶段两年前大学接触网页设计,那时对于网页设计一窍不通,只是看了一本自己大学编的一本入门教材,我甚至不知道那些网页设计的代码是干什么用的,大学的老师自己讲的很投入,然而我并不懂.最后考试他就划了重点.我们只要记一些简单的html代码,那时的我还不知道什么是盒子模型,不知道什么是css,怎么外部引用css和javascript,只是对一些标签眼熟初识网页设计去年的暑假,那时无意中看到了一个视频,视频是教你怎么在十分…

Day1前端学习之路——概述

终于下定决心要好好学习前端知识了,以后会把学习过程中的一些随笔记录在这里.HTML.CSS.JavaScript这三大前端语言在大三的时候就有所接触,但是学习的不够深入,这一次希望能够坚持下去. 学习路线准备按照知乎的一篇文章https://www.zhihu.com/question/30180100/answer/156399333,按照这个路线来学习. 课程目标: 大概知道什么是Web,什么是HTML,CSS,JavaScript HTML:一种标记语言 CSS:规定样式的语言 Javas…

前端学习笔记之HTML/CSS 速写神器 Emmet

HTML/CSS 速写神器:Emmet 在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet,它提供了一套非常简单的语法规则,书写起来非常爽快,然后只需要敲一个快捷键就立刻生成对应的 HTML 或 CSS 代码,极大提高了代码书写效率. Emmet 的前身是大名鼎鼎的 Zen coding,它是一个编辑器插件,需要基于指定的编辑器使用,官方网站提供多编辑器支持,目前它支持的编辑器如下: Su…

前端学习之路——scss篇

一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 二.安装和使用 Sass依赖于ruby环境,所以装sass之前先确认装了ruby.先导官网下载个ruby.在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境.安装好ruby后,然后安装Sass.(mac自带) 输入一下命令: gem install sa…

我的学习之路_第三十四章_jsp

jsp 在只有servlet时,输出页面内容比较麻烦(成本高,java代码中输出HTML标签),所以需要一种技术,主要是HTML页面的代码(HTML,css,js),可以嵌入java代码,来实现动态页面的效果.这种技术就叫做 : JSP JSP:java server Page : 动态页面技术,JSP就是Servlet. 如何开发一个JSP: 在项目目录中创建一个 .jsp 的文件文件内容的第一个行:<%@ page contentType="text/html;char set=UT…

前端学习之路之SPA(单页应用)设计原理

SPA设计 1.设计意义前后端分离减轻服务器压力增强用户体验 Prerender预渲染优化SEO 前后端分离:前端做业务逻辑,后端处理数据和接口,耦合度减少,开发效率提高. 减轻服务器压力:一个页面不用每次都去请服务端,当一个应用较复杂,有10多个页面的时候,那么每个用用户操作几个页面,只需要请求一次,这会在很大程度上减轻服务器压力. 增强用户体验:比如说当从一个首页跳转详情页,如果按照传统页面的方式,相当于在首页请求,在去服务端请求另一个详情页,每一次的连接,都要消耗DNS以及TCP建立…

Day6前端学习之路——布局

一.定位 1)静态定位 position:static(默认) 2)相对定位 position:relative(要配合top.bottom.left.right等属性来使用) 3)绝对定位 position:absolute 绝对定位固定元素是相对于 <html> 元素或其最近的“positioned”祖先元素,一个“positioned”元素是指 position 值不是 static 的元素. 4)固定定位 position:fixed(要配合top.bottom.left.right…

Day5前端学习之路——盒模型和浮动

盒子模型浮动float 一.盒子模型 (1)content内容区 width和height是框内容显示的区域——包括框内的文本内容,以及表示嵌套子元素的其他框,也可以使用min-width.max-width.min-height.max-height来设置最低/最高限度的width和height.默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin.使用box-sizing可以使其包含content.padding.border box…

Day7前端学习之路——多栏布局

该文章主要讨论两栏布局和三栏布局,三栏布局包括很著名的圣杯布局和双飞翼布局一.两栏布局的七种方法(左边固定,右边自适应) 原理: block水平元素宽度能够跟随父容器调节的流动特性,block级别的元素盒子的宽度具有填满父容器,并随着父容器的宽度自适应的流动特性. 利用CSS的calc( )方法动态设定宽度利用CSS的新型布局flex layout与grid layout 基本样式布局为:两个盒子相距20px,左侧盒子宽度为120px,右侧盒子宽度自适应 <div class="wra…

Day4前端学习之路——背景边框列表链接和更复杂的选择器

课程目标掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性主要内容: 背景属性边框列表链接其他选择器选择器概览:https://www.w3school.com.cn/cssref/css_selectors.asp 一.CSS 背景属性属性描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定(fixed)或者随着页面的其余部分滚动(scroll). background-…

Day2前端学习之路——HTML基本知识

课程目标: 通过制作自己的简历,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念任务一:回答问题 1.HTML是什么,HTML5是什么? HTML是一种被广泛使用的用来创建网页的超文本标记语言. HTML5是最新的HTML标准,拥有更丰富的语义.图形以及多媒体元素等内容. 2.HTML元素标签.属性都是什么概念? HTML不是编程语言,是标记语言,所以要使用标记标签来描述网页属性是用来提供HTML标签更多的信息. 3.文档类型是什么概念,起什么作…

我的学习之路_第三十章_servlet

servlet:小服务程序 servlet是JavaWeb体系中的三大核心(servlet/Filter/Listener)之一,而且是最主要的那个. 作用:接受请求,处理请求,做出响应继承体系:servlet(接口)-->GenericServlet(抽象类)-->HttpServlet(抽象类) servlet(接口): init:初始化:servlet是第一次被访问时初始化的,在服务器运行期间,servlet都只有一个对象多个访客使用的是多条线程. destroy:销毁:只有正常关闭…

No.9 selenium学习之路之CSS定位

CSS定位方式: 元素中间加“.”表示是class 1.通过ID定位 driver.find_element_by_css_selector("#ID值") 2.通过class定位 driver.find_element_by_css_selector(".s_ipt") 3.通过标签定位 driver.find_element_by_css_selector("input") 4.通过其他属性定位不局限于所知属性,使用任何属性都可以定位 dr…

【前端学习笔记】关于CSS通过一个块改变另一个块的样式

<body><div id="a" style="background:#0F0; height:100px; width:100px;"> <div id="c" style="background:#FF0; height:50px; width:50px;"> </div></div> <div id="b" style="b…

前端学习之路——Git篇

本文只是一个个人学习Git的笔记,如有错误的地方,还望指出,谢谢!参考资料如下: <Git教程--廖雪峰的官方网站 > bootstrap里面的--git_guide Git安装在网上搜索git下载安装即可.成功后,右击会出现Git Bash,说明安装成功了. Git配置 Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. 1.置Git的user name和email: $ git config --global user.name &qu…

前端学习之路——gulp篇

一.构建gulp环境 1.下载nodejs gulp基于node.js,要通过nodejs的npm安装gulp,所以要先安装node.js环境.(英文官网/中文官网链接). 通过cmd命令窗口确定安装node.js.(在命令窗口输入node -v或npm -v 查看是否返回出版本号). 2.全局安装gulp(全局环境) 确定正确安装了nodejs环境,然后通过命令全局方式安装gulp: npm install gulp -g 或者 cnpm install gulp -g 二.项目流程 1).方…

Day17-18前端学习之路——Javascript事件

用户在某个元素上点击鼠标或悬停光标. 用户在键盘中按下某个按键. 用户调整浏览器的大小或者关闭浏览器窗口. 一个网页停止加载. 提交表单. 播放.暂停.关闭视频. 发生错误. 更多事件:https://developer.mozilla.org/zh-CN/docs/Web/Events 一.概念每个可用的事件都会有一个事件处理器,也就是事件触发时会运行的代码块.当我们定义了一个用来回应事件被激发的代码块的时候,我们说我们注册了一个事件处理器.注意事件处理器有时候被叫做事件监听器——从我们的…

Day17-18前端学习之路——常用语句资料库

一.var 与 let 的区别 var: 可以先初始化再声明该变量; 可以根据需要多次声明相同名称的变量 var myName = 'Chris'; var myName = 'Bob'; let myName = 'Chris';//let不能像var那样多次声明,let只能声明一次 myName = 'Bob'; let: 是在现代版本中的 JavaScript 创建的一个新的关键字,用于创建与 var 工作方式有些不同的变量,解决了过程中的问题. 二.比较运算符 Note: 您可能会看到有…

Python学习之路【第三篇】--集合

语法结构: set1.issubset(set2)判断集合set1是否为set2的子集,返回布尔值. ? 1 2 3 4 5 6 s1 = {'Java', 'PHP', 'Python', 'C++'} s2 = {'Java', 'Shell', 'Ruby'} print(s1.issubset(s2)) 输出: False issuperset()语法结构: set1.issuperset(set2)判断set1是否为set2的父集. ? 1 2 3 4 5 6 s1 = {'Jav…

【前端学习笔记】2015-09-10~~ css层叠样式表格式

关于颜色的定义: 有几种方式:1.直接接英文单词 2.#16进制 3.rgb(100%:0%:0%)或者里面写像素,此处百分号不能省略. 加多个属性时,用“;”分开前面如果是定义标签的样式时,标签之间用“,”分开 h1,h2,a,p{ }//标签样式,同代之间的标签派生选择器:如果是属于子代,中间不用加逗号 li strong,h1 .toUpper{ }//方法样式…

Web前端学习开篇

首先想想自己喜欢干什么?想干什么?脑袋需要什么?什么对自己来说最重要?自己的规划? 本人数字媒体技术专业,想学Web前端开发有好长时间了,有一定的基础,所以就想进一步深入学习.谁料想,我怎么那么没有耐心,每次都下定决心好好学了,学一段时间,一遇到困难,就坚持不下去了,但是我真的不想放弃.所以现在我必须努力,不努力,将来一定后悔!下面是一位导师教导我的话: 1.咬牙坚持可以苦一阵子,收获一辈子.凡困难想办法克服,坚持寻找思路与方法,实现高效. 2.想要学会跑得快,要先学会爬--走--慢走--快走-…

【前端学习之路之CSS （三）】的更多相关文章