CSS中综合练习（基础学校完整静态网页教程）！！

CH0407082024-11-05 16:55

#集合三行、多行多列、百分比布局做的基础学校完整静态网页#

一、百分比布局的使用

百分比的元素示例

html 复制代码 
<!DOCTYPE html>  
<html lang="zh">  
 
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>网页布局综合练习</title>  
    <style>      
        #div1{
            background-image: url(./top.jpg);
            background-size: 100%;
            height: 150PX;
            
        }
       #img1{
        position: relative;
        top: 20px;
       left: 100px;
       
 
    }
 
      #b{
        position: relative;
        left: 350px;
        bottom: 50%;
        
    }
    #img2{
        position: relative;
        
        left: 200px ;
        bottom: 20px;
    }
    </style>
    
 
</head>  
 
<body>  
  
   <header>  
      <section class="container1">
        <div id="div1">
        <img  id= "img1" src="./logo.png" alt="" width="650PX" height="150PX">
        <b id="b">计算机学院</b> 
        <img id="img2" src="./logo2.png" alt="">
        </div>
        
     </section>
   </header>  
   <nav> </nav>
   <main>
   <section></section>
   </main>   
   <footer></footer>
</body>  
 
 
</html>
代码运行后如下：

二、导航栏的使用

导航栏的元素示例

html 复制代码 
<!DOCTYPE html>  
<html lang="zh">  
 
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>网页布局综合练习</title>  
    <style>      
        nav ul{
            height:30px;
            background-color:rgb(21, 67, 21);
        } 
       nav ul li{
        margin-right: 20px;
        float:left;
       }
       .clear_ele a:link{
        color: rgb(189, 232, 232);
      }
       .clear_ele a:visited{
        color: azure;
      }
      </style>
    
 
</head>  
 
<body>   
   <header> 

   </header> 
   <nav>  
      <ul class="clear_ele">  
          <li><a href="https://gdyfvccm.edu.cn/">学校首页</a></li>  
          <li><a href="#">学院概况</a></li>  
          <li><a href="#">机构设置</a></li>  
          <li><a href="#">院系专业</a></li>  
          <li><a href="#">教学科研</a></li>  
          <li><a href="#">信息公开</a></li>  
          <li><a href="#">招生就业</a></li>
      </ul>  
   </nav>
   <main>
   <section></section>
   </main>   
   <footer></footer>
</body>  
 
 
</html>
代码运行后如下：

三、三列布局的使用

三列布局的元素示例

html 复制代码 
<!DOCTYPE html>  
<html lang="zh">  
 
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>网页布局综合练习</title>  
    <style>      
      #aside-left{
        float: left;
        width: 20%;
        height: 850px;
        background-color: rgb(30, 163, 30);
        
    }   
    #aside-right{
        float: right;
        width: 20%;
        height: 850px;
        background-color:rgb(30, 163, 30) ;
    } 
    </style>
    
 
</head>  
 
<body>  
  
   <header>  
      <section class="container1">
        <div id="div1">
        </div>
        
     </section>
   </header>  
   <nav> </nav>
   <main>  
        <section class="container2 clear_ele">  
            <aside id="aside-left">  
                学院新闻
            </aside>
 
            <aside id="aside-right">  
                友情链接
            </aside> 

            <article>文章  
             
            </article> 
        </section>  
   
    </main>  
    
   <footer></footer>
</body>  
 
 
</html>
代码运行后如下：

四、多行多列的运用

三列布局的元素示例

利用id选择器、类选择器选定元素形成多行多列的效果

html 复制代码 
<!DOCTYPE html>  
<html lang="zh">  
 
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>网页布局综合练习</title>  
    <style>      
      #aside-left{
        float: left;
        width: 20%;
        height: 850px;
        background-color: rgb(30, 163, 30);
        
    }   
    #aside-right{
        float: right;
        width: 20%;
        height: 850px;
        background-color:rgb(30, 163, 30) ;
    } 
    article{
        width: 60%;
        height: 850Px;
        background-color: gray;
        float: left;
    }
    .clear_ele img{
       list-style: none;
       width: 20%;
       height: 200px;
       border: 2px solid red;
       margin-right: 2%;
       margin-bottom: 2%;
    }
    .container3{
            width: 220px;
            height: 160px;
            background-color: pink;
            border: 2px black solid;
            position: fixed;
            right:235px;
            bottom: 10%;
        }  
    </style>
    
 
</head>  
 
