前端练习-CSS布局

最新推荐文章于 2024-09-03 22:48:27 发布
最新推荐文章于 2024-09-03 22:48:27 发布
阅读量2.1k 收藏 20
点赞数 4
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42385482/article/details/122828829
版权

前端练习-CSS布局

文章目录

在线练习

一、盒模型

CSS1 盒模型 - content-box

image-20220208143748336

CSS2 盒模型 - border-box

image-20220208143930809

CSS3 盒模型- 外边距折叠

image-20220208144609464

二、浮动

CSS4 浮动

浮动

CSS5 浮动 - 清除

clear-float

三、定位

绝对定位：absolute 和 fixed 统称为绝对定位

相对定位：relative

默认值：static

CSS7 定位 - inherit

inherit

CSS8 定位 - absolute

absolute

CSS9 定位 - absolute - 评注

absolute-评注

CSS10 定位 - z-index

z-index

CSS11 定位 - relative

relative

CSS12 定位 - fixed

fixed

CSS13 定位 - fixed - 广告

fixed-广告

四、display

CSS14 display - flex

display - flex

CSS15 display - flex - 可伸缩项属性

flex - 可伸缩项属性

CSS16 display - flex - 标签

flex - 标签

CSS17 display - flex - order

image-20220208165458649

CSS18 display - grid

display - grid

CSS19 display - grid - 区域

image-20220208171259747

五、单列布局

CSS20 单列布局

image-20220208172047419

六、双列布局

CSS21 双列布局 - 浮动

image-20220208172940371

CSS22 双列布局 - 绝对定位

image-20220208173248135

CSS23 双列布局 - flex

image-20220208173616820

CSS24 双列布局 - grid

image-20220208173738635

七、三列布局

CSS25 三列布局 - 浮动

image-20220208174347530

CSS26 三列布局 - 绝对定位

image-20220208174858715

CSS27 三列布局 - flex

image-20220208175115265

CSS28 三列布局 - grid

image-20220208175229926

CSS29 三列布局 - 圣杯布局

image-20220208175729190

CSS30 三列布局 - 双飞翼布局

image-20220208180053093

