新手前端笔记之--初识css

css样式表是为了容纳与html文档分离出来的样式属性而产生的,所以她理所当然的包含两个部分:1.样式的表示,使用{属性1:属性值:属性2:属性值:...},2.样式与标签的对应(如何找的对应标签),使用各种选择器.下面将这两部分分别进行分析. 一.选择器的分类和应用原则: 关于选择器的总结,已经有很多,推荐博文:十分钟搞定css选择器,里面的总结已经非常全面,但怎样使用还是应该注意优先级(这是由于层叠引起的,因为css允许为一个标签多次设定样式,所以就要确定到底是哪个样式被最终使用)和应用原则…

新手前端笔记之--初识html标签

接触前端(好大气的名字啊)已经一个多月了,看了很多视频和博客,有了一定的感性认识,但还是需要总结一下以便系统化所学习的知识,就从html标签开始吧.关于标签,谈论最多的就是简洁和语义化.简洁指html标签仅仅负责把页面中的内容进行正确标示即可,而对内容的表现形式则统统交由css负责.语义化本不应成为问题,因为就像人与人之间的交流需要有意义的语言一样,html文档作为人与浏览器交流的语言自然是有意义的,但这并不能使所有人都遵循(类似于有了普通话,但各地方言依然流行,因为有时都可以达到一样的目的,所…

新手前端笔记之--css盒子

css盒子就是它的盒模型,所有css的布局都是以此作为基础的,很有必要来详细记录一下. 1.盒子的尺寸就是margin+padding+border+content的总和,这很好理解,但令人迷惑的可能就是四个顶角是怎样产生的,可以由两个例子来看一下: <div style="width:10px; height:10px; border:30px solid; border-color:#ff3300 #0000ff #339966 #00ff00;"></div&g…

前端笔记（2.CSS）

知识点借鉴于慕课网,菜鸟教程和w3shool CSS方面: CSS全称为“层叠样式表”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 使用CSS样式的一个好处是通过定义某个样式,可以让不同网页位置的文字有着统一的字体.字号或者颜色等. css 样式由选择符和声明组成,而声明又由属性和值组成; 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响. 声明:在英文大括号“{}”中的的…

前端笔记二：CSS盒模型

1.标准模型和IE模型 2.标准模型和IE模型的区别标准模型的height和width只是content的: IE模型的height和width是包含padding和border的 3.CSS如何设置这两种模型 4.js如何设置获取盒模型对应的宽和高 5.实例题边距重叠(取最大值):父子.兄弟 6.BFC 解决边距重叠问题 IFC内联元素的…

前端笔记（关于css盒模型知识整理）

我以前整理的文章可能也不是特别深入.所以现在开始尝试即使多花点时间收集整理,也不只发浅层知识,这样对技术的深入理解是很有帮助的. 废话不多说,我们现在开始. 说到css盒模型,这是大多面试基础中会经常面到的. 首先我们要知道,什么是盒模型?盒模型分为两种:w3c盒模型和IE盒模型. 现在大多数浏览器默认情况下的盒模型就是w3c盒模型,由margin.border.padding.content.元素的width==content的width.也就是说w3c盒模型一般情况下会比设置的宽度要大,而I…

2.前端笔记之css

title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuyao.me欢迎转载** 一.css简介 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用css. 存在方式有三种:元素内联.页面嵌入和外部引入 1.元素内联 <!DOCTYPE h…

1.前端笔记之html

title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://www.liuyao.me欢迎转载** 一.html简介超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准, 它通过标记符号来标记要显示的网页中的各个部分.网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图…

写给后端的前端笔记：浮动（float）布局

写给后端的前端笔记:浮动(float)布局这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,"居然有这种操作?",过去看了一眼,大概知道他说的左飘就是左浮动float: left 这么看来,后端的同僚对前端css布局的了解基本处于小白阶段. 于是就有了这篇文章. 浮动我们可以这样理解浮动,图中有页面,div1,div2,div3,div4. <div id="di…

写给后端的前端笔记：定位（position）

写给后端的前端笔记:定位(position) 既然都写了一篇浮动布局,干脆把定位(position)也写了,这样后端基本上能学会css布局了. 类别我们所说的定位position主要有三类:固定定位fixed,相对定位relative,绝对定位absolute.它们都有相同的四个属性:top,bottom,left,right 区别主要在于他们的参照物不一样 <div class="block" id="div1">固定定位bottom: 40px;…

前端笔记-html

前端笔记html 前端三大利器,html(本源),css(着装),js(动作) html 学习html就是学习一套规则能够被浏览器识别,在页面中展示,一个页面只能运行一个html 标签 <>被尖括号包裹的就是标签,不同的标签有不同的含义主动闭合标签 <title>Title</title> 自动闭合标签 <meta charset="UTF-8"> html分为head,和body <head>: <!--最新html…

前端07 /jQuery初识

前端07 /jQuery初识目录前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2.1使用 jQuery 的基本步骤 2.2 jQuery的$符号 2.3jQuery的入口函数 3.js中的DOM对象和 jQuery对象比较(重点,难点) 3.1 二者之间的区别 3.2 jquery对象和dom对象的关系和转换 4.jQuery查找标签 4.1 jquery选择器 4.1.1基…

Web 前端之HTML和CSS

Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签来描述网页.HTML文档描述网页,包含HTML标签和纯文本,也被称为网页 CSS是指层叠样式表(cascading Style Sheets),样式定义如何显示HTML元素,把样式添加到HTML4.0中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率,外部样式表通常存储在CSS文件中…

Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现,但必要随意添加或添加过度. 在Web前端开发中,经常要使用H1标签对关键字进行优化,可是如果是一行文字中的某个词加上了H1标记,就会换行.可以使用下面的方法,H标签就不会强制换行了.Css控制为一行文字中某个字加上<h2>标签不换行,display:inline; 解释为:内联对象的默认值.用该值…

web前端面试试题总结---css篇

CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(margin). 边框(border): (3)区别: IE的content部分把 border 和 padding计算了进去; CSS选择符有哪些?哪些属性可以继承? * 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p) 4.相邻选…

