CSS综合练习（学校官网静态网页）-CSDN博客

本文链接：https://blog.csdn.net/2403_87155496/article/details/143335924

接下来是前六篇综合练习代码以及截图

<!DOCTYPE html>  
<html lang="zh">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>典型的网页结构示例:带横向导航栏</title>  
    <style>
        #nav1
        {
            background-image: url(../html/img_src/top.png);
            width: 100%;
            height: 100px;
            background-size :100%; 
        }
        #div1
        {
            background-image: url(../html/img_src/logo.png);
            width: 40%;
            height: 100px;
            background-size :75%;
            background-repeat: no-repeat; 
            float:left;
        }
        #div2
        {
            background-image: url(../html/img_src/logo2.png);
            width: 40%;
            height: 50px;
            background-size: 100%;
            background-repeat: no-repeat;
            position: relative;
            left: 100%;
            top: -40%;
        }
        #p1
        {
            font-size: 150%;
            position: relative;
            left: 70%;
            top: -10%;
        }
        nav ul{
            height:30px;  /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/
            background-color:rgb(108, 229, 108);
            margin: auto;
        }
        nav ul li{
            margin-right: 20px;
            float:left;
        }
        .ul1 a
        {
            text-decoration: none;
            font-size: large;
            position: relative;
            left: 500%;
        }
        .ul1 a:visited
        {
           color: rgb(252, 252, 252);
        }
        .ul1 a:hover
        {
            color: red;
        }
        #contact{
            width: 220px;
            height: 160px;
            background-color: pink;
            border: 2px black solid;
            position: fixed;
            left:1280px;
            top:580px;
        }
        #section1
        {
          width: 100%;
        }
        #article1
        {
          width: 25%;
          height: 800px;

          background-color: green;
          float:right;
 
        }
        #article2
        {
          width: 25%;
          height: 800px;

          background-color: green; 
           float :left;
        }
        #article3
        {
            width: 50%;
            height: 800px;
            background-color: gray;
            float: left;
        }
        .article3 img
        {
            width: 20%;
            height: 150px;
            border: 2px red solid;
            float: left;
            margin-right: 2%;
            margin-bottom: 2%;
        }
        .article3 div
        {
            position: relative;
            left: 6%;
            top: 20%;
        }
        .section1::after
        {
            content: "";
            display: block;
            clear: both;
        }
        footer
        {
            border:2px gray solid;
            background-color:yellow; 
            text-align: center;
            clear:both;
        }

    </style>
</head>  

<body>  
  
    <header> 
    <nav id="nav1">
    <div id="div1">
    <p align="center" id="p1"><b>计算机学院</b></p>
    <div id="div2"> </div>   
    </div>
    </nav>
        <nav>  
            <ul type="none" class="ul1">  
                <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> 
                <li><a href="#">招生专业</a></li>  
            </ul>  
        </nav>  
    </header>   
    <main>  
        <section  class="section1" id="section1">  
            <article id="article2">  
                <h3>文章标题</h3>  
                <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  
                <br><br><br>
                <img src="./img_src/云中医校徽.jpg" alt="文章配图" width="200" height="200">  
                <p>想了解广东云浮中医药职业学院：<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  
            </article>  
            <article class="article3" id="article3">
                <div>
                <img src="./img_src/photo2.jpg" alt="">
                <img src="./img_src/photo2.jpg" alt="">
                <img src="./img_src/photo2.jpg" alt="">
                <img src="./img_src/photo2.jpg" alt="">
                <img src="./img_src/photo2.jpg" alt="">
                <img src="./img_src/photo2.jpg" alt="">
                <img src="./img_src/photo2.jpg" alt="">
                <img src="./img_src/photo2.jpg" alt="">
            </div>
            </article>


            <aside  id="article1">  
                <h3>侧边栏</h3>  
                <p>侧边栏内容，如快速链接、广告等。</p>  
                <table border="1">  
                    <tr>  
                        <th>专业</th>  
                        <th>链接</th>  
                    </tr>  
                    <tr>  
                        <td>计算机应用技术</td>  
                        <td><a href="专业A详情页.html">专业A详情</a></td>  
                    </tr>  
                    <tr>  
                        <td>数字媒体技术</td>  
                        <td><a href="专业B详情页.html">专业B详情</a></td>  
                    </tr>  
                </table>  
            </aside>  
        </section>  
    
        <section id="contact">  
            <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>