使用HTML实现W3C首页的 CSS 演示 - 一张 HTML 页面 - 多个样式！

小咪咪 2024-04-20 22:04 21阅读 0赞

### 无样式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUxOTM1MDA4_size_16_color_FFFFFF_t_70]  
整体布局 最外面是Body  
里面三个分别是 Header Wrapper bottom  
开始我也不知道为什么要这样弄好几个 后来才发现这样的好处 大家可以自己打代码先不这样布局 都弄成一块一块 然后你们就能理解了

<body> //最外层
    
    <div id="header">
        <h1>
            欢迎访问我的首页
        </h1>
        <p>
            请使用菜单来选择不同的样式表
        </p>
    </div>
    
    <div id="wrapper">
    
        <div id="meum">
            <ul id="meumlist">   //ul是一个项目列表  li是列表项
                <li class="meuitem" onclick="reStyle(0)">样式1</li>    //onclick是为了以后
                <li class="meuitem" onclick="reStyle(1)">样式2</li>	//切换 样式用的
                <li class="meuitem" onclick="reStyle(2)">样式3</li>
                <li class="meuitem" onclick="reStyle(3)">样式4</li>
                <li class="meuitem" onclick="reStyle(4)">无样式</li>
            </ul>
        </div>
    
        <div id="main">
            <h1>
                相同页面不同的样式表
            </h1>
            <p>
                这是不同样式表如何更改HTML页面布局的演示。您可以通过在菜单中选择不同的样式表或选择以下链接之一来更改此页面的布局：
                </br>
                <a href="#" onclick="reStyle(0)" ;>样式1</a>
                <a href="#" onclick="reStyle(1)" ;>样式2</a>
                <a href="#" onclick="reStyle(2)" ;>样式3</a>
                <a href="#" onclick="reStyle(3)" ;>样式4</a>
            </p>
            <h2>
                无样式
            </h2>
            <p>
                此页面使用 div 元素对 HTML 页面的不同部分进行分组。单击此处查看没有样式表的页面的外观：</br>
                <a href="#" onclick="reStyle(4)" ;>无样式</a>
            </p>
        </div>
    
        <div id="sidebar">
            <h3>侧栏</h3>
            侧边栏其实就是一种比较经典的网站导航设计，它的形式通常为竖向的一列，展示在网站的右侧或者左侧，具体的位置当然是取决于整体的设计。</p>
        </div>
    
    </div>
    
    <div id="bottom">
        <P>网站的页脚是位于每个页面底部的内容区域，在主内容的下面。</P>
        <p>术语“页脚”来自于印刷，其中页脚是贯穿文档所有页面的一致性设计元素。</p>
    </div>
    
    </body>

样式一  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUxOTM1MDA4_size_16_color_FFFFFF_t_70 1]

写了一遍发现好多还很模糊 还得去理解  
剩下三个 大家自己可以看看代码理解理解 我就不注释了 如果有需要 可以留言我在注释

### margin ###

![在这里插入图片描述][6d3e75cb9dbe40088861ea215544641e.png]

[(图文详细)最通俗易懂的CSS 浮动float属性详解][CSS _float]

样式切换 js

这是完整代码

