![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html
文章平均质量分 55
背着吉他的蝙蝠女侠
这个作者很懒,什么都没留下…
展开
-
左侧宽度固定,右侧宽度自适应
实现左侧宽度固定,右侧宽度自适应的布局有很多,这里介绍几种方式:方式一:左侧盒子宽度设置为100像素,并且设置为左浮动,右侧的盒子不设置宽度,只是设置个margin-left值就可以了,代码如下: .left {width: 100px; height: 20px; background: red; float: left;} .ri原创 2017-11-01 22:00:09 · 577 阅读 · 0 评论 -
实现盒子的垂直水平居中
方式一:使用绝对定位实现。代码如下: Document * { margin: 0; padding: 0; } .box1 { position: absolute; width: 100px; height: 200px; background-color: red; top: 50%; left: 50%;原创 2017-11-01 22:58:22 · 402 阅读 · 0 评论 -
sticky footer设计
如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。 Document * { margin: 0; padding: 0; font-size: 48px; } /*第一步设置盒子为满屏大小*/ .box { position: fixed; width: 100%; height: 10原创 2017-11-02 17:57:58 · 226 阅读 · 0 评论 -
响应式布局的实现
响应式布局的实现方式有很多种,我们这里先介绍几种实现响应式布局的方式,然后着重介绍的是如何使用媒体查询实现响应式布局。方式一:使用媒体查询。注意在使用媒体查询的时候,and与前后的小括号空一个空格,如果不空格的话,会报错。代码如下: Document * { margin: 0; padding: 0; } body,html,div { wid原创 2017-11-04 15:36:54 · 303 阅读 · 0 评论