1.学习重点 1. 独立完成开发前的准备工作 1.1 配置开发环境 已使用sublime,webstorm,,,vscode,ato,Hbuilder 1.2 建立项目文件 项目文件名/ css.js.images.audio.video--文件夹 index.html.favicon.ico css/base.css.index.css 1.3样式初始化(不同浏览器的中各个标签的默认样式可能不同,为了1统一样式或者方便维护) 1.4分析网站的布局格式 2. 掌握css样式的书写位置 行内式,<…

CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width: 260px; height: 440px; border: 2px solid transparent; @extend %borderbox; &:hover{ border-color: #109ef3; } } img{ width: 100%; height: 100%; } }…

css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来实现的一些特效经常会用到定位属性,比如鼠标滑过显示被隐藏的盒子, banner的切换,还有之前写的jquery实现京东商品分类导航的类似这样的布局也是要结合定位属性来实现,但是上一次着重只写了jquery. 那么这次我想将定位属性的运用拿来说一下. 定位属性position常用的取值:relativ…

这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 让元素脱离文档流的方法有:浮动和定位. 二.有几种定位方式,分别是如何实现定位的,使用场景如何? CSS定位方式有四种:默认定位(static).相对定位(r…

来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之…

CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用.   定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1.相对定位(relative) 相对定位是指相对它本来应该处的位置所做的移动. …… <style type="text/css">.dingwei{ position:relative; left:50px;} </style> …… <p>我是一段正常…

原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图片的定位就需要用到CSS中的background样式,如: div{ background-image: url("1234.png"); background-repeat: no-repeat; background-position: 0px -100px; } 属性解释: back…

近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.relative:生成相对定位的元素,相对于其所在普通的文档流位置进行定位: 3.static:默认值,没有定位,元素出现在正常的文档流中; 4.fixed:老IE不支持,和absolute一致,相对于窗口进行定位,当出现滚动条时,不随着滚动而滚动: 5.sticky:(CSS3)有兼…

关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在学习JavaWeb前端的CSS,关于CSS中的定位有时候可能会使用到子绝父相,由于本人的水平有限如果有什么地方说错了,请指出来我好进行及时地修改. 一.什么是CSS以及position (一) CSS概述 CSS是层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HT…

字体属性 文字字体 font-family可以把多个字体名称作为一个“回退”系统来保存.如果浏览器不支持第一个字体,则会尝试下一个.浏览器会使用它可识别的第一个值. 简单实例: body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 字体大小 p { font-size: 14px; font-size:inherit 如果设置成inherit表示继承父元素的字体大…

大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.CSS初始化 1.什么是CSS初始化呢? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每…

CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用,比如策略战争游戏,比如从移动版的网页,屏幕狭小.空间有限:比如你可能想要放置许多信息的紧凑消息框,不用就会充满整个UI.我们简单的例子完成后就会像下面这样: 注意: 你能看完整的示例,可运行在 info-box.html (source code).检出它以理解你在本文章里要建立什么. 你可能会想:…

CSS学习摘要-定位 注:全文摘自MDN-CSS定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置. 本文解释的是定位(position)的各种不同值,以及如何使用它们. 文档流 定位是一个相当复杂的话题,所以我们深入了解代码之前,让我们审视一下布局理论,并让我们了解它的工作原理. 首先,环绕元素内容添加任何内边距.边界和外边距来布置单个元素盒子--这就是 盒模型 ,我们前面看过. 默认情况下,块级元素的内容宽度是…

##CSS 定位机制## CSS 有三种基本的定位机制:普通流.浮动流和定位流. 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来. 行内框在一行中水平布置.可以使用水平内边距.边框和外边距调整它们的间距. ##什么是CSS 定位 (Position) ?## 属性允许你检索和设置对象的定位方式 CSS 为定位提供了一些属性值,可以将布局的一部分与另一部分重…

CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.(父元素指的是前一个以absolute或relative宣告其位置的元素,若之前都没有此定位的元素存在,则以元素所在的窗口最大可视范围边界为基点. ) 元素的位置通过 "left", "top", "right" 以及 "…

简明CSS属性:定位 第一话 定位 (Positioning) 关键词:position/z-index/top/bottom/right/left/clip POSITION 该属性用来决定元素在页面上的位置. 用法:position:static(默认) | fixed | relative | absolute static 遵守正常的文档流,不设置top,bottom,left,right值. fixed 脱离正常的文档流,完全以浏览器窗口为参照物,不随鼠标的滚动而滚动.设定tblr值.…

CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:static,相对定位:relative,绝对定位:absolute. static: 采用默认定位时,一般可以不用设置position样式. 各个元素是按照文档流的形式从上往下排,同时保证块状元素独占一行的原则. relative : 生成相对定位的元素,相对于其正常位置进行定位,同时配合top, b…

CSS drop down的一个很好的示例: http://www.runoob.com/css/css-dropdowns.html…

HTTP协议的请求与响应和CSS属性和定位 一.HTTP协议 1.1 HTTP定义 HTTP(Hypertext Transport Protocol),超文本传输协议. 一种详细规定了浏览器和web服务器之间互相通信的规则,通过因特网传送万维网文档的数据传送协议. 1.2 协议原理 1.3 请求格式 *         第一部分是request line.包裹请求的方法.所请求资源的名字以及现在所使用的协议. *         第二部分是request headers.它包含浏览器的一些信息…

本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能. Margin: Margin属性用于设置两个元素之间的距离. Padding: Padding属性用于设置一个元素的边框与…

CSS Position(定位) 一.CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定position属性.他们也有不同的工作方式,这取决于定位方法. position属性值("CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性.): 属性…

一.字体属性 1.font-size(字体大小) p { font-size: 14px; } font-size 属性可设置字体的尺寸. px:像素,稳定和精确 %:把 font-size 设置为基于父元素的一个百分比值,布局时用到. em:移动端字体样式大小,相对于其父元素来设置字体大小 rem:可以换算为各种移动端,相对于根元素来设置字体大小 2.font-weight(字体粗细) font-weight字重,可用来调整字体粗细. /*font-weight: normal;*/ /*fo…

定位 static - 默认值 (几乎不用,了解就可以) absolute - 绝对定位,不为元素预留空间,脱离文档流: 如果当前元素的父级元素是<body>元素的话 -> 是相对于当前页面的定位 如果当前元素的父级不是<body>元素的话,父级元素没有开启定位 -> 则是相对于页面的定位 如果当前元素的父级不是<body>元素的话,父级元素开启定位 -> 则是相对于父级元素定位 <style> body { margin: 0;/* 去掉…

关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看什么是文档流(normal flow),下面是 www.w3.org 的描述: Normal flow Boxes in the normal flow belong to a formatting context, which may be block or inline, but not bot…

CSS的粘性定位sticky可以起到吸顶灯的作用,用法如下 <body> <div> <nav style="postion:sticky; top: 0;"> </div> <div><div> </body 但是我在一次实践中使用该属性把导航栏做成吸顶灯效果时,却无法实现.经过一番操作后,我终于发现了问题所在,那就是 sticky 的作用范围只在父元素之内,父元素的兄弟元素会忽略这个属性,把吸顶的元素顶上…

目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z-index属性 2.6.菜单 2.7.:target伪类 三.浮动 3.1.float取值 3.2.float的特性 3.3.清除浮动 3.3.1.清除外部浮动 3.3.2.清除内部浮动 四.多种居中办法 4.1.块标签自身水平居中 4.2.块标签内对齐 4.3.垂直居中方法一 4.4.垂直居中方法…

写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定960px):流式布局:将流式布局转换为固定布局很容易,只需要外围再包括一个div,为其设置宽度即可. html默认的布局方式是将每个块状标签,一个一个地往上叠加,为static类型的布局. 关于BFC的参考链接: http://www.iyunlu.com/view/css-xhtml/55.html http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html 布局的一些…

在Appcan开发中,首先要进行的就是页面布局,然后在这个页面上填充数据,加上互动元素,最终构成完整的应用. 因为appcan是使用HTML5+CSS3+JavaScript技术来进行开发,所以与普通web开发基本没有区别,理解成webapp的开发或许更好解释. iOS.Android系统中已经内置webkit内核,而appcan正是利用webkit来运行我们编写的页面,也就是可以将appcan看作是一个加强的webkit内核,强在它能通过js来控制手机某些功能,比如打电话.发短信.定位等等,这…

W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 要将结构,样式,行为分离. 在网页制作中,面对设计图,网页制作人员一般要遵循的原则: 先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化, 然后在考虑布局和表现形式. 今天主要对css的页面布局做过总结: css的页面布局模型分为三大种模式: (1)流动模型(标准文档流)(2)浮…

使用DIV+CSS对网页进行标准化布局前,除了要掌握盒子模型,还要掌握定位和浮动两个比较重要的概念,它们可以控制在页面上排列和显示元素的方式.一个盒子是装内容的区块,如果多个盒子组合在一起使用,再通过定位和浮动的设置,就可以对整个页面进行布局.如图1所示为由多个盒子布局的页面,每个虚线框代表一个盒子模型. 图1  多个盒子定义页面布局 虽然CSS的样式属性非常多,但实际参与页面布局的属性其实很少.CSS的定位属性应用得非常广泛,可以控制元素的平面或空间位置,以及高度.宽度和可见性.也可以使用CS…