AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-10-31 43
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS网页布局综合练习（涵盖大多CSS知识点）

其基本骨架代码为：

<!DOCTYPE html>




















学院新闻



友情链接


文章















联系我们



姓名:


邮箱:








版权所有 © 2024 广东云浮中医药职业学院计算机学院





1、首先设置几个div盒子放置顶部的图片，使用绝对定位设置好它们的位置
其代码为： 

<header>  
    <section class="container1">    
        <div id="div1">
            <div id="div2">
                <img src="./网页布局综合练习（完成版）/img_src/logo.png" alt="">
            </div>
            <div id="div3">
                <p>计算机学院</p>
                <img src="./网页布局综合练习（完成版）/img_src/logo2.png" alt="">
            </div>
        </div>          

    </section>
</header>

2、使用左浮动功能 float: left; 让导航栏横向排列
其CSS代码为： 

    nav{
        background-color: rgb(0, 192, 0);
    }
    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;
    }

3、接下来使用固定定位 position: fixed; 将问题栏放在右下角
其CSS代码为： 

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

4、使用三列布局方法将内容部分分成三列
其CSS代码为： 

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

5、使用左浮动将内容图片摆放好
其CSS代码为： 

    article ul li{
        list-style: none;
        width: 20%;
        height: 150px;
        background-image: url(./网页布局综合练习（完成版）/img_src/photo2.jpg);
        background-size: 100% 100%;
        border: 2px red solid;
        margin-right: 2%;
        margin-bottom: 2%;
        float: left;
    }
    article ul{
        margin: 100px;
    }

6、设置页脚样式
其CSS代码为： 

    footer{
        background-color: rgb(0, 192, 0);
        text-align: center;
    }
    footer p{
        margin: 0px;
    }

7、最后使用伪类选择器设置导航栏样式
其CSS代码为： 

    .clear_ele li a:link{
        color: white;
        text-decoration: none;
    }
    .clear_ele li a:visited{
        color: white;
        text-decoration: none;
    }
    .clear_ele li a:hover{
        background-color: rgb(176, 255, 176);
    }

这样一个完整的网页布局就做好啦！！

努力小贼
关注

文章标签：
前端开发
关键词：
CSS知识点
CSS涵盖大多知识点
CSS涵盖
CSS网页布局
游客zi3qmblbcdexu
目录
相关文章
派大鑫的工作室
|
1月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
68 2
进步`于辰
|
16天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
29 1
[HTML、CSS]知识点
游客zi3qmblbcdexu
|
24天前
|
前端开发
CSS网页布局综合练习
CSS网页布局综合练习
游客zi3qmblbcdexu
25 3
游客zi3qmblbcdexu
|
24天前
|
前端开发
CSS网页布局综合练习（涵盖大多CSS知识点）
CSS网页布局综合练习（涵盖大多CSS知识点）
游客zi3qmblbcdexu
24 3
你都不懂
|
24天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
你都不懂
23 0
派大鑫的工作室
|
1月前
|
前端开发 容器
CSS弹性盒子知识点
CSS弹性盒子知识点
派大鑫的工作室
36 0
周一同学Zelina
|
2月前
|
Web App开发 前端开发 JavaScript
「offer来了」1张思维导图，6大知识板块，带你梳理面试中CSS的知识点！
该文章通过一张思维导图和六大知识板块系统梳理了前端面试中涉及的CSS核心知识点，包括CSS框架、基础样式问题、布局技巧、动画处理、浏览器兼容性及性能优化等方面的内容。
周一同学Zelina
21 0
土木林森
|
3月前
|
前端开发 容器
【CSS Flexbox 探秘】弹性盒模型：揭秘网页布局的终极神器！
【8月更文挑战第25天】Flexbox 是 CSS3 中的关键特性，为网页设计提供了强大的布局能力。本文通过问答形式全面解析 Flexbox 的核心概念与属性，包括容器与项目属性，并通过示例演示如何使用 Flexbox 实现水平与垂直居中、等间距布局及响应式设计。相较于传统布局方法，Flexbox 更加灵活且简化了样式设置，同时在现代浏览器中拥有良好的支持度。掌握 Flexbox 对于提升网页布局效率至关重要。
土木林森
62 1
土木林森
|
3月前
|
容器 C# 开发者
XAML语言大揭秘：WPF标记的魅力所在，让你轻松实现界面与逻辑分离，告别复杂代码！
【8月更文挑战第31天】XAML提供了一种直观且易于维护的界面设计方式，使得开发者可以专注于逻辑和业务代码的编写，而无需关心界面细节。通过数据绑定、布局管理和动画效果等特性，XAML可以实现丰富的界面交互和视觉效果。在实际开发过程中，开发者应根据具体需求选择合适的技术方案，以确保应用程序能够满足用户的需求。希望本文的内容能够帮助您在WPF应用程序开发中更好地利用XAML语言。
土木林森
44 0
nicenelly
|
前端开发
CSS入门经典-知识点摘录
nicenelly
1321 0