《Web前端开发项目教程》网页的蓝图-简单布局-使用盒模型划分页面_第1页
《Web前端开发项目教程》网页的蓝图-简单布局-使用盒模型划分页面_第2页
《Web前端开发项目教程》网页的蓝图-简单布局-使用盒模型划分页面_第3页
《Web前端开发项目教程》网页的蓝图-简单布局-使用盒模型划分页面_第4页
《Web前端开发项目教程》网页的蓝图-简单布局-使用盒模型划分页面_第5页
已阅读5页，还剩36页未读， 继续免费阅读

下载本文档

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

文档简介

项目02网页的蓝图—简单布局任务2-3使用盒模型划分页面任务2-3使用盒模型划分页面

知识点理解行内元素和块级元素及其转换掌握盒子模型及常用样式属性掌握行内元素及其样式属性技能点学会灵活转换元素的显示方式能够使用盒模型进行页面布局一、页面元素的分类和转换HTML元素按呈现效果可分为块级元素和行内元素两大类。块级元素块级元素在页面中以区域块的形式呈现，在页面中会独自占据一整行（逻辑行），其开头结尾都会自动换行。行内元素行内元素也称内联元素。行内元素与它前后的其他内联元素内容显示在一行中，是某个区域块中的一部分。1.1块级元素标题标记<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>，段落标记<p>，分隔线<hr>等通用元素<div>，通常做容器HTML5还新增了很多语义化的标签，其本质和<div>是相同的，也都是块级元素。<header>定义文档或者文档的部分区域的页眉<nav>描述超链接区域<main>定义文档的主要内容<article>元素表示文档、页面、应用或网站中的独立结构，如论坛帖子、新闻文章、博客等<aside>元素表示侧边栏或嵌入内容<footer>定义页脚等可以暂时先使用<div>进行页面布局，后续熟练了再尝试使用html5的语义化标签。1.2行内元素<a>超链接元素、<img>图像元素、<span>文本元素等都是常用的行内元素。<styletype="text/css"> p{font-family:'微软雅黑';font-size:24px;} span{font-size:36px;color:red; }</style><body> <p>新款<span>6</span>折销售！</p></body>1.3行内元素和块级元素的转换行内元素和块级元素在实际项目中可以根据需要进行相互转换，可以通过指定display样式属性的取值来决定元素的显示方式。用法：行内块元素。兼具行内元素和块级元素的特点，在内部类似于block元素，比如它拥有block元素的高宽值，也可以设定自己的padding（内填充），border（边框）与margin（外边距），而外部的排列方式又类似行内元素，即水平在一行内排列，不是像块级元素一样从上到下排列。display:inline;/*将元素转换为行内元素*/display:block;/*将元素转换为块级元素*/display:inline-block;/*将元素转换为行内块元素*/二、块级元素的盒子模型盒子模型的结构2.1盒子的宽度和高度CSS样式规则中使用width和height规定盒子的宽高注意：标准盒子模型的width和height仅指块级元素的内容区域大小border-topborder-bottomborder-leftborder-rightContent内容padding-leftpadding-rightpadding-toppadding-bottomMargin-leftMargin-rightMargin-topMargin-bottomwidthheight宽度如何取值？auto，默认值，盒子的实际宽度充满浏览器窗口的内容区域或者该元素所在父元素的内容区域。

固定值，例如width:700px;表示盒子宽度为700像素，还可以设置为相对值，例如width:80%;表示盒子宽度占父级内容区width值的80%。高度如何取值？默认值auto，此时盒子中内容的总高度并不确定，而是由其实际内容的多少来决定的。宽度的取值同样可以为固定值，也可以为百分比，但是高度的百分比的大小是相对其父级元素高度的大小，若某元素的父元素没有确定高度，则无法有效使用height=XX%的样式。2.2盒子的边框border-widthborder-styleborder-color

修饰属性四个方向border-topborder-rightborder-bottomborder-left边框颜色边框宽度边框样式border-color:#FF00FFborder-width:2px1px1px2pxborder-style:soliddashed上边框右边框border-top-width:5pxborder-right-style:solid下边框border-bottom-color:red左边框border-left-width:5px2.2盒子的边框注意：以上综合设置的属性值顺序任意，可以只指定需要设置的属性，省略则使用默认值border-style属性的取值默认为none，只要想设置边框就不能省略。使用border-width、border-style、border-color属性综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四边，两个值为上下/左右，三个值为上/左右/下。缩写形式borderborder-left…统一设置左边框border:1pxsolidblue（设置四个方向的边框均为1像素、蓝色、实线）border-left:1pxsolidblue（设置左边框均为1像素、蓝色、实线）2.2盒子的边框例如border-width属性的写法

