当前位置：首页 > article >正文

CSS综合练习（学校官网静态网页）

article 2024/11/4 21:39:41

如何设置一个官网网页？

运行代码如下：

<style>
    body{
        margin: 0px;
    }
    .container1{
        background:url(./top_proc.jpg);
        width: 100%;
        height: 150px;
        }
    .div1{
        width: 100%;
        height: 150px;
    }
    #img1{
        width: 40%;
        height: 90%;
        position: relative;
        top: 3%;
        left: 10%;
    }
    #img2{
        position: relative;
        top: 10%;
        left: 25%;
    }
    section div p{
        font-size: 30px;
        position: absolute;
        top: 10px;
        left: 70%;
    }
        nav ul{
            height:30px;  /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/
            background-color: rgb(54, 178, 54);
            margin-bottom: 0px;
            margin-top: 0px;
           
        }
        nav ul li{
            margin-right: 50px;
            float:left;
            padding-left: 50px;
            
        }
        .clear_ele a:link{
            color: white;
            text-decoration: none;    /* 取消链接下划线 */
        }
        #div2{
            width: 20%;
            height: 600px;
            background-color: green;
            float: left;
        }
        #div3{
            width: 20%;
            height: 600px;
            background-color: green;
            float: right;
        }
        #div4{
            width: 60%;
            height: 600px;
            background-color: gray;
            margin-left: 20%;
            margin-right: 20%;
        }
        .img9{
            width: 20%;
            height: 30%;
            margin-top: 5%;
            margin-left: 2%;
            border: 2px red solid;
        }
        #div8{
            width: 200px;
            height: 200px;
            border: 2px black solid;
            background-color: pink;
            position: fixed;
            top: 550px;
            right: 100px;
        }
        footer{
            width: 100%;
            height: 25px;
            margin-top: -100px;
            background-color: rgb(54, 178, 54);
            clear: both;

        }
       
</style>
</head>
<body>
<header>
    <section class="container1">          
        <div class="div1">
            <img src="./logo.png" id="img1">
            <img src="./logo2.png" id="img2">
            <p><b>计算机学院</b></p>
        </div>
    </section>
</header>
<nav>
    <ul class="clear_ele" type="none">  
        <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>
<article>
    <div id="div6">
        <div id="div2"><b>学院新闻</b></div>
        <div id="div3"><b>友情链接</b></div>
        <div id="div4"><b>文章</b><br><br>
            <img src="./photo2.jpg" class="img9">
            <img src="./photo2.jpg" class="img9">
            <img src="./photo2.jpg" class="img9">
            <img src="./photo2.jpg" class="img9">
            <img src="./photo2.jpg" class="img9">
            <img src="./photo2.jpg" class="img9">
            <img src="./photo2.jpg" class="img9">
            <img src="./photo2.jpg" class="img9">
        </div>
        <footer>
            <p style="text-align: center;">版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p> 
        </footer>
    </div>
</article>
<aside>
    <div id="div8">
        <h3>联系我们</h3>
        姓名：
        <input type="text"><br>
        邮箱：
        <input type="text"><br>
        <input type="button" value="提交">
    </div>
</aside>

</body>