CSS网页布局综合练习（涵盖大多CSS知识点）

标签：知识点 right 网页 float height width background CSS left

题目：

将上面的转化为下面的

基本骨架

<!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，先设计section内的顶部，将图片插入后，用浮动和绝对定位（position：absolute）进行定位

        header{
            width: 100%;
            height: 200px;
        }
        .bgg{
            float: left;

        }

        .logo2{
            position: absolute;
            float: left;
            right: 20px;
            top: 30px;
        }
        .bgg1{
            position: absolute;
            float: left;
            right: 150px;
            top: 170px;
            font-size: 25px;

2、使用左浮动功能 float: left; 和固定定位position: fixed;固定好问题栏

        .container3{
            background-color: #ff52ae;
            position: fixed;
            right: 50px;
            top: 800px;
        }

3，使用三列布局方法将内容部分分成三列

        #aside-left{
            float: left;
            background-color: #539d03;
            height: 800px;
            width: 20%;
        }
        #aside-right{
            float: left;
            position: absolute;
            right: 0;
            background-color: #539d03;
            height: 800px;
            width: 20%;
        }
        article{
            background-color: darkgray;
            height: 800px;
            width: 60%;
            margin-left: 20%;

        }

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

       article ul li{
            list-style: none;
            width: 20%;
            height: 150px;
            background-image: url(C:/Users/凉音/Desktop/xixi2.png);
            background-size: 100% 100%;
            border: 2px red solid;
            margin-right: 2%;
            margin-bottom: 2%;
            float: left;
        }
        article ul{
            margin: 100px;
        }

5、设置页脚样式

        footer{
            background-color: #0d9801;
            clear: both;
            width: 100%;
            height: 30px;
            text-align: center;
        }

最终整体代码为

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

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>网页布局综合练习</title>  
    <style>
        header{
            width: 100%;
            height: 200px;
        }
        .bgg{
            float: left;

        }

        .logo2{
            position: absolute;
            float: left;
            right: 20px;
            top: 30px;
        }
        .bgg1{
            position: absolute;
            float: left;
            right: 150px;
            top: 170px;
            font-size: 25px;
        }
        nav{
            background-color: #83ff80;
        }
        nav .clear_ele li{
            display: inline;
            margin: 0px 20px;

        }
        a:link{
            text-decoration: #ffffff;
            font-size: 19px;
            text-decoration: none;
        }

        .li_wai{
            padding-left: 200px;
        }

        /*#左侧边栏*/
        #aside-left{
            float: left;
            background-color: #539d03;
            height: 800px;
            width: 20%;
        }
        #aside-right{
            float: left;
            position: absolute;
            right: 0;
            background-color: #539d03;
            height: 800px;
            width: 20%;
        }
        article{
            background-color: darkgray;
            height: 800px;
            width: 60%;
            margin-left: 20%;

        }
        footer{
            background-color: #0d9801;
            clear: both;
            width: 100%;
            height: 30px;
            text-align: center;
        }
        .container3{
            background-color: #ff52ae;
            position: fixed;
            right: 50px;
            top: 800px;
        }

        article ul li{
            list-style: none;
            width: 20%;
            height: 150px;
            background-image: url(C:/Users/凉音/Desktop/xixi2.png);
            background-size: 100% 100%;
            border: 2px red solid;
            margin-right: 2%;
            margin-bottom: 2%;
            float: left;
        }
        article ul{
            margin: 100px;
        }

    </style>
</head>  

<body>  
  
    <header>  
        <section class="container1"> 
             
            <img src="C:/Users/凉音/Desktop/捕获1.PNG" alt="" class="bgg">
            <b class="bgg1">我爱凉音</b>
            <img src="C:/Users/凉音/Desktop/xixi1.png" class="logo2">

        </section>
    </header>  

    <nav>  
      <ul class="clear_ele">  
          <li class="li_wai"><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 mc 学院</p>
    </footer>  
  
</body>  


</html>

标签：知识点,right,网页,float,height,width,background,CSS,left
From： https://blog.csdn.net/2402_82646957/article/details/143473466

CSS网页布局综合练习（涵盖大多CSS知识点）

1，先设计section内的顶部，将图片插入后，用浮动和绝对定位（position：absolute）进行定位

2、使用左浮动功能 float: left; 和固定定位position: fixed;固定好问题栏

3，使用三列布局方法将内容部分分成三列

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

5、设置页脚样式

相关文章

赞助商

阅读排行