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

前端学习：CSS的学习总结(图解）

前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位…

2016.01.22 前端学习 HTML/CSS

学习HTML/CSS  http://edu.51cto.com/course/course_id-3116.html 明日实践…

前端学习 之 CSS（三）

九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: html内容: <div class="box1">第一个div</div> <div class="box2">第二个div</div> <span>一个span</span> css内容: *左浮动*…

前端学习之CSS

CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 css实例 每个CSS样式由两个组成部分: 选择器和声明. 声明又包括属性和属性值. 每个声明之后用分号结束. CSS注释 /*这是注释*/ CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式. 不推荐大规模使用. <p style="…

前端学习 之 CSS（二）

五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设置属性的.不会牵扯到方法的层面. 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 记住:有一些属性是可以继承下来 : color . font-*. text-*.line-* .主要是文本级的标签元素. 但是像一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)…

前端学习 之 CSS（一）

一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 ·外部样式表可以极大提高工作效率 ·外部样式表通常存储在 CSS 文件中 ·多个样式定义可层叠为一个 二:CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(p…

web前端学习笔记(CSS变化宽度布局)

一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按照一定的比例同时变化,还是一列固定,另一列变化.这两种都是很常用的布局方式.然而对于等比方式而言,相对比较简单,和我上一篇博客中1-2-1的布局方式非常类似,因此这里只是介绍一列固定另一列变宽的case.      在实际的应用中,只有单列宽度变化,而其它保持固定的布局可能会更加实用.一般在存在多个…

web前端学习笔记(CSS固定宽度布局)

一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>固定宽度布局</title> <style type="text/css"> #header,#pagefooter,#content { border: 1px solid red; margin:…

web前端学习笔记(CSS盒子的定位)

相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它.      使用relative,即相对定位,除了将position属性设置为relative之外,还需要指定一定的偏移量,水平方向通过left或者right属性来指定,竖直方向通过top和bottom来指定.以下为后面实验的基准代码. <html xmlns="http://www.w3.org/1999/xhtml…

web前端学习笔记(CSS盒子的浮动)

在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同.      CSS中有一个float属性,默认为none,也就是标准流通常的情况.如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,同时默认情况下,盒子的宽度不在伸展,而是根据盒子里面的内容的宽度来确定. 准备基础代码 浮动的性质比较复杂,这里先制作一个基础的页面,代码如下.后面一系列的实验将基于下面…

前端学习历程--css①

---恢复内容开始--- 本文用自己的理解,总结网上或者自身经历的问题,加以汇总,方便查找: 一.浏览器默认样式 1.浏览器处理css&html a.css作用范围:盒子模式.浮动.定位.背景.字体 2.css布局方式: 经典三列布局 Bootstrap栅格布局 百度首页布局 微博布局 人人网布局 瀑布流布局 3.层叠样式表: a.层叠:层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程.即对相同标签的样式融合,且内联>内部>外部(!important可将样式提到最高级),但实际…

前端学习 -- Html&Css -- 条件Hack 和属性Hack

条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keywords> if条件共包含6种选择方式:是否.大于.大于或等于.小于.小于或等于.非指定版本 是否: 指定是否IE或IE某个版本.关键字:空 大于: 选择大于指定版本的IE版本.关键字:gt(greater than) 大于或等于: 选择大于或等于指定版本的IE版本.关键字:gte(greater th…

前端学习 -- Html&Css -- 表格

表格在日常生活中使用的非常的多,比如excel就是专门用来创建表格的工具,表格就是用来表示一些格式化的数据的,比如:课程表.银行对账单.在网页中也可以来创建出不同的表格. 在HTML中,使用table标签来创建一个表格,在table标签中使用tr来表示表格中的一行,有几行就有几个tr,在tr中需要使用td来创建一个单元格,有几个单元格就有几个td,rowspan用来设置纵向的合并单元格,colspan横向的合并单元格. border-collapse可以用来设置表格的边框合并,如果设置了边框合并…

前端学习之--CSS

CSS 常用帮助文档 CSS:被用来同时控制多重网页的样式和布局.HTML页面中CSS样式的写法有3种: 1:标签中写入 <body style='margin o auto;'> 2:head头标签内 <style> body { margin:0 auto;} </style> 3:head头标签内引入css文件 <link rel='stylesheet' href='commons.css' /> 优先级:标签上的style最高,编写顺序,就近原则…

web前端学习总结--CSS

CSS 什么是CSS? CSS 指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 如何使用CSS 内联方式 样式定义在单个的HTML元素的属性style中 CSS语法: 只需要将分号隔开的一个或者多个属性/值对作为元素的style属性的值 属性和属性值之间用:连接 多对属性之间用;隔开 <h1 style=”color:blue;”>CSS的使用</h1> 内部样式表 样式定义在HTML文档头部的<style&…

Web前端基础(6):CSS(三)

1. 定位 定位有三种:相对定位.绝对定位.固定定位 1.1 相对定位 现象和使用: 1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别. 2.设置相对定位之后,我们才可以使用四个方向的属性: top.bottom.left.right. 特性:1.不脱标  2.形影分离  3.老家留坑 所以说相对定位在页面中没有什么太大的作用.影响我们页面的布局.我们不要使用相对定位来做压盖效果 用途: 1.微调元素位置 2.做绝对定位的参考(父相子绝)绝对定位会说到此内容. 1.2 绝对定位…

前端学习笔记——CSS选择器

学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选择器.class选择器.标签选择器 /*id选择器*/ /* #代表通过id选择器查找*/ #i1{ height: 48px; background-color: red; } /* class选择器 最常用 */ /*. 代表通过class选择器查找*/ .div{ height: 48px;…

前端学习(20)~css布局(十三)

常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高). (2)positon 确定元素的位置: static:默认属性值. relative:相对定位.相对于元素本身进行偏移,不会改变它所占据的空间. absolute:绝对定位.相对于父元素中最近的 relative/absolute 进行偏移,会脱离文档流. fixed:固定定位.相对于…

前端学习(3)-CSS

一 CSS CSS是Cascading Style Sheets的缩写,层叠样式表,用来控制网页数据的显示,可以使网页的显示与数据内容分离. 二 引入方式 (1)行内式:在标记的style属性中设置CSS样式,不推荐使用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title>…

前端学习笔记 - Css初级篇

有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可以知道的是,行内元素和块级元素之间是能够相互转换的.趋于对网页模块化的搭建,后期行内转换为块级的例子会很多很多. html中的块级元素列举如下: div(文档分区),article(文章内容), aside(伴随内容), audio(音频播放), blockquote(块引用), canvas(绘制…

前端学习 -- Html&Css -- ie6 png 背景问题

在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示 解决方法: 1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以后,图片的清晰图会有所下降: 2.使用JavaScript来解决该问题,需要向页面中引入一个外部的JavaScript文件,然后在写一下简单的JS代码,来处理该问题. DD_belatedPNG_0.0.8a.js : http://www.dillerdesign.com/experiment/D…

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

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

前端学习 -- Html&Css -- 层级和透明度

层级 如果定位元素的层级是一样,则下边的元素会盖住上边的. 通过z-index属性可以用来设置元素的层级,可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示. 对于没有开启定位的元素不能使用z-index. 透明度 设置元素的透明背景opacity可以用来设置元素背景的透明,它需要一个0-1之间的值: 0 表示完全透明 1 表示完全不透明 0.5 表示半透明 opacity属性在IE8及以下的浏览器中不支持,IE8及以下的浏览器需要使用如下属性代替:alp…

前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位

相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: relative:开启元素的相对定位: absolute:开启元素的绝对定位: fixed:开启元素的固定定位(也是绝对定位的一种). 当元素的position属性设置为relative时,则开启了元素的相对定位 当开启了元素的相对定位以后,而不设置偏移量时,元素不会发生任何变化: 相对定位是相对于元素在文…

前端学习笔记--css案例

要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * { padding: 0; margin: 0; } body { font-size: 16px; color: burlywood; } #container { width: 900px; margin: 0 auto; } #header { height: 220px; margin-bottom: 5px; } #nav { /*导航*/ height: 40px; background-color: aqua…

前端学习笔记--CSS布局--float定位

1.float属性 box1向右移动,box2顶替了box1的位置,box3顶替了box2的位置. 2.clear属性 案例: 一列三行布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">…

前端学习笔记--CSS布局--文件流定位

1.概述 2.文档流定位:从上到下,从左到右 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0;/* 去掉默认样式*/ } #nav{…

前端学习笔记--CSS入门

1.css概述: 2.css语法: 3.css添加方法: 用单独的文件存储css样式的优点: 优先级: h3得到的样式是内嵌样式覆盖了外部样式. 4.css选择器 标签选择器: 类别选择器: ID选择器: 嵌套标签: 集体标签: 全局声明: 混合引用:…

前端学习(22)~css问题讲解

你是如何理解 HTML 语义化的? 语义化:指对文本内容的结构化(内容语义化),选择合乎语义的标签(代码语义化). 举例:段落用 p,边栏用 aside,主要内容用 main 标签. 好处: 便于开发者阅读和维护 有利于SEO:让浏览器的爬虫和辅助技术更好的解析, 语义化标签介绍: 在HTML5出来之前,我们习惯于用div来表示页面的章节或者不同模块,但是div本身是没有语义的.但是现在,HTML5中加入了一些语义化标签,来更清晰的表达文档结构. meta viewport 是做什么用的,怎么写…

前端学习 -- Html&Css -- 框架集

框架集和内联框架的作用类似,都是用于在一个页面中引入其他的外部的页面,框架集可以同时引入多个页面,而内联框架只能引入一个,在h5标准中,推荐使用框架集,而不使用内联框架. 使用frameset来创建一个框架集,注意frameset不能和body出现在同一个页面中,所以要使用框架集,页面中就不可以使用body标签. 属性: rows,指定框架集中的所有的框架,一行一行的排列: cols, 指定框架集中的所有的页面,一列一列的排列. 这两个属性frameset必须选择一个,并且需要在属性中指定每一部…