border-width:3px;

border-width:3px5px;

border-width:3px5px6px;border-width:3px5px2px5px;上、右、下、左边框粗细都为3px上、下边框粗细为3px；左、右边框粗细为5px;上边框粗细为3px；左、右边框粗细为5px;下边框粗细为6px;四个数值依次表示上、右、下、左圆角边框的设置可以使用下面方式同时设置四个角的样式：border-radius:水平半径1~4/垂直半径1~4取值单位可以是px，表示圆角半径，值越小，角越尖锐，负数无效，例如8px；还可以使用百分比，此时圆角半径将基于盒子的宽度或高度像素数进行计算，例如50%，此时若盒子宽与高取值相同，则得到一个圆形，否则为椭圆形。例如：border-radius:10px;border-radius:10%;border-radius:50%;border-radius:20px020px0;border-radius:080%;圆角边框的设置border-topborder-bottomborder-leftborder-rightContent内容Margin-leftMargin-rightMargin-topMargin-bottom2.3盒子的内填充属性padding设置边框与内容之间的距离，以便精确控制内容在盒子中的位置。padding-toppadding-rightpadding-bottompadding-left上内边距右内边距下内边距左内边距padding-right右填充padding-left左填充padding-top上填充padding-bottom下填充2.3盒子的内填充属性padding并非实体，是透明留白，没有修饰属性。不同浏览器对于页面元素的默认padding和margin取值是不相同的，为了保证统一的页面效果，通常采用*{padding:0;margin:0;}将页面元素的默认内外边距置零。padding值不允许为负值，可四边分别设置，顺时针方向，也可一次赋值。容器盒子内填充使用固定值，段落内填充使用相对值。所以当拖动浏览器窗口改变其宽度时，段落文字的内填充会随之发生变化（这时<p>标记的父元素为<div>），而容器盒子的内填充不会发生变化。<styletype="text/css">*{padding:0;margin:0;}/*将页面元素的默认内外边距置零*/.box{

border:1pxsolid;

padding:20px;

padding-bottom:0; }.boxp{

border:1pxdashedred;

padding:5%;}</style>2.3盒子的内填充属性<body><divclass="box">

<h3>民俗话节气之立秋</h3>

<p>据《月令七十二候集解》：“秋，揪也，物于此而揪敛也”。古人把立秋当作夏秋之交的重要时刻，一直很重视这个节气。据记载，宋时立秋这天宫内要把栽在盆里的梧桐移入殿内，等到“立秋”时辰一到，太史官便高声奏道：“秋来了。”奏毕，梧桐应声落下一两片叶子，以寓报秋之意。</p></div></body>border-topborder-bottomborder-leftborder-rightContent内容padding-leftpadding-rightpadding-toppadding-bottomMargin-leftMargin-rightMargin-topMargin-bottom2.4盒子的外边距属性网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距，所谓外边距指的是元素边框与相邻元素之间的距离。marginmargin-topmargin-rightmargin-bottommargin-left上外边距右外边距下外边距左外边距2.4盒子的外边距属性div{ border:5pxsolidred; margin-right:50px;/*设置盒子的右外边距*/ margin-bottom:30px;/*设置盒子的下外边距*/ /*上面两行代码等价于margin:050px30px0;*/}Page

