0基础学前端 day9--css布局

CSS布局概述

一、引言

CSS布局是Web开发中至关重要的一部分，用于控制网页元素的排列和显示方式。不同的布局技术被应用于网页设计中，以确保其在各种设备和屏幕尺寸上都具有良好的用户体验。CSS布局技术包括浮动（float）、定位（position）、盒模型、Flexbox（伸缩盒）、和Grid（网格布局）等。

浮动（Float）

浮动是一种传统的布局方式，最初用于实现文字环绕的功能。浮动元素会脱离正常文档流，并向左或向右移动，允许后续内容围绕它们排列。

代码示例

html 复制代码

<html>
<head>
<style>
.container {
  width: 100%;
  border: 1px solid black;
}

.box {
  float: left;
  width: 200px;
  height: 200px;
  margin: 10px;
  border: 1px solid red;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>
  <div class="container clearfix">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</body>
</html>

在上面的示例中，三个红色框被浮动到左侧。在父容器上使用.clearfix来清除浮动的影响。

定位（Position）

CSS的定位允许我们精确地将元素放置在我们需要的地方。有四种主要的定位方式：static、relative、absolute和fixed。

代码示例

html 复制代码

<html>
<head>
<style>
.relative {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}
</style>
</head>
<body>
  <div class="relative">
    Relative Position
    <div class="absolute">Absolute Position</div>
  </div>
</body>
</html>

在这个例子中，.absolute类的元素相对于.relative类的元素进行定位，即通过top和left精确控制其位置。

盒模型（Box Model）

盒模型是CSS布局的基础，每个元素都由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。

代码示例

html 复制代码

<html>
<head>
<style>
.box {
  width: 150px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  background-color: lightcoral;
}
</style>
</head>
<body>
  <div class="box">Box Model</div>
</body>
</html>

在此示例中，.box元素的实际宽度是150px + 2 * 20px (padding) + 2 * 5px (border) = 200px。

Flexbox（弹性布局）

Flexbox是一种一维布局模型，非常适合用于需要在单行或单列中高效排列多个元素的场合。

代码示例

html 复制代码

<html>
<head>
<style>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  border: 1px solid gray;
}

.box {
  width: 60px;
  height: 60px;
  background-color: lightblue;
}
</style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
  </div>
</body>
</html>

这个例子中，.container使用flexbox布局，使得内部的.box元素在水平方向上居中对齐，且相互之间有相等的间距。

Grid（网格布局）

Grid是一个二维的布局系统，它使得复杂的网页布局变得更加简单和直观。

代码示例

html 复制代码

<html>
<head>
<style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border: 1px solid gray;
}

.box {
  background-color: lightpink;
  padding: 20px;
  border: 1px solid darkred;
}
</style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
  </div>
</body>
</html>

在上述代码中，.container被定义为网格容器，使用grid-template-columns属性设置三列布局，并通过gap定义单元格间距，每个.box元素自动分布在网格中。

代码实例

之前的杜兰特介绍

HTML

html 复制代码

<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>凯文·杜兰特</title>  
    <!-- 使用国内可访问的Bootstrap CSS CDN -->  
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet">  
    <link rel="stylesheet" href="kd.css">  
