一招搞定css页面布局】的更多相关文章

如何做出漂亮的页面: 1. 多写页面,多改. 2. 多写页面,多改. 3. 多写页面,多改. 大致的思想步骤: 写页面的时候先规划好大致的分块,无论是用定位或者浮动,首先要确定要应用的场景,使用完浮动后一定记得清楚浮动,使用定位时要清楚其他盒子会完全忽视这个定位的盒子,如果两个盒子都是定位并且重叠,这个时候,两个盒子都会是透明的. 关于布局,多写页面,多修改,利用好开发者工具(F12),掌握布局很简单.…
14招搞定JavaScript调试 译者按: 很多时候,大家可能只是依靠console.log来调试JavaScript代码,这样做的局限性不言而喻,这篇博客将教你几招实用的调试技巧. 原文: The 14 JavaScript debugging tips you probably didn’t know) 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 掌握工具的使用方法可以极大提高解决问题的效率.尽管JavaScript以难以D…
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sass的设计思维--Don't Repeat Yourself.这一篇将阐述Sass如何利用变量.选择器嵌套.混合器和选择器继承来帮我们又快又好地搞定CSS. 零. Sass的作用是什么? Sass的作用是,帮助我们更快地(又快)写出具有高可维护性(又好)的CSS代码. 直白点说就是,用了sass,写…
CSS 页面布局.后台管理示例 页面布局 1.头部菜单 2.中间内容/中间左侧菜单 3.底部内容 <div class='pg-header'> <div style='width:980px;margin:0 auto;'> 内容自动居中 </div> </div> <div class='pg-content'></div> <div class='pg-footer'></div> 网站图片推荐:font…
在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量.最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中.这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起,也不必为每个屏幕创建媒体查询.ok,让我们发车吧. 设置 在本文中,我将使用网格布局.然后,我们将在文章末尾添加图片.下面是我们初始化网格的外观 HTML 代码: <div class="container"&g…
对前端程序员来说,从设计师的手中拿过设计图和素材之后根据需要进行切图是必要的基本功,但是一般的程序员可能对切图并非那么熟悉,所以可能有很多时间都花在使用Photoshop上,那么这里就有一种方法可以减少很多的切图工作,那便是——用一张图片搞定整个一页的页面布局.当然,不止是省了一些切图的花费,也是一种很有效的前端开发方法,尤其是针对那些设计花哨,使用HTML和Css还原度较难,并且实际上也并没有那么多可操作元素的设计. 其实简单来说就是一句话——使用空的HTML元素来框选出需要操作的图片元素.…
在前端开发中经常会碰到各种类型布局的网页,这要求我们对css网页布局非常熟悉.其中水平垂直居中布局,多列布局等经常会被使用到,今天就来解决一下css布局方面的问题. 水平垂直居中的几种方法 说到水平垂直居中布局我们一般会立马想到以下几种情况: 实验参数设置 <div class="container"> 123 <p class="inner">456</p> <span class="inner">…
W3C标准:是万维网制定的一系列标准,包括结构化标准语言(html.xml),表现 标准语言(css),行为标准语言(DOM,ECMAScript<javascript>)组成.这个标准倡 要将结构,样式,行为分离. 在网页制作中,面对设计图,网页制作人员一般要遵循的原则: 先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化, 然后在考虑布局和表现形式. 今天主要对css的页面布局做过总结: css的页面布局模型分为三大种模式: (1)流动模型(标准文档流)(2)浮…
1.布局规划 1.1 网格 网格系统是设计师在切分布局时作为参照的一组行和列. 1.2 布局辅助类 类名用于为布局添加样式.为了让样式可以重用,让类名表达其意图. .column { /* 一般列的样式 */ } .column-half { /* 占列宽的一半 */ } .row { /* 一般行的样式 */ } 另一种做法: .thing, .other-thing, .third-thing, .fourth-thing { /* 这里共用的样式 */ } 命名规范是高质量代码的重要组成部…
写在前面: 页面布局整体上可以分为两类:固定宽度(一般固定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 布局的一些…
二列布局的特征是侧栏固定宽度,主栏自适应宽度.三列布局的特征是两侧两列固定宽度,中间列自适应宽度. 之所以将二列布局和三列布局写在一起,是因为二列布局可以看做去掉一个侧栏的三列布局,其布局的思想有异曲同工之妙.对于传统的实现方法,主要讨论上图中前三种布局,经典的带有侧栏的二栏布局以及带有左右侧栏的三栏布局,对于flex布局,实现了上图的五种布局. ##### a. float+margin ###### 原理说明:设置两个侧栏分别向左向右浮动,中间列通过外边距给两个侧栏腾出空间,中间列的宽度根据…
1.BFC和Layout区别: BFC和Layout的作用是一样的,只是对浏览器的支持不同而已. BFC- -标准浏览器所具有的 Layout- -IE浏览器所具有的 BFC详解地址:http://blog.csdn.net/baidu_37107022/article/details/71634396 2.Layout布局定义 它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用 该布局有hasLayout属性控制: 取值:true,false 3.触发Layout的方式…
BFC:Block Formatting Contexts–块级元素格式化上下文 1.BFC定义 它决定了块级元素如何对它的内容进行布局,以及与其它元素的关系和相互作用 关键词解释: 块级元素:父级(是一个块元素) 内容:子元素(是一个块元素) 其它元素:与内容同级别的兄弟元素 相互作用:BFC里的元素与外面的元素不会发生影响 2.BFC触发方式 2.BFC的布局规则 3.普通文档流布局规则 4.代码演示 <!DOCTYPE html> <html> <head> &l…
今天我从早上9:00写代码一直写到下午18:00,写的我差点抑郁了,还好最后终于写出了一个完整页面,没有做动画效果,就是练习了一下DIV+CSS布局,做的是福务达(www.zzfwd.cn)的主页,真是不容易.然后放松了一下,收拾了一下东西,看了一会电视剧,心情才好点了.在这个例子中我总结了几点经验: 1.ul中只能放li,li是个容器,li中可以放任何标签内容. 2.在写CSS之前,记得要对标签等清除默认样式,这样在后面布局中就不会有误差. 3.任何一种效果都可以用多种方法实现,不一定要和别人…
在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级 不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 2.作为style属性写在元素内的样式 3.id选择器 4.类选择器 5.标签选择器 6.通配符选择器 7.浏览器自定义 同一级别 同一级别中后写的会覆盖先写的样式 基础选择器 选择器 含义 * 通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用) #id id选择器,匹配特定id的元素 .…
原文地址:http://www.cnblogs.com/dolphinX/p/3347713.html 在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级 不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 2.作为style属性写在元素内的样式 3.id选择器 4.类选择器 5.标签选择器 6.通配符选择器 7.浏览器自定义 同一级别 同一级别中后写的会覆盖先写的样式 基础选择器 选择器 含义 *…
一.CSS概述###<1>概念 DIV,就是一个HTML元素,块级元素,通常结合CSS进行页面的布局. CSS,层叠样式表,给HTML元素增强显示. ###<2>作用 样式定义如何显示HTML元素,页面的布局(美化HTML效果) ###<3>使用方式 内联样式方式:在当前的元素属性中直接设置style属性,适用性差,只能作用于当前元素. style属性是HTML元素通用的属性 内部样式方式:在head标签中,使用<style>标签来设置样式,适用性强,可以同…
一.左右两列布局 1.代码如下,可先粘贴复制,自行运行 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>两列布局</title><!--左边列固定,右边列自适应--> <style type="text/css"> *{ padding: 0; margin: 0; } body{ min-width:…
HTML部分代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/c.css" rel="stylesheet" type="text/css" > </head> <body> <!--cont…
1.标准文档流 在正常流中,在没有使用浮动或者定位的情况下,文本元素按照从上到下.从左到右的格式布局.这是浏览器的默认行为.在正常流中,块级元素从上到下依次排列,而行级元素从左到右依次排列.正常流中的元素影响其相邻元素的位置. 2.块级元素 前后换行显示,默认状态下独占一行: 块级元素可以作为容器,包含其他行级元素.块级元素: 块级元素有一定高度和宽度,可以通过width和height来设置. div,table,p,h1-h6,ul,form等等 3.行级元素(内嵌元素.内联标签) 类似于文本…
From:http://www.ui.cn/detail/27579.html 今时今日,网站的创建正变得越来越复杂,而且一般都不是一个人就能干的了的.在创建网站过程中,我们需要保证设计前后一致,并符合业务目标,同时还要尽全力为用户打造有趣的使用体验. 为了确保整个团队在设计网站各个组成部分或在改善开发人员设计成果时彼此之间能够充分协调一致,你需要编写一份设计文档或web设计风格指南作为指导. 风格指南能够保证不同的页面共同拥有一套核心的体验效果.另外,其还有助于保证未来的开发或第三方创作工作不…
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验.可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况.今天,结合自己的经验和理解,做了几个demo把IE6~IE10和其他标准浏览器的CSS hack做一个总结,也许本文应…
浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). 下面我们就来详细说明浮动!!!!!!!! 1.文档流 在浮动中有一个文档流的概念,所以在这里不得不介绍一下文档流了. 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <…
样式初始化:是指对HTML中某些标签的默认样式进行清除 样式初始化目的: 不同浏览器的默认样式不一样,若不清理,会导致相同的代码在浏览器中解析结果不一样,为了避免这种情况,所以需要进行样式初始化. 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*一.不适用通配符初始化*/ body,h…
1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. 这些属性我们可以用日常生活中的常见事物--盒子作一个比喻来理解,所以叫它盒子模式. 2.盒模型分为:标准盒模型和非标准盒模型 当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona…
居中布局   水平居中 父元素和子元素的宽度都未知 inline-block + text-ailgn .child{display:inline-block;} .parent{text-align:center;} 优点:兼容性好 缺点:子元素文本继承了text-align属性,子元素要额外加text-align:left; table + margin .child{display:table; margin:0 auto;} 优点:只需要设置子元素的样式 absolute + trans…
3.二维布局:CSS Grid Layout CSS Grid Layout模块为了能在二维空间里控制元素的顺序.位置和大小而定义了一组CSS属性. 被设值为display: grid的元素叫网格容器(grid container). 容器进一步被网格线划分为不同的区域,叫网格单元(grid cell). 网格线之间的水平或垂直路径叫网格轨道(grid track). 由相邻网格单元组合起来的矩形区块叫网格区. 网格容器的直接子元素叫网格项,网格项可以放在网格区内. 3.1 定义行和列 定义一个…
因为定位的出现,所以有了元素重叠的情况,此时就出现了显示谁的情况.在多层布局时,容易出现这种情况 定位position见:http://blog.csdn.net/baidu_37107022/article/details/71642147 1.默认层级规则 但层级规则可以通过z-index来设置 1.在正常情况下,层级的大小由顺序决定,后面的元素要比前面的元素的层级要高 <!DOCTYPE html> <html> <head> <meta charset=&…
1.定位取值概览 2.相对定位relative <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; color: #fff; } .div1{ background: red; } .div2{ background: green; /…
我们通常使用浮动来实现某些元素的布局,但是往往这些元素浮动会影响其他元素的布局,因此会产生副作用. 如果你还不清楚什么是浮动,那就点开这个链接: http://blog.csdn.net/baidu_37107022/article/details/71515984 浮动带来的副作用 1. 块状元素,会钻进浮动元素的下面,被浮动元素所覆盖,像这样 2. 行内元素,例如文字, 则会环绕在浮动元素的周围,为浮动元素留出空间,像这样: 3. 浮动元素的父元素坍缩, 像这样: 如果我们不希望要这些效果,…