来谈谈：HTML和CSS做网页实例教程:用em制造倒三角提醒殊效
最新版本html5+css3与2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，该标准规范终于最终制定完成。破洛洛文章简介：HTML和CSS做网页实例教程:用em制造倒三角提醒殊效.
本贴代码完成的是“用em完成倒三角的提醒效果”。
仅供老手参考进修，接待人人提出更多的完成办法。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>em完成倒三角的提醒效果</title>
</head>
<style>
#menu{width:500px;padding:0;margin:40pxauto;list-style-type:none;display:<spanhref="tag.php?name=tab"onclick="tagshow(event)"class="t_tag">tab</span>le;}
#menuli{width:100px;float:left;line-height:30px}
#menua{position:relative;display:block;text-decoration:none;background:#cccccc;width:100px;}
#menuaspan{display:block;font-weight:bold;color:#000;border-style:solid;border-width:0px2px2px0px;border-color:#fff#fff#06a#fff;text-align:center;}
#menuaem{display:none;}
#menua:hover{background:#FF0000;}
#menua:hoverspan{color:#fff;}
#menua:hoverem{display:block;overflow:hidden;border:6pxsolid#06a;border-color:#06a#fff;border-width:6px6px06px;position:absolute;left:50%;top:100%;margin-left:-6px;}
</style>
<body>
<ulid="menu">
<li><ahref="#"><span>MOne</span><em></em></a></li>
<li><ahref="#"><span>MTwo</span><em></em></a></li>
<li><ahref="#"><span>MThree</span><em></em></a></li>
<li><ahref="#"><span>MFour</span><em></em></a></li>
</ul>
</body>
</html>
</p>
你可以轻松地控制页面的布局。 由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
页:
[1]