CSS实例教程:浮动(float)页面布局

CSS实例教程:浮动(float)页面布局的相关文章

• 
  css实例教程:理解Float的含义

  标签：Web开发

  课程关键词：浮动 页面布局有两种方式 1）浮动Float 2）定位Position 今天就来一个小小的练习，让大家理解Float的含义 要求： 1）两个方块，一个红色#900，一个蓝色#009； 2）红色方块宽度和高度均为200像素，蓝色方块 宽度为300像素，高度为200像素； 3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素； 页面效果如下： 源代码：  例子2.rar 大家应该注意到了，虽然...[ 查看全文 ]

  爱迷失方向的狼

  11
• 
  CSS实例教程:清除浮动Clear

  标签：Web开发

  课程关键词：清除浮动Clear 还记得第二课我们做的例子的效果么？最后效果是，红色方块和蓝色方块都处于一行，我们使用Float:left，打击了块状元素的霸道即块状元素不允许其他元素和它处于同一行。我们将红色方块的CSS代码中加入了Float:left;后，红色方块终于允许蓝色方块和它处于同一行。如图： 我们换一种方法表达上面的意思，因为红色方块的左侧浮动，才导致蓝色方块上移至红色方块的尾后； 在上个...[ 查看全文 ]

  Mrfbck

  11
• 
  CSS网页制作布局实例教程

  标签：Web开发

  相关文章： 用CSS建设网站的实例 原文博客：veerle 翻译整理：西米CC 来自国外博客veerle的一个系列教程，分八个部分讲解一张完整CSS页面的构建过程。虽然它不是每个步骤都解释得非常详细，但是其中提及的很多技巧和经验都很值得初学者借鉴，从界面设计到页面构建，强调了很多细节的设计理念。在翻译的过程中，个人觉得本教程比较薄弱的环节是页面整体布局的搭建，篇幅不是很充分，不过大家仍然可以通...[ 查看全文 ]

  外外是王的女人

  51
• 
  CSS实例教程:分号引起页面混乱

  标签：Web开发

  昨天 由于一个页面的css样式增加，需要在原有的css里面增加样式。 由于在头部增加了一些修改信息，所以，样式表的最上面修改了一下！ 原来最上面是：@charset "utf-8"; 后来我增加东西之后 又把这个：@charset "utf-8";放到最上面 但是不小心把分号给去掉了，变成了这样：@charset "utf-8"结果页面出现有的样式没有应用上。 百思不得其解，最后又重新上传原来备份的样式，一...[ 查看全文 ]

  MXZ晴天

  31
• 
  理解CSS的浮动标签Float

  标签：Web开发

  Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。 如果你认真的去读一下浮动概念，你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的（我只是猜想）。如果你知道这些bug，你就能避免这些问题。 让我们尝...[ 查看全文 ]

  BJBJabcd

  71
• 
  CSS浮动布局基础

  标签：Web开发

  基于浮动的布局利用了float（浮动）属性来并排定位元素，并在网页上创建列。可以利用这个属性来创建一个环绕在周围的效果，例如环绕在照片周围，但是当你把它应用到一个div标签上时，浮动就变成了一个强大的网页布局工具。float属性把一个网页元素移动到网页（或者其他包含块）的一边。任何显示在浮动元素下方的HTML都在网页中上移，并环绕在浮动周围。 float属性接受3种不同值之一：left（左）、right...[ 查看全文 ]

  小辉8388

  51
• 
  float闭合（清除浮动）和CSS HACK

  标签：Web开发

  一、float 闭合（清除浮动） 将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. style .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } .clearfix {display:block;} /style 二、CSS HACK 以下两种方法几乎能解决...[ 查看全文 ]

  我是召哥哥

  111
• 
  揭开迷惑 理解CSS的浮动Float

  标签：Web开发

  Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对理论的解读造成的。 如果你认真的去读一下浮动概念，你会发现并不像所见的那样复杂。大多数问题都是由于老版本的IE带来的（我只是猜想）。如果你知道这些bug，你就能避免这些问题。 ...[ 查看全文 ]

  home儿子的笑容

  81
• 
  css浮动的实例

  标签：Web开发

  css浮动 结论，非浮动元素可以为后面的浮动元素定位， 但是 浮动元素无法再为其后的非浮动元素定位。 No-float A + Float B + No-float C c和b 会按照A的边界进行定位， !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" HTMLHEADTITLECSS TEST/TITLE style type=text/css body{ text-align: center; background: #000...[ 查看全文 ]

  笑笑是我的娃娃

  41
• 
  CSS布局之浮动（二）

  标签：Web开发

  在上一个文章里写了关于左（右）侧定宽右（左）侧自动缩放的两列浮动，这个文章就要说一下三列浮动的问题了。在之前说过，两列浮动是其他多列浮动的基础，明白了两列浮动的原理后，三列或三列以上的多列浮动也变得简单。 左侧中间定宽，右侧自适应： 因边左侧跟中间都是定宽的，只有右侧是自适应宽度的，所以这个三列浮动是和两列浮动中的左侧定宽右侧自适应一样的道理，HTML结构代码如下： !...[ 查看全文 ]

  封一川

  21
