简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

Partagez un résumé très complet des points de connaissances HTML et CSS

Y2J
Libérer： 2017-05-22 10:18:43
original
1943 Les gens l'ont consulté

1. Les bases du html+css
1-1
La relation entre Html et CSS
Apprendre les technologies de base du développement web front-end nécessite de maîtriser : les langages HTML, CSS et JavaScript. Jetons un coup d'œil à ce que ces trois technologies servent à réaliser :
1. HTML est le support du contenu Web. Le contenu est l'information que les créateurs de pages Web mettent sur la page pour que les utilisateurs puissent la parcourir et peut inclure du texte, des images, des vidéos, etc.
2. Le style CSS est la performance. C'est comme un manteau pour une page Web. Par exemple, la police et la couleur du titre changent, ou l'ajout d'images d'arrière-plan, de bordures, etc. au titre. Toutes ces choses utilisées pour modifier l’apparence du contenu sont appelées présentations.
3. JavaScript est utilisé pour implémenter des effets spéciaux sur les pages Web. Par exemple : le menu déroulant apparaît lorsque la souris passe dessus. Ou bien la couleur de fond du tableau change lorsque la souris glisse dessus. Il y a aussi une rotation d'actualités brûlantes (images d'actualité). On comprend que s'il y a des animations, celles interactives sont généralement implémentées à l'aide de JavaScript. 1-2
1,
balise HTML n'est pas sensible à la casse,

et

sont les mêmes, mais les minuscules sont recommandées car la plupart des programmeurs utilisent les minuscules comme autorisation.
1-3
Un fichier HTML a sa propre structure fixe. 

<html>
    <head>...</head>
    <body>...</body>
</html>
Copier après la connexion
Explication du code :

