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

小k鏖

已于 2024-10-31 18:30:50 修改

阅读量433

点赞数 14

文章标签： css 前端 html

于 2024-10-30 13:18:44 首次发布

本文链接：https://blog.youkuaiyun.com/2301_79765198/article/details/143362504

版权

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

主要通过CSS样式制作，由图一变图二

图一基本骨架为

<!DOCTYPE html>  
<html lang="zh">  
 
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>网页布局综合练习</title> 
</head>  
 
<body>  
  
    <header>  
        <section class="container1">    
 
        </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">  
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </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>

1、用几个div盒子放置顶部的图片，使用绝对定位设置它们的位置

代码

 <style>
        #div1{
            height: 150px;
            width: 100%;
            float: left;
            background-image: url(top.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        #div2{
            position: absolute;
            top: 2px;
            margin-left: 50px;
        }
        #div3{
            position: absolute;
            top: 20px;
            left: 50%;
        }
        #div3 p{
            font-size: 30px;
            text-align: center;
            margin: 0px;
        }
    </style> 
 </head>
 
  
   
 
<body>  
  
   <header>  
        <section class="container1">    
            <div id="div1">
                <div id="div2">
                    <img src="logo.png" alt="">
                </div>
                <div id="div3">
                    <p>计算机学院</p>
                    <img src="logo2.png" alt="">
                </div>
            </div>          
 
        </section>
    </header>

2.左浮动功能 float: left; 让导航栏横向排列，使用伪类选择器设置导航栏样式

代码

        /*让导航栏横向排列*/
		  nav{
            background-color:black;
        }
        nav ul li{
            list-style: none;
            float: left;
            margin-left: 50px;
            font-size: 20px;
        }
        ul{
            margin: 0;
            padding: 0;
        }
        /* 使用伪元素选择器解决高度塌陷问题 */
        nav::after{
            content: "";
            display: block;
            clear: both;
        }
		/* 设置上导航栏的样式 */
		.clear_ele li{
  			overflow: hidden;
 		 	background-color:black;
		}
 
		/* 设置 dh 链接的样式 */
		.clear_ele li a {
		  float: left;
		  display: block;
		  color: #f2f2f2;
		  text-align: center;
		  padding: 14px 16px;
		  text-decoration: none;
		}
 
		/* 改变鼠标悬停时的颜色 */
		.clear_ele li a:hover {
		  background-color: #333 ;
		  color: #ddd;
		}

3、接下来使用固定定位 position: fixed; 将问题栏放在右下角

代码

 main .container3{
            border: 2px rgb(255, 136, 156) solid;
            background-color: pink;
            width: 240px;
            height: 150px;
            position: fixed;
            bottom: 50px;
            right: 50px;
        }

4、使用三列布局方法将内容部分分成三列

代码

 #aside-left{
            width: 20%;
            height: 600px;
            background-color: palevioletred;
            float: left;
        }
        #aside-right{
            width: 20%;
            height: 600px;
            background-color: purple;
            float: right;
        }
        article{
            width: 60%;
            height: 600px;
            background-color: gray;
            margin-left: 20%;
            margin-right: 20%;
        }

5、使用左浮动将内容图片摆放好

article ul li{
            list-style: none;
            width: 20%;
            height: 150px;
            background-image: url(photo2.jpg);
            background-size: 100% 100%;
            border: 2px red solid;
            margin-right: 2%;
            margin-bottom: 2%;
            float: left;
        }
        article ul{
            margin: 100px;
        }

设置页脚样式就完成了

代码

  footer{
            background-color:lightcoral;
            text-align: center;
        }
        footer p{
            margin: 0px;
        }