- 博客(4)
- 收藏
- 关注
原创 双飞翼布局详解
作用:圣杯布局和双飞翼布局解决的问题是相同的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。原理:双飞翼布局为了让中间div内容不被遮挡,直接在中间div内部创建子div用于放置内容,在该div里用margin-left和margin-right为左右两栏div留出位置。css代码:.header,.footer{ height: 200px; width: 100%; background-color: #0000FF; }
2022-03-21 22:52:55
6258
4
原创 圣杯布局详解
作用:圣杯布局和双飞翼布局解决的问题是相同的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。原理:圣杯布局为了让中间div内容不被遮挡,将中间div设置了padding-left和padding-right后,将左右两个div用margin和相对定位布局,position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。css代码:.header,.footer{ height: 200px;
2022-03-21 22:38:16
2928
1
原创 边框制作三角形
代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 0px; height:0px; border: 100px solid white; border-left-color:blue; } &l
2022-03-21 21:37:24
85
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人