CSS教程之HTML和CSS做网页实例教程:边框1像素缺口鼠标变色
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等破洛洛文章简介：鼠标挪动至按钮时变色，及边框交点处的1个像素缺口.
本贴代码完成的是鼠标挪动至按钮时变色，及边框交点处的1个像素缺口（视觉上营建一种转角效果）
仅供老手参考进修，接待人人提出更多的完成办法。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8">
<title>googleanalyticsbuttons</title>
<styletype="text/css">/*defaultstuff*/
body{padding:20px;font-family:arial;text-align:center;}p,li{font-size:12px;line-height:18px;}h3{margin-bottom:6px;}
.examplesGoHere{text-align:left;margin:0auto;}
.letsGiveItAFixedWidthOf200Pixels{width:200px;}ul{list-style:none;margin-left:0;padding-left:0;margin-top:0;}ulli{margin-bottom:8px;margin-left:0;padding-left:0;}
/*----notchedeffectforlinksintheunorderedlist------*/
.notchedListItemsa{display:block;border:solid#666;border-width:01px;text-decoration:none;outline:none;color:#000;background:#e4e4e4;}
.notchedListItemsab{display:block;position:relative;top:-1px;left:0;border:solid#666;border-width:1px00;font-weight:normal;}.notchedListItemsabb{border-width:001px;top:2px;padding:1px6px;}
.notchedListItemsa:hover,.notchedListItemsa:hoverb{background:#666;color:white;}
.feature{border:solid#647aae;border-width:01px;background:#b0c0e6;}
.featurediv{position:relative;top:-1px;left:0;border:solid#647aae;border-width:1px00;}.featuredivdiv{top:2px;border-width:001px;padding:0px6px;}
</style>
</head>
<body>
<divclass="examplesGoHereletsGiveItAFixedWidthOf200Pixels">
<h3>Alist</h3>
<ulclass="notchedListItems">
<li><ahref="#"><b><b>About</b></b></a></li>
<li><ahref="#"><b><b>Contact</b></b></a></li>
<li><ahref="#"><b><b>Cssrain</b></b></a></li>
</ul>
<h3>Adiv</h3>
<divclass="feature">
<div>
<div>
<p>Thisisanexampleofthenotchedcornersasappliedtoadivcontainer.</p>
<p>Thisisanexampleofthenotchedcornersasappliedtoadivcontainer.</p>
<p>Thisisanexampleofthenotchedcornersasappliedtoadivcontainer.</p>
</div>
</div>
</div>
<ulclass="notchedListItems">
<li>
<ahref="#"><b><b>CSS计划</b></b></a>
</li>
</ul>
</div>
<!--end.examplesGoHere-->
</body>
</html>
</p>
这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+css+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 学Dreamweaver技术的过程其实是一个增加信心的过程。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
页:
[1]