Weitere ähnliche Inhalte
Ähnlich wie Cms and Html (20)
Cms and Html
- 11. HTML & CSS p( 块级 ) <p style="font-size:12px; width:100px;line-height:22px;text-indent:24px;"> 我是 帅气的大段文字我是帅气的大段文字我是帅气的大段文字我是帅气的大段字我是帅气的 大段文字我是帅气的大段文字我是帅气的大段文字 </p> em , strong <p> 文字 <em> 强调 </em> 字文字 <strong> 重点突出 </strong> 文字 </p>
- 12. HTML & CSS a( 链接标签 ) <a > 优酷网 </a> href="www.youku.com" target="_blank" img <a href="www.youku.com" target="_blank" style="color:#FF0000;font-size:14px;text-decoration:none;" > 优酷网 </a> <img src="http://static.youku.com/v1.0.0464/index/img/youkulogo.gif" /> <img src="http://static.youku.com/v1.0.0464/index/img/youkulogo.gif" width="130" height="35" title=" 优酷网 " />
- 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> <p> 一段华丽的文字被 <br /> 换行了 </p>
- 16. HTML & CSS table <table class="mod-tags" width="300" border="0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> </tr> </table> 一行一列 一行两列 <table class="mod-tags" width="300" border=“0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> <td><a href="#" target="_blank"> 动漫 </a></td> </tr> </table> 两行一列 <table class="mod-tags" width="300" border="0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> </tr> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> </tr> </table> 两行两列 <table class="mod-tags" width="300" border=“0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> <td><a href="#" target="_blank"> 动漫 </a></td> </tr> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> <td><a href="#" target="_blank"> 动漫 </a></td> </tr> </table>
- 17. HTML & CSS table <table class="mod-tags" width="300" border="0"> <tr> <td><a href="#" target="_blank"> 动漫 </a></td> <td><a href="#" target="_blank"> 死神 </a></td> <td><a href="#" target="_blank"> 火影忍者 </a></td> </tr> <tr> <td><a href="#" target="_blank"> 海贼王 </a></td> <td><a href="#" target="_blank"> 守护甜心 </a></td> <td><a href="#" target="_blank"> 犬夜叉 </a></td> </tr> <tr> <td><a href="#" target="_blank"> 动漫前线 </a></td> <td><a href="#" target="_blank"> 新番 </a></td> <td><a href="#" target="_blank"> 星之愿 </a></td> </tr> </table>
- 18. 常见 CMS 结构 HTML 部分: <div class="banners"> <div class="b"><a href="http://c.youku.com/qingchun" target="_blank"><img src="http://res.youku.com/100120090512164108F230BBFD187F53E76F90A00C000494C3" /></a></div> <div class="b"><a href="http://c.youku.com/tuanzhang" target="_blank"><img src="http://res.youku.com/100120090512164300754CE7C118D8C99E0A3EAD3490368463" /></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=“ 图片地址 "></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="person-intro"> <div class="person-info"> <h3> 萧亚轩 </h3> <img src=“ 图片地址 " width="110" height="131" title=" 萧亚轩 " /> <p> 今年再度斥资打造独一无二新舞台,视觉和听觉同步引领时尚新潮流,以 [ 闪亮钻石糖 , 快 !</p> </div> <div class="person-links"> <ul> <li>• <a href=“ 链接地址” title=“ 萧亚轩新优酷首发 " target="_blank"> 萧亚轩新专首波闪亮主打 < 闪闪惹人爱 > 优酷首发 </a></li> <li>• <a href=“ 链接地址” title=“ 罗志祥、萧亚轩败给你 " target="_blank"> 罗志祥、萧亚轩最新甜蜜对唱单曲败给你 </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 附件里的文件
Hinweis der Redaktion
- 1 , CMS 频道专题数量繁多, HTML 碎片分布零散,维护修改比较频繁。 2 ,需求个性化,表现形式多样,很难提炼出公用的模块。并且某些模块不大符合 CMS 的要求。页面需要兼容市场上多种主流的浏览器。 3 ,专题内简单的 HTML 碎片
- 可用 <br /> 和 &nbsp; 来对文档内容进行排版
- 1 ,图片尺寸超过 CMS 规定宽度,图片文件大小过大! 2 , html 标签的规则 <div></div> 自闭和标签 <br /> <img /> 3, 各个浏览器版本上线时需要测试! 4 ,使用时候直接复制控件里的代码!