- 博客(4)
- 收藏
- 关注
RSS订阅原创 双飞翼布局详解
作用： 圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 原理： 双飞翼布局为了让中间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
6343
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
3057
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
122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人