Bagaimana untuk melaksanakan susun atur bar sisi tetap menggunakan HTML dan CSS

Cara menggunakan HTML dan CSS untuk melaksanakan reka letak bar sisi tetap

Dalam reka bentuk web, reka letak bar sisi tetap ialah kaedah reka letak yang biasa dan praktikal. Dengan reka letak bar sisi tetap, kami boleh menyemat menu navigasi, bar carian atau kandungan penting lain pada satu sisi halaman web supaya ia kekal kelihatan semasa halaman menatal. Dalam artikel ini, saya akan memperkenalkan cara melaksanakan susun atur bar sisi tetap yang mudah dan praktikal menggunakan HTML dan CSS, dan memberikan contoh kod khusus.

Pertama, kita perlu mencipta struktur HTML asas. Dalam teg dokumen HTML, kita boleh menggunakan bekas utama <div> untuk membungkus keseluruhan kandungan halaman, seperti yang ditunjukkan di bawah: <code>标签中，我们可以使用一个主容器 <div> 来包裹整个页面内容，具体如下所示：<pre class='brush:html;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;固定侧边栏布局&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;sidebar&quot;&gt; &lt;!-- 侧边栏内容 --&gt; &lt;/div&gt; &lt;div class=&quot;content&quot;&gt; &lt;!-- 页面内容 --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>在上述代码中，我们创建了一个名为 <code>container 的主容器，其中包含一个名为 sidebar 的侧边栏容器和一个名为 content 的页面内容容器。

接下来，我们需要使用CSS样式来实现固定侧边栏的效果。在这里，我们将使用 position: fixed; 属性来固定侧边栏在页面中。具体的CSS样式如下所示：

.container {
    display: flex;
}

.sidebar {
    width: 200px;
    height: 100vh;
    background-color: #f1f1f1;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: auto;
}

.content {
    margin-left: 200px;
    width: calc(100% - 200px);
    padding: 20px;
}

在上述代码中，我们将 container 容器设置为 display: flex;，这样可以使侧边栏和页面内容容器水平排列。然后，我们对 sidebar 容器进行样式设置，其中 width 属性定义了侧边栏的宽度，height: 100vh; 表示侧边栏的高度和浏览器窗口的高度相等，background-color 属性定义了侧边栏的背景颜色，position: fixed; 将侧边栏固定在网页中，left: 0; 和 top: 0; 分别将侧边栏的位置设置在页面的左上角，overflow-y: auto; 表示当内容超出侧边栏高度时，可滚动显示。

为了使页面内容不被侧边栏遮挡，我们需要对 content 容器进行样式设置，其中 margin-left: 200px; 表示页面内容容器距离左侧边栏的宽度，width: calc(100% - 200px); 表示页面内容容器的宽度等于浏览器宽度减去侧边栏的宽度，padding: 20px;rrreee

Dalam Dalam kod di atas, kami mencipta bekas utama bernama bekas, yang mengandungi bekas bar sisi bernama bar sisi dan bekas bernama kandungan code> bekas kandungan halaman . <p></p>Seterusnya, kita perlu menggunakan gaya CSS untuk mencapai kesan bar sisi tetap. Di sini, kami akan menggunakan atribut <code>position: fixed; untuk membetulkan bar sisi pada halaman. Gaya CSS khusus adalah seperti berikut:

rrreee

Dalam kod di atas, kami menetapkan bekas bekas kepada display: flex;, yang boleh menjadikan bar sisi dan kandungan halaman Bekas disusun secara mendatar. Kemudian, kami menggayakan bekas bar sisi, dengan atribut width mentakrifkan lebar bar sisi dan height: 100vh; mewakili bar sisi ketinggian adalah sama dengan ketinggian tetingkap penyemak imbas Atribut warna latar belakang mentakrifkan warna latar belakang bar sisi position: fixed; membetulkan bar sisi dalam halaman web. kiri: 0; dan top: 0; masing-masing menetapkan kedudukan bar sisi ke penjuru kiri sebelah atas halaman, overflow-y: auto; code> Menunjukkan bahawa apabila kandungan melebihi ketinggian bar sisi, ia boleh ditatal. 🎜🎜Untuk mengelakkan kandungan halaman daripada disekat oleh bar sisi, kita perlu menetapkan gaya bekas <code>kandungan, di mana margin-left: 200px; bermaksud bahawa bekas kandungan halaman diletakkan dari sebelah kiri Lebar bar sisi, width: calc(100% - 200px); bermaksud lebar bekas kandungan halaman adalah sama dengan lebar penyemak imbas tolak lebar bar sisi, padding: 20px; Mewakili padding bekas kandungan halaman. 🎜🎜Dengan struktur HTML dan tetapan gaya CSS di atas, kami berjaya melaksanakan reka letak bar sisi tetap yang mudah. Anda boleh menyesuaikan gaya bar sisi dan kandungan halaman mengikut keperluan sebenar untuk memenuhi keperluan reka bentuk dan reka letak anda. 🎜🎜Perlu diingat bahawa ini hanyalah contoh susun atur bar sisi tetap, dan anda boleh menyesuaikan dan mengembangkannya lagi mengikut keperluan khusus anda. Saya harap artikel ini dapat membantu anda memahami dan melaksanakan reka letak bar sisi tetap. 🎜