前端必知必会-CSS网站布局

于 2024-08-27 09:00:00 发布
阅读量936 收藏 22
点赞数 38
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24018193/article/details/141476523
版权

文章目录

CSS 网站布局

网站布局
网站通常分为页眉、菜单、内容和页脚：

在这里插入图片描述

有大量不同的布局设计可供选择。但是，上面的结构是最常见的结构之一

页眉

页眉通常位于网站顶部（或顶部导航菜单正下方）。它通常包含徽标或网站名称：

示例

.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}

结果
在这里插入图片描述

导航栏

导航栏包含链接列表，可帮助访问者浏览您的网站：

示例

/* 导航栏容器 */
.topnav {
overflow: hidden;
background-color: #333;
}

/* 导航栏链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* 链接 - 悬停时更改颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}

结果
在这里插入图片描述

内容

此部分的布局通常取决于目标用户。最常见的布局是以下一种（或组合）：

1 列（通常用于移动浏览器）
2 列（通常用于平板电脑和笔记本电脑）
3 列布局（仅用于台式机）

在这里插入图片描述

我们将创建一个 3 列布局，并在较小的屏幕上将其更改为 1 列布局：

示例

/* 创建三个相等的列，彼此浮动 */
.column {
float: left;
width: 33.33%;
}

/* 清除列后的浮动 */
.row:after {
content: "";
display: table;
clear: both;
/* 响应式布局 - 使三列堆叠在彼此之上，而不是在较小的屏幕（600px 宽或更小）上彼此相邻 */ 
@media screen and (max-width: 600px) { 
.column { width: 100%; }
 } }

结果
在这里插入图片描述

提示：要创建 2 列布局，请将宽度更改为 50%。要创建 4 列布局，请使用 25% 等。

提示：创建列布局的更现代方法是使用 CSS Flexbox。但是，它在 Internet Explorer 10 及更早版本中不受支持。如果您需要 IE6-10 支持，请使用浮动（如上所示）。

不等列

主要内容是您网站中最大和最重要的部分。

列宽不等的情况很常见，这样大部分空间就留给了主要内容。侧边内容（如果有）通常用作替代导航或指定与主要内容相关的信息。您可以随意更改宽度，但要记住总宽度应为 100%：

示例

.column {
float: left;
}

/* 左右列 */
.column.side {
width: 25%;
}

/* 中间列 */
.column.middle {
width: 50%;
}

