求一个 经典布局方案_html/css_WEB-ITnose
如上图,要求:使用纯css实现,不使用js
想了半天没想到好的办法实现
回复讨论(解决方案)
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><style>*{ margin:0; padding:0;}html,body{ width:100%;height:100%}.b{ /*设置元素宽度包含边框宽度**/box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }main{margin-top:-50px;margin-left:-200px;padding-left:200px; padding-top:50px;overflow-y:scroll;float:left;background:#FF0000; width:100%; height:100%;}#left{ float:left; width:200px; height:100%; padding-top:50px; margin-top:-50px;overflow-y:scroll; background:#0000FF; z-index:2; position:relative }</style> </head><body><header style=" line-height:50px;height:50px; background:#666666; color:#FFFFFF; text-align:center;z-index:3; position:relative"> width:100%;height:50px;</header><div id="left" class="b" > <!--用于展示部分--> <div style="width:100%; height:33%; background:#00FF00">1</div> <div style="width:100%; height:33%; background:#666">2</div> <div style="width:100%; height:33%; background:#09F">3</div> <div style="width:100%; height:33%; background:#3C0">4</div> <div style="width:100%; height:33%; background:#3FF">5</div> <div style="width:100%; height:33%; background:#F3C">6</div> <!----------></div><main class="b"> <!--用于展示部分--> <div style="width:100%; height:33%; background:#3C0">1</div> <div style="width:100%; height:33%; background:#F3C">2</div> <div style="width:100%; height:33%; background:#3FF">3</div> <div style="width:100%; height:33%; background:#09F">4</div> <div style="width:100%; height:33%; background:#666">5</div> <div style="width:100%; height:33%; background:#00FF00">6</div> <!--------------></main</body></html>
试试:table-cell+table-row
@q81999008
现在你的这个例子有一个小问题,就是 左侧的滚动条看不到上面的箭头。有没有更好的体验办法
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><style>*{ margin:0; padding:0;}html,body{ width:100%;height:100%}.b{ /*设置元素宽度包含边框宽度**/box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }main{margin-top:-50px;margin-left:-200px;padding-left:200px; padding-top:50px;float:left;background:#FF0000; width:100%; height:100%;}#left{ float:left; width:200px; height:100%; padding-top:50px; margin-top:-50px; background:#0000FF; z-index:2; position:relative }</style> </head><body><header style=" line-height:50px;height:50px; background:#666666; color:#FFFFFF; text-align:center;z-index:3; position:relative"> width:100%;height:50px;</header><div id="left" class="b"> <div style=" overflow-y:scroll; height:100%; width:100%"> <!--用于展示部分--> <div style="width:100%; height:33%; background:#00FF00">1</div> <div style="width:100%; height:33%; background:#666">2</div> <div style="width:100%; height:33%; background:#09F">3</div> <div style="width:100%; height:33%; background:#3C0">4</div> <div style="width:100%; height:33%; background:#3FF">5</div> <div style="width:100%; height:33%; background:#F3C">6</div> <!----------> </div></div><main class="b"> <div style=" overflow-y:scroll; height:100%; width:100%"> <!--用于展示部分--> <div style="width:100%; height:33%; background:#3C0">1</div> <div style="width:100%; height:33%; background:#F3C">2</div> <div style="width:100%; height:33%; background:#3FF">3</div> <div style="width:100%; height:33%; background:#09F">4</div> <div style="width:100%; height:33%; background:#666">5</div> <div style="width:100%; height:33%; background:#00FF00">6</div> <!--------------> </div></main</body></html>
@q81999008 谢谢 经测试 可用。

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas











Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.

Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.

Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

HTML, CSS dan JavaScript adalah teknologi teras untuk membina laman web moden: 1. HTML mentakrifkan struktur laman web, 2. CSS bertanggungjawab untuk kemunculan laman web, 3.

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.

Artikel ini membincangkan perbezaan antara tag HTML ,, dan, memberi tumpuan kepada kegunaan semantik dan presentasi mereka dan kesannya terhadap SEO dan kebolehaksesan.
