CSS怎样做出梯形标签页 CSS3布局方式有哪些

CSS怎样制作梯形标签页 CSS3布局方式有哪些

大家好，今天咱们聊聊CSS怎么做出梯形标签页，以及CSS3都有哪些实用布局方式。说到梯形标签页，先拿一个简单的p标签做例子：

.p {
  position: relative;
  display: inline-block;
  padding: .5em 1em .35em;
  color: white;
}
.p::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: #58a... /* 这里肯定是个渐变或形状，咱们补全成一个梯形背景 */
  clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%); /* 利用clip-path裁剪出梯形 */
}

是不是超级酷炫！伪元素用起来真是妙极啦，不用复杂图片就能画出酷炫梯形。

然后咱们顺便来看真正实用的CSS3布局方式，给你们八个案例，保证干货满满：
1. 左侧固定宽度 + 右侧自适应，适合侧边栏和内容区分明的布局。
2. 左右固定宽度，中间自适应，适合三栏布局，菜单和广告栏固定，中间内容灵活。
3. 圣杯布局，前端经典布局，兼顾兼容性真心赞。
4. 双飞翼布局，提高白空间利用，内容呼吸感足。
5. 响应式布局（媒体查询），超级重要！它能让网页在手机、平板等各种屏幕尺寸下，自动调整布局好咯，让你的网站随时随地都美美哒。
通过媒体查询，我们能检测屏幕宽度，自动套用不同CSS样式，这样用户体验简直没得说。

css网站案例

怎样高效使用CSS选择符 CSS里可以设置段落的距离吗项目案例中Flex布局和瀑布流的运用

说到这儿，不得不提一下CSS选择符怎么用才高效，有时候大家误以为浏览器是从左往右匹配选择符，其实啊，CSS是从右往左来匹配的。这意味着什么？就是说，写的时候得注意顺序！比如下面这个选择符：

#menus > li { font-size: 14px; }

浏览器先去找所有li，然后检查它们上层是不是id="menus"的元素。这样设计选择器的时候，短小精悍永远是王道，避免不必要的标签查询，省时省力，效率倍儿棒。

接着说说段落之间怎么调节距离，不妨试试给p用padding，比如：

p {
  padding: 10px 0;
}

这样上下就多了点空隙，读起来感觉清爽很多。别忘了把margin清零，免得奇怪的距离搞得乱七八糟。用padding设置内边距，配合margin控制外边距，灵活组合，轻松搞定间距问题。

最后，还有个超级实用的项目案例分享，咱们用Flex布局和瀑布流来展示不规则照片墙。瀑布流超适合展示各种大小不一的图片啦，像用multi-column+属性break-inside，配合JavaScript库，例如Vue-waterfull-easy组件，轻松打造酷炫的照片墙布局！真的，懒人福音，超省心。

css网站案例