前端总结·基础篇·CSS（一）布局

目录这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) & 块元素(block) 1.3 行内块元素(inline-block IE8+ IE6-7/tools) 1.4 flex(IE11+ IE10/-ms-) 1.5 none 二.位置(position) 三.补充 3.1 浮动(float) 3.2 层叠(z-index) 3.3 溢出(overflow…

前端总结·基础篇·CSS（二）视觉

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·CSS(四)兼容目录一.动画(animation)(IE10+)(CSS3) 1.1 定义动画 1.2 引用动画 1.3 多个动画 1.4 更多属性二.过渡(transition)(IE10+)(CSS3) 2.1 定义首尾 2.2 应用过渡 2.3 多个过渡 2.4 更多属性三.转换(transform)(IE10+,-ms-,-webkit-,-…

前端总结·基础篇·CSS（三）补充

前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充目录一.移动端 1.1 视口(viewport) 1.2 媒体查询(media query) 1.3 相对字体大小(rem/em) 二.选择器 2.1 常用 2.2 关系 2.3 伪元素 2.4 伪类 2.5 优先级三.样式重置(reset) 3.1 常用重置 3.2 重置插件(Normalize.css) 四.浏览器前缀 4.1 前缀由来 4.2 解决方案五.兼容性…

好程序员web前端分享12个CSS高级技巧汇总

好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框给body添加行高所有一切都垂直居中逗号分隔的列表使用负的 nth-child 选择项目对图标使用SVG 优化显示文本对纯CSS滑块使用 max-height 继承 box-sizing 表格单元格等宽用Flexbox摆脱外边距的各种hack 使用属性选择器用于空链接使用 :not() 在菜单上应用/取消应用边框先给每一个菜单项添加边框 <p><font…

前端笔记知识点整合之JavaScript（三）关于条件判断语句、循环语句那点事

一.条件分支语句条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力语法能够书写所有的条件分支语句.也就是说,一会儿学switch case语句,switch case语句能干的,if else语句一定也能干. 标准的完整结构: if(){ }else if(){ }else if(){ }else{ } else只能有一个,并且一定要放在最后.表示所有的分支都不满…

Storm学习笔记 - Storm初识

Storm学习笔记 - Storm初识 1. Strom是什么? Storm是一个开源免费的分布式计算框架,可以实时处理大量的数据流. 2. Storm的特点高性能,低延迟. 分布式:可解决数据量大,单机搞不定的场景. 可扩展:随着业务的发展,数据量越来越大,系统可以水平扩展. 容错:单个节点挂了,不影响整个应用. 3. Storm与其他框架的比较 3.1 Storm和Hadoop的比较 Storm用于实时计算,Hadoop用于离线计算. Storm处理的数据保存在内存中,源源不断.Hadoo…

好程序员web前端开发测验之css部分

好程序员web前端开发测验之css部分Front End Web Development Quiz CSS 部分问题与解答 Q: CSS 属性是否区分大小写? <p><font size="3"> ul {</font></p> <p><font size="3"> MaRGin: 10px;</font></p> <p><font size="…

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

15款不容错过的前端开发Javascript和css类库 - 2017版本~

前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, CoreUI是一套admin的管理模板,提供了高定制化的解决方案来创建控制模板和平台. 这有几种不同的版本帮助你快速的整合最流行的框架,比如, AngularJS, React.jS,Vue.jS等等 React Trend 来自Unsplash的一个react版本的组件,用来方便的创建线图,可以方便的展示…

awk 新手入门笔记

转自:http://www.habadog.com/2011/05/22/awk-freshman-handbook/ awk新手入门笔记 @作者 : habadog@邮箱 : habadog1203@gmail.com@日期 : 2011-05-22@博客 : www.habadog.com 1.AWK(1)Aho.Weinberger.Kernighan三位发明者名字首字母:(2)一个行文本处理工具: 2.基本原理2.1原理:逐行处理文件中的数据 2.2语法: ? 1 awk 'patter…

前端总结·基础篇·CSS

前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} /* 去除边距 */ul {margin:0;padding-left:0;} /* 去除边距和左填充 */li {list-style-type:none;} /* 去除列表的圆点 */a {text-decoration:none;} /* 去除下划线 */ 2 浏览器前缀 { t…

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器一丶CSS简介叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化特点: 1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠 2.使数据和…

CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视,用于设计网页的外观效果.通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率. 一.CSS基础用法 CSS代码可以在任何文本编辑器中打开和编辑.因此,不管读者有没有变成基础,初次接触CSS时会感到很简单. 1.1 CSS样式样式是CSS最小的语法单元,每个样式包含两部分内容:选择器和声明(规则),…

LevelDB学习笔记 (1):初识LevelDB

LevelDB学习笔记 (1):初识LevelDB 1. 写在前面 1.1 什么是levelDB LevelDB就是一个由Google开源的高效的单机Key/Value存储系统,该存储系统提供了Key到Value的有序映射. 地址: https://github.com/google/leveldb 中文文档: https://kevins.pro/leveldb_chinese_doc.html 1.2 为什么要学levelDB 学习源码算是一种很好的学习方式,准备精读几个经典的开源代码,那学…

前端小技巧：css sprite----V客学院技术分享

前端小技巧:css sprite 因为英文名叫sprite,翻译过来是精灵,而雪碧饮料也叫sprite,所以叫精灵兔或者雪碧图. 它有什么作用呢? 当用户在浏览器里输入一个URL地址的时候,你会感觉无数张图片"唰唰唰"的闪出来了.在这个过程中,浏览器会把这个网站的主资源(就是Html文件)拉取回来,然后开始分析网页中的Js,Img之类的标签,然后再去拉取这些图片和资源.可想而且这会多么的消耗内存.对于浏览器来说,他们的请求方式都是发起一个Http请求,经历三次握手. 首先我们来讲讲什么…

【新手前端笔记之--初识css】的更多相关文章