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

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

【百度前端学院 Day4】背景边框列表链接和更复杂的选择器

1. 背景背景指的是元素内容.内边距和边界下层的区域(可用background-clip修改) background-color 背景色 background-image 背景图片(url) background-repeat 背景重复 repeat 在水平垂直方向上都平铺 repeat-x / repeat-y 只在水平/垂直方向上重复 no-repeat 不允许图像在任何方向上平铺 background-position 背景定位 top.bottom.left.right…

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

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

前端学习之路-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…

前端学习之路之CSS （四）

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

前端学习之路之CSS （三）

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

Day1前端学习之路——概述

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

web前端学习之路

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

前端学习之路——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…

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

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

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

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

前端学习 -- Html&Css -- 背景

background 在一个声明中设置所有的背景属性. background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动. background-color 设置元素的背景颜色. background-image 设置元素的背景图像. background-position 设置背景图像的开始位置. background-repeat 设置是否及如何重复背景图像. 使用background-image来设置背景图片 - 语法:background-image:url(相…

Python3学习之路~4.1 列表生成式、生成器

1 列表生成式我现在有个需求,看列表[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],要求你把列表里的每个值加1,怎么实现?你可能会想到2种方式 a=[0,1,2,3,4,5,6,7,8,9] b=[] for i in a: b.append(i+1) a=b print(b) # 输出:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] a=[0,1,2,3,4,5,6,7,8,9] for index,item in enumerate(a): a[index]…

Python3学习之路~2.1 列表、元组操作

列表列表是我们以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作. 定义列表(list) names=['Amy','Bob','Cindy','David'] 通过下标访问列表中的元素,下标从0开始计数,还可以倒着取 >>> names[0] 'Amy' >>> names[1] 'Bob' >>> names[-1] 'David' >>> names[-2] 'Cindy' 切片:取多个元素 >&g…

前端学习之路——scss篇

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

Python学习之路：关于列表（List）复制的那点事

要谈列表的复制,我们就要谈到Python的赋值规则首先我们创建列表a: a = [1,2,3] 通常我们复制一个元素的方法是这样的: b = a #复制元素的一般方法 print(a) print(b) 结果为: [1,2,3] [1,2,3] 通过这行代码,我们固然是创建了一个与列表a相等的列表b,但此时却会出现一个问题: 当我们尝试对新创建的列表b进行排序操作(如倒序操作)时: b.reverse() print(b) 结果为: [3,2,1] 到这里一切看似没啥毛病,实则坑爹的事情已经悄…

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

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

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

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

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…

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

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

前端学习之路之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 规则由两…

前端学习之路——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).方…

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…

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

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

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

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

Web前端学习开篇

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

Python3学习之路~0 目录

目录 Python3学习之路~2.1 列表.元组操作 Python3学习之路~2.2 简单的购物车程序 Python3学习之路~2.3 字符串操作 Python3学习之路~2.4 字典操作 Python3学习之路~2.5 简单的三级菜单程序 Python3学习之路~2.6 集合操作 Python3学习之路~2.7 文件操作 Python3学习之路~2.8 文件操作实现简单的shell sed替换功能 Python3学习之路~2.9 字符编码与转码 Python3学习之路~2.10 修改hapro…

web前端全栈学习之路

web前端全栈学习之路 --- 陆续更新中一.HTML相关 1.HTML常用标签:http://www.cnblogs.com/wyb666/p/8733699.html 2.HTML5基础: 3.video元素和audio元素:https://www.cnblogs.com/wyb666/p/9751083.html 4.HTML5进阶:https://www.cnblogs.com/wyb666/p/9746357.html 二.CSS相关 1.CSS选择器及常用样式:http://www…

【Day4前端学习之路——背景边框列表链接和更复杂的选择器】的更多相关文章