python课件教案03_网页布局.pptxVIP

网页布局

课前回顾1、什么是CSS？层叠样式表，负责HTML页面的表现形式2、CSS的三种引入方式内联式、内嵌式、外链式，推荐使用外链式的引入方式3、CSS选择器标签选择器、类选择器、层级选择器，推荐使用类选择器

情景引入优美的网页离不开元素的组合排列

循序渐进同样的内容，好的排版能增加阅读者的感官体验

循序渐进标签在网页中会显示成一个个的方块，先按照行的方式，把网页划分成多个行，再到行里面划分列，也就是在表示行的标签中再嵌套标签来表示列

循序渐进整体按照先整体，后局部先大后小的顺序来书写结构

循序渐进本节课，我们将要制作一个标准结构格式的 网页页面

布局入门

思维构建根据网页布局的原理先写出网页的html代码结构图片和文字信息已打包到你们的电脑中了哟~

编玩边学bodydivdivdiv少儿编程/divdiv更多gt;gt;/div/divdivimgsrc=images/banner.jpgalt=banner/divdiv少儿编程教育是通过编程游戏启蒙， 。。。。。。 着重培养孩子的动手能力。/div/div/body把网页内容划分为一块一块的标签

新知教授在布局中需要尽量使用带语义的标签，使用带语义的标签的目的首先是为了让搜索引擎能更好地理解网页的结构，提高网站在搜索中的排名(也叫做SEO)，其次是方便代码的阅读和维护。标签语义化根据用户需求与一定算法，运用特定策略从互联网检索出制定信息反馈给用户的一门检索技术。搜索引擎

新知教授h1~h6：表示标题

p：表示段落

img：表示图片

a：表示链接div：表示一块内容

span：表示行内的一块内容带语义的标签不带语义的标签所以我们要根据网页上显示的内容，使用适合的标签，可以优化之前的代码。

编玩边学bodydivdivh3少儿编程/h3ahref=更多gt;gt;/a/divimgsrc=images/banner.jpgalt=bannerp少儿编程教育是通过编程游戏启蒙， 。。。。。。 着重培养孩子的动手能力。/p/div/body代码结构优化

CSS属性

新知教授字体属性区块属性定位属性CSS属性是指，在选择符中要改变的内容列表属性文本属性填充属性

新知教授布局常用样式属性width设置元素(标签)的宽度 如：width:200px;height设置元素(标签)的高度 如：height:100px;background设置元素背景色或者背景图片 如：background:gold;设置元素背景色为金色border设置元素四周的边框 如：border:10pxsolidblack;设置元素四周边框是1像素宽的黑色实线

新知教授border-top:10pxsolidblue;border-left:10pxsolidgreen;border-right:10pxsolidgold;border-bottom:10pxsolidred;border-top设置顶边边框 border-left设置左边边框border-right设置右边边框border-bottom设置底边边框单独设置边框属性

新知教授padding设置元素包含的内容和元素边框的距离，也叫内边距，如：padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边: padding-top、padding-left、padding-right、padding-bottommargin设置元素和外界的距离，也叫外边距如：margin:20px;可分别设置4个边 margin-top、margin-left、margin-right、margin-bottom。

float:right;float:left;新知教授float设置元素浮动，浮动可以让块元素排列在一行。左浮动：左对齐右浮动：右对齐

新知教授color设置文字的颜色如：color:red;font-size设置文字的大小 如：font-size:12px;font-family设置文字的字体 如：font-family:微软雅黑；为了避免中文字不兼容一般写成：font-family:MicrosoftYahei;font-weight设置文字是否加粗 如：font-weight:bold;设置加粗