2.也可以直接用背景图片,但是鼠标点击某些区域会出现点击错误,降低用户体验。
但是前不久赛博朋克2077发售之后想复写那个按钮样式,机缘巧合发现了一个新属性。
clip-path属性将所描绘区域外的部分进行裁切,使其未展示部分鼠标移入不会有效果【效果如下图:这里用cursor:wait属性方便展示】
缺点:添加border属性,扣除部分边框无法展示【建议配合ui切图使用】
PC端和移动端浏览器支持:如下图【图片来源网站: https://css-tricks.com/almanac/properties/c/clip-path/ 】
Tab菜单比较简单的方法是直接使用dreamweaver cs3的spry制作,其他方法制作难度比较大,不管哪种方法,必须要使用javascript调用。
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">选项卡 1</label>
<div id="tab-content1" class="tab-content">
<p>选项卡内容 1</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">选项卡 2</label>
<div id="tab-content2" class="tab-content">
<p>选项卡内容 2</p>
</div>
</li>
</ul>
1.设置class或者id,加以区分2.比如说上级菜单是div,如下:
<div>
<table></table>
<table></table>
</div>
那么,在css中第一个table可以用“div>table{ }“来写