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

CSS综合练习

article 2024/11/7 9:31:42

该综合练习就是为这个静态网页设置CSS样式，使其变成下面的模样

设置CSS样式前：

设置CSS样式后：

其骨架为：

<body>
    <div class="qwq">
        <img src="top.jpg" alt="">
    </div>
    <div class="qwq1">
        <a href="">首页</a>
        <a href="">关于第五</a>
        <a href="">图片</a>
        <a href="">活动</a>
    </div>
    <div class="banner">
        <img src="R-C.jpg" alt="">
    </div>
    <main>  
        <section class="container2 clear_ele">  
            <aside id="aside-left">  
                庄园新闻
            </aside>
 
            <aside id="aside-right">  
                友情链接
            </aside> 

            <article  class="container">内容  
                <ul class="clear_ele">  
                    <li><img src="" alt=""></li>
                    <li><img src="" alt=""></li>
                    <li><img src="" alt=""></li>
                    <li><img src="" alt=""></li>
                    <li><img src="" alt=""></li>
                    <li><img src="" alt=""></li>
                    <li><img src="" alt=""></li>
                    <li><img src="" alt=""></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; 第五人格</p>

代码如下：

/* 为顶部图片设置宽度，高度  
        object-fit: cover是裁剪高度
        display: block 是生成一个块盒子*/
        .qwq img{
            display: block;
             width: 100%;
             height: 120px;
             object-fit: cover;
        }
        /* 为导航栏设置背景颜色，
         text-align: center 是让文字居中
          line-height: 50px 是设置文本行高*/
        .qwq1{
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: rgb(58, 13, 236);
        }
        /* 为a标签里面的文字设置颜色
        text-decoration: none 去除链接下面的下划线
        margin: 0 120px 设置文本间距离 */
        .qwq1 a{
            text-decoration: none;
            margin: 0 120px;
            color: white;
        }
        /* 为图片设置宽度，高度  
        object-fit: cover是裁剪高度
        display: block 是生成一个块盒子*/
        .banner img{
            display: block;
             width: 100%;
             height: 520px;
             object-fit: cover;
        }
        /*float: left; 设置盒子浮动方向，
        ;height: 600px;设置高度
        width: 20% 设置宽度，
        background-color: rgb(0, 170, 255);设置颜色 */
        #aside-left{
            width: 20%;
            height: 600px;
            float: left;
            background-color: rgb(0, 170, 255);
        }
         /*;height: 600px;设置高度
          margin-left: 20%;设置左边距
        width: 60% 设置宽度，
        background-color:grey;设置颜色 */
        article{
            width: 60%;
            height: 600px;
            background-color:grey;
            margin-left: 20%;
        }
        /*float: left; 设置盒子浮动方向，
        ;height: 600px;设置高度
        width: 20% 设置宽度，
        background-color: rgb(0, 170, 255);设置颜色 */
        aside{
            width: 20%;
            height: 600px;
            float: right;
            background-color: rgb(0, 170, 255);
        }
        /* 设置盒子颜色，以及文字居中 */
        footer{
            background-color: aquamarine;
            text-align: center;
        }
        /*background-color: pink; 设置盒子颜色
        position: absolute; 设置固定定位
        left: 80%;距离左边的距离
        top: 800px; 距离顶部的距离*/
        .container3{
            background-color: pink;
            position: absolute;
            left: 80%;
            top: 800px;
        }
        /* 设置盒子内的边距 */
        .container ul{
            margin: 0;
            padding: 0;
        }
        /*  width: 150px; 设置宽度
            height: 150px; 设置高度
            background-color: pink; 设置颜色
            border: 2px red solid;设置盒子属性
            margin: 20px; 设置边距
            float: left;  设置浮动*/
        .container ul li img{
            width: 150px;
            height: 150px;
            background-color: pink;
            border: 2px red solid;
            margin: 20px;
            float: left;
        }
        /* 去除无序列表前面的点 */
        ul{
            list-style-type: none;
        }

其中每一个都有注释，可以跟着去操作，这样子就可以制造出一个简略的网页布局。

需要了解的可以查看我的往期盒子属性讲解

查看全文

http://www.kler.cn/a/382790.html