1 布局简介常用布局方法 2 布局方式（表格） 3 一些布局属性盒模型 content: 文字内容区 padding: 内容区到边框的留白区 border: 边框 margin: 离别的东西的距离display/position 4 flexbox现代布局方式(弹性盒子) 5 float布...
原创
2021-07-05 13:49:52
546阅读
1、左右布局这就要说到一个属性float，使用float: left;就可以让浮动元素 会脱离正常的文档布局流，并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。但是，子类使用float来使元素并排，那么父类就需要使用clearfix来防止子元素下方的标签浮动上来贴和。.clearfix::after {
content: '';
转载
2024-04-26 09:27:15
85阅读
index.css /* index.css是用来美化首页的 */ * { margin: 0; padding: 0; /* 內减模式 */ box-sizing: border-box; } li { list-style: none; } a { text-decoration: none;
原创
2022-06-26 00:03:16
108阅读
index.css .banner { height: 500px; background-color: #f5f5f5; } .banner .wrapper { position: relative; height: 500px; background-color: pink; } /* 侧导航
原创
2022-07-10 00:04:36
86阅读
commom.css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
原创
2022-07-10 00:04:53
100阅读
index.css /* 放index页面的样式表 */ /* banner */ .banner { height: 500px; background-color: #f5f5f5; } .banner .wrapper { position: relative; height: 500px;
原创
2022-07-10 00:05:15
148阅读
index.css .banner { height: 500px; background-color: #f5f5f5; } .banner .wrapper { position: relative; height: 500px; background-color: pink; } /* 侧导航
原创
2022-07-10 00:04:38
59阅读
在现代网页设计中,响应式布局就像是一位灵活的建筑师,能够根据不同的空间需求自如地调整布局结构。记得在一个企业官网项目中,我们通过重新设计响应式布局,让移动端的用户转化率提升了 40%。今天,我想和大家分享如何使用 Tailwind CSS 打造完美的响应式布局。
设计理念
设计响应式布局就像是在设计一个变形金刚。它需要在不同的设备上展现出最适合的形态,既要保持内容的完整性,又要确保良好的用户体验。
index.css /* index.css是用来美化首页的 */* { margin: 0; padding: 0; /* 內减模式 */ box-sizing: border-box;}li { list-style: n...
原创
2022-06-18 01:34:13
165阅读
commom.css /* 各个页面相同的样式表 : 头, 尾部 */ /* 版心 */ .wrapper { width: 1240px; margin: 0 auto; } /* 快捷
原创
2022-07-10 00:04:47
74阅读
另一种方案是设置 html 和 body 高度为 100%
原创
2024-06-13 10:26:35
75阅读
六、
css布局（
CSS Grid） 1、3列（Three columns） <div class="grid"> <div class="g-col-4">.g-col-4</div> <div class="g-col-4">.g-col-4</div> <div class="g-col-4"> ...
转载
2021-09-23 10:50:00
1128阅读
2评论
