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

相关推荐
Mr_Xuhhh3 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o6 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端