CSS3秘笈第三版涵盖HTML5学习笔记13~17章_html/css_WEB-ITnose
第13章，构建基于浮动的布局
使用的是float（浮动）属性
注：float:none值将取消所有浮动，通常只用来取消元素中已经应用的浮动。
切记：不需要给正文的div设计宽度，即使设计成固定宽度也不用
用浮动进行布局
LayoutGala网站（ http://blog.html.it/layoutgala/）上提供了40种不同的CSS设计，但大多只是基本框架，里面只有
标签及其定位用的CSS代码
布局生成器，Cridinator（ http://gridinator.com）提供了简单的工具，用以创建复杂的多列网格系统
在浮动元素中浮动元素，会在列中增加列。
克服浮动问题
清除浮动和保持浮动
footer{ clear:both;}Salin selepas log masuk
清除元素两边的浮动
clear属性值：left，right，both
在非浮动的外围元素如
标签中浮动元素，有可能造成当浮动元素高于div里面的其他内容时，从外围元素的底部凸出来，
解决方法：
1、在外围
底部添加一个清除元素 标签上方就是它最佳位置）可以忽略手机浏览器对于网页的自动缩放： </p> <p class="sycode"> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><meta name="viewport" content="width=device-width"></pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> </p> <p class="sycode"> CSS的@viewport也可以实现同样的功能，应该将这个代码放在所有样式表前，但目前还有很多浏览器不支持，需要添加供应商前缀才行 </p> <p class="sycode"> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>@viewport{ width:device-width; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> </p> <h2 id="媒体查询">媒体查询</h2> </p> <p class="sycode"> <p class="sycode"> 可以根据目标浏览器的宽高给网页分配样式 </p> <h3 id="使用媒体查询的策略">使用媒体查询的策略</h3> <p class="sycode"> 1、调整列 </p> <p class="sycode"> 2、弹性宽度 </p> <p class="sycode"> 3、缩进空白空间 </p> <p class="sycode"> 4、调整字号 </p> <p class="sycode"> 5、修改导航菜单 </p> <p class="sycode"> 6、在手持设备上隐藏内容 </p> <p class="sycode"> 7、使用背景图片 </p> <h3 id="创建断点">创建断点</h3> <p class="sycode"> 媒体查询可给告诉浏览器在特定条件下使用特定的样式，特定条件通常被称为断点 </p> <p class="sycode"> 如何进行断点设置呢？简单做法是在网页中打开一个网页，然后使用浏览器窗口句柄，让窗口变窄，在某个点时设计将会变得很难看，这时可以设置一个断点，如此循环。一般来说会设计3个断点，一个针对智能手机，一个针对平板电脑，一个针对桌面型浏览器 </p> <h3 id="桌面型优先还是手机版优先">桌面型优先还是手机版优先</h3> </p> <p class="sycode"> <h3 id="创建媒体查询">创建媒体查询</h3> <p class="sycode"> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link href="css/small.css" rel="stylesheet" media="(width:480px)"></pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> </p> <p class="sycode"> 只是新增了media属性，设定条件 </p> <p class="sycode"> IE8及更早版本不支持，通过在文档<head>中添加一些js，也可以让旧版IE支持媒体查询，从 http://tinyurl.com/7w49a6z下载respond.js，引入： </p> <p class="sycode"> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!--[if lte IE 8> <script src="respond.min.js"></script><![endif]--></pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> </p> <p class="sycode"> 这种只针对精确的查询，最好使用范围值，即借助max-width（小于等于）和min-width（大于等于） </p> <p class="sycode"> 关于浏览器查询信息： www.w3.org/TR/css3-mediaqueries </p> <h2 id="弹性网格">弹性网格</h2> <p class="sycode"> HTML源码的顺序的重要性 </p> <p class="sycode"> 重置盒模型 </p> <p class="sycode"> 将固定宽度转换成弹性网格 </p> <h2 id="流式图片">流式图片</h2> <p class="sycode"> 虽然弹性设计中列会随着浏览器窗口变小而收缩，但图片不会，这就可能导致图片溢出边界 </p> <p class="sycode"> 可以使用如下方式使图片变成具有弹性： </p> <p class="sycode"> 1、首先，添加样式： </p> <p class="sycode"> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>img { max-width:100; }</pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> </p> <p class="sycode"> 2、将HTML中所有img标签的height和width属性删除 </p> <h3 id="流式图片不足">流式图片不足</h3> <p class="sycode"> 图片会伸展到列的100%宽度，这就可能发生拉伸超出它的自然宽度，发生形变和失真。 </p> </p> <p class="sycode"> 第15章，定位网页上的元素 <h2 id="定位属性的功能">定位属性的功能</h2> <p class="sycode"> CSS的position属性可以控制Web浏览器如何以及在和何处显示特定的元素 </p> <p class="sycode"> CSS提供了4种类型的定位： </p> <p class="sycode"> 绝对定位：通过以pixel、em或percentage为单位设定元素的左右上下方的位置对它进行定位。 </p> <p class="sycode"> 注：不要在一个样式中同时设定float属性和任何一种定位，除了静态定位和相对定位，absolute和fixed也不能和float属性同时应用于同一个元素 </p> <p class="sycode"> 相对定位：相对于它在HTML流中的当前位置进行定位，与绝对定位不同，其他元素并不会占据相对定位元素原来在HTML中所处的位置，相对定位最大的好处不是移动元素，而是给它内部绝对定位元素设定一个新的参照点 </p> <p class="sycode"> 固定定位：固定定位元素会被锁定在屏幕某个位置上。 </p> <p class="sycode"> 静态定位：只是表示网页内容将遵循正常从上到下的HTML流 </p> <p class="sycode"> position属性可以改变任何一个元素的定位，使用以下4个关键字：static、absolute、relative、fixed </p> <p class="sycode"> 注：静态定位元素将不支持以下要讨论的任何一种定位值 </p> </p> <p class="sycode"> <h2 id="设置定位值">设置定位值</h2> <p class="sycode"> Web浏览器窗口显示区也被称为检视区（viewport），有上、下、左、右4条边，对应CSS属性top、bottom、left、right </p> <p class="sycode"> position属性后面还有更多种属性（top、bottom、left、right） </p> <p class="sycode"> 利用绝对定位在网页上定位元素时，它的具体位置均取决于相关元素在其它标签中所嵌套的位置： </p> <p class="sycode"> 1、如果一个标签的位置是绝对定位的，且它又不在其他任何设定了absolute、relative、fixed定位的标签里面，那它就是相对于浏览器窗口进行定位 </p> <p class="sycode"> 2、如果一个标签处在另一个设定了absolute、relative、fixed定位的标签里，那它就是相对于另一个元素的边框进行定位 </p> <p class="sycode"> 注：在CSS中，术语relative不完全等同于它的本义，可以解读为“相对于我”的意思。即当对一个标签设置relative定位时，意思是“我内部所有定位元素应该相对于我的位置进行定位” </p> <h2 id="堆叠元素">堆叠元素</h2> <p class="sycode"> 一般来讲，定位元素重叠时的堆叠顺序是按照它们在网页HTML代码中的顺序来决定，但可以通过CSS属性z-index来控制定位元素的堆叠顺序： </p> <p class="sycode"> z-index:3; 这个值为数字，数字越大，越接近堆叠顶部，即出现在HTML页面的前面，还可以使用负值，将一个元素定位在其父元素或者其任意一个祖先元素之下。 </p> <p class="sycode"> 注：IE7及更早版本不支持，z-index最大值是2147483647 </p> </p> <p class="sycode"> <h2 id="隐藏部分网页">隐藏部分网页</h2> <p class="sycode"> 绝对定位元素时常用CSS属性visibility（可见性），隐藏部分网页或显示隐藏部分visibility:hidden（隐藏），visibility:visible（可见） </p> <p class="sycode"> visibility:hidden与display:none类似，不过visibility会在HTML网页留下空白，display不会 </p> <p class="sycode"> opacity属性也可以隐藏元素：opacity:0，完全不可见，opacity:1，完全可见 </p> <h2 id="强大的定位策略">强大的定位策略</h2> <p class="sycode"> 综合使用position的定位 </p> </p> <p class="sycode"> 第四部分----CSS高级技术 第16章，设计打印页面的CSS技术 </p> <p class="sycode"> <h2 id="Media样式表的作用">Media样式表的作用</h2> <p class="sycode"> CSS支持10种不同的媒体类型：all、braille、embossed、handheld、print、projection、screen、speech、tty、tv </p> <p class="sycode"> 应特别注意的3种媒体类型： </p> <p class="sycode"> all：适用于每一种设备，当把样式嵌入或通过外部样式表进行链接时，用的就是这种方式 </p> <p class="sycode"> screen：只适用于显示器 </p> <p class="sycode"> print：只适用于打印网页 </p> <h2 id="给外部样式表指定媒体类型">给外部样式表指定媒体类型</h2> <p class="sycode"> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link rel="stylesheet" media="print" href="print.css"></pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> </p> <p class="sycode"> 技术上来说：@import url(print.css) print;也是可以的，只是IE不支持 </p> <h3 id="在样式表中指定媒体类型">在样式表中指定媒体类型</h3> <p class="sycode"> 在样式表中使用以下语句： </p> </p> <p class="sycode"> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>@media print{ /*put your styles for printer in here*/}</pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> <h2 id="重写文本样式">重写文本样式</h2> <p class="sycode"> 使用pixel或em单位对于浏览器而言可能很好，但对打印机并不起作用。浏览器会根据自己的解释将其转换成打印的单位：点（pt），不同浏览器解释不一样，所以最好能够设置成针对打印机的样式使用pt作为单位 </p> <h2 id="定义打印背景">定义打印背景</h2> <p class="sycode"> 1、取消背景元素 </p> <p class="sycode"> 使用background:white;可直接将背景设置成白色，并取消图片 </p> <p class="sycode"> 2、保留背景元素 </p> <p class="sycode"> 3、给打印添加分页符 </p> <p class="sycode"> 使用page-break-before和page-break-after属性 </p> <p class="sycode"> page-break-before:always让Web浏览器在一个指定样式之前插入分页符，是某个元素显示在打印页的顶部 </p> <p class="sycode"> page-break-after:always是某一个元素显示在打印页面最后 </p> </p> <p class="sycode"> 第17章，改正CSS设计习惯 <p class="sycode"> 1、添加注释 </p> <p class="sycode"> 2、组织样式和样式表 </p> <p class="sycode"> 3、样式命名要清晰 </p> <p class="sycode"> 4、根据用途而不是外观命名样式 </p> <p class="sycode"> 5、不根据位置命名 </p> <p class="sycode"> 6、不使用含义模糊的名称 </p> <p class="sycode"> 7、使用多个类可以节省时间 </p> <p class="sycode"> 8、将样式分组：把网页上相关部位所采用的样式集中在一起，把用途相关的样式集中在一起 </p> <p class="sycode"> 9、用注释分隔样式组 </p> <p class="sycode"> 10、使用多个样式表：可以使用@import合并多个样式表，再引入’ </p> <p class="sycode"> 11、消除浏览器的样式冲突：即各个浏览器的默认样式不一致，要对样式重置 </p> <p class="sycode"> 12、使用派生选择器：尽量减少ID选择器的使用，以及减少类的使用 </p> <p class="sycode"> 高级：面向对象的CSS，可登录网站： http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/，还可以在以下网站查看OOCSS项目： https://github.com/stubbornella/oocss，另一种方法称作Scalable and Modular Architecture for CSS（简称SMACSS），这是一种创建可重用CSS组件的简单样式向导。可通过以下网站了解： http://smacss.com </p> <p class="sycode"> 13、给IE尝试不同的CSS </p> <p class="sycode"> IE条件注释基本结构： </p> <p class="sycode"> <p class="sycode"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!--[if IE]> /*针对IE的样式*/<![endif]--></pre><div class="contentsignin">Salin selepas log masuk</div></div> </p> <p class="sycode"> 非IE浏览器会当成HTML注释并忽略 </p> <p class="sycode"> 关于IE条件注释更多信息，请登录了解： http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx </p> <p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p>
<p class="sycode"></p> <p class="sycode"></p> <p class="sycode"> </p> <p class="sycode"></p> <p class="sycode"></p> </div>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">Kenyataan Laman Web ini</div>
<div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi 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_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>Artikel Panas</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780570.html" title="R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780641.html" title="R.E.P.O. Tetapan grafik terbaik" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Tetapan grafik terbaik</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796785841.html" title="Assassin's Creed Shadows: Penyelesaian Riddle Seashell" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Penyelesaian Riddle Seashell</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780520.html" title="R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796779766.html" title="WWE 2K25: Cara Membuka Segala -galanya Di Myrise" class="phpgenera_Details_mainR4_bottom_title">WWE 2K25: Cara Membuka Segala -galanya Di Myrise</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ms/article.html">Tunjukkan Lagi</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>Alat AI Hot</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/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/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/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/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/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/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Gambar buka pakaian secara percuma</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/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/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>Penyingkiran pakaian AI</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/ai/ai-hentai-generator" title="AI Hentai Generator" 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/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ms/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title">
<h3>AI Hentai Generator</h3>
</a>
<p>Menjana ai hentai secara percuma.</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ms/ai">Tunjukkan Lagi</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>Artikel Panas</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780570.html" title="R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780641.html" title="R.E.P.O. Tetapan grafik terbaik" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Tetapan grafik terbaik</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796785841.html" title="Assassin's Creed Shadows: Penyelesaian Riddle Seashell" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Penyelesaian Riddle Seashell</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796780520.html" title="R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>4 minggu yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/1796779766.html" title="WWE 2K25: Cara Membuka Segala -galanya Di Myrise" class="phpgenera_Details_mainR4_bottom_title">WWE 2K25: Cara Membuka Segala -galanya Di Myrise</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ms/article.html">Tunjukkan Lagi</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>Alat panas</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/toolset/development-tools/92" title="Notepad++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="Notepad++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Editor kod yang mudah digunakan dan percuma</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" 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 versi Cina" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Cina</h3>
</a>
<p>Versi Cina, sangat mudah digunakan</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/toolset/development-tools/121" title="Hantar Studio 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="Hantar Studio 13.0.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Hantar Studio 13.0.1</h3>
</a>
<p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/toolset/development-tools/469" title="Dreamweaver 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="Dreamweaver CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Alat pembangunan web visual</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ms/toolset/development-tools/500" title="SublimeText3 versi 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 versi Mac" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Mac</h3>
</a>
<p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ms/ai">Tunjukkan Lagi</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>Topik panas</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7507</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>15</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1378</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/ms/faq/steamdzhmcssmgs" title="Apakah format nama akaun stim" class="phpgenera_Details_mainR4_bottom_title">Apakah format nama akaun stim</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>78</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>11</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/winactivationkeyper" title="kunci pengaktifan win11 kekal" class="phpgenera_Details_mainR4_bottom_title">kunci pengaktifan win11 kekal</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>52</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>19</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ms/faq/newyorktimesdailybrief" title="Sambungan NYT menunjukkan dan jawapan" class="phpgenera_Details_mainR4_bottom_title">Sambungan NYT menunjukkan dan jawapan</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>19</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>55</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ms/faq/zt">Tunjukkan Lagi</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/ms/faq/1796782759.html" title="Apakah tujuan & lt; kemajuan & gt; unsur?" 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/202503/21/2025032112342868456.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah tujuan & lt; kemajuan & gt; unsur?" />
</a>
<a href="https://www.php.cn/ms/faq/1796782759.html" title="Apakah tujuan & lt; kemajuan & gt; unsur?" class="phphistorical_Version2_mids_title">Apakah tujuan & lt; kemajuan & gt; unsur?</a>
<span class="Articlelist_txts_time">Mar 21, 2025 pm 12:34 PM</span>
<p class="Articlelist_txts_p">Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796782758.html" title="Apakah tujuan & lt; DATALIST & GT; unsur?" 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/202503/21/2025032112332857446.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah tujuan & lt; DATALIST & GT; unsur?" />
</a>
<a href="https://www.php.cn/ms/faq/1796782758.html" title="Apakah tujuan & lt; DATALIST & GT; unsur?" class="phphistorical_Version2_mids_title">Apakah tujuan & lt; DATALIST & GT; unsur?</a>
<span class="Articlelist_txts_time">Mar 21, 2025 pm 12:33 PM</span>
<p class="Articlelist_txts_p">Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796780220.html" title="Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?" 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/202503/17/2025031712203454598.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?" />
</a>
<a href="https://www.php.cn/ms/faq/1796780220.html" title="Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?" class="phphistorical_Version2_mids_title">Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?</a>
<span class="Articlelist_txts_time">Mar 17, 2025 pm 12:20 PM</span>
<p class="Articlelist_txts_p">Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796782760.html" title="Apakah tujuan & lt; meter & gt; unsur?" 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/202503/21/2025032112352661331.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah tujuan & lt; meter & gt; unsur?" />
</a>
<a href="https://www.php.cn/ms/faq/1796782760.html" title="Apakah tujuan & lt; meter & gt; unsur?" class="phphistorical_Version2_mids_title">Apakah tujuan & lt; meter & gt; unsur?</a>
<span class="Articlelist_txts_time">Mar 21, 2025 pm 12:35 PM</span>
<p class="Articlelist_txts_p">Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796780224.html" title="Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?" 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/202503/17/2025031712273147081.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?" />
</a>
<a href="https://www.php.cn/ms/faq/1796780224.html" title="Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?" class="phphistorical_Version2_mids_title">Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?</a>
<span class="Articlelist_txts_time">Mar 17, 2025 pm 12:27 PM</span>
<p class="Articlelist_txts_p">Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796782305.html" title="Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?" 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/202503/20/2025032017560614263.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?" />
</a>
<a href="https://www.php.cn/ms/faq/1796782305.html" title="Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?" class="phphistorical_Version2_mids_title">Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif?</a>
<span class="Articlelist_txts_time">Mar 20, 2025 pm 05:56 PM</span>
<p class="Articlelist_txts_p">Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796782318.html" title="Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?" 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/202503/20/2025032018054766795.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?" />
</a>
<a href="https://www.php.cn/ms/faq/1796782318.html" title="Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?" class="phphistorical_Version2_mids_title">Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?</a>
<span class="Articlelist_txts_time">Mar 20, 2025 pm 06:05 PM</span>
<p class="Articlelist_txts_p">Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ms/faq/1796790390.html" title="GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404?" 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/246/273/174312372425268.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404?" />
</a>
<a href="https://www.php.cn/ms/faq/1796790390.html" title="GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404?" class="phphistorical_Version2_mids_title">GITEE PAGES PENYEDIAAN LAMAN WEB STATIC Gagal: Bagaimana menyelesaikan masalah dan menyelesaikan kesilapan fail tunggal 404?</a>
<span class="Articlelist_txts_time">Apr 04, 2025 pm 11:54 PM</span>
<p class="Articlelist_txts_p">Giteepages Statik Laman Web Penggunaan Gagal: 404 Penyelesaian Masalah dan Resolusi Ralat Semasa Menggunakan Gitee ...</p>
</div>
</div>
<a href="https://www.php.cn/ms/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>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/ms/about/us.html">Tentang kita</a>
<a href="https://www.php.cn/ms/about/disclaimer.html">Penafian</a>
<a href="https://www.php.cn/ms/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?1744680796"></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>
</body>
</html>
2、浮动外围元素
3、利用overflow:hidden，在外围元素中使用
4、使用Micro Clear Fix
多列布局
CSS3引入了multicolumn layout（多列布局）模块，IE9及其更早版本不支持，multicolumns属性可以在W3C官网上找到： www.w3.org/TR/css3-multicol/，用以创建和预览多列的在线工具： www.aaronlumsden.com/multicol/
第14章，响应式Web设计
响应式Web设计基础知识
响应式Web设计简称RWD。
Ethan Marcotte在他的著作Responsive Web Design中详细讲解了RWD的步骤，原稿： http://www.alistapart.com/articles/responsive-web-design
RWD中结合了三大理念：用于布局的弹性网络、用于图片和视频的弹性媒体、为不同屏幕宽度创建不同样式的CSS媒体查询
在网页
中添加以下代码（