1. est appelé la balise racine, et toutes les balises de page Web sont en 2. La balise est utilisée pour définir l'en-tête du document, qui est un conteneur pour tous les éléments d'en-tête. Les éléments d'en-tête incluent , <script>, <style>, <link>, <meta> et d'autres balises d'en-tête seront présentées en détail dans la section suivante. <br/>3. Le contenu entre les balises <body> et </body> est le contenu principal de la page Web, tel que <h1>, <p>, <a>, <img> autre balise de contenu de page Web, le contenu de la balise ici sera affiché dans le navigateur. <br/><br/>1-4<br/>1, les balises suivantes peuvent être utilisées dans la section head : <br/><br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head> <title>...</title> <meta> <link> <style>...</style> <script>...</script> </head></pre><div class="contentsignin">Copier après la connexion</div></div><p>2，代码<a href="http://www.php.cn/code/8105.html" target="_blank">注释</a>不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。<br/>语法：<br/><!--注释文字 --><br/>3，<a href="http://www.php.cn/code/463.html" target="_blank">CSS注释代码</a><br/>就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用<!--注释语句-->)<br/><br/>1-5<br/>1，<a href="http://www.php.cn/html/html-yuyihua.html" target="_blank">语义化</a>：说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）比如，网页上的文章的标题就得用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。<br/>2，语义化的作用<br/>1）. 更容易被搜<a href="http://www.php.cn/code/9822.html" target="_blank">索引</a>擎收录。<br/>2）. 更容易让屏幕阅读器读出网页内容。<br/><br/>二，认识标签（第一部分）<br/>2-1<br/>如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。<br/>语法：<br/><p>段落文本</p><br/><br/>2-2<br/><hx>标签来制作文章的标题。<br/>标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。<br/>语法：<br/><hx>标题文本</hx> (x为1-6)<br/>文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们<br/><br/>2-3<br/>有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。<br/> 但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调<br/><br/>2-4<br/><em>、<strong>、<span>的区别：<br/>1. <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。<br/>2. <span>标签是没有语义的，它的作用就是为了设置单独的样式用的，把一段话圈起来，然后用css设置样式。<br/><br/>2-5<br/>q标签，短文本<a href="http://www.php.cn/wiki/231.html" target="_blank">引用</a><br/> 比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。<br/>语法：<br/><q>引用文本</q><br/>1，注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。<br/>2，注意这里用<q>标签的真正关键点不是它的默认样式双引号（如果这样我们不如自己在键盘上输入双引号就行了），而是它的语义：引用别人的话<br/><br/>blockquote标签，长文本引用<br/> <blockquote>的作用也是引用别人的文本。但它是对长文本的引用<br/><q>标签是对简短文本的引用，比如说引用一句话就用到<q>标签。<br/>语法:<br/><blockquote>引用文本</blockquote><br/>浏览器对<blockquote>标签的解析是缩进样式<br/><br/>2-6<br/>换行标签<br/><br/><br/>标签作用相当于word文档中的回车。<br/>分割线标签<hr/><br/><hr/>标签和<br/>标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。<br/><hr/>标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。<br/><br/>2-7<br/>html<a href="http://www.php.cn/wiki/88.html" target="_blank">特殊字符</a><br/>空格： (;分号必不可少)<br/><br/>2-8<br/>address标签，为网页加入地址信息<br/>语法：<br/><address>地址信息</address><br/>如：<br/><address>北京市西城区德外大街10号</address><br/> 在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用css样式来修改它<address>标签的默认样式<br/><br/>2-9<br/>在介绍语言技术的网站中，必免不了在网页中显示一些计算机专业的<a href="http://www.php.cn/wiki/44.html" target="_blank">编程</a>代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子：<br/><code>var i=i+300;</code><br/>语法：<br/><code>代码语言</code><br/>注意：在文章中一般如果要插入多行代码时不能使用<code>标签，如果是多行代码，可以使用<pre class="brush:php;toolbar:false">标签。<br/><br/><pre class="brush:php;toolbar:false"> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。如果用以前的方法，回车需要输入<br>签，空格需要输入 。<br/>注意：<pre class="brush:php;toolbar:false"> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre class="brush:php;toolbar:false">标签的一个常见应用就是用来展示计算机的源代码。<br/><br/>三，认识标签（第二部分）<br/>3-1<br/>1，无序列表<br/>ul-li是没有前后顺序的信息列表。<br/>语法：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><ul> <li>信息</li> <li>信息</li> ...... </ul> 举例： <ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul></pre><div class="contentsignin">Copier après la connexion</div></div><p>ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点<br/><br/>2,有序列表<br/>语法：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><ol> <li>信息</li> <li>信息</li> ...... </ol></pre><div class="contentsignin">Copier après la connexion</div></div><p>举例：<br/>下面是一个热点课程下载排行榜：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol> <ol></pre><div class="contentsignin">Copier après la connexion</div></div><p>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开<br/><br/>3-2<br/><p>容器标签<br/>在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<p>标签中，这个<p>标签的作用就相当于一个容器。<br/>语法：<br/><p>…</p><br/>确定逻辑部分：<br/>什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<p>标签作为容器<br/>注释：<p> 是一个块级元素，也就是说，浏览器通常会在 p 元素前后放置一个换行符。<br/><br/>3-3<br/>创建表格的五个元素：<br/>table、tbody、tr、th、td<br/>1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。<br/>2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码<a href="http://www.php.cn/code/6852.html" target="_blank">编辑器</a>中的代码。（这个标签基本上不怎么用了）<br/>3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。<br/>4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...<td/>，说明一行中就有几列。<br/>5、<th>…</th>：表格的头部的一个单元格，表格表头。<br/>6、表格中列的个数，取决于一行中数据单元格的个数。<br/><br/>表格还是需要添加一些标签进行优化，可以添加标题和<a href="http://www.php.cn/java/java-zhaiyao.html" target="_blank">摘要</a><br/><table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量"><br/> <caption>2012年到2013年库存记录</caption><br/><br/>3-4<br/>1，使用<a>标签，链接到别一个页面<br/>使用<a>标签可实现<a href="http://www.php.cn/code/6537.html" target="_blank">超链接</a>，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。<br/>语法：<br/><a href=”目标网址”>链接显示的文本</a><br/>例如：<br/><a href = "http://www.imooc.com">click here!</a><br/>上面例子作用是单击click here!文字，网页链接到www.imooc.com这个网页。<br/><br/>3-5<br/>认识<img>标签，为网页插入图片<br/>在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。<br/>语法：<br/><img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"><br/>举例：<br/><img src = "myimage.g<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>" alt = "My Image" title = "My Image" /><br/>讲解：<br/>1、src：标识图像的位置；<br/>2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该<a href="http://www.php.cn/wiki/169.html" target="_blank">属性</a>指定的文本；<br/>3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；<br/>4、图像可以是GIF，PNG，JPEG格式的图像文件。<br/><br/>四，表单标签（与用户进行交互）<br/>4-1<br/>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。<br/>语法：<br/><form method="传送方式" action="服务器文件"><br/>讲解：<br/>1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。<br/>2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。<br/>3.method ： 数据传送的方式（get/post）。<br/><br/>4-2<br/><input>输入框<br/><a href="http://www.php.cn/code/4993.html" target="_blank">文本输入框、密码输入框</a><br/>当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。<br/>语法：<br/><form><br/> <input type="text/password" name="名称" value="文本" /><br/></form><br/>1、type：<br/> 当type="text"时，输入框为文本输入框;<br/> 当type="password"时, 输入框为密码输入框。<br/>2、name：为文本框命名，以备后台程序<a href="http://www.php.cn/wiki/1519.html" target="_blank">ASP</a> 、PHP使用。<br/>3、value：为文本输入框设置默认值。(一般起到提示作用)<br/><br/>4-3<br/><a href="http://www.php.cn/code/4994.html" target="_blank">文本域，支持多行文本输入</a><br/>当用户需要在表单中输入大段文字时，需要用到文本输入域。<br/>语法：<br/><textarea rows="行数" cols="列数">文本</textarea><br/>1、<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。<br/>2、cols ：多行输入域的列数。<br/>3、rows ：多行输入域的行数。<br/><br/>4-4<br/>单选框，<a href="http://www.php.cn/code/5981.html" target="_blank">复选框</a><br/>语法：<br/><input type="radio/checkbox" value="值" name="名称" checked="checked"/><br/>1、type:<br/> 当type="radio"时，<a href="http://www.php.cn/js/js-jspopular-guide-widget.html" target="_blank">控件</a>为单选框<br/> 当type="checkbox"时，控件为复选框<br/>2、value：提交数据到服务器的值（后台程序PHP使用）<br/>3、name：为控件命名，以备后台程序ASP、PHP使用<br/>4、checked：当设置checked="checked"时，该选项被默认选中<br/>注意：同一组的<a href="http://www.php.cn/code/5979.html" target="_blank">单选按钮</a>，name取值一定要一致，这样同一组的单选按钮才可以起到单选的作用。<br/><br/>4-5<br/><a href="http://www.php.cn/code/4996.html" target="_blank">下拉列表框</a>，节省空间<br/>下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。<br/>语法：<option value="提交值">选项</option><br/>提交值是向服务器提交的值，选项是显示的值。<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><form action="save.php" method="post" > <label>爱好:</label> <select> <option value="看书">看书</option> <option value="旅游" selected="selected">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> </form></pre><div class="contentsignin">Copier après la connexion</div></div><p>4-6<br/><a href="http://www.php.cn/code/4997.html" target="_blank">使用下拉列表框进行多选</a><br/>下拉列表也可以进行多选操作，在<select>标签中设置multiple="multiple"属性，<br/>就可以实现多选功能，进行多选时按下Ctrl键同时进行单击，可以选择多个选项。<br/>如下代码：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><form action="save.php" method="post" > <label>爱好:</label> <select multiple="multiple"> <option value="看书">看书</option> <option value="旅游">旅游</option> <option value="运动">运动</option> <option value="购物">购物</option> </select> </form></pre><div class="contentsignin">Copier après la connexion</div></div><p>4-7<br/>在表单中有两种按钮可以使用，分别为：提交按钮、重置。<br/>1，提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。<br/>语法：<br/><input type="submit" value="提交"><br/>type：只有当type值设置为submit时，按钮才有提交作用<br/>value：按钮上显示的文字<br/><br/>2，重置按钮，重置表单信息<br/>当用户需要重置表单信息到初始时的<a href="http://www.php.cn/code/8243.html" target="_blank">状态</a>时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"<a href="http://www.php.cn/wiki/1081.html" target="_blank">reset</a>"就可以。<br/>语法：<br/><input type="reset" value="重置"><br/>type：只有当type值设置为reset时，按钮才有重置作用<br/>value：按钮上显示的文字<br/><br/>五，css样式<br/>5-1<br/>认识css样式<br/>CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。<br/>如下列代码：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p{ font-size:12px; color:red; font-weight:bold; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。<br/><br/>5-2<br/>CSS代码语法<br/>css 样式由选择符和声明组成，而声明又由属性和值组成<br/>选择符{属性:值}<br/>p{color:red;}<br/>选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。<br/>声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：<br/>p{font-size:12px;color:red;}<br/><br/>5-3<br/>从CSS 样式代码插入的形式来看基本可以分为以下3种：<br/>内联式、嵌入式和外部式三种<br/>1,<a href="http://www.php.cn/code/5039.html" target="_blank">内联式css样式</a><br/>就是把css代码直接写在现有的HTML标签中，如下面代码：<br/><p style="color:red">这里文字是红色。</p><br/>css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：<br/><p style="color:red;font-size:12px">这里文字是红色。</p><br/><br/>2,<a href="http://www.php.cn/code/471.html" target="_blank">嵌入式css样式</a>，<br/>就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><style type="text/css"> span{ color:red; } </style></pre><div class="contentsignin">Copier après la connexion</div></div><p>嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。<br/><br/>3,<a href="http://www.php.cn/code/475.html" target="_blank">外部式css样式</a><br/>写在单独的一个文件中<br/>外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：<br/><link href="base.css" rel="stylesheet" type="text/css" /><br/>注意：<br/>1、css样式文件名称以有意义的英文字母命名，如 <a href="http://www.php.cn/wiki/646.html" target="_blank">main</a>.css。<br/>2、rel="stylesheet" type="text/css" 是固定写法不可修改。<br/>3、<link>标签位置一般写在<head>标签之内。<br/><br/>六，<a href="http://www.php.cn/code/6485.html" target="_blank">CSS选择器</a><br/>每一条css样式定义由两部<a href="http://www.php.cn/code/10425.html" target="_blank">分组</a>成，形式如下：<br/>选择器{<br/> 样式;<br/>}<br/>在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用<a href="http://www.php.cn/wiki/60.html" target="_blank">对象</a>，也就是“样式”作用于网页中的哪些元素<br/><br/>6-1，<a href="http://www.php.cn/code/6004.html" target="_blank">标签选择器</a><br/>标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p{font-size:12px; line-height :1.6em;}</pre><div class="contentsignin">Copier après la connexion</div></div><p>上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。<br/><br/>6-2，<a href="http://www.php.cn/code/894.html" target="_blank">类选择器</a><br/>类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。<br/>语法：<br/>.类选器名称{css样式代码;}<br/>注意：<br/>1、英文圆点开头<br/>2、其中类选器名称可以任意起名（但不要起中文噢）<br/>使用方法：<br/>第一步：使用合适的标签把要修饰的内容标记起来，如下：<br/><span>胆小如鼠</span><br/>第二步：使用class="类选择器名称"为标签设置一个类，如下：<br/><span class="stress">胆小如鼠</span><br/>第三步：设置类选器css样式，如下：<br/>.stress{color:red;}/*类前面要加入一个英文圆点*/<br/><br/>6-3，<a href="http://www.php.cn/code/6007.html" target="_blank">ID选择器</a><br/>在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：<br/>1、为标签设置id="ID名称"，而不是class="类名称"。<br/>2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。<br/><br/>6-4,类和ID选择器的区别<br/>相同点：可以应用于任何元素<br/>不同点：<br/>1、ID选择器只能在文档中使用一次。与类选择器不同，在一个<a href="http://www.php.cn/code/425.html" target="_blank">HTML文档</a>中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。<br/>下面代码是正确的：<br/> <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p><br/>而下面代码是错误的：<br/> <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p><br/>2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。<br/>下面的代码是正确的(完整代码见右侧代码编辑器)<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.stress{ color:red; } .bigsize{ font-size:25px; }</pre><div class="contentsignin">Copier après la connexion</div></div><p><p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p><br/>上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px<br/><br/>下面的代码是不正确的(完整代码见右侧代码编辑器)<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">#stressid{ color:red; } #bigsizeid{ font-size:25px; }</pre><div class="contentsignin">Copier après la connexion</div></div><p><p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课...</p><br/>上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。<br/><br/>6-5，<a href="http://www.php.cn/code/902.html" target="_blank">子选择器</a><br/>还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的子元素。如下面的代码：<br/>.food>li{border:1px solid red;}<br/>这行代码会使<a href="http://www.php.cn/wiki/164.html" target="_blank">class</a>名为food下的子元素li加入红色实线边框。<br/><br/>6-6，包含(后代)选择器<br/>包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：<br/>.first span{color:red;}<br/>请注意这个选择器与子选择器的区别<br/>1，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代<br/>2，<a href="http://www.php.cn/code/901.html" target="_blank">后代选择器</a>是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。<br/>总结：>作用于元素的第一代后代，空格作用于元素的所有后代。<br/><br/>6-7，<a href="http://www.php.cn/code/6010.html" target="_blank">通用选择器</a><br/>通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中任意标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">* {color:red;}</pre><div class="contentsignin">Copier après la connexion</div></div><p><br/>6-8，<a href="http://www.php.cn/code/6014.html" target="_blank">伪类</a>选择符<br/>更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">a:hover {color:red;}</pre><div class="contentsignin">Copier après la connexion</div></div><p>这行代码会使被<a></a>标签包裹的文字内容中的“胆小如鼠”字体颜色在鼠标滑过时变为红色。<br/><br/>6-9，分组选择符<br/>当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：<br/>h1,span{color:red;}<br/>它相当于下面两行代码：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">h1{color:red;} span{color:red;}</pre><div class="contentsignin">Copier après la connexion</div></div><p>七，CSS的<a href="http://www.php.cn/code/6064.html" target="_blank">继承</a>、层叠和特殊性。<br/>7-1<br/>CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。<br/><span style="white-space:pre"></span>但注意有一些css样式是不具有继承性的。如border:1px solid red;<br/><br/>7-2<br/>根据权值来判断使用哪个css样式<br/>浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。<br/>下面是权值的规则：<br/>标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：<br/>p{color:red;} /*权值为1*/<br/>p span{color:green;} /*权值为1+1=2*/<br/>.warning{color:white;} /*权值为10*/<br/>p span.warning{color:purple;} /*权值为1+1+10=12*/<br/>#footer .note p{color:yellow;} /*权值为100+10+1=111*/<br/>注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低<br/><br/>7-3，层叠<br/>我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。<br/>层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。<br/>如下面代码:<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p{color:red;} p{color:green;}</pre><div class="contentsignin">Copier après la connexion</div></div><p><p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p><br/>最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。<br/>所以前面的css样式<a href="http://www.php.cn/code/6066.html" target="_blank">优先级</a>就不难理解了：<br/>内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。<br/><br/>7-4，重要性<br/>重要性<br/>我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。<br/>如下代码：<br/>p{color:red!important;}<br/>p{color:green;}<br/><p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p><br/>这时 p 段落中的文本会显示的red红色。<br/>注意：!important要写在分号的前面<br/><br/>八，CSS格式化排版<br/>8-1<br/>文字排版<br/>1，文字排版--字体<br/>我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">body{ font-family :"宋体";}</pre><div class="contentsignin">Copier après la connexion</div></div><p>这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有<a href="http://www.php.cn/php/php-tp-install.html" target="_blank">安装</a>你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）<br/>2，文字排版--字号、颜色<br/>可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：<br/>body{font-size:12px;color:#666}<br/>3，文字排版--粗体<br/>我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、<a href="http://www.php.cn/php/php-tp-remove.html" target="_blank">删除</a>线，可以使用下面代码实现设置文字以粗体样式显示出来。<br/>p span{font-weight:bold;}<br/>4，文字排版--斜体<br/>以下代码可以实现文字以斜体样式在浏览器中显示：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p a{ font-style :italic;}</pre><div class="contentsignin">Copier après la connexion</div></div><p><p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p><br/>5，文字排版--下划线<br/>有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p a{ text-decoration :underline;}</pre><div class="contentsignin">Copier après la connexion</div></div><p><p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p><br/><br/>删除线，在电商网站上经常见。<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p a{text-decoration:line-through;}</pre><div class="contentsignin">Copier après la connexion</div></div><p>8-2<br/>段落排版<br/>1，段落排版--缩进<br/>中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p{ text-indent :2em;}</pre><div class="contentsignin">Copier après la connexion</div></div><p>注意：2em的意思就是文字的2倍大小。<br/><br/>2，段落排版--行间距<br/>这一小节我们来学习一下另一个在段落排版中起重要作用的行间距属性（line-height），如下代码实现设置段落行间距为1.5倍。<br/>p{line-height:1.5em;}<br/><br/><br/>3，段落排版--字间距、字母间距<br/>文字间隔、字母间隔设置：<br/>如果想在网页排版中设置文字间隔或者字母间隔就可以使用 <a href="http://www.php.cn/wiki/865.html" target="_blank">letter-spacing</a>来实现，如下面代码：<br/>h1{<br/> letter-spacing:50px;<br/>}<br/>...<br/><h1>了不起的盖茨比</h1><br/>注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。<br/>单词间距设置：<br/>如果我想设置英文单词之间的间距呢？可以使用<a href="http://www.php.cn/wiki/866.html" target="_blank">word-spacing</a>来实现。如下代码：<br/>h1{<br/> word-spacing:50px;<br/>}<br/>...<br/><h1>welcome to imooc!</h1><br/><br/>九，CSS<a href="http://www.php.cn/code/6444.html" target="_blank">盒模型</a><br/>9-1<br/><a href="http://www.php.cn/code/494.html" target="_blank">元素分类</a><br/>在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、<a href="http://www.php.cn/code/6472.html" target="_blank">内联元素</a>和内联块状元素。<br/>常用的块状元素有：<br/><p>、<p>、<h1>...<h6>、<ol>、<ul>、<<a href="http://www.php.cn/wiki/596.html" target="_blank">dl</a>>、<table>、<address>、<blockquote> 、<form><br/>常用的内联元素有：<br/><a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code><br/>常用的内联块状元素有：<br/><img>、<input><br/><br/>9-2<br/><a href="http://www.php.cn/code/495.html" target="_blank">元素分类--块级元素</a><br/>什么是块级元素？在html中<p>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置<a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:block就是将元素显示为块级元素。如下代码就是将行内元素a转换为块状元素，从页使用a元素具有块状元素特点。<br/>a{display:block;}<br/>块级元素特点：<br/>1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）<br/>2、元素的高度、宽度、行高以及顶和底边距都可设置。<br/>3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。<br/><br/>9-3<br/>元素分类--行内元素<br/>在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的行内元素（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为行内元素。<br/>行内元素特点：<br/>1、和其他元素都在一行上；<br/>2、元素的高度、宽度、行高及顶部和底部边距不可设置；<br/>3、元素的宽度就是它包含的文字或图片的宽度，不可改变。<br/><br/>9-4<br/><a href="http://www.php.cn/code/498.html" target="_blank">元素分类--内联块状元素</a><br/>内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。<br/>inline-block元素特点：<br/>1、和其他元素都在一行上；<br/>2、元素的高度、宽度、行高以及顶和底边距都可设置。<br/><br/>9-5<br/>盒模型--边框（一）<br/><a href="http://www.php.cn/code/3243.html" target="_blank">盒子模型</a>的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。<br/>如下面代码为p来设置边框粗细为2px、样式为实心的、颜色为红色的边框：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p{ border:2px solid red; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>上面是border代码的缩写形式，可以分开写：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p{ border-width :2px; border-style :solid; border-color :red; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>注意：<br/>1、border-style（边框样式）常见样式有：<br/>dashed（虚线）| dotted（点线）| solid（实线）。<br/><br/>2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:<br/>border-color:#888;//前面的井号不要忘掉。<br/><br/>9-6<br/>盒模型--边框（二）<br/>现在有一个问题，如果有想为p标签单独设置下边框，而<a href="http://www.php.cn/html5/html5-3-mip-normal.html" target="_blank">其它</a>三边都不设置边框样式怎么办呢？css样式中允许只为一个方向的边框设置样式：<br/>p{border-<a href="http://www.php.cn/wiki/906.html" target="_blank">bottom</a>:1px solid red;}<br/>同样可以使用下面代码实现其它三边上、右、左边框的设置：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">border-top :1px solid red; border-right :1px solid red; border-left :1px solid red;</pre><div class="contentsignin">Copier après la connexion</div></div><p>9-7<br/><a href="http://www.php.cn/code/510.html" target="_blank">盒模型--边界</a><br/>元素与其它元素之间的距离可以使用边界（<a href="http://www.php.cn/wiki/931.html" target="_blank">margin</a>）来设置。边界也是可分为上、右、下、左。如下代码：<br/>p{margin:20px 10px 15px 30px;}<br/>也可以分开写：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p{ margin-top :20px; margin-right :10px; margin-bottom :15px; margin-left :30px; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>如果上下左右的边界都为10px;可以这么写：<br/>p{ margin:10px;}<br/>如果上下边界一样为10px，左右一样为20px，可以这么写：<br/>p{ margin:10px 20px;}<br/>总结一下：<a href="http://www.php.cn/wiki/948.html" target="_blank">padding</a>和margin的区别，padding在边框里，margin在边框外。<br/><br/>9-8<br/>盒模型--填充<br/>元素内容与边框之间是可以设置距离的，称之为填充。填充也可分为上、右、下、左。如下代码：<br/>p{padding:20px 10px15px 30px;}<br/>顺序一定不要搞混。可以分开写上面代码：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p{ padding-top :20px; padding-right :10px; padding-bottom :15px; padding-left :30px; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>如果上、右、下、左的填充都为10px;可以这么写<br/>p{padding:10px;}<br/>如果上下填充一样为10px，左右一样为20px，可以这么写：<br/>p{padding:10px 20px;}<br/><br/>9-9<br/>盒模型代码简写<br/>还记得在讲盒模型时<a href="http://www.php.cn/code/6043.html" target="_blank">外边距</a>(margin)、<a href="http://www.php.cn/code/6040.html" target="_blank">内边距</a>(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：<br/>margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/<br/>通常有下面三种缩写方法:<br/>1、如果top、right、bottom、left的值相同，如下面代码：<br/>margin:10px 10px 10px 10px;<br/>可缩写为：<br/>margin:10px;<br/>2、如果top和bottom值相同、left和 right的值相同，如下面代码：<br/>margin:10px 20px 10px 20px;<br/>可缩写为：<br/>margin:10px 20px;<br/>3、如果left和right的值相同，如下面代码：<br/>margin:10px 20px 30px 20px;<br/>可缩写为：<br/>margin:10px 20px 30px;<br/>注意：padding、border的缩写方法和margin是一致的。<br/><br/>9-10<br/>颜色值缩写<br/>关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。<br/>例子1：<br/>p{color:#000000;}<br/>可以缩写为：<br/>p{color: #000;}<br/>例子2：<br/>p{color: #336699;}<br/>可以缩写为：<br/>p{color: #369;}<br/><br/>十，CSS布局模型<br/>10-1<br/>css布局模型<br/>清楚了CSS 盒模型的<a href="http://www.php.cn/php/php-basic-concept.html" target="_blank">基本概念</a>、 盒<a href="http://www.php.cn/code/8559.html" target="_blank">模型类</a>型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 <br/>CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 <a href="http://www.php.cn/wiki/919.html" target="_blank">Float</a>。<br/>在网页中，元素有三种布局模型：<br/>1、流动模型（Flow）<br/>2、<a href="http://www.php.cn/code/11748.html" target="_blank">浮动</a>模型 (Float)<br/>3、层模型（Layer）<br/><br/>10-2<br/>流动模型（一）<br/>流动（Flow）：自上而下。<br/>先来说一说流动模型，流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。<br/>流动布局模型具有2个比较典型的特征：<br/><br/>第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(p，h1，p)宽度显示为100%。<br/><br/>第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）<br/>右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。<br/><br/>10-3<br/>浮动模型<br/>块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如p、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个p元素一行显示。<br/>p{<br/> width:200px;<br/> height:200px;<br/> border:2px red solid;<br/> float<a href="http://www.php.cn/wiki/974.html" target="_blank">:left</a>;<br/>}<br/><p id="p1"></p><br/><p id="p2"></p><br/><br/>注意：设置浮动的同时一定要先设置块状元素的宽度，且需要浮动的几个元素宽度加起来一定要小于容器元素的宽度。<br/><br/>10-4<br/>什么是层模型？<br/>什么是层布局模型？层布局模型就像是图像软件<a href="http://www.php.cn/wiki/1551.html" target="_blank">PhotoShop</a>中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。<br/>如何让<a href="http://www.php.cn/code/418.html" target="_blank">html元素</a>在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。<br/>层模型有三种形式：<br/>1、<a href="http://www.php.cn/code/6074.html" target="_blank">绝对定位</a>(position: absolute)<br/>2、相对定位(position: relative)<br/>3、固定定位(position: fixed)<br/><br/>1，层模型--绝对定位（相对于父类）<br/>如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。<br/>如下面代码可以实现p元素相对于浏览器窗口向右移动100px，向下移动50px。<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">p{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><p id="p1"></p></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>2，层模型--相对定位（相对于以前）<br/>如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按<a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。<br/>如下代码实现相对于以前位置向下移动50px，向右移动100px;<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">#p1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; }</pre><div class="contentsignin">Copier après la connexion</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><p id="p1"></p></pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><p>3，层模型--固定定位（相对于网页窗口）<br/>固定住某一坐标。<br/>fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是<a href="http://www.php.cn/code/6617.html" target="_blank">视图</a>（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与<a href="http://www.php.cn/wiki/893.html" target="_blank">background-attachment</a>:fixed?属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">#p1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>10-5<br/>Relative与Absolute组合使用<br/>小伙伴们学习了12-6小节的相对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：<br/>1、参照定位的元素必须是相对定位元素的前辈元素：<br/><p id="box1"><!--参照定位的元素--><br/> <p id="box2">相对参照元素进行定位</p><!--相对定位元素--><br/></p><br/>从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。<br/>2、参照定位的元素必须加入position:relative;<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">#box1{ width:200px; height:200px; position:relative; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">#box2{ position:absolute; top:20px; left:30px; }</pre><div class="contentsignin">Copier après la connexion</div></div><p>这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。  <br></p> <p>【相关推荐】</p> <p>1. <a href="http://www.php.cn/course/list/11.html" target="_self">HTML免费视频教程</a></p> <p>2. <a href="http://www.php.cn/div-tutorial-362923.html" target="_self">教你怎么在nodejs下解析html</a></p> <p>3. <a href="http://www.php.cn/div-tutorial-362915.html" target="_self">html实现消息按钮上的数量角标的实例详解</a></p> <p>4.<a href="http://www.php.cn/div-tutorial-362853.html" target="_self"> html中怎么样才能让JSON数据显示的方法介绍</a></p> <p>5.<a href="http://www.php.cn/div-tutorial-362726.html" target="_self"> 对HTTP Headers知识点的图文说明</a></p><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</p> </div> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>Étiquettes associées：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="http://www.php.cn/fr/search?word=全面的，html，css" target="_blank">全面的，HTML，css</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">source：php.cn</div> </div> <div class="wzconOtherwz"> <a href="http://www.php.cn/fr/faq/362917.html" title="Explication détaillée de la balise datalist HTML5 et de la correspondance dynamique avec les données d'arrière-plan"> <span>Article précédent：Explication détaillée de la balise datalist HTML5 et de la correspondance dynamique avec les données d'arrière-plan</span> </a> <a href="http://www.php.cn/fr/faq/362923.html" title="Apprenez à analyser le HTML sous nodejs"> <span>Article suivant：Apprenez à analyser le HTML sous nodejs</span> </a> </div> <div class="wzconShengming"> <div class="bzsmdiv">Déclaration de ce site Web</div> <div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Derniers articles par auteur</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/363037.html">Explication détaillée d'exemples de mise en œuvre de la fonction caméra via H5</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/361995.html">Tutoriel graphique sur la connexion de pycharm à mysql</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/360596.html">.NET Core crée un programme console</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/362065.html">Introduction aux méthodes de fonctionnement de base de la bibliothèque de dessins Python</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/361103.html">Explication détaillée des étapes de traitement de connexion par code de numérisation développée par WeChat</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/361095.html">Explication détaillée du processus de création d'une page WeChat H5</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/362312.html">Comment gérer les incohérences entre les champs de base de données et les attributs dans les beans entité dans MyBatis</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/360665.html">Utilisation des paramètres de partage onShareAppMessage développés par WeChat</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/363144.html">Exemple de code pour créer un album photo avec H5 et CSS3</a> </div> <div>1970-01-01 08:00:00</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="http://www.php.cn/fr/faq/362166.html">Exemple de code pour implémenter le paiement WeChat à l'aide du framework TP</a> </div> <div>1970-01-01 08:00:00</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">Derniers numéros</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/fr/wenda/176396.html" target="_blank" title="La page ne peut soudainement plus extraire le CSS ou le bootstrap" class="wdcdcTitle">La page ne peut soudainement plus extraire le CSS ou le bootstrap</a> <a href="http://www.php.cn/fr/wenda/176396.html" class="wdcdcCons">Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 21:58:04</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>800</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/fr/wenda/176386.html" target="_blank" title="Comment résoudre le mystérieux espace vide en bas de page en CSS" class="wdcdcTitle">Comment résoudre le mystérieux espace vide en bas de page en CSS</a> <a href="http://www.php.cn/fr/wenda/176386.html" class="wdcdcCons">J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 20:22:15</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>454</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/fr/wenda/176360.html" target="_blank" title="Styles CSS non appliqués au site" class="wdcdcTitle">Styles CSS non appliqués au site</a> <a href="http://www.php.cn/fr/wenda/176360.html" class="wdcdcCons">Je crée un site Web en utilisant Bootstrap5 mais les propriétés index.css ne sont pas appl...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 17:12:23</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>336</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/fr/wenda/176352.html" target="_blank" title="Pourquoi ma balise hr est-elle translucide lorsqu'elle est définie sur une couleur blanche unie ?" class="wdcdcTitle">Pourquoi ma balise hr est-elle translucide lorsqu'elle est définie sur une couleur blanche unie ?</a> <a href="http://www.php.cn/fr/wenda/176352.html" class="wdcdcCons">J'ai un HTML (avec bootstrap) et un CSS, dans mon HTML j'ai une balise <hr> qui a un...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 16:13:26</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>500</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="http://www.php.cn/fr/wenda/176350.html" target="_blank" title="Afficher les panneaux latéraux masqués : coché" class="wdcdcTitle">Afficher les panneaux latéraux masqués : coché</a> <a href="http://www.php.cn/fr/wenda/176350.html" class="wdcdcCons">J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan"> Depuis 2024-04-06 15:49:33</span> </div> <div class="wdcdciright flexRow"> <div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div> <div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>319</div> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>Rubriques connexes</div> <a href="http://www.php.cn/fr/faq/zt" target="_blank">Plus> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/htmlbq"><img src="https://img.php.cn/upload/subject/202407/22/2024072214431586789.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="symbole de droit d'auteur HTML" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/htmlbq" class="title-a-spanl" title="symbole de droit d'auteur HTML"><span>symbole de droit d'auteur HTML</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/cssys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214431291616.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="css" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/cssys" class="title-a-spanl" title="css"><span>css</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/htmlzxbjq"><img src="https://img.php.cn/upload/subject/202407/22/2024072214403473154.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="éditeur HTML en ligne" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/htmlzxbjq" class="title-a-spanl" title="éditeur HTML en ligne"><span>éditeur HTML en ligne</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/cssjz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214284035010.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="centré sur CSS" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/cssjz" class="title-a-spanl" title="centré sur CSS"><span>centré sur CSS</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/cssrhcrtp"><img src="https://img.php.cn/upload/subject/202407/22/2024072214282555686.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment insérer des images en CSS" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/cssrhcrtp" class="title-a-spanl" title="Comment insérer des images en CSS"><span>Comment insérer des images en CSS</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/htmlwyzz"><img src="https://img.php.cn/upload/subject/202407/22/2024072214275948120.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="réalisation de pages web html" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/htmlwyzz" class="title-a-spanl" title="réalisation de pages web html"><span>réalisation de pages web html</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/cssccxsslh"><img src="https://img.php.cn/upload/subject/202407/22/2024072214275251415.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="CSS au-delà de l'affichage..." /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/cssccxsslh" class="title-a-spanl" title="CSS au-delà de l'affichage..."><span>CSS au-delà de l'affichage...</span> </a> </li> <li class="ul-li"> <a target="_blank" href="http://www.php.cn/fr/faq/htmlkg"><img src="https://img.php.cn/upload/subject/202407/22/2024072214273274014.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="espace HTML" /> </a> <a target="_blank" href="http://www.php.cn/fr/faq/htmlkg" class="title-a-spanl" title="espace HTML"><span>espace HTML</span> </a> </li> </ul> </div> </div> </div> </div> <div class="phpwzright"> <div class="wzrOne"> <div class="wzroTitle">Recommandations populaires</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Que signifie l'URL ?" href="http://www.php.cn/fr/faq/418772.html">Que signifie l'URL ?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Que signifie DOM ?" href="http://www.php.cn/fr/faq/414303.html">Que signifie DOM ?</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment changer la taille de l'image" href="http://www.php.cn/fr/faq/414252.html">Comment changer la taille de l'image</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment mettre la police en gras en HTML" href="http://www.php.cn/fr/faq/414520.html">Comment mettre la police en gras en HTML</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="Comment définir la taille des images HTML" href="http://www.php.cn/fr/faq/475145.html">Comment définir la taille des images HTML</a> </div> </li> </ul> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="wzrThree"> <div class="wzrthree-title"> <div>Tutoriels populaires</div> <a target="_blank" href="http://www.php.cn/fr/course.html">Plus> </a> </div> <div class="wzrthreelist swiper2"> <div class="wzrthreeTab swiper-wrapper"> <div class="check tabdiv swiper-slide" data-id="one">Tutoriels associés <div></div></div> <div class="tabdiv swiper-slide" data-id="two">Recommandations populaires<div></div></div> <div class="tabdiv swiper-slide" data-id="three">Derniers cours<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="http://www.php.cn/fr/course/812.html" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" href="http://www.php.cn/fr/course/812.html">Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)</a> <div class="wzrthreerb"> <div>1416752 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/74.html" title="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine" href="http://www.php.cn/fr/course/74.html">Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine</a> <div class="wzrthreerb"> <div>4257339 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="74"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/286.html" title="Tutoriel vidéo JAVA pour débutants" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutoriel vidéo JAVA pour débutants"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo JAVA pour débutants" href="http://www.php.cn/fr/course/286.html">Tutoriel vidéo JAVA pour débutants</a> <div class="wzrthreerb"> <div>2475459 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/504.html" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" href="http://www.php.cn/fr/course/504.html">Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle</a> <div class="wzrthreerb"> <div>503327 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/2.html" title="Tutoriel d'introduction PHP base zéro" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="Tutoriel d'introduction PHP base zéro"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel d'introduction PHP base zéro" href="http://www.php.cn/fr/course/2.html">Tutoriel d'introduction PHP base zéro</a> <div class="wzrthreerb"> <div>844061 <b class="kclbcollectb"></b></div> <div class="courseICollection" data-id="2"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/fr/course/812.html" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" href="http://www.php.cn/fr/course/812.html">Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)</a> <div class="wzrthreerb"> <div >1416752 temps d'étude</div> <div class="courseICollection" data-id="812"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/286.html" title="Tutoriel vidéo JAVA pour débutants" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutoriel vidéo JAVA pour débutants"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo JAVA pour débutants" href="http://www.php.cn/fr/course/286.html">Tutoriel vidéo JAVA pour débutants</a> <div class="wzrthreerb"> <div >2475459 temps d'étude</div> <div class="courseICollection" data-id="286"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/504.html" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" href="http://www.php.cn/fr/course/504.html">Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle</a> <div class="wzrthreerb"> <div >503327 temps d'étude</div> <div class="courseICollection" data-id="504"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/901.html" title="Introduction rapide au développement web front-end" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Introduction rapide au développement web front-end"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Introduction rapide au développement web front-end" href="http://www.php.cn/fr/course/901.html">Introduction rapide au développement web front-end</a> <div class="wzrthreerb"> <div >215262 temps d'étude</div> <div class="courseICollection" data-id="901"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/234.html" title="Maîtrisez les didacticiels vidéo PS à partir de zéro" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Maîtrisez les didacticiels vidéo PS à partir de zéro"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Maîtrisez les didacticiels vidéo PS à partir de zéro" href="http://www.php.cn/fr/course/234.html">Maîtrisez les didacticiels vidéo PS à partir de zéro</a> <div class="wzrthreerb"> <div >876712 temps d'étude</div> <div class="courseICollection" data-id="234"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="http://www.php.cn/fr/course/1648.html" title="[Web front-end] Démarrage rapide de Node.js" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Démarrage rapide de Node.js"/> </a> <div class="wzrthree-right"> <a target="_blank" title="[Web front-end] Démarrage rapide de Node.js" href="http://www.php.cn/fr/course/1648.html">[Web front-end] Démarrage rapide de Node.js</a> <div class="wzrthreerb"> <div >6338 temps d'étude</div> <div class="courseICollection" data-id="1648"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/1647.html" title="Collection complète de cours full-stack de développement Web étranger" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Collection complète de cours full-stack de développement Web étranger"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Collection complète de cours full-stack de développement Web étranger" href="http://www.php.cn/fr/course/1647.html">Collection complète de cours full-stack de développement Web étranger</a> <div class="wzrthreerb"> <div >4984 temps d'étude</div> <div class="courseICollection" data-id="1647"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/1646.html" title="Aller au langage pratique GraphQL" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Aller au langage pratique GraphQL"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Aller au langage pratique GraphQL" href="http://www.php.cn/fr/course/1646.html">Aller au langage pratique GraphQL</a> <div class="wzrthreerb"> <div >4183 temps d'étude</div> <div class="courseICollection" data-id="1646"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/1645.html" title="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape" href="http://www.php.cn/fr/course/1645.html">Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape</a> <div class="wzrthreerb"> <div >633 temps d'étude</div> <div class="courseICollection" data-id="1645"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> <li> <a target="_blank" href="http://www.php.cn/fr/course/1644.html" title="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures"/> </a> <div class="wzrthree-right"> <a target="_blank" title="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures" href="http://www.php.cn/fr/course/1644.html">Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures</a> <div class="wzrthreerb"> <div >21257 temps d'étude</div> <div class="courseICollection" data-id="1644"> <b class="nofollow small-nocollect"></b> </div> </div> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper2', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>Derniers téléchargements</div> <a href="http://www.php.cn/fr/xiazai">Plus> </a> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList swiper3"> <div class="wzrfourlTab swiper-wrapper"> <div class="check swiper-slide" data-id="onef">effets Web <div></div></div> <div class="swiper-slide" data-id="twof">Code source du site Web<div></div></div> <div class="swiper-slide" data-id="threef">Matériel du site Web<div></div></div> <div class="swiper-slide" data-id="fourf">Modèle frontal<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code de contact du formulaire de message d'entreprise jQuery" href="http://www.php.cn/fr/xiazai/js/8071">[bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effets de lecture de boîte à musique HTML5 MP3" href="http://www.php.cn/fr/xiazai/js/8070">[Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effets spéciaux du menu de navigation d'animation de particules cool HTML5" href="http://www.php.cn/fr/xiazai/js/8069">[Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code d'édition par glisser-déposer du formulaire visuel jQuery" href="http://www.php.cn/fr/xiazai/js/8068">[bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Code du lecteur de musique Kugou imitation VUE.JS" href="http://www.php.cn/fr/xiazai/js/8067">[Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Jeu de boîte de poussée HTML5 classique" href="http://www.php.cn/fr/xiazai/js/8066">[effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="défilement jQuery pour ajouter ou réduire des effets d'image" href="http://www.php.cn/fr/xiazai/js/8065">[Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="Effet de zoom de survol de la couverture de l'album personnel CSS3" href="http://www.php.cn/fr/xiazai/js/8064">[Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8328" title="Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure" target="_blank">[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8327" title="Modèle de page de guide de CV personnel aux couleurs fraîches" target="_blank">[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8326" title="Modèle Web de CV de travail créatif de concepteur" target="_blank">[Modèle frontal] Modèle Web de CV de travail créatif de concepteur</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8325" title="Modèle de site Web d'entreprise de construction d'ingénierie moderne" target="_blank">[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8324" title="Modèle HTML5 réactif pour les établissements de services éducatifs" target="_blank">[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8323" title="Modèle de site Web de centre commercial de boutique de livres électroniques en ligne" target="_blank">[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8322" title="La technologie informatique résout le modèle de site Web d'entreprise Internet" target="_blank">[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8321" title="Modèle de site Web de service de trading de devises de style violet" target="_blank">[Modèle frontal] Modèle de site Web de service de trading de devises de style violet</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3078" target="_blank" title="Matériau vectoriel d'éléments d'été mignons (EPS+PNG)">[Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3077" target="_blank" title="Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)">[Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3076" target="_blank" title="Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)">[image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3075" target="_blank" title="Matériau vectoriel de chapeau de graduation doré (EPS+PNG)">[Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3074" target="_blank" title="Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)">[Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3073" target="_blank" title="Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes">[Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3072" target="_blank" title="Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)">[image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/sucai/3071" target="_blank" title="Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)">[Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8328" target="_blank" title="Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure">[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8327" target="_blank" title="Modèle de page de guide de CV personnel aux couleurs fraîches">[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8326" target="_blank" title="Modèle Web de CV de travail créatif de concepteur">[Modèle frontal] Modèle Web de CV de travail créatif de concepteur</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8325" target="_blank" title="Modèle de site Web d'entreprise de construction d'ingénierie moderne">[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8324" target="_blank" title="Modèle HTML5 réactif pour les établissements de services éducatifs">[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8323" target="_blank" title="Modèle de site Web de centre commercial de boutique de livres électroniques en ligne">[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8322" target="_blank" title="La technologie informatique résout le modèle de site Web d'entreprise Internet">[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="http://www.php.cn/fr/xiazai/code/8321" target="_blank" title="Modèle de site Web de service de trading de devises de style violet">[Modèle frontal] Modèle de site Web de service de trading de devises de style violet</a> </div> </li> </ul> </div> <script> var mySwiper = new Swiper('.swiper3', { autoplay: false,//可选选项，自动滑动 slidesPerView : 'auto', }) $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div> <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="http://www.php.cn/fr/about/xieyi.html" rel="nofollow" target="_blank" title="À propos de nous" class="cBlack">À propos de nous</a> <a href="http://www.php.cn/fr/about/yinsi.html" rel="nofollow" target="_blank" title="Clause de non-responsabilité" class="cBlack">Clause de non-responsabilité</a> <a href="http://www.php.cn/fr/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a> <div class="clear"></div> </dt> <dd class="cont1">Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</dd> </dl> </div> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1730993949"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> </body> </html>