More Related Content
Similar to 读书文化Div入门培训 (20)
读书文化Div入门培训
- 1. 从 <TABLE> 到 <DIV> 搜狐总编室 CSS+DIV 网页技术入门培训 这注定是一次 [ 极其无聊 ] 但是 [ 对于工作很有帮助 ] 的培训 ……
- 4. <TABLE> 的概念 <tr> </tr> <tr> </tr> <tr> </tr> <td> </td> <td> </td> <td> </td> <table> </table>
- 5. <DIV> 的概念 <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
- 6. 所以说： 小结 1: <DIV> 相比于 <TABLE> ，除了概念完全不同， 也更灵活，可以实现更强大的网页排版功能！ ( 而且，我公司最彪悍的部门—— CMS—— 都开始强力推广了哦！ )
- 9. <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="http://cul.sohu.com/.../global.css" type="text/css" rel="stylesheet"> <style> … </style> </head> 页面标题 ( 浏览器显示 ) 元记录 ( 面向机器 ) CSS 样式表 ( 本次重点 )
- 10. <body> 区域内容 <body> <table><tr><td>…</td></tr></table> <div class=“ 爷爷辈” > <div class=“ 儿子辈” > <div class=“ 孙子辈” > … </div> </div> </div> </body> DIV 的层次 ( 本次重点 )
- 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>
- 12. 所以说： 小结 2: <DIV> 相比于 <TABLE> ，可以将样式和具体内容分离， 有利于部门和成员之间进行有效的分工，也提高个人的效率！
- 13. CSS 样式 ( 这是最重要的部分！ ) 搜狐总编室 CSS 入门培训
- 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 ( 虚线 ) 颜色
- 16. 字体 / 段落 font-weight: bold; ( 字体粗细；值： bold / normal) font-size: 12px; ( 字号， px= 像素；搜狐使用 12px 和 14px 两种字号 ) line-height: 150%; ( 行距；通常使用 150% ，也可以直接填像素值 ) text-align: left; ( 文字对齐；值： left / right / center)
- 17. 边距设置 字从这里开始写 width height padding margin padding: 10px; ( 四周 ) padding: 10px 15px; ( 上下，左右 ) padding: 10px 15px 20px 25px; ( 上，右，下，左） 注： margin: 0 auto; ( 居中 )
- 18. 漂移 (* 居左 / 居右 ) float: left float: right float: left float: right float: left float: right float: left
- 19. 溢出隐藏 <div> (width: 100px) img (width: 200px) 加上 overflow: hidden 前 <div> (width: 100px) img (width: 200px) 加上 overflow: hidden 后
![从 <TABLE> 到 <DIV> 搜狐总编室 CSS+DIV 网页技术入门培训 这注定是一次 [ 极其无聊 ] 但是 [ 对于工作很有帮助 ] 的培训 ……](https://image.slidesharecdn.com/div-1215593346430148-9/85/Div-1-320.jpg)
