div+css网站网页制作文档.pptVIP

网页进阶 1.XHTML 由于HTML结构混乱，条理不清，样式与结构没有分离，所以符合Web标准的网页结构推荐使用XHTML. XHTML是HTML的升级版 XHTML是侧重点在与对网页的结构设计，其语法严谨，有语义，而页面样式部分（表现部分）由CSS负责 2 CSS 1 行间样式法 p style=“width:200px;height:300px” 信息内容/p 2内部样式 style type=“text/css” p{ width:200px; height:300px; } /sytle 3外部样式 line rel=“stylesheet” rev=“stylesheeet” href=“index.css” type=“text/css”/ Css的属性和选择符 选择符{ 属性1:值1； 属性2：值2； } 五种选择符 1 标签选择符 对XHTML中已有的标签作选择符 Body{ backgroung-color:#000000; } 五种选择符 2 ID选择符 对XHTML标签中设置ID 后，可以通过ID的不同名称设置多个标签独一无二的样式。 div id=“top”/top #top{ color:#000000; } 五种选择符 3 class选择符 多个标签使用统一样式。 div class=“banner”/div .banner{ backgroung-color:#000000; } 五种选择符 4 伪类选择符 是一组CSS预定义好的类和对象，无需进行id和class属性的神明。 a.visited{ text-align:left; } 表示超链接被访问过后的样式。 五种选择符 5 通配选择符 *{ backgroung-color:#000000; }!—代表所有文件-- *.mp3{ }代表所有mp3文件 3 Div+css 目前最为流行的页面布局方式 DIV Div是一种块状元素，最大的特性是没有任何特性，只为一个容器。 在页面中的存在方式div/div 页面布局（控制宽 高 内边距 外边距） #up { height: 200px; width: 300px; } #down { padding-top:2px; margin:2px 3px 5px 1px; background-color: #ECE9D8; height: 100px; width: 98%; } div id=“up” div id=“down”/div /div Div中可以相互嵌套 div浮动 Float浮动属性 可以使多个块状元素并列与一行 值有：left,right,none left:左边浮动 right:右边浮动 none:无效果（默认值） Ps:想要多个DIV并在一行必须满足DIV宽度之和小于父类容器宽度 Clear属性 清除浮动属性 值：none,left,right,both 网页布局实例 导航条布局 Css盒模型 Css定位 Position属性 值: static(默认) absolute(绝对定位){通过top left属性来定位} fixed(不会随着滚动条滚动而改变位置) * *