第4章：CSS的盒子模型、浮动和定位分析课件_第1页
第4章：CSS的盒子模型、浮动和定位分析课件_第2页
第4章：CSS的盒子模型、浮动和定位分析课件_第3页
第4章：CSS的盒子模型、浮动和定位分析课件_第4页
第4章：CSS的盒子模型、浮动和定位分析课件_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第四章CSS盒子模型、浮动和定位本章内容块元素和行内元素CSS的盒子模型概念主要属性CSS的浮动左浮动右浮动CSS的定位绝对定位相对定位应用CSS相关知识做极目商城首页面行内元素和块元素行内元素（inlineelement）特点是只占内容的宽度，默认不会换行，行内元素一般放文本或者其它的行内元素。常见内联元素<span><a>块元素(blockelement)特点不管内容有多少，它要换行，同时沾满整行，块元素可以放文本，行内元素，块元素。常见块元素：<div>，<p>。<div><p><spanclass="s1">span1hello,world</span></p><divclass="s2">div1</div></div>行内元素和块元素区别行内元素只占内容的宽度，块元素内容不管内容多少要占全行。行内元素只能容纳文本和其它行内元素，块元素可以容纳文本，行内元素和块元素。（与浏览器类版本和类型有关）一些CSS属性对行内元素不生效，比如margin,left,right,width,height。建议尽可能使用块元素定位。（与浏览器版本和类型有关）行内元素和块元素转换行内元素和块元素转换如果我们希望一个元素按照块元素方式显示

则：display：block；如果我们希望一个元素按照行内元素方式显示

则：display：inline；盒子模型盒子模型所有的页面中的元素都可以看成是一个盒子，占据着一定的页面空间。盒子模型的主要属性在网页设计中常用的属性名：内容（content）、填充（padding）、边框（border）、边界（margin）盒子模型几个属性值解释：几个属性值解释：border:1pxsolidred;

这里我们给body指定了border的宽度，样式，颜色（顺序可以随意）margin:0auto;

0表示上下，auto表示左右居中CSS的浮动左浮动是指让该元素，尽量向左边移动，让出自己右边空间，给下一个元素显示。右浮动是指让该元素，尽量向右移动，直到碰到他的父元素的右边界。（特别强调：浮动对块元素和行内元素都生效！）CSS浮动注意事项如果我们的div框很多，外面的框无法容纳水平排列的浮动div元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”，如下图：CSS的定位CSS定位（positioning）属性允许你对元素进行定位。Position属性值：static(默认值)：元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分，行内元素则会创建一个或者多个行框，置于其父元素中。（对定位left，right不生效。）relative：元素框偏移某个距离。元素仍保持其未定位前的形状，他原来所占的空间仍保留，从这一角度看，好像改元素仍然在文档流/标准流中一样。

absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。fixed：元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。（以body本身来定位）CSS的相对定位相对定位（relative）Relative.html源代码：

<divclass="s1">div1</div> <divid="special"class="s1">div2</div> <divclass="s1">div3</div> <divclass="s1">div4</div>Relative.css源代码.s1{width:100px;height:60px; background-color:yellow;

margin-left:10px;float:left;}#special{position:relative;/*这里我们使用了相对定位*/

left:40px;/*在原来的位置，向右移动大小（如果向左移动，则值是负数）*/top:70px;/*在原来的位置，向下移动大小（如果向上移动，则值是负数）*/}

把上例中relative换成absolute即为绝对定位特别说明relative的参照点是它原来的位置.进行一定排列absolute定位是对离自己最近的那个非标准流盒子而言的CSS的绝对定位流:网页设计中就是指元素(标签)的排列方式。标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出

现,排在后面的元素(标签)内容后面出现。非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排列,我们统称为非标准排列。极目商城首页布局实现第一步：根据商城首页规划网站极目商城首页布局实现完成后基本布局如下图，我们将其分为六个部分1.Header

网站头部

width:

760px

height:

50px

2.search搜索全站的功能，包含网站的logo3.Main

Navigation

导航条，具有按钮特效。4.左侧分类

height:

根据类型变化

5.幻灯片放映效果的广告（暂以静态图片代替）6.广告极目商城首页布局实现第二步：创建html模板及文件目录等1、创建html模板，将其保存为index.html,并创建文件夹css，images2、创建网站的大框：建立一个宽100%的盒子，它将包含网站的所有元素。在html文件的<body>和</body>之间写入 <div

id="container">

Hello

world.

</div>

在css中设置

background-color:yellow;width:100%; margin:0

auto;

现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入：

body{margin:0;padding:0;}极目商城首页布局实现第三步：将网站分为六个div，网页基本布局的基础：1.将“第一步”提到的六个部分都放入盒子中，在html文件中写入极目商城首页布局实现2.为了将六个部分区分开来，我们将这六个部分用不同的背景颜色标示出来，在css文件写入： #page_container{width:100%; margin:0

auto;} #header{height:30px;background-color:aqua;} #searcher{height:88px;background-color:black;} #navi{height:40px;background-color:fuchsia;} #left_menu{background-color:lime;} #adv{background-color:maroon;} #right_view{background-color:navy;} #left_menu,#adv,#right_view{ height:280px; }极目商城首页布局实现3、效果如图（省略了adv，right的截图）极目商城首页布局实现第四步：设置left、adv、right的宽度，及浮动方式为#left_menu{background-color:lime;width:25%;float:left;}#adv{background-color:maroon;width:50%;float:left;}#right_view{background-color:navy;width:25%;float:left;}效果如图：极目商城首页布局实现第五步：创建一个存放内容的div，用来存放除header以外的部分，用来控制页面边距1、页面代码如下：<body> <divid="page_container"> <divid="header">Header</div> <divid="div_content"> <divid="searcher">Searcher</div> <divid="navi">Navi</div> <divid="left_menu">LeftMenu</div> <divid="adv">Advice</div> <divid="right_view">RightView</div> </div> </di

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论