CSS常用布局
面向想学习一些简单布局的前端小白
庞囧
主业是一个纯前端打字员,生活与工作的平衡点是我的追求。
展开
-
【css常用布局】简易步骤条的搭建(小白向)
文章目录效果展示实现原理效果展示实现原理布局分析:html部分:<div class="center"> <!-- 容器 --> <div class="container"> <!-- 第一步 --> <div class="item"> <!-- 图案 --> <div class="step_wrap"> <!-- 占位元素 -->原创 2021-08-15 19:48:02 · 545 阅读 · 0 评论 -
【css常用布局】带图片的名片介绍布局(小白向)
文章目录效果展示实现原理效果展示实现原理布局分析:这个布局可以根据实际业务需求进行调整。html部分:<div class="container"> <!-- Image --> <div class="container_image"></div> <!-- Right side --> <div class="container_feature"> <p class="title"&g原创 2021-08-15 17:35:42 · 417 阅读 · 0 评论 -
【css常用布局】简易对话框弹窗框架布局(小白向)
文章目录效果展示实现原理效果展示实现原理布局分析:布局很简单,主要就分为头中尾。html部分:<div class="modal"> <!-- Header --> <div class="modal__header"> <p>标题</p> <div></div> </div> <!-- Content --> <div class="mod原创 2021-08-14 23:08:53 · 480 阅读 · 0 评论 -
【css常用布局】表头左侧固定,可横向滚动的表格布局(小白向)
说明实现原理和表头固定的可纵向滚动表格一样,可见链接:【css常用布局】表头固定的可纵向滚动的表格布局(小白向)效果展示实现原理布局分析:不要以为表格横过来了tr标签就为纵向了,每一行还是一个tr。只是把tr标签中的第一个td标签固定左侧了。HTML部分:<div class="wrap"> <div class="table_wrap"> <table class="table"> <thead> <!-- thead标签原创 2020-12-28 21:36:23 · 2540 阅读 · 0 评论 -
【css常用布局】tab切换效果(小白向)
说明本次点击切换的效果需要配合简单的javascript逻辑效果展示实现原理HTML部分:<div class="wrap"> <div class="tab_wrap"> <div class="tab_active"> <!-- 被点击按钮 --> <div class="tab_text">首页</div> </div> <div class="tab_no_active"&原创 2020-12-27 19:58:04 · 462 阅读 · 0 评论 -
【css常用布局】简单的窗口头部栏布局(小白向)
说明本次布局只是给css和html初学者的一个布局思路效果展示布局分析有两种布局思路第一种:不使用 justify-content: space-between; 属性第二种:使用 justify-content: space-between; 属性布局实现第一种HTML部分:使用标签较少一些<div class="container"> <div class="header_wrap"> <div class="header_round"&g原创 2020-12-27 12:11:17 · 580 阅读 · 0 评论 -
【css常用布局】表头固定的可纵向滚动的表格布局(小白向)
说明纵向滚动表格的时候,表头固定效果展示实现原理html部分<div class="container"> <div class="table_wrap"> <table class="table"> <thead> <tr> <th class="table_th">我是标题一</th> <th class="table_th">我是标题二</th>原创 2020-12-26 22:06:04 · 677 阅读 · 2 评论 -
【css常用布局】面包屑导航布局(小白向)
说明简单的面包屑导航布局效果展示实现原理布局分析:主要用斜杆来撑起整个高度html部分: <div class="container"> <div class="crumb_container"> <div class="crumb_text">首页</div> <div class="crumb_delimiter">/</div> <div class="crumb原创 2020-12-26 20:55:47 · 493 阅读 · 2 评论 -
【css常用布局】未加载出的文字显示(小白向)
说明可用在文字数据请求时间过久,未渲染页面前提前展示一个过度效果。效果展示实现原理布局分析:html部分: <div class="container"> <div class="text_container"> <div class="text_intetval"> // 这个标签用来区分自然段 <div class="text_item"> <div class="text_item_block原创 2020-12-26 20:10:03 · 250 阅读 · 0 评论 -
【css常用布局】卡片布局(小白向)
【css常用布局】卡片布局(小白向)说明:本次布局需要先掌握flex布局效果如图:灰色的块就是一个一个的小卡片,把需要呈现的内容填充进去即可。实现原理:布局分析html部分<div class="wrap"> <div class="card_wrap"> <div class="card_item"> <div class="card_content"></div> </div>原创 2020-12-26 15:32:56 · 4142 阅读 · 0 评论