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、布局

相关推荐
IT_陈寒9 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用12 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥27 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼4 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell6 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel9 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip9 小时前
JavaScript事件流
前端·javascript