HTML 및 CSS 지식 포인트에 대한 포괄적인 요약을 공유하세요.-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML 및 CSS 지식 포인트에 대한 포괄적인 요약을 공유하세요.

Y2J

May 22, 2017 am 10:18 AM

1. html+css의 기본
1-1
Html과 CSS의 관계
웹 프론트엔드 개발의 기본 기술을 배우려면 HTML, CSS, JavaScript 언어를 마스터해야 합니다. 이 세 가지 기술이 무엇을 달성하는 데 사용되는지 살펴보겠습니다.
1. HTML은 웹 콘텐츠의 전달자입니다. 콘텐츠란 웹페이지 작성자가 사용자가 탐색할 수 있도록 페이지에 게시한 정보로, 텍스트, 사진, 비디오 등을 포함할 수 있습니다.
2. CSS 스타일은 성능입니다. 웹페이지에 코트를 입히는 것과 같습니다. 예를 들어 제목 글꼴, 색상 변경, 제목에 배경 이미지, 테두리 등 추가 등이 있습니다. 콘텐츠의 모양을 변경하는 데 사용되는 이러한 모든 항목을 프레젠테이션이라고 합니다.
3. JavaScript는 웹 페이지에 특수 효과를 구현하는 데 사용됩니다. 예를 들어 드롭다운 메뉴 는 마우스를 그 위로 슬라이드하면 나타납니다. 또는 마우스를 테이블 위로 슬라이드하면 테이블의 배경색이 변경됩니다. 핫뉴스(뉴스사진) 순환도 있습니다. 애니메이션이 있다면 인터랙티브한 애니메이션은 일반적으로 JavaScript를 사용하여 구현되는 것으로 이해하면 됩니다. 1-2
1,
HTML 태그 는 대소문자를 구분하지 않으며,

과

은 동일하지만 대부분의 프로그래머는 소문자를 허용하므로 소문자를 사용하는 것이 좋습니다.
1-3
HTML 파일은 고유한 고정된 구조를 가지고 있습니다.

<html>
    <head>...</head>
    <body>...</body>
</html>

로그인 후 복사

코드 설명:

1. 을 루트 태그라고 하며, 모든 웹페이지 태그는 에 있습니다.
2. 태그는 모든 헤드 요소의 컨테이너인 문서의 헤드를 정의하는 데 사용됩니다. 헤더 요소에는 , <script>, <style>, <link>, <meta> 및 기타 태그가 포함됩니다. 헤더 태그는 다음 섹션에서 자세히 소개됩니다. <br/>3. <body> 및 </body> 태그 사이의 콘텐츠는 <h1>, <a> 및 <img> 다른 웹페이지 콘텐츠 태그를 사용하면 여기 태그의 콘텐츠가 브라우저에 표시됩니다. <br/><br/>1-4<br/>1, 헤드 섹션에는 다음 태그를 사용할 수 있습니다. <br/><br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><head> <title>...</title> <meta> <link> <style>...</style> <script>...</script> </head></pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'><ul> <li>信息</li> <li>信息</li> ...... </ul> 举例： <ul> <li>精彩少年</li> <li>美丽突然出现</li> <li>触动心灵的旋律</li> </ul></pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'><ol> <li>信息</li> <li>信息</li> ...... </ol></pre><div class="contentsignin">로그인 후 복사</div></div><p>举例：<br/>下面是一个热点课程下载排行榜：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li> </ol> <ol></pre><div class="contentsignin">로그인 후 복사</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:php;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">로그인 후 복사</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:php;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">로그인 후 복사</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:php;toolbar:false;'>p{ font-size:12px; color:red; font-weight:bold; }</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'><style type="text/css"> span{ color:red; } </style></pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>p{font-size:12px; line-height :1.6em;}</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>.stress{ color:red; } .bigsize{ font-size:25px; }</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>#stressid{ color:red; } #bigsizeid{ font-size:25px; }</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>* {color:red;}</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>a:hover {color:red;}</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>h1{color:red;} span{color:red;}</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>p{color:red;} p{color:green;}</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>body{ font-family :"宋体";}</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>p a{ font-style :italic;}</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>p a{ text-decoration :underline;}</pre><div class="contentsignin">로그인 후 복사</div></div><p><p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p><br/><br/>删除线，在电商网站上经常见。<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>p a{text-decoration:line-through;}</pre><div class="contentsignin">로그인 후 복사</div></div><p>8-2<br/>段落排版<br/>1，段落排版--缩进<br/>中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>p{ text-indent :2em;}</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>p{ border:2px solid red; }</pre><div class="contentsignin">로그인 후 복사</div></div><p>上面是border代码的缩写形式，可以分开写：<br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>p{ border-width :2px; border-style :solid; border-color :red; }</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>border-top :1px solid red; border-right :1px solid red; border-left :1px solid red;</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>p{ margin-top :20px; margin-right :10px; margin-bottom :15px; margin-left :30px; }</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>p{ padding-top :20px; padding-right :10px; padding-bottom :15px; padding-left :30px; }</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>p{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; }</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'><p id="p1"></p></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>#p1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; }</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'><p id="p1"></p></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>#p1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; }</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>#box1{ width:200px; height:200px; position:relative; }</pre><div class="contentsignin">로그인 후 복사</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:php;toolbar:false;'>#box2{ position:absolute; top:20px; left:30px; }</pre><div class="contentsignin">로그인 후 복사</div></div></p> <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>위 내용은 HTML 및 CSS 지식 포인트에 대한 포괄적인 요약을 공유하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">본 웹사이트의 성명</div> <div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>핫 AI 도구</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>사실적인 누드 사진을 만들기 위한 AI 기반 앱</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>사진에서 옷을 제거하는 온라인 AI 도구입니다.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>무료로 이미지를 벗다</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI 옷 제거제</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/ai">더보기</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>인기 기사</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796793874.html" title="KB5055523을 수정하는 방법 Windows 11에 설치되지 않습니까?" class="phpgenera_Details_mainR4_bottom_title">KB5055523을 수정하는 방법 Windows 11에 설치되지 않습니까?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796793871.html" title="KB5055518을 수정하는 방법 Windows 10에 설치되지 않습니까?" class="phpgenera_Details_mainR4_bottom_title">KB5055518을 수정하는 방법 Windows 10에 설치되지 않습니까?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796797907.html" title="<garden> : 정원 재배 - 완전한 돌연변이 가이드" class="phpgenera_Details_mainR4_bottom_title"><garden> : 정원 재배 - 완전한 돌연변이 가이드</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796797130.html" title="<gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법" class="phpgenera_Details_mainR4_bottom_title"><gum> : Bubble Gum Simulator Infinity- 로얄 키를 얻고 사용하는 방법</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/1796796771.html" title="KB5055612 수정 방법 Windows 10에 설치되지 않습니까?" class="phpgenera_Details_mainR4_bottom_title">KB5055612 수정 방법 Windows 10에 설치되지 않습니까?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 몇 주 전</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/article.html">더보기</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>뜨거운 도구</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="메모장++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_title"> <h3>메모장++7.3.1</h3> </a> <p>사용하기 쉬운 무료 코드 편집기</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 중국어 버전" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_title"> <h3>SublimeText3 중국어 버전</h3> </a> <p>중국어 버전, 사용하기 매우 쉽습니다.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="스튜디오 13.0.1 보내기" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_title"> <h3>스튜디오 13.0.1 보내기</h3> </a> <p>강력한 PHP 통합 개발 환경</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="드림위버 CS6" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title"> <h3>드림위버 CS6</h3> </a> <p>시각적 웹 개발 도구</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac 버전" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac 버전</h3> </a> <p>신 수준의 코드 편집 소프트웨어(SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/ai">더보기</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>뜨거운 주제</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/java-tutorial" title="자바 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">자바 튜토리얼</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1664</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>14</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1423</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/laravel-tutori" title="라라벨 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">라라벨 튜토리얼</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1317</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>25</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/php-tutorial" title="PHP 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">PHP 튜토리얼</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1268</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ko/faq/c-tutorial" title="C# 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">C# 튜토리얼</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1243</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>24</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ko/faq/zt">더보기</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796792401.html" title="Vue에서 부트 스트랩을 사용하는 방법" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202406/12/2024061219422252334.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Vue에서 부트 스트랩을 사용하는 방법" /> </a> <a href="https://www.php.cn/ko/faq/1796792401.html" title="Vue에서 부트 스트랩을 사용하는 방법" class="phphistorical_Version2_mids_title">Vue에서 부트 스트랩을 사용하는 방법</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 11:33 PM</span> <p class="Articlelist_txts_p">vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796794693.html" title="HTML, CSS 및 JavaScript 이해 : 초보자 안내서" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174438733162787.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML, CSS 및 JavaScript 이해 : 초보자 안내서" /> </a> <a href="https://www.php.cn/ko/faq/1796794693.html" title="HTML, CSS 및 JavaScript 이해 : 초보자 안내서" class="phphistorical_Version2_mids_title">HTML, CSS 및 JavaScript 이해 : 초보자 안내서</a> <span class="Articlelist_txts_time">Apr 12, 2025 am 12:02 AM</span> <p class="Articlelist_txts_p">WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796792987.html" title="HTML, CSS 및 JavaScript의 역할 : 핵심 책임" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174411031220217.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML, CSS 및 JavaScript의 역할 : 핵심 책임" /> </a> <a href="https://www.php.cn/ko/faq/1796792987.html" title="HTML, CSS 및 JavaScript의 역할 : 핵심 책임" class="phphistorical_Version2_mids_title">HTML, CSS 및 JavaScript의 역할 : 핵심 책임</a> <span class="Articlelist_txts_time">Apr 08, 2025 pm 07:05 PM</span> <p class="Articlelist_txts_p">HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796793128.html" title="HTML에서 React의 역할 : 사용자 경험 향상" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174412870283361.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML에서 React의 역할 : 사용자 경험 향상" /> </a> <a href="https://www.php.cn/ko/faq/1796793128.html" title="HTML에서 React의 역할 : 사용자 경험 향상" class="phphistorical_Version2_mids_title">HTML에서 React의 역할 : 사용자 경험 향상</a> <span class="Articlelist_txts_time">Apr 09, 2025 am 12:11 AM</span> <p class="Articlelist_txts_p">React는 JSX와 HTML을 결합하여 사용자 경험을 향상시킵니다. 1) JSX는 개발을보다 직관적으로 만들기 위해 HTML을 포함시킨다. 2) 가상 DOM 메커니즘은 성능을 최적화하고 DOM 운영을 줄입니다. 3) 유지 보수성을 향상시키기위한 구성 요소 기반 관리 UI. 4) 상태 관리 및 이벤트 처리는 상호 작용을 향상시킵니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796792279.html" title="부트 스트랩에 사진을 삽입하는 방법" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202405/16/2024051623543343733.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="부트 스트랩에 사진을 삽입하는 방법" /> </a> <a href="https://www.php.cn/ko/faq/1796792279.html" title="부트 스트랩에 사진을 삽입하는 방법" class="phphistorical_Version2_mids_title">부트 스트랩에 사진을 삽입하는 방법</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 03:30 PM</span> <p class="Articlelist_txts_p">Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796792273.html" title="부트 스트랩에 분할 라인을 작성하는 방법" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202405/17/2024051700241717543.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="부트 스트랩에 분할 라인을 작성하는 방법" /> </a> <a href="https://www.php.cn/ko/faq/1796792273.html" title="부트 스트랩에 분할 라인을 작성하는 방법" class="phphistorical_Version2_mids_title">부트 스트랩에 분할 라인을 작성하는 방법</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 03:12 PM</span> <p class="Articlelist_txts_p">부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796792278.html" title="부트 스트랩을위한 프레임 워크를 설정하는 방법" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202405/17/2024051700032351186.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="부트 스트랩을위한 프레임 워크를 설정하는 방법" /> </a> <a href="https://www.php.cn/ko/faq/1796792278.html" title="부트 스트랩을위한 프레임 워크를 설정하는 방법" class="phphistorical_Version2_mids_title">부트 스트랩을위한 프레임 워크를 설정하는 방법</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 03:27 PM</span> <p class="Articlelist_txts_p">부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ko/faq/1796792275.html" title="부트 스트랩 크기를 조정하는 방법" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202405/17/2024051700152735909.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="부트 스트랩 크기를 조정하는 방법" /> </a> <a href="https://www.php.cn/ko/faq/1796792275.html" title="부트 스트랩 크기를 조정하는 방법" class="phphistorical_Version2_mids_title">부트 스트랩 크기를 조정하는 방법</a> <span class="Articlelist_txts_time">Apr 07, 2025 pm 03:18 PM</span> <p class="Articlelist_txts_p">부트 스트랩에서 요소의 크기를 조정하려면 다음을 포함하여 차원 클래스를 사용할 수 있습니다.</p> </div> </div> <a href="https://www.php.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div class="footer"> <div class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p> </div> <div class="footermid"> <a href="https://www.php.cn/ko/about/us.html">회사 소개</a> <a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a> <a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <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?1746803259"></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> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const mainNav = document.querySelector('.Article_Details_main1Lmain'); const header = document.querySelector('header'); if (mainNav) { window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; if (scrollPosition > 84) { mainNav.classList.add('fixed'); } else { mainNav.classList.remove('fixed'); } }); } }); </script> </body> </html>