代码如下：
<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、丰富的页面内容
丰富的内容赋予网页生命力，用户都是喜欢有新鲜、丰富内容的网页，一个受欢迎的网页设计一定是有丰富多彩的内容吸引用户的。
丰富内容的网页对于搜索引擎也是受欢迎的，当搜索引擎每次来到我们网站进行抓取内容的时候，如果我们的网页内容保持新鲜、原创，将会很快进行收录，这对于网站整体优化排名都是有好处的。
html5、css、css3都是一种汇编语言。html5是html语言的一个版本，是设计网页使用的。
HTML5很多用在手机应用平台；
而css是一种网页样式语言，是对网页样式进行调整的
div只是一个排版工具。里面设置样式时，有自动提示代码。
从大的来说。div里面包含了css样式。就这样。
望采纳！！不懂的可以加群；301909232
第一种方法CSS3：-------------------------------------<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择某个区间的元素-CSS3</title>
<style>
ul{ width:50%}
li{ background:#f5f5f5 border-bottom:1px solid #ddd padding:5px 0 }
ul li:nth-child(-n+7){ background:#F90}
ul li:nth-child(-n+3){ background:#f5f5f5}
</style>
</head>
<body>
<h2>设置第4~7个li的背景色为橙色</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</body>
</html>
第二种方法JS：-------------------------------------
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择某个区间的元素-JS</title>
<style>
ul{ width:50%}
li{ background:#f5f5f5 border-bottom:1px solid #ddd padding:5px 0 }
</style>
<script src="
<script>
$(function(){
$("ul li:lt(7)").css("background","#F90")
$("ul li:lt(3)").css("background","#f5f5f5")
})
</script>
</head>
<body>
<h2>设置第4~7个li的背景色为橙色</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</body>
</html>
