Cms and HTML

1. 优酷 CMS>HTML 碎片 产品团队 09-10-10

3. CMS 系统

4. HTML 碎片 HTML + CSS

11. HTML & CSS p( 块级 ) <p style=&quot;font-size:12px; width:100px;line-height:22px;text-indent:24px;&quot;> 我是 帅气的大段文字我是帅气的大段文字我是帅气的大段文字我是帅气的大段字我是帅气的 大段文字我是帅气的大段文字我是帅气的大段文字 </p> em , strong <p> 文字 <em> 强调 </em> 字文字 <strong> 重点突出 </strong> 文字 </p>

12. HTML & CSS a( 链接标签 ) <a > 优酷网 </a> href=&quot;www.youku.com&quot; target=&quot;_blank&quot; img <a href=&quot;www.youku.com&quot; target=&quot;_blank&quot; style=&quot;color:#FF0000;font-size:14px;text-decoration:none;&quot; > 优酷网 </a> <img src=&quot;http://static.youku.com/v1.0.0464/index/img/youkulogo.gif&quot; /> <img src=&quot;http://static.youku.com/v1.0.0464/index/img/youkulogo.gif&quot; width=&quot;130&quot; height=&quot;35&quot; title=&quot; 优酷网 &quot; />

13. HTML & CSS ul / ol <ul> <li> 自行车 </li> <li> 自行车 </li> <li> 自行车 </li> <li> 自行车 </li> <li> 自行车 </li> </ul> <ol> <li> 第一名 </li> <li> 第二名 </li> <li> 第三名 </li> <li> 第四名 </li> <li> 第五名 </li> </o> ul 常用于新闻 , 文章列表 ol 常用于排行榜

14. HTML & CSS h1 ~ h6 <h1> 我是文章标题 1</h1> <h2> 我是文章标题 1</h2> <h3> 我是文章标题 1</h3> <h4> 我是文章标题 1</h4> <h5> 我是文章标题 1</h5> <h6> 我是文章标题 1</h6>

15. HTML & CSS <br /> <p> 一段华丽的文字被 <br /> 换行了 </p> &nbsp; <p> 一段华丽的文字被 <br />&nbsp;&nbsp;&nbsp;&nbsp; 换行了 </p>

16. HTML & CSS table <table class=&quot;mod-tags&quot; width=&quot;300&quot; border=&quot;0&quot;> <tr> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 动漫 </a></td> </tr> </table> 一行一列 一行两列 <table class=&quot;mod-tags&quot; width=&quot;300&quot; border=“0&quot;> <tr> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 动漫 </a></td> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 动漫 </a></td> </tr> </table> 两行一列 <table class=&quot;mod-tags&quot; width=&quot;300&quot; border=&quot;0&quot;> <tr> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 动漫 </a></td> </tr> <tr> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 动漫 </a></td> </tr> </table> 两行两列 <table class=&quot;mod-tags&quot; width=&quot;300&quot; border=“0&quot;> <tr> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 动漫 </a></td> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 动漫 </a></td> </tr> <tr> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 动漫 </a></td> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 动漫 </a></td> </tr> </table>

17. HTML & CSS table <table class=&quot;mod-tags&quot; width=&quot;300&quot; border=&quot;0&quot;> <tr> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 动漫 </a></td> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 死神 </a></td> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 火影忍者 </a></td> </tr> <tr> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 海贼王 </a></td> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 守护甜心 </a></td> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 犬夜叉 </a></td> </tr> <tr> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 动漫前线 </a></td> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 新番 </a></td> <td><a href=&quot;#&quot; target=&quot;_blank&quot;> 星之愿 </a></td> </tr> </table>

18. 常见 CMS 结构 HTML 部分： <div class=&quot;banners&quot;> <div class=&quot;b&quot;><a href=&quot;http://c.youku.com/qingchun&quot; target=&quot;_blank&quot;><img src=&quot;http://res.youku.com/100120090512164108F230BBFD187F53E76F90A00C000494C3&quot; /></a></div> <div class=&quot;b&quot;><a href=&quot;http://c.youku.com/tuanzhang&quot; target=&quot;_blank&quot;><img src=&quot;http://res.youku.com/100120090512164300754CE7C118D8C99E0A3EAD3490368463&quot; /></a></div> </div> CSS 部分： .banners .b{margin:10px 0;}

19. 常见 CMS 结构 HTML 部分： <div class=“intro”> <a href=“ 链接地址” target=“_blank”><img width=“280” height=“200” src=“ 图片地址 &quot;></a> <p> 文字介绍 </p> <span class=“more”><a href=“ 链接地址” target=“_blank”> 更多… </a></span> </div> CSS 部分： .Intro img{text-align:center;margin:5px 0;} .intro p {text-indent:16px;} .more a {float:right;}

20. 常见 CMS 结构 HTML 部分： <div class=&quot;person-intro&quot;> <div class=&quot;person-info&quot;> <h3> 萧亚轩 </h3> <img src=“ 图片地址 &quot; width=&quot;110&quot; height=&quot;131&quot; title=&quot; 萧亚轩 &quot; /> <p> 今年再度斥资打造独一无二新舞台，视觉和听觉同步引领时尚新潮流，以 [ 闪亮钻石糖 , 快 !</p> </div> <div class=&quot;person-links&quot;> <ul> <li>• <a href=“ 链接地址” title=“ 萧亚轩新优酷首发 &quot; target=&quot;_blank&quot;> 萧亚轩新专首波闪亮主打 < 闪闪惹人爱 > 优酷首发 </a></li> <li>• <a href=“ 链接地址” title=“ 罗志祥、萧亚轩败给你 &quot; target=&quot;_blank&quot;> 罗志祥、萧亚轩最新甜蜜对唱单曲败给你 </a></li> </ul> </div> </div> CSS 部分： .person-intro{width:280px;} .person-info{position:relative;} .person-info h3{font-weight:bold;font-size:14px;margin:3px 0;} .person-info img{float:right;position:relative;top:-20px;left:3px;} .person-info p{font-size:12px;width:165px;line-height:18px;} .person-links{clear:both;} .person-links a{font-size:12px;}

23. 常用学习手册 在线学习 HTML http://www.w3school.com.cn/html/index.asp http://www.w3pop.com/learn/index/f/1/c/7/ 在线学习 CSS http://www.w3school.com.cn/css/index.asp http://www.w3pop.com/learn/index/f/1/c/9/ 有用的帖子 http://bbs.blueidea.com/viewthread.php?tid=2524735 附件里的文件

24. 多加练习多实践

25. The End …

26. 有问必答 Q & A