网页设计课程三.pptVIP

L/O/G/O 网页设计与制作 目录 上堂课知识回顾 HTML编写习惯 CSS基础知识 CSS基础属性 网页设计与制作课程三 HTML基本标签 div/div 层 p /p 段落标记 br / 换行标记 ul /ul 无序列表 ol /ol 有序列表 li /li a/a 连接 table 表格 tr 行 td/td 列 /tr /table Text 文字字段 Password 密码域 Radio 单选按钮 Checkbox 复选框 Button 普通按钮 Submit 提交按钮 Reset 重置按钮 Image 图像域 Hidden 隐藏域 File 文件域 input name=“ type= value= / select name= option value= /option /select 下拉列表框 textarea name= /textarea 文本域 网页设计与制作课程三 HTML补充标签 行间对象 div 块状对象 span 标题 h1 h2 h3 h4 h5 h6 内容 p 水平线 hr 保留原始排版方式标记 pre 网页设计与制作课程三 HTML编写习惯 1、属性名称必须小写； 2、属性值必须使用双引号； 3、不允许使用属性缩写； 4、使用id代替name； 5、必须使用结束标签； div id=container!--页面层容器--　　div id=“deader!--页面头部--/div　　div id=“pageBody!--页面主体--　　　　div id=“sidebar“!--侧边栏--/div　　　　div id=“mainBody“!--主体内容--/div　　/div　　div id=“footer!--页面底部--/div/div /*基本信息*/body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/#container {width:100%} /*页面头部*/#deader {width:800px;margin:0 auto;height:100px;background:#FFCC99} /*页面主体*/#pageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00} /*页面底部*/#footer {width:800px;margin:0 auto;height:50px;background:#00FFFF} 网页设计与制作课程三 HTML布局 网页设计与制作课程三 CSS语法结构 body { font:12px Tahoma; margin:0px; text-align:center; background:#FFF; } Selector { Property:value;} 选择符 { 属性:值;} CSS与XHTML的接口 id 唯一标示 class 可以重复使用 body 对类型进行定义 注意事项： 1、所有属性都必须写在{}内 2、除最后一个属性定义， 每条语句都必须以;结束 3、分清id和class的写法 网页设计与制作课程三 选择符的类型 Id选择符 Class选择符 类型选择符 群组选择符 包含选择符 组合选择符 伪类及伪对象 通配选择符 # footer {width:100%;} . footer {width:100%;} body{width:100%;} body, # footer, {width:100%;} body # footer {width:100%;} body # footer ,.footer {width:100%;} a:hover{background-color:#333;} *{width:100%;} 网页设计与制作课程三 CSS的引用 优先权 写法优先权 行间样式表 内部样式表 外部样式表 选择符优先权 id优先于class 抢先优先权 !important 网页设计与制作课程三