</head>  
<body>  
    <!-- Navbar -->  
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">  
        <a class="navbar-brand" href="#">杜兰特主页</a>  
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">  
            <span class="navbar-toggler-icon"></span>  
        </button>  
        <div class="collapse navbar-collapse" id="navbarNav">  
            <ul class="navbar-nav ml-auto">  
                <li class="nav-item active"><a class="nav-link" href="#">首页</a></li>  
                <li class="nav-item"><a class="nav-link" href="#bio">简介</a></li>  
                <li class="nav-item"><a class="nav-link" href="#career">职业生涯</a></li>  
                <li class="nav-item"><a class="nav-link" href="#teams">球队历程</a></li>  
                <li class="nav-item"><a class="nav-link" href="#achievements">成就</a></li>  
                <li class="nav-item"><a class="nav-link" href="#personal-life">个人生活</a></li>  
                <li class="nav-item"><a class="nav-link" href="#gallery">相册</a></li>  
                <li class="nav-item"><a class="nav-link" href="#contact">联系</a></li>  
            </ul>  
        </div>  
    </nav>  

    <header class="header">  
        <h1>凯文·杜兰特</h1>  
    </header>  
  
    <main class="container content mt-4">  
        <div class="row">  
            <div class="col-md-4">  
                <section class="image text-center mb-4">  
                    <img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/6fa6ec013f49061e5c313827b6099f2.png" alt="凯文·杜兰特" class="rounded-circle img-fluid">  
                </section>  
            </div>  
            <div class="col-md-8">  
                <section id="bio" class="bio mb-4">  
                    <h2>简介</h2>  
                    <p>凯文·杜兰特（Kevin Durant）是NBA著名篮球运动员，司职小前锋...</p>  
                </section>  
                <section id="career" class="career mb-4">  
                    <h2>职业生涯</h2>  
                    <p>杜兰特的职业生涯始于2007年，他在2007年NBA选秀中被西雅图超音速以第一顺位选中...</p>  
                </section>  
            </div>  
        </div>  
        
        <div class="row">  
            <div class="col-md-6">  
                <section id="teams" class="teams mb-4">  
                    <h2>球队历程</h2>  
                    <ul class="list-group">  
                        <li class="list-group-item">西雅图超音速 (2007-2008)</li>  
                        <li class="list-group-item">俄克拉荷马城雷霆 (2008-2016)</li>  
                        <li class="list-group-item">金州勇士 (2016-2019)</li>  
                        <li class="list-group-item">布鲁克林篮网 (2019-2022)</li>  
                        <li class="list-group-item">菲尼克斯太阳 (2022-至今)</li>  
                    </ul>  
                </section>  
            </div>  
            <div class="col-md-6">  
                <section id="achievements" class="achievements mb-4">  
                    <h2>成就</h2>  
                    <ul class="list-group">  
                        <li class="list-group-item">两届NBA总冠军 (2017, 2018)</li>  
                        <li class="list-group-item">四届NBA得分王 (2010, 2011, 2012, 2014)</li>  
                        <li class="list-group-item">两届总决赛MVP (2017, 2018)</li>  
                        <li class="list-group-item">NBA常规赛MVP (2014)</li>  
                        <li class="list-group-item">2021年东京奥运会金牌</li>  
                        <li class="list-group-item">十届NBA全明星</li>  
                    </ul>  
                </section>  
            </div>  
        </div>  
        
        <section id="personal-life" class="personal-life mb-5">  
            <h2>个人生活</h2>  
            <p>杜兰特在场外也十分活跃，他积极参与慈善和社区活动，成立了「凯文·杜兰特慈善基金会」，旨在帮助年轻人和改善社区生活。此外，他还是投资者，参与了多个初创公司的投资。</p>  
        </section>  

        <!-- 新增内容: 相册 -->
        <section id="gallery" class="gallery mb-5">
            <h2>相册</h2>
            <div class="gallery-grid">
                <img src="https://example.com/image1.jpg" alt="杜兰特比赛画面">
                <img src="https://example.com/image2.jpg" alt="杜兰特与队友">
                <img src="https://example.com/image3.jpg" alt="杜兰特投篮">
                <img src="https://example.com/image4.jpg" alt="杜兰特颁奖">
                <img src="https://example.com/image5.jpg" alt="杜兰特扣篮">
            </div>
        </section>

        <!-- 新增内容: 联系表单 -->
        <section id="contact" class="contact mb-5">
            <h2>联系</h2>
            <form>
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" class="form-control" id="name" placeholder="输入您的姓名">
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" class="form-control" id="email" placeholder="输入您的邮箱">
                </div>
                <div class="form-group">
                    <label for="message">留言</label>
                    <textarea class="form-control" id="message" rows="5" placeholder="输入您的留言"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">发送</button>
            </form>
        </section>
    </main>  

    <footer class="footer bg-dark text-white text-center py-2">  
        <p>© 2024 凯文·杜兰特粉丝页面</p>  
    </footer>  

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
</body>  
</html>

CSS

css 复制代码

body {  
    font-family: 'Roboto', sans-serif;  
    color: #f0f0f0;  
    margin: 0;  
    padding: 0;  
    background-color: #121212;  
}  

.header {  
    background: linear-gradient(135deg, #1a1a1a 25%, #000000 100%);  
    color: #f0f0f0;  
    text-align: center;  
    padding: 20px;  
    text-shadow: 2px 2px 5px #000000;  
}  

.content {  
    padding: 0 15px;  
}  

.img-fluid {  
    max-width: 70%;  
    border-radius: 50%;  
    transition: transform 0.5s;  
}  

.img-fluid:hover {  
    transform: rotate(360deg);  
}  

.bio, .career, .achievements, .teams, .personal-life, .contact {  
    background: rgba(34, 34, 34, 0.8);  
    color: #f0f0f0;  
    padding: 20px;  
    border-radius: 8px;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  
    margin-bottom: 20px;
}

.gallery {  
    background: rgba(34, 34, 34, 0.8);  
    padding: 20px;  
    border-radius: 8px;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  
}

.gallery-grid {  
    display: grid;  
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));  
    gap: 10px;  
}

.gallery-grid img {  
    width: 100%;  
    height: auto;  
    border-radius: 8px;  
    transition: transform 0.3s ease-in-out;  
}

.gallery-grid img:hover {  
    transform: scale(1.1);  
}

h1, h2 {  
    margin-top: 0;  
}  

.list-group-item {  
    background: transparent;  
    color: #f0f0f0;  
    border: none;  
}  

.footer {  
    background-color: #1a1a1a;  
    color: #f0f0f0;  
    text-align: center;  
    padding: 10px;  
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.3);  
}

解释

Grid布局：相册部分利用CSS Grid布局实现，这允许图片在不同的设备尺寸下自动调整列数，为页面提供更多的灵活性和响应性。
添加表单：通过新增联系表单，用户能够与网页内容进行更多的互动，增强用户体验。
视觉增强：图片悬停效果和背景渐变增加了页面的动态感和视觉吸引力。
结构优化：引入了新的内容区域和网格布局，保持页面现代化和易于浏览。