/* 响应式布局 - 使三列堆叠在一起而不是彼此相邻 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
} }

结果

在这里插入图片描述

页脚

页脚位于页面底部。它通常包含版权和联系信息等信息：

示例

.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}

结果
在这里插入图片描述

响应式网站布局

通过使用上面的一些 CSS 代码，我们创建了一个响应式网站布局，根据屏幕宽度，该布局在两列和全宽列之间变化：

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>My Website</h1>
  <p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" style="float:right">Link</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>About Me</h2>
      <div class="fakeimg" style="height:100px;">Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
      <div class="fakeimg"><p>Image</p></div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>Some text..</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>Footer</h2>
</div>

</body>
</html>

总结

本文介绍了的CSS网站布局，如有问题欢迎私信和评论

编程岁月
关注
  • 38
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
前端必知必会-CSS布局浮动float
qq_24018193的博客
08-21 1867
本文介绍了的CSS布局浮动float使用，如有问题欢迎私信和评论。
前端必知必会-CSS 布局position属性
qq_24018193的博客
08-20 1417
本文介绍了的CSS 布局position属性使用，如有问题欢迎私信和评论。
前端必知必会-CSS布局伪元素
qq_24018193的博客
08-23 902
本文介绍了的CSS布局伪元素使用，如有问题欢迎私信和评论。
前端必知必会-CSS 布局overflow属性
qq_24018193的博客
08-20 802
本文介绍了的CSS 布局overflow属性使用，如有问题欢迎私信和评论。
前端必知必会-CSS布局-z-index属性
qq_24018193的博客
08-19 851
本文介绍了的CSS布局-z-index属性使用，如有问题欢迎私信和评论。
Web前端开发者必知的9个实用CSS属性
09-22
以下将详细阐述Web前端开发者必知的9个实用CSS属性。 1. 圆角效果（border-radius） 圆角效果可以让网页元素边角变得圆润，使界面看起来更加柔和，增强用户体验。border-radius属性支持无前缀、Firefox (-moz-)、...
前端JS-瀑布流布局-直接运行-代码解释
05-24
总的来说，前端JS实现的瀑布流布局是一个结合了CSS、JavaScript和浏览器交互的综合项目。它涉及到对DOM的深入理解，良好的布局和响应式设计技巧，以及对性能优化的考量。掌握这些知识点，你就能创造出流畅且视觉吸引...
必知必会篇-前端性能优化之加载优化
老司机的后备箱
10-31 1948
懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。使用图片懒加载就可以解决上述问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。懒加载适用于图片较多，页面较长的页面场景中。**懒加载与预加载的区别：**一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
Web-前端html+css从入门到精通 164. column分栏布局.zip
05-23
3. **Flexbox（弹性盒模型）**：这是现代CSS布局的一个强大工具。通过设置`display:flex`，我们可以轻松地创建多栏布局，调整元素的顺序、对齐方式和分配空间。例如： ```css .container { display: flex; flex-...
html-css-网页模板-个人介绍网站
11-23
在个人介绍网站中，我们通常会包含以下部分：头部（header）用于放置logo或导航菜单，主体（main）区域展示个人信息、工作经历、技能特长等，侧边栏（sidebar）可以放联系方式或社交媒体链接，底部（footer）包含...
JavaScript代码片段
weixin_66128399的博客
08-26 218
使用场景是：后端列表查询接口，某个字段前端不传，后端就不根据那个字段筛选，例如name不传的话，就只根据page和pageSize筛选，但是前端查询参数的时候（vue或者react）中，往往会这样定义。给后端发送数据的时候，要判断某个属性是不是空字符串，然后给后端拼参数，这块逻辑抽离出来就是cleanObject，代码实现如下。leading-true，trailing-true：在延时开始时就调用，延时结束后也会调用。//第一个参数指定位数，第二个字符串指定字符，都是可选参数，如果都不传，默认生成8位。
vue ref和reactive区别
灰海
08-25 537
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Java CORS：跨越资源边界，探索跨域资源共享的无限可能
qq_44771627的博客
08-22 1150
随着前端技术的飞速发展，越来越多的应用程序开始使用多种不同的后端服务。这些服务往往部署在不同的域上，这就引发了**跨域访问**的问题。CORS作为一种解决跨域问题的有效机制，对于现代Web开发至关重要。本文将详细介绍如何在Java环境中配置和使用CORS，帮助你轻松应对跨域访问带来的挑战。
前端面试宝典【CSS篇】【8】
BDawn的专栏
08-26 56
绝对单位 适用于不需要缩放的场合，如打印样式。 相对单位 更适合Web设计，尤其是响应式设计。 vw/vh 适用于基于视口尺寸的布局设计。 em/rem 适用于字体大小相关的布局。
前端开发攻略---在Vue3项目中修改Element-Plus主题色
nibabaoo的博客
08-22 239
在Vue3项目中修改Element-Plus主题色
零基础5分钟上手亚马逊云科技-云原生架构设计
m0_66628975的博客
08-26 1183
欢迎来到小李哥全新亚马逊云科技AWS云计算知识学习系列，适用于任何无云计算或者亚马逊云科技技术背景的开发者，通过这篇文章大家零基础5分钟就能完全学会亚马逊云科技一个经典的服务开发架构方案。我会每天介绍一个基于亚马逊云科技AWS云计算平台的全球前沿云开发/架构技术解决方案，帮助大家快速了解国际上最热门的云计算平台亚马逊云科技AWS最佳实践，并应用到自己的日常工作里。
前端模块自动导入的插件
owo_ovo的博客
08-26 306
前端模块自动导入的插件
React 入门第六天：理解组件生命周期与效果
最新发布
Caleb的博客
08-26 347
React组件的生命周期指的是从组件创建到销毁的全过程。理解组件的生命周期对高效管理组件的状态和副作用至关重要。虽然函数组件主要依赖于Hooks来处理生命周期和副作用，类组件依然是学习生命周期的基础。
vue中定义一个url文件,在vue文件中引入
weixin_65767506的博客
08-22 323
1.在src/utils文件夹下创建一个url.js。3.在其他vue文件中引入。2.url.js的内容为。4.在挂载时打印一下。打印出来就可以用了.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程岁月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值