sea_lichee
关注
CSS经典练习-css-diner-develop.7z
11-05
通过这32关的挑战，你不仅能熟练掌握各种CSS选择器，还能提升自己的CSS布局和设计能力。无论是对初学者还是有一定经验的开发者来说，这都是一次提升CSS技能的绝佳机会。因此，如果你在学习HTML前端和CSS的路上，"css...
html+css布局综合练习
借风拥你
03-18 1265
一、准备工作 1.引入reset.css 主要是消除一些默认的样式 /* 基础设置 */ body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{ margin: 0; padding: 0; } ul,ol { list-style: none; } img { /* 底部留白 */ display:
CSS-三角形的div框框
LuckyGuyy的博客
11-28 419
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
5 种 CSS 位置类型，让你实现更好的布局_css位置
最新发布
2401_86437209的博客
09-03 477
容器的位置设置为相对，第二个框的位置设置为绝对，并且该框向下移动 30 像素（使用 top 属性），向右移动 50 像素（使用 left 属性）。在上面的示例中，第二个框向下移动 20 像素（使用 top 属性），向右移动 50 像素（使用 left 属性）。元素根据用户的滚动位置进行定位。该元素相对于其最近定位的祖先（具有相对、绝对、固定或粘性定位的元素）进行定位。使用此属性，周围的元素不会受到影响，但元素原本处于静态位置的位置将会有空间。在上面的示例中，即使向下滚动页面，第二个框的位置也将是固定的。
CSS 实现 10 种现代布局，你都会了吗
web全栈开发的博客
10-21 743
01. 超级居中：place-items: center对于第一个“单行”布局，让我们解决所有 CSS 领域中最大的谜团：居中。我想让您知道，使用 place-items: center 会让此操作比您想象的容易。首先指定 grid 作为 display 方法，然后在同一个元素上写入 place-items: center。place-items 是同时设置 align-items 和 justi...
css练习-CSS实现瀑布流布局
qq_45030898的博客
01-10 215
css练习-CSS实现瀑布流布局
css练习——页面布局
fdbttry的博客
08-16 127
css页面布局
前端学习-常规流练习-入门
01-17
在前端开发领域，常规流（Normal Flow）是HTML和CSS布局的基础，对于任何初学者来说，理解并掌握它是至关重要的。常规流是指元素在没有指定特定定位方式（如浮动、绝对定位或flexbox等）时，按照默认规则进行布局的...
练习前端-CSS引入、基础选择器-day04
08-31
5. **CSS布局**： - 流动布局（Block Layout）：块级元素默认独占一行，行内布局（Inline Layout）允许元素并排显示。 - `display`属性可以改变元素的布局模式，如`display:block`或`display:inline`。 - `...
前端练习01-前端-HTML
03-24
本练习集“前端练习01-前端-HTML”旨在帮助初学者或有一定基础的学习者深入理解并熟练掌握HTML的基本概念、结构以及应用。 HTML是一种标记语言，它通过一系列预定义的标签来描述网页内容和结构，如标题、段落、图像...
练习前端-CSS权重计算、复杂选择器、基础属性-day05
08-31
本练习主要关注CSS的权重计算、复杂选择器以及基础属性，这些都是构建高效且可维护的CSS代码的关键要素。 首先，我们要了解CSS权重计算。权重决定了哪些样式会应用到元素上，当多个选择器对同一个元素定义了样式时...
Html/CSS开发基础(CSS布局练习)
weixin_42473228的博客
06-11 3562
Web开发技术.实验一.Dreamweaver的使用0 目录1 Dreamweaver的使用1.1 Dreamweaver的使用1.1.1 实验目的2.1.2 预习内容2.1.3 实验内容与步骤2.1.4 实验过程与结果 0 目录 1 Dreamweaver的使用 1.1 Dreamweaver的使用 1.1.1 实验目的 1、了解网站的制作过程，会收集、制作网页素材。 2、熟悉Dreamweav...
【前端学习笔记 CSS系列四】布局训练2
GUANYX的博客
02-11 201
一、效果 二、代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css布局训练-通栏平均分布型</title> <style> * { padding: 0; margin: 0; } ul li { list-style: none; /* 去除li元素自带的小点样式 */
CSS练习之自动打字机
m0_62622679的博客
01-11 1041
使用CSS实现打字机效果
css常见布局方式
DZQ1223的博客
06-13 3819
CSS 的布局应该是 CSS 体系中的重中之重，主要的布局方式有 table 表格布局（早期），float 浮动布局、position布局和 flex 布局。布局方式优点缺点浮动布局兼容性好，支持大多数浏览器；可以实现多列布局。容易出现清除浮动问题，需要额外的样式规则来处理；不太适合复杂的布局需求，例如垂直居中和等高布局。定位布局灵活性较高，可以精确控制元素的位置；可以实现重叠布局效果。对于复杂布局，需要手动计算和调整元素的位置和尺寸。
CSS布局综合练习
wuzhan的专栏
05-07 308
CSS布局综合练习 效果图： 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text
css布局 flex布局 grid网格布局 布局练习
好好学习天天向上
06-04 2241
flex是CSS3中新增的布局手段，它主要用来代替浮动来完成页面的布局。主轴：弹性元素的排列方式为主轴 侧轴：与主轴垂直方向为侧轴justify开头表示与主轴相关 align开头表示侧轴相关指定容器中弹性元素的排列方式，设置主轴方向 row 默认值，弹性元素在容器中水平排列 从左向右 row-reverse 默认值，弹性元素在容器中水平排列 从右向左 column 弹性元素纵向排列 自上向下 column-reverse 弹性元素纵向排列 自下向上 设置弹性元素是否在弹性容器中自动换行 nowrap:默认值
html+css网页练习四
qq_52108058的博客
02-07 4232
阅读下列说明、效果图，完成静态页面。 某购物网站首页页面局部效果。当鼠标悬停到导航文字上时，背景色会变为红色。现在我们需要编写该网站效果图部分代码。 项目包含首页index.html、img文件夹和css文件夹，页面效果如图所示。 4、style.css 二、活动页面 1、要求 阅读下列说明、效果图和HTML代码，进行静态网页开发，主要应用HTML和css3完成。 这个某项目中的其中一个活动页，应用HTML5和css3技术完成页面动画。鼠标没经过是图1，当鼠标经过是图2，当鼠标经过遮罩层像翻书一样显示出来
前端技术——4——CSS练习
kaoa000的专栏——非淡泊无以明志，非宁静无以致远
03-01 1930
仿抽屉新热榜界面： 写一个类似的页面，练习CSS的使用。 整个页面分为两大部分，一是蓝色的页头，然后是页体 头部，即蓝色一行的设置，是页面的头部： <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pad
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

sea_lichee

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

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

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

打赏作者

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

抵扣说明：

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

余额充值