0基础学前端 day9--css布局
CSS布局概述
一、引言
CSS布局是Web开发中至关重要的一部分，用于控制网页元素的排列和显示方式。不同的布局技术被应用于网页设计中，以确保其在各种设备和屏幕尺寸上都具有良好的用户体验。CSS布局技术包括浮动（float）、定位（position）、盒模型、Flexbox（伸缩盒）、和Grid（网格布局）等。
浮动（Float）
浮动是一种传统的布局方式，最初用于实现文字环绕的功能。浮动元素会脱离正常文档流，并向左或向右移动，允许后续内容围绕它们排列。
代码示例
<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>
<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>
<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>
<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>
<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
<!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
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布局实现，这允许图片在不同的设备尺寸下自动调整列数，为页面提供更多的灵活性和响应性。
- 添加表单：通过新增联系表单，用户能够与网页内容进行更多的互动，增强用户体验。
- 视觉增强：图片悬停效果和背景渐变增加了页面的动态感和视觉吸引力。
- 结构优化：引入了新的内容区域和网格布局，保持页面现代化和易于浏览。