<!DOCTYPE html>
    <html lang="en">
    <head>
    
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
        
                font:100% Lucida Sans,Verdana;
                margin: 20px;
                line-height: 26px;
            }
    
    
            #header ,#sidebar {
        
                border-radius: 4px;
                margin:4px;
                padding: 2px;
            }
    
            #header {
        
                background-color: #4CAF50;
                color: white;
    
            }
    
            #wrapper {
        
                position: relative;
                overflow: auto;
            }
    
            .meuitem{
        
                border-radius: 4px;
                margin: 4px;
            }
    
            #meum{
        
                width: 200px;
                float: left;
            }
    
            #meumlist{
        
                margin: 0;
                padding: 0;
            }
            .meuitem{
        
                background-color: #f1f1f1;
                border: 1px solid #d4d4d4;
                list-style-type: none;
                border: 1px solid #eeeeee ;
                padding: 2px;
                cursor: pointer;
            }
    
            .meuitem:hover{
        
                background-color: #ffffff;
            }
            .meuitem:first-child {
        
                background-color:#4CAF50;
                color: white;
                font-weight:bold;
            }
    
            #main {
        
                padding: 15px;
                margin: 0 200px;
    
            }
    
            a{
        
                color: #32a4e7;
            }
    
            a:hover{
        
                text-decoration: none;
            }
    
            #sidebar {
        
                width: 180px;
                background-color: #32a4e7;
                color: white;
                padding: 10px;
                bottom: 0;
                top: 0;
                right: 0;
                position: absolute;
            }
    
            #bottom {
        
                border: 1px solid #d4d4d4;
                background-color: #f1f1f1;
                text-align: center;
                padding: 10px;
                font-size: 70%;
                line-height: 14px;
            }
    
        </style>
        <style>
            body {
        
                font-family: Arial;
                background-color: #d14836;
                line-height: 20px;
            }
    
            #header{
        
                color: #ffffff;
                padding:15px;
                font-size: 30px;
                line-height: 20px;
    
            }
    
            #header h1 {
        
                margin:0;
                line-height: 50px;
            }
            #header p{
        
                margin-top: 60px;
            }
            #wrapper{
        
                background-color: white;
                padding: 5px;
            }
    
            #meum {
        
                float:right;
                width: 190px;
                font-size: 100%;
                margin-top: -15px;
            }
    
            #meumlist {
        
                padding:0;
                font: 16px verdana;
            }
    
            .meuitem {
        
                background-color: red;
                border:1px solid #d14836;
                border-radius: 40px;
                list-style-type: none;
                color: white;
                width: 155px;
                margin:10px;
                padding: 5px;
                text-align: center;
                cursor: pointer;
            }
            .meuitem:hover{
        
                background-color: #ffffff;
                color: #d14836;
            }
            .meuitem:nth-child(2){
        
                background-color: white;
                color: red;
            }
    
            #main{
        
                padding: 5px;
                font-size: 80%;
            }
            #main h1,h2,a {
        
                color: #d14836;
            }
            #main a {
        
                text-decoration:none ;
            }
            #main a:hover{
        
                text-decoration: underline;
            }
            #sidebar {
        
                background-color: #F6DAD7;
                color: #d14836;
                padding: 10px;
            }
            #bottom{
        
                text-align: center;
                color: white;
                font-size: 80%;
            }
        </style>
        <style>
            body{
        
    
                padding: 12px;
            }
            #header h1{
        
                color: #84c754;
            }
            #header p{
        
                margin-top: 60px;
            }
            #meum{
        
                margin-top: 40px;
            }
            #meumlist{
        
                margin-left: -43px;
            }
            .meuitem {
        
                list-style-type: none;
                width: 150px;
                background-color: #555555;
                color: white;
                float: left;
                margin-left: 5px;
                text-align: center;
                padding: 2px;
                line-height: 26px;
                cursor: pointer;
            }
            .meuitem:nth-child(3){
        
                background-color: #84c754;
            }
            .meuitem:hover{
        
                background-color: #d4d4d4;
            }
    
            #main {
        
                padding-top: 40px;
            }
            h1 ,h2 , h3 {
        
                color: #84c754;
            }
    
            #sidebar{
        
                background-color:#eeeeee;
                padding: 10px;
            }
    
            #bottom {
        
                text-align: center;
                font-size: 50%;
            }
    
        </style>
        <style>
            body {
        
                margin: 4px;
                padding: 2px;
                background-color: black;
            }
    
            #header {
        
                color: #84c754;
            }
    
            #wrapper {
        
                position: relative;
                overflow: auto;
            }
    
            #meum {
        
                margin: 2px;
                color: #84c754;
            }
    
            .meuitem{
        
                cursor: pointer;
                margin-top: 2px;
            }
    
            .meuitem:hover{
        
                color: #eeeeee;
            }
    
            .meuitem:nth-child(4){
        
                color: white;
            }
    
            #main{
        
                margin-top: 10px;
                color: #84c754;
            }
            #main a{
        
                color: white;
            }
    
            #main a:hover{
        
                color: limegreen;
    
            }
    
            #sidebar{
        
                color: #ffffff;
                border: 1px solid #ffffff;
                border-radius: 4px;
                padding: 10px;
                width: 320px;
                top: 0;
                right: 0;
                position: absolute;
                font-size: 80%;
                line-height: 20px;
            }
            #bottom{
        
                text-align: center;
                font-size: 70%;
                border: 1px solid white;
                color: white;
            }
    
    
        </style>
        <style>
    
        </style>
    </head>
    
    <body>
    
    <div id="header">
        <h1>
            欢迎访问我的首页
        </h1>
        <p>
            请使用菜单来选择不同的样式表
        </p>
    </div>
    
    <div id="wrapper">
    
        <div id="meum">
            <ul id="meumlist">
                <li class="meuitem" οnclick="reStyle(0)">样式1</li>
                <li class="meuitem" οnclick="reStyle(1)">样式2</li>
                <li class="meuitem" οnclick="reStyle(2)">样式3</li>
                <li class="meuitem" οnclick="reStyle(3)">样式4</li>
                <li class="meuitem" οnclick="reStyle(4)">无样式</li>
            </ul>
        </div>
    
        <div id="main">
            <h1>
                相同页面不同的样式表
            </h1>
            <p>
                这是不同样式表如何更改HTML页面布局的演示。您可以通过在菜单中选择不同的样式表或选择以下链接之一来更改此页面的布局：
                </br>
                <a href="#" οnclick="reStyle(0)" ;>样式1</a>
                <a href="#" οnclick="reStyle(1)" ;>样式2</a>
                <a href="#" οnclick="reStyle(2)" ;>样式3</a>
                <a href="#" οnclick="reStyle(3)" ;>样式4</a>
            </p>
            <h2>
                无样式
            </h2>
            <p>
                此页面使用 div 元素对 HTML 页面的不同部分进行分组。单击此处查看没有样式表的页面的外观：</br>
                <a href="#" οnclick="reStyle(4)" ;>无样式</a>
            </p>
        </div>
    
        <div id="sidebar">
            <h3>侧栏</h3>
            侧边栏其实就是一种比较经典的网站导航设计，它的形式通常为竖向的一列，展示在网站的右侧或者左侧，具体的位置当然是取决于整体的设计。</p>
        </div>
    
    </div>
    
    <div id="bottom">
        <P>网站的页脚是位于每个页面底部的内容区域，在主内容的下面。</P>
        <p>术语“页脚”来自于印刷，其中页脚是贯穿文档所有页面的一致性设计元素。</p>
    </div>
    
    
    <script>
    
        reStyle(0);
    
        function noStyles() {
        
            document.styleSheets[0].disabled = true;
            document.styleSheets[1].disabled = true;
            document.styleSheets[2].disabled = true;
            document.styleSheets[3].disabled = true;
        }
    
        function reStyle(n) {
        
            noStyles()
            document.styleSheets[n].disabled = false;
        }
    
    </script>
    
    </body>
    </html>

昨天刚开始学 如果有错的地方大家多多指正  
写出来才能发现自己更多的问题  
我会继续完善那几个坑 希望和大家一起进步  
哪里不懂可以私我  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUxOTM1MDA4_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUxOTM1MDA4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/55d49b493a8c4c62b3c2d2b7d768e7d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUxOTM1MDA4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/25c2a3cfc8aa4e35b75e08d55e7b0047.png
[6d3e75cb9dbe40088861ea215544641e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/b2eb9de9a3964bbca133d81ec63c548c.png
[CSS _float]: https://blog.csdn.net/qq_36595013/article/details/81810219?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162977557416780255219083%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162977557416780255219083&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-2-81810219.pc_search_result_cache&utm_term=CSS%20floaat&spm=1018.2226.3001.4187
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzUxOTM1MDA4_size_16_color_FFFFFF_t_70_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/b15050d9202644268422565f5bb9aab8.jpg