代码如下:
<h1>CSS3滑入/滑出效果</h1>
<div id="volet_clos">
<div id="volet">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quisquam tempora quaerat dolores molestias reiciendis .</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<a href="#volet" aria-hidden="true" class="ouvrir">滑出</a>
<a href="#volet_clos" aria-hidden="true" class="fermer">滑入</a>
</div>
</div>
扩展资料
web网页设计的重要注意事项:
1、网页版面设计合理性
网页设计过程中,一定要留意网页版式的合理性,通过合理的网页布局让用户浏览起来比较顺畅舒适,注意网页版式的设计,不要块块之间过于冗繁,显示拥挤,要有主次分明,注意简练大方。
2、运用舒缓的色彩设计
在网页色彩搭配上,采用淡色系进行页面设计,特别要注意颜色的分配,总体颜色不宜超过三种颜色,可以确定一个主颜色再加上辅助颜色进行点缀搭配,这样整体设计展现出来比较调和、舒缓,用户浏览页面也不会导致眼花缭乱,眼睛疲劳。
3、丰富的页面内容
丰富的内容赋予网页生命力,用户都是喜欢有新鲜、丰富内容的网页,一个受欢迎的网页设计一定是有丰富多彩的内容吸引用户的。
丰富内容的网页对于搜索引擎也是受欢迎的,当搜索引擎每次来到我们网站进行抓取内容的时候,如果我们的网页内容保持新鲜、原创,将会很快进行收录,这对于网站整体优化排名都是有好处的。
完全可以哦,滑动式的利用css的hover,也就是纯css菜单的原理,
点击式的利用的是锚点的原理。
实例如下:
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>纯CSS实现的Tab</title>
<style>
*{ margin:0 padding:0}
#main{width:500px margin:100px auto}
#title>a{ float:left border:1px solid #000 padding:2px 4px display:block text-decoration:none color:#000}
#content{ width:500px height:300px border:1px solid #000 overflow:hidden}
#content>div{float:left padding:2px 4px width:500px height:300px}
#a1:hover #a2>#tab2{ display:block}
</style>
</head>
<body>
<div id="main">
<div id="title">
<a href="#tab1">tab1title</a>
<a href="#tab2">tab2title</a>
<a href="#tab3">tab3title</a>
<a href="#tab4">tab4title</a>
<div style="clear:both"></div>
</div>
<div id="content">
<div id="tab1"> tab1 content </div>
<div id="tab2"> tab2 content </div>
<div id="tab3"> tab3 content </div>
<div id="tab4"> tab4 content </div>
<div style="clear:both"></div>
</div>
</div>
</body>
</html>