0基础学前端 day9--css布局
CSS布局概述
一、引言
CSS布局是Web开发中至关重要的一部分，用于控制网页元素的排列和显示方式。不同的布局技术被应用于网页设计中，以确保其在各种设备和屏幕尺寸上都具有良好的用户体验。CSS布局技术包括浮动（float）、定位（position）、盒模型、Flexbox（伸缩盒）、和Grid（网格布局）等。
浮动（Float）
浮动是一种传统的布局方式，最初用于实现文字环绕的功能。浮动元素会脱离正常文档流，并向左或向右移动，允许后续内容围绕它们排列。
代码示例
.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;
}
在上面的示例中，三个红色框被浮动到左侧。在父容器上使用.clearfix来清除浮动的影响。
定位（Position）
CSS的定位允许我们精确地将元素放置在我们需要的地方。有四种主要的定位方式：static、relative、absolute和fixed。
代码示例
.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;
}
Relative Position
Absolute Position
在这个例子中，.absolute类的元素相对于.relative类的元素进行定位，即通过top和left精确控制其位置。
盒模型（Box Model）
盒模型是CSS布局的基础，每个元素都由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。
代码示例
.box {
width: 150px;
padding: 20px;
border: 5px solid black;
margin: 10px;
background-color: lightcoral;
}
Box Model
在此示例中，.box元素的实际宽度是150px + 2 * 20px (padding) + 2 * 5px (border) = 200px。
Flexbox（弹性布局）
Flexbox是一种一维布局模型，非常适合用于需要在单行或单列中高效排列多个元素的场合。
代码示例
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 200px;
border: 1px solid gray;
}
.box {
width: 60px;
height: 60px;
background-color: lightblue;
}
1
2
3
这个例子中，.container使用flexbox布局，使得内部的.box元素在水平方向上居中对齐，且相互之间有相等的间距。
Grid（网格布局）
Grid是一个二维的布局系统，它使得复杂的网页布局变得更加简单和直观。
代码示例
.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;
}
1
2
3
4
5
6
在上述代码中，.container被定义为网格容器，使用grid-template-columns属性设置三列布局，并通过gap定义单元格间距，每个.box元素自动分布在网格中。
代码实例
之前的杜兰特介绍
HTML
凯文·杜兰特
杜兰特主页
凯文·杜兰特
简介
凯文·杜兰特（Kevin Durant）是NBA著名篮球运动员，司职小前锋...
职业生涯
杜兰特的职业生涯始于2007年，他在2007年NBA选秀中被西雅图超音速以第一顺位选中...
球队历程
- 西雅图超音速 (2007-2008)
- 俄克拉荷马城雷霆 (2008-2016)
- 金州勇士 (2016-2019)
- 布鲁克林篮网 (2019-2022)
- 菲尼克斯太阳 (2022-至今)
成就
- 两届NBA总冠军 (2017, 2018)
- 四届NBA得分王 (2010, 2011, 2012, 2014)
- 两届总决赛MVP (2017, 2018)
- NBA常规赛MVP (2014)
- 2021年东京奥运会金牌
- 十届NBA全明星
个人生活
杜兰特在场外也十分活跃，他积极参与慈善和社区活动，成立了「凯文·杜兰特慈善基金会」，旨在帮助年轻人和改善社区生活。此外，他还是投资者，参与了多个初创公司的投资。
相册
联系
姓名
邮箱
留言
发送
© 2024 凯文·杜兰特粉丝页面
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布局实现，这允许图片在不同的设备尺寸下自动调整列数，为页面提供更多的灵活性和响应性。
- 添加表单：通过新增联系表单，用户能够与网页内容进行更多的互动，增强用户体验。
- 视觉增强：图片悬停效果和背景渐变增加了页面的动态感和视觉吸引力。
- 结构优化：引入了新的内容区域和网格布局，保持页面现代化和易于浏览。
