布局
xvzhengyang
这个作者很懒,什么都没留下…
展开
-
CSS 水平居中:使用flex+margin
<!-- 1.通过css布局利器将flex将子框转换为flex item,在设置子框居中以达到居中 --><!-- 缺点是兼容性,低版本浏览器不兼容 --><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title&g原创 2018-11-28 21:35:43 · 355 阅读 · 0 评论 -
CSS的GRID布局基础
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS的GRID布局</title> <!-- Grid 布局是网站设计的基础,CSS Grid 是创建网格布局最强大和最简单的工具。 目前主流浏览器都支持了网格布局转载 2019-01-17 19:07:56 · 184 阅读 · 0 评论 -
css 多列布局使用float和margin的改进版
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>多列布局使用float和margin的改进版</title> <style type="text/css"> html,body{原创 2018-11-29 20:04:35 · 128 阅读 · 0 评论 -
css 多列布局:定宽+自适应 使用float+overflow (左侧固定+右侧自适应)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>多列布局:定宽+自适应</title> <!-- 使用float+overflow 左侧固定+右侧自适应 --> <!-- 通过将左原创 2018-11-29 20:00:05 · 278 阅读 · 0 评论 -
CSS 多列布局:使用float和margin
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>多列布局:使用float和margin</title> <!-- ie6下有3px的bug。right下的p清除浮动将产生bug --> <s原创 2018-11-29 19:57:14 · 234 阅读 · 0 评论 -
CSS多列布局等分布局,使用flex
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>多列布局等分布局</title> <!-- 使用flex布局,但是兼容性不是很好 --> <style type="text/css原创 2018-11-29 19:50:12 · 1370 阅读 · 0 评论 -
CSS 全屏布局使用position
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>全屏布局使用position</title> <style type="text/css"> html, body, .p原创 2018-11-29 19:49:59 · 414 阅读 · 0 评论 -
CSS 全屏布局使用float和over-flow
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>全屏布局</title> <!-- 特点:1.滚动条不是全局滚动条,而是出现在内容区域,往往是主内容区域 2.浏览器变大时,撑满窗口 --> <转载 2018-11-28 21:57:23 · 10729 阅读 · 0 评论 -
CSS 水平垂直居中:flex+justifycontent+algin-items
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>水平垂直居中:flex+justifycontent+algin-items</title> <style type="text/css">原创 2018-11-28 21:49:13 · 374 阅读 · 0 评论 -
CSS 水平垂直居中:使用absolue和transform
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>水平垂直居中:使用absolue和transform</title> <style type="text/css"> *{ m原创 2018-11-28 21:45:33 · 626 阅读 · 0 评论 -
CSS 垂直居中,使用absolute和transform
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>垂直居中,使用absolute和transform</title> <style type="text/css"> .parent{原创 2018-11-28 21:42:18 · 1569 阅读 · 0 评论 -
CSS 布局垂直居中:使用flex和align
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>垂直居中:使用flex和align</title> <style type="text/css"> .parent{ disp原创 2018-11-28 21:38:16 · 214 阅读 · 0 评论 -
HTML中的浮动元素
浮动元素: 想要浮动一个元素,必须为这个元素设置一个宽度 1.放在首位 2.浮动元素脱离了正常的文档流,相当于悬浮在文档上;注意,下面例子中主内容也就是id为first的div仍然是占据着浏览器窗口的整个宽度,不过我们为他指定了一个外边距与浮动右边的元素一样宽,这样会减少内容的宽度,结果就得到一个漂亮的两栏页面.代码如下<!DOCTYPE html><htm...原创 2019-01-27 18:44:21 · 2027 阅读 · 0 评论