CSS进阶-布局(三)

9、布局

9.1 版心

网页内容的主要显示区域,即用户浏览信息的核心部分。这个区域通常是网页设计师精心规划的地方,用来展示最重要的内容,比如文章、图片、视频等。在网页设计中,我们通常会用到一些术语来描述这种核心显示区域,比如"主要内容区"、"body内容"或者"main元素"。

9.2 常用类名
  1. 容器类
    • .container:用于包含整个页面的主要内容。
    • .wrapper:类似于.container,用于包裹一组相关的元素。
    • .row:通常用于栅格系统中的水平排列的一组元素。
  2. 布局类
    • .grid:用于创建网格布局。
    • .flex-container:用于Flexbox布局的容器。
    • .grid-item:网格布局中的单个项。
    • .flex-item:Flexbox布局中的单个项。
  3. 内容类
    • .content:用于包含页面的主要内容。
    • .text-center:用于居中文本。
    • .text-left, .text-right:用于左对齐或右对齐文本。
    • .clearfix:清除浮动。
  4. 按钮类
    • .btn:基本按钮样式。
    • .btn-primary, .btn-secondary:不同类型的按钮样式。
    • .btn-large, .btn-small:不同尺寸的按钮。
  5. 表单类
    • .form-group:用于包含表单控件及其标签。
    • .input-group:用于复杂的输入框组合。
    • .form-control:基本的输入框样式。
  6. 导航类
    • .navbar:用于网站顶部的导航条。
    • .nav:用于创建导航列表。
    • .nav-item:导航列表中的单个项目。
  7. 卡片类
    • .card:用于创建卡片式布局。
    • .card-body:卡片主体内容。
    • .card-header, .card-footer:卡片的头部和尾部。
  8. 媒体对象类
    • .media:用于创建媒体对象布局,如博客评论等。
    • .media-object:媒体对象中的图片或视频。
    • .media-body:媒体对象的文本部分。
  9. 表格类
    • .table:用于创建表格的基本样式。
    • .table-striped:带有斑马纹的表格。
    • .table-bordered:带边框的表格。
  10. 辅助类
    • .hidden:隐藏元素。
    • .visible:显示元素。
    • .sr-only:仅对屏幕阅读器可见的文本。
  11. 动画类
    • .fade-in:淡入效果。
    • .slide-down:下滑效果。
    • .zoom:缩放效果。
9.3 默认样式重置
9.3.1 通配选择器

使用通配选择器给所有的元素加上默认样式重置。

9.3.2 reset.css

根据不同的元素特点有针对的进行去除样式,使得页面变成一张所有样式都要自己加的白纸。

9.3.3 normal.css

在去除默认样式的同时保留了一些有价值的默认样式,有一个固定的标准。

官网:https://necolas.github.io/normalize.css/

相关代码地址:https://gitee.com/justinc666/front-end/tree/master/CSS/4、CSS进阶/4、布局

相关推荐
清灵xmf41 分钟前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨1 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL1 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1112 小时前
css实现div被图片撑开
前端·css
薛一半2 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾2 小时前
CSS综合练习——懒羊羊网页设计
前端·css
MarcoPage2 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发2 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf
**之火3 小时前
Web Components 是什么
前端·web components
顾菁寒3 小时前
WEB第二次作业
前端·css·html