【2017年整理】HTML培训教程(史上最全的图文并茂教程).ppt

什么是盒子属性 盒子属性： margin（外边距/边界） border（边框） padding（内边距/填充 ） 各属性又分为 四个方向 margin-right 右边界 margin-left 左边界 margin-top 上边界 margin-bottom 下边界 margin border padding margin外边距 可统一设置或四边分开设置 margin属性 margin margin-top margin-right margin-bottom margin-left margin-right 右边界 margin-left 左边界 margin-top 上边界 margin-bottom 下边界 margin：1px，2px，3px，4px; margin：1px，2px; margin：0px auto ; margin-left:1px; 分别代表什么含义？ border边框 border属性 border-color border-width border-style border-top border-right border-bottom border-left border border-left … 修饰属性 四个方向 缩写形式 border 每个边都有style、color、with属性，四个边可以一次设置，也可以分别设置 border-style: none; border: 1px solid red; border-right: 5px dotted blue; 分别代表什么含义？ 使用border属性修饰表单 style type=text/css .textBorder { border-width:1px; border-style:solid; } /style /head body form action= method=post p名字： input name=fname type=text class=textBorder //p p密码： input name=pass type=password class=textBorder size=21 /p 细边框的样式 padding内边距 padding属性 padding padding-top padding-right padding-bottom padding-left padding-left : 5px; padding: 5px 10px 20px 40px padding: 5px 10px 分别代表什么含义？ 四个边可以一次设置，也可以分别设置 padding 元素的宽高及实际占位 元素的实际占位（实际宽、高） 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 盒子宽度 = width属性 + 左右填充宽度 + 左右边框宽度 height: 40px border-width-top: 20px margin-top: 10px 右图图片的实际的高度是多少？ padding-top: 5px 使用盒子属性布局元素 上外边距30px 下填充40px 左右外边距：水平居中 左填充80px 5px宽的边框 如何实现如下贵美logo图片的布局？ 图片背景色：#ff7300 页面背景色：#ccc 使用盒子属性布局元素 style type=text/css body { margin:0px;padding:0px; background:#ccc; } #logo { width:380px; border:5px solid #666; padding:10px 20px 40px 80px; background:#ff7300; margin:30px auto; //水平居中 } /style body div id=logoimg src=images/logo.jpg alt=logo/ /div /body 设置页面内容（body）的背景和居中效果 “贵美商城”logo图片的布局 首先组织HTML结构，再写CSS进行布局或美化 使用盒子属性实现DIV+CSS布局 如何实现注册页面的布局？ main：主体部分 footer：底部部分 header：顶部 使用盒子属性实现DIV+CSS布局 实现步骤 1、分析页面的分块结构，形成HTML组织结构 为了控制整个页面的居中，添加一个大容器：container