<body>  
  
   <header>  
      <section class="container1">
        <div id="div1">
        </div>
        
     </section>
   </header>  
   <nav> </nav>
   <main>  
        <section class="container2 clear_ele">  
            <aside id="aside-left">  
                学院新闻
            </aside>
 
            <aside id="aside-right">  
                友情链接
            </aside> 

            <article>文章  
             <ul class="clear_ele">  
                      <br><br><br><br><br><br><br>
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">

                </ul>
            </article> 
        </section>  
      <section class="container3">  
            <h4>联系我们</h4>  
            <form>  
                姓名:
                <input type="text" id="name" name="name"><br>  
                邮箱:
                <input type="email" id="email" name="email"><br>  
                <input type="submit" value="提交">  
            </form>  
        </section>
    </main>  
    
   <footer></footer>
</body>  
 
 
</html>
代码运行后如下：

五、底部页脚<footer>的运用

底部页脚元素示例

html 复制代码 
<!DOCTYPE html>  
<html lang="zh">  
 
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>网页布局综合练习</title>  
    <style>    
    footer{
         width: 100%;
         height: 50px;
         background-color:rgb(78, 209, 78);
         float: left;
        
    }  
 
    </style>
    
 
</head>  
 
<body>  
  
    <header> 
    </header>  
    <nav> </nav>
    <main>
    </main>  

    <footer>  
        <p>版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p>  
    </footer>  
</body>  
 
 
</html>
代码运行后如下：

六、总代码运行

html 复制代码 
<!DOCTYPE html>  
<html lang="zh">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>网页布局综合练习</title>  
    <style>      
        #div1{
            background-image: url(./top.jpg);
            background-size: 100%;
            height: 150PX;
            
        }
       #img1{
        position: relative;
        top: 20px;
       left: 100px;
       

    }

      #b{
        position: relative;
        left: 350px;
        bottom: 50%;
        
    }
    #img2{
        position: relative;
        
        left: 200px ;
        bottom: 20px;
    }
    #div2{
        position: relative;
    }
       
    nav ul{
            height:30px;
            background-color:rgb(21, 67, 21);
        } 
    nav ul li{
        margin-right: 20px;
        float:left;
    }
    .clear_ele a:link{
        color: rgb(189, 232, 232);
    }
    .clear_ele a:visited{
        color: azure;
    }
    #aside-left{
        float: left;
        width: 20%;
        height: 850px;
        background-color: rgb(30, 163, 30);
        
    }   
    #aside-right{
        float: right;
        width: 20%;
        height: 850px;
        background-color:rgb(30, 163, 30) ;
    } 
    article{
        width: 60%;
        height: 850Px;
        background-color: gray;
        float: left;
    }
    .clear_ele img{
       list-style: none;
       width: 20%;
       height: 200px;
       border: 2px solid red;
       margin-right: 2%;
       margin-bottom: 2%;
    }


    .container3{
            width: 220px;
            height: 160px;
            background-color: pink;
            border: 2px black solid;
            position: fixed;
            right:235px;
            bottom: 10%;
        }  
    footer{
         width: 100%;
         height: 50px;
         background-color:rgb(78, 209, 78);
         float: left;
        
    }
    </style>
    

</head>  

<body>  
  
    <header>  
        <section class="container1">
        <div id="div1">
        <img  id= "img1" src="./logo.png" alt="" width="650PX" height="150PX">
        <b id="b">计算机学院</b> 
        <img id="img2" src="./logo2.png" alt="">
        </div>
        
        </section>
    </header>  

    <nav>  
      <ul class="clear_ele">  
          <li><a href="https://gdyfvccm.edu.cn/">学校首页</a></li>  
          <li><a href="#">学院概况</a></li>  
          <li><a href="#">机构设置</a></li>  
          <li><a href="#">院系专业</a></li>  
          <li><a href="#">教学科研</a></li>  
          <li><a href="#">信息公开</a></li>  
          <li><a href="#">招生就业</a></li>
      </ul>  
    </nav> 
 
    <main>  
        <section class="container2 clear_ele">  
            <aside id="aside-left">  
                学院新闻
            </aside>
 
            <aside id="aside-right">  
                友情链接
            </aside> 

            <article>文章  
                <ul class="clear_ele">  
                      <br><br><br><br><br><br><br>
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">
                    <img src="./photo2.jpg" alt="">

                </ul>
            </article> 
        </section>  
    

        <section class="container3">  
            <h4>联系我们</h4>  
            <form>  
                姓名:
                <input type="text" id="name" name="name"><br>  
                邮箱:
                <input type="email" id="email" name="email"><br>  
                <input type="submit" value="提交">  
            </form>  
        </section> 
    </main>  
  
    <footer>  
        <p>版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p>  
    </footer>  
  
</body>  


</html>
代码运行后如下
相关推荐
旧味清欢|6 分钟前
关注分离（Separation of Concerns）在前端开发中的实践演进：从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾23 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin34 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南（十）——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程05苍穹外卖面试总结06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07RAG 实践- Ollama+RagFlow 部署本地知识库08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09如何本地部署AI智能体平台，带你手搓一个AI Agent10Android下HWC以及drm_hwcomposer普法(上)