读书文化Div入门培训

1,469 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,469
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
18
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

读书文化Div入门培训

  1. 1. 从 <TABLE> 到 <DIV> 搜狐总编室 CSS+DIV 网页技术入门培训 这注定是一次 [ 极其无聊 ] 但是 [ 对于工作很有帮助 ] 的培训 ……
  2. 3. 为什么转向 <DIV> ? 搜狐总编室 CSS 入门培训
  3. 4. <TABLE> 的概念 <tr> </tr> <tr> </tr> <tr> </tr> <td> </td> <td> </td> <td> </td> <table> </table>
  4. 5. <DIV> 的概念 <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
  5. 6. 所以说: 小结 1: <DIV> 相比于 <TABLE> ,除了概念完全不同, 也更灵活,可以实现更强大的网页排版功能! ( 而且,我公司最彪悍的部门—— CMS—— 都开始强力推广了哦! )
  6. 7. HTML 基本结构 搜狐总编室 CSS 入门培训
  7. 8. 页面基本结构 <html> <head> ... </head> <body> ... </body> </html> 页面头部 ( 不可见 ) 页面本体 ( 可见 )
  8. 9. <head> 区域内容 <head> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=GBK&quot; /> <meta name=&quot;description&quot; content=&quot; 搜狐文化频道 ,&quot; /> <meta name=&quot;keywords&quot; content=&quot; 文化 , 文化频道 ,...&quot; /> <meta name=&quot;robots&quot; content=&quot;all&quot; /> <title> 文化频道 - 搜狐 </title> <link href=&quot;http://cul.sohu.com/.../global.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot;> <style> … </style> </head> 页面标题 ( 浏览器显示 ) 元记录 ( 面向机器 ) CSS 样式表 ( 本次重点 )
  9. 10. <body> 区域内容 <body> <table><tr><td>…</td></tr></table> <div class=“ 爷爷辈” > <div class=“ 儿子辈” > <div class=“ 孙子辈” > … </div> </div> </div> </body> DIV 的层次 ( 本次重点 )
  10. 11. <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>
  11. 12. 所以说: 小结 2: <DIV> 相比于 <TABLE> ,可以将样式和具体内容分离, 有利于部门和成员之间进行有效的分工,也提高个人的效率!
  12. 13. CSS 样式 ( 这是最重要的部分! ) 搜狐总编室 CSS 入门培训
  13. 14. 长和宽 <div></div> width height width: 30px; ( 像素控制 ) width: 90%; ( 百分比控制 )
  14. 15. 背景 / 边框 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 ( 虚线 ) 颜色
  15. 16. 字体 / 段落 font-weight: bold; ( 字体粗细;值: bold / normal) font-size: 12px; ( 字号, px= 像素;搜狐使用 12px 和 14px 两种字号 ) line-height: 150%; ( 行距;通常使用 150% ,也可以直接填像素值 ) text-align: left; ( 文字对齐;值: left / right / center)
  16. 17. 边距设置 字从这里开始写 width height padding margin padding: 10px; ( 四周 ) padding: 10px 15px; ( 上下,左右 ) padding: 10px 15px 20px 25px; ( 上,右,下,左) 注: margin: 0 auto; ( 居中 )
  17. 18. 漂移 (* 居左 / 居右 ) float: left float: right float: left float: right float: left float: right float: left
  18. 19. 溢出隐藏 <div> (width: 100px) img (width: 200px) 加上 overflow: hidden 前 <div> (width: 100px) img (width: 200px) 加上 overflow: hidden 后
  19. 20. 所以说: 小结 3: <DIV> 相比于 <TABLE> ,真是 newbility !
  20. 21. 具体应用案例 搜狐总编室 CSS 入门培训
  21. 22. 一个很简单的例子 http://book.sohu.com/frag/219718583/94595_219718583.inc
  22. 23. 搜狐 CMS / 统一 DIV 模板 http://cms4.sohu.com/ <ul><li>实际操作一下 </li></ul><ul><li>设置背景色,便于识别 div </li></ul><ul><li>设置 div 的左中右,用边框区别 </li></ul>
  23. 24. 所以说: 小结 4: 当然,要成为一个熟练工,还是需要多参与实践!!
  24. 25. 实用小软件 搜狐总编室 CSS 入门培训
  25. 26. EditPlus3 新建文件 > 将代码拷入编辑区 > 菜单:文档 (D) > 文件类型 > 更改文件类型 > HTML

×