• 
  CSS教程:CSS页面布局的技巧

  标签：Web开发

  对CSS网页布局的技巧，可谓是名目繁多。这里将适合新手的CSS网页布局的小技巧总结出来，或许对您更有实际的参考价值： 1、ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。 2、同一个的class选择符可以在一个文档中重复出现，而id选择符却只能出现一次；对一个标签同时使用class和id进行CSS定义，如果定义有重复，id选择符做的定义有效，是因为ID的权值要比CLASS大。 3、一个兼容...[ 查看全文 ]

  云彩啊啊

  11
• 
  Div CSS实例教程：页面制作方法

  标签：Web开发

  做前端也有几年时间了，不敢说能把他看地多透，但是多多少少还是有些自己的东西。就制作而言，我将一张页面分为四层：框架、布局、模块、列表和数据块。 一、框架 页面的框架基本上都是：“头”、“主体”、“尾”。但是对于一些页面如Tudou.com，由于布局的需要，还应在“头”的下面还要加个“菜单”。 二、布局（以下用#ID表示页面元素） #Head和#Foot里的就不说了，具体查看...[ 查看全文 ]

  古府夜风

  121
• 
  CSS布局之浮动（一）

  标签：Web开发

  CSS浮动一直是个比较让人郁闷的问题，很多的布局问题都出在浮动上，特别是当浮动的列数很多时，但其实只要理解了两列结构的浮动，面对多列数的浮动也不会再心慌，因为两列结构的左右浮动是最基本的浮动，也是更多浮动的基础，三列、四列等的浮动都是出于此的。 来看一下几种常见的CSS两列浮动，CSS代码见以下各分类，HTML结构代码如下： !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitiona...[ 查看全文 ]

  zjq9_0ra4b18l

  31
• 
  CSS布局实例

  标签：Web开发

  Source Code to Run html head style type="text/css" !-- body {  margin: 0;  padding: 0;  font-size:12px; } #layout{  background-color: #FFFFFF;  border: 0;  width: 400px;  margin: 0 auto; } .list{  margin: 0px 10px 20px;  text-align: left; } .list ul{  list-style-type: none;  margin: 0px;  padding: 0px; } .list li...[ 查看全文 ]

  atjqz8

  121
• 
  玩转CSS CSS精彩实例教程(一)

  标签：Web开发

  CSS(Cascading Stylesheets，层叠样式表)是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐! 前言 CSS(Cascading Stylesheets，层叠样式表)是一种制作网页的新技术...[ 查看全文 ]

  安然vfcjx

  21
• 
  玩转CSS CSS精彩实例教程(三)

  标签：Web开发

  十二、控制BOX的样式 样式表规定了一个容器BOX，它将要储存一个对象的所有可操作的样式。包括了对象本身、边框空白、对象边框、对象间隙四个方面。 为了大家更好地理解这些属性的意义，以及互相之间的关系，请看下面这个图示: 1.边框空白(MARGIN) 如图所示，位于BOX模型的最外层，包括四项属性。 格式分别如下: ·margin-top:顶部空白距离 ·margin-right:右边...[ 查看全文 ]

  假如你说Max

  21
• 
  CSS实例教程:永远在网页底部的网页布局

  标签：Web开发

  看这个网页的底部，为什么会跑到那儿去呢？即使内容很少的情况下，它也始终在页面的底部。 否则页面底部将留下大量空白。 下面是它实现的代码： div id="wrap"     div id="main" class="clearfix"         div id="content"         /div   &n...[ 查看全文 ]

  重新再来love

  81
• 
  玩转CSS CSS精彩实例教程(二)

  标签：Web开发

  七、控制文字的样式 控制文字的样式包括文字大小写、文字修饰两个部分。 1.文字大小写 文字大小写使网页的设计者不用在输入文字时就完成文字的大小写，而可以在输入完毕后，再根据需要对局部的文字设置大小写。 基本格式如下: text-transform: 参数 参数取值范围: ·uppercase:所有文字大写显示 ·lowercase:所有文字小写显示 ·capitalize:每个单词的头...[ 查看全文 ]

  莎莎小女王22

  01
• 
  CSS教程:通过实例学习CSS布局网页

  标签：Web开发

  通过上一章的学习，读者了解到了CSS强大的表现控制功能，特别是在布局方面有很大的优势。相对于代码条理混乱、样式杂糅在结构中的表格布局，CSS将带来全新的布局方法，让网页设计师更轻松、更自由。本章通过多个示例展示CSS布局网页的方法，并对CSS的盒模型作详细阐述。相信读者在深入理解盒模型后，布局网页、定位CSS网页元素将更加自如。 上一章学习了Web标准的概念以及XHTML和CSS的基本知识。XHTM...[ 查看全文 ]

  装纯是给谁

  11
• 
  CSS布局实例代码:两列布局实例

  标签：Web开发

  CSS两列布局，右侧固定，左侧自适应宽度div style="width:90%; margin:0 auto;"    div style="width:200px; float:right;"这是右侧的内容/div    div style=" margin-right:210px;"这是左侧的内容，自适应宽度/div /divCSS两列布局，左侧固定，右侧自适应宽度div style="width:90%; margin:0 auto;"    div style="width:150...[ 查看全文 ]

  盼望444

  571