20同时设置盒子的右外边距和下外边距，使盒子和父级元素之间拉开一定的距离，是一种常见的页面排版方法。盒子的居中如何让盒子在页面窗口居中？margin水平方向设置auto值可以使块级元素在父级元素中保持水平居中margin-left=auto；margin-right=auto；因为块级元素的宽度默认是撑满父级元素的，如果给宽度设置一个固定值，而左右margin设置为auto，则可以平分剩余空间。但是垂直方向设置为auto值不可以垂直居中，主要因为块级元素的高度默认是内容高度，与父级元素的高度并没有直接的关系。实训任务1常见的单列布局有两种：header，content和footer等宽的单列布局header与footer等宽，content略窄的单列布局观察以下两种单列布局，并使用div+css实现。实训任务2利用border绘制三角形：假设我们把border-width设置的很大，是什么情况呢？设置相邻方向的边框为不同的颜色，又是什么情况呢？盒子的width和height同时缩小为0，又会是什么情况呢？2.5盒子的背景CSS允许应用纯色作为盒子背景，也允许使用背景图像创建复杂的背景效果。背景属性取值和描述background-color:背景颜色;默认transparent透明background-image:url("图像url");必须是gif、jpeg、png格式文件background-repeat:图像平铺方式;repeat平铺(默认)、no-repeat不平铺repeat-x只横向平铺、repeat-y只纵向平铺background-attachment:图像固定;scroll(默认)随页面滚动、fixed图像在页面固定background-position:图像定位;xy坐标值、预定义值、百分比background-size:图像大小；以像素或百分比规定背景图片的尺寸。background-origin:背景图片的定位区域;content-box、padding-box或border-boxbackground:背景色;background:url("图像")平铺固定定位;指定背景颜色缩写按顺序综合设置缩写，不需要可省略取默认值设置背景颜色background-color：背景颜色颜色可以使用多种模式，rgb，#16进制，颜色名都可以。例如：body{background-color:yellow}h1{background-color:#00ff00}h2{background-color:transparent}p{background-color:rgb(250,0,255)}分别为body、h1、h2、p元素用不同方式设置了颜色。background-color不能继承，其默认值是transparent。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样显示的是其祖先元素的背景。设置背景图片设置背景图片样式的规则：background-image:url(图片文件路径及名称）例如：使用样式规则设置背景图片为flower2.jpg，代码如下：<styletype=text/css>

.backg{background-image:url(flower2.jpg);}</style>……<bodyclass=“backg”>通过class属性引用27设置样式背景图片如何重复样式属性：background-repeat取值：

repeat：平铺

no-repeat：不平铺

repeat-x：x方向平铺

repeat-y：y方向平铺任务设置背景图片在x方向平铺；设置背景图片在y方向平铺；设置背景图片不平铺28设置样式背景图片位置样式属性：background-position取值：两个值xy使用带不同单位的固定数值：可直接设置图像左上角在元素中的坐标使用预定义关键字：可指定背景图像在元素中的对齐方式（以页面元素为参照）水平方向值：left、center、right垂直方向值：top、center、bottom两个关键字的顺序任意，若只有一个值则另一个默认center。使用百分比：将百分比同时应用于元素和图像再按该指定点对齐0%0%表示图像左上角与页面元素的左上角对齐50%50%表示图像的50%与页面元素的50%对齐背景图片位置示例例如在一个宽高均为300px的容器中，使用

background-position:150px150px;背景图片位置示例background-position:50%50%;background-position:100%100%;表示图像右下角与页面元素的右下角对齐，而不是图像充满元素31设置背景图片不随滚动条移动正常情况下，背景图片的位置是与页面内容的位置之间有相对固定的关系，即若页面内容滚动，背景图片通常也跟随滚动，设置背景图片是否滚动的样式属性：

background-attachment取值：

scroll：随滚动条移动

fixed：不随滚动条移动（相对于窗口的位置固定）设置背景图片的尺寸background-size以像素或百分比规定背景图片的尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。32.backg{

width:400px;

height:400px;

border:1pxsolid;

background-image:url(img/h5.jpg);

background-repeat:no-repeat;

/*background-position:100px100px;*/

background-size:80%; }设置背景图片的定位区域background-origin规定背景图片的定位区域。背景图片可以放置于content-box、padding-box或border-box区域。33实训任务3多种方法完成图片在父级盒子中水平、垂直居中的效果，如图所示。方法1：图片作为容器盒子的内容（img标记）方法2：图片作为容器盒子的背景2.6盒子的阴影效果box-shadow:水平偏移量

垂直偏移量

模糊半径

扩展半径

颜色阴影类型例如box-shadow:0010px5px#ff0；参数说明：阴影水平偏移量：必选参数，使用正数时，阴影在盒子右边；负数时，阴影在左边；阴影垂直偏移量：必选参数，正数时，阴影在底部；负数时，阴影在顶部；阴影模糊半径：可选参数，只能是正数，默认为0，表示没有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：可选参数，默认0，值为正时，阴影扩大，值为负时，则缩小；阴影颜色：可选参数。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，因此建议不要省略此参数。阴影颜色可以使用rgba颜色值形式，同时为阴影添加透明效果（取值0-1,0是完全透明，1为不透明）2.6盒子的阴影效果<styletype="text/css"> .backg{ width:200px; height:200px; background:#f00; box-shadow:4px4px4px4pxrgba(50,50,50,0.5); }</style>多阴影效果可以给一个元素设置多个阴影

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

温馨提示

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

最新文档

评论

0/150

提交评论