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

🕗 发布于 2024-11-05 21:03 css 前端 javascript

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

一、百分比布局的使用

百分比的元素示例

<!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>

代码运行后如下：

二、导航栏的使用

导航栏的元素示例

<!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>

代码运行后如下：

三、三列布局的使用

三列布局的元素示例

<!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选择器、类选择器选定元素形成多行多列的效果

<!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>的运用

底部页脚元素示例

<!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>

代码运行后如下：

六、总代码运行

<!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>

代码运行后如下

原文地址：https://blog.csdn.net/CH040708/article/details/143457259

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：LabVIEW 离心泵机组故障诊断系统
下一篇：华为eNSP：配置DHCP Snooping

vue3 + element-plus 的 upload + axios + django 文件上传并保存
之前在网上搜了好多教程，一直没有找到合适自己的，要么只有前端部分没有后端，要么就是写的不是很明白。所以还得靠自己摸索出来后，来此记录一下整个过程。环境安装什么的就不讲了，直接上代码好吧，这个是样式图。
阅读更多2024-11-06
Cuebric：用AI重新定义3D创作的未来
Cuebric 是一家成立于2022年夏天的好莱坞创新公司，致力于为电影、电视、游戏和时尚等行业提供先进的AI多模态SaaS平台。自2024年1月正式推出以来，Cuebric 已经在市场上获得了广泛的
阅读更多2024-11-06
easyui+vue 数据表更新问题的解决
数据的增删改查可以实时刷新出来,不建议在封装组件。nextTick 保证DOM 渲染完成。
阅读更多2024-11-06
软件测试基础：单元测试与集成测试
单元测试和集成测试是软件测试的基础，它们的重要性不言而喻。通过对软件的不同部分进行有序的测试，可以提高软件质量、减少后期维护成本，保证软件的可靠性和稳定性。软件开发者和测试人员应当重视并深入理解单元测
阅读更多2024-11-06
RxJS基本介绍以及与Promise的区别
Promise 适合处理单一的异步操作，具有更简单的 API，但缺乏灵活性和对多值的支持。RxJS (Observable) 适合处理复杂的异步流和多事件流，具有更多的操作符、错误处理机制和强大的组合
阅读更多2024-11-06
第三节 Vim编辑器与Shell命令脚本
这里的脚本主要使用 ping 命令来测试与对方主机的网络连通性，而 Linux 系统中的 ping 命令不像 Windows 一样尝试 4 次就结束，因此为了避免用户等待时间过长，需要通过-c 参数来
阅读更多2024-11-06
【JavaEE初阶 — 多线程】线程安全问题＆ synchronized
【JavaEE初阶 — 多线程】线程安全问题＆ Synchronized观察线程安全问题，分析了造成线程安全问题造成的三个原因：线程的随机调度，多个线程修改共享数据（修改同一个变量），以及原子性问题
阅读更多2024-11-06
十月末补充（？
【代码】十月末补充（？
阅读更多2024-11-06
13-鸿蒙开发中的综合实战：华为登录界面
通过本文，你已经学会了如何在鸿蒙开发中实现一个简单的登录界面，涵盖了输入框组件、按钮组件、文本组件和布局容器的使用。这个实战项目不仅帮助你巩固了基础知识，还提供了一个实际的应用场景。希望这篇文章对你有
阅读更多2024-11-06
python全栈开发《59.集合的增删改》
目录1.集合的add函数2.集合的update函数3.集合的remove函数4.集合的clear函数5.用del删除集合6.重要说明7.代码1.集合的add函数1.1add的功能用于集合中添加一个元素
阅读更多2024-11-06

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

一、百分比布局的使用

百分比的元素示例

代码运行后如下：

二、导航栏的使用

导航栏的元素示例

代码运行后如下：

三、三列布局的使用

三列布局的元素示例

代码运行后如下：

四、多行多列的运用

三列布局的元素示例

代码运行后如下：

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

底部页脚元素示例

代码运行后如下：

六、总代码运行

代码运行后如下

相关文章