读书文化Div入门培训.pptVIP

从 TABLE 到 DIV 搜狐总编室CSS+DIV网页技术入门培训 这注定是一次 [极其无聊] 但是 [对于工作很有帮助] 的培训 …… 为什么转向DIV？ 搜狐总编室CSS入门培训 TABLE的概念 tr /tr tr /tr tr /tr td /td td /td td /td table /table DIV的概念 div /div div /div div /div div /div div /div div /div div /div div /div div /div div /div 所以说： 小结1: DIV相比于TABLE，除了概念完全不同， 也更灵活，可以实现更强大的网页排版功能！ (而且，我公司最彪悍的部门——CMS——都开始强力推广了哦！) HTML基本结构 搜狐总编室CSS入门培训 页面基本结构 html head ... /head body ... /body /html 页面头部(不可见) 页面本体 (可见) head区域内容 head meta http-equiv=content-type content=text/html; charset=GBK / meta name=description content=搜狐文化频道, / meta name=keywords content=文化,文化频道,... / meta name=robots content=all / title文化频道-搜狐/title link href=/.../global.css type=text/css rel=stylesheet style … /style /head 页面标题(浏览器显示) 元记录 (面向机器) CSS样式表(本次重点) body区域内容 body tabletrtd…/td/tr/table div class=“爷爷辈” div class=“儿子辈” div class=“孙子辈” … /div /div /div /body DIV的层次 (本次重点) head控制着body head style .class_one {width: 220px; height: 440px; background: #666} #id_one {width: 440px; height: 220px; background: #999} /style /head body div class=“class_one”真是一次/div div id=“id_one”幸福的培训啊！/div /body 所以说： 小结2: DIV相比于TABLE，可以将样式和具体内容分离， 有利于部门和成员之间进行有效的分工，也提高个人的效率！ CSS样式 (这是最重要的部分！) 搜狐总编室CSS入门培训 长和宽 div/div width height width: 30px; (像素控制) width: 90%; (百分比控制) 背景/边框 background: #FFCC00 url(http://.../123.gif) top left repeat-x; 背景图片URL 横竖定位 top/bottom; left/right/ center. 重复 repeat-x / repeat-y / no-repeat. 背景颜色 border: 1px solid #333333; 像素 边框样式 值：solid (实线) / dotted (虚线) 颜色 字体/段落 font-weight: bold; (字体粗细；值：bold / normal) font-size: 12px; (字号，px=像素；搜狐使用12px和14px两种字号) line-height: 150%; (行距；通常使用150%，也可以直接填像素值) text-align: left; (文字对齐；值：left / right / center) 边距设置 字从这里开始写 width height padding margin padding: 10px; (四周) padding: 10px 15px; (上下，左右) padding: 10px 15px 20px 25px; (上，右，下，左） 注： margin: 0 auto; (居中) 漂移 (*居左/居右) float: left float: right float: left float: right float: left float: right float: left 溢出隐藏 div (w