css学习_css布局案例
1、中间栏先加载 !!!(若不是这个条件的话 ,那可以用 calc 或者flex布局来实现 中间栏自适应,左右栏定宽)
2、中间栏自适应 width:100%
3、左右栏固定宽
左中右 浮动 (本来应该在一行显示的,但是中间栏宽100% ,所以左右会掉下来,此时就需要设置margin-left)
左margin-left:-100%
右 margin-left: 200px(自身宽)
父元素设置padding: 0 200px (父元素不能右宽100%,保证左右留200给左右栏)
左边栏:position :relative ;left : -200px
右边栏:position :relative ;right: -200px
给父元素容器加最小宽度 min-width: 400px
方法二:
在一的基础上优化代码
!!!此时可以去掉左右栏的定位,去掉父元素的padding,给中间栏的容器加margin : 0 200px 这样中间栏就不会有空间被左右栏遮挡住了
css学习_css布局案例的更多相关文章
- css学习_css浮动
1.文档流介绍 网页布局的核心就是利用css来摆放盒子, 把盒子摆放在合适的位置. css的定位机制有以下3种(网页布局一般需要3种搭配使用): a.普通流(标准流) b.浮动 1.浮动只有左右. 2 ...
- css学习_css补充知识
1.渐进增强,优雅降级 2.浏览器前缀 3.背景渐变 4.css 验证工具 2种方式:第2种支持验证本地的css(推荐) 5.css压缩 ----(节约空间,节省带宽) 6.旋转轮播图 案例: ...
- css学习_css盒模型及应用
1.看透网页布局的本质 2.盒模型 margin.border.padding.width.height a. border: 1px solid red (solid/ ...
- CSS:绝对定位布局案例 position布局实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- CSS学习摘要-布局
注:全文摘自MDN-介绍CSS布局 CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流.周边元素.父容器或者主视口/窗口的位置.在这个模块中将涉及更多关于页面布局技术的细节: 浮动 ...
- css的网页布局案例
常见行布局: 导航使用position:fixed固定住 导航会脱离文档流,不占据空间 导致下面的元素上移,因此需要将下面的元素的padding-top设置成导航的高度 <!DOCTYPE ht ...
- css学习_css伪元素的本质
1.伪元素的本质(插入了一个元素(行内元素/标签/盒子) 案例1: 案例2:
- css学习_css精灵技术、字体图标
1.精灵技术产生的背景(减少向服务器请求的次数,减小服务器压力) 2.精灵技术的本质(小的背景图集中在一张大图上) 3.精灵技术的使用 案例1: 案例2: 注意:产品类的图片一般不是用背景,而是用im ...
- css学习_css用户界面样式
1.css用户界面样式 a.鼠标样式(记住几个兼容性好的) cursor:default/pointer/move/text; b.轮廓 outline outline:2px solid red: ...
随机推荐
- IDEA15 下运行Scala遇到问题以及解决办法
为了让Scala运行起来还是很麻烦,为了大家方便,还是记录下来: 1.首先我下载的是IDEA的社区版本,版本号为15. 2.下载安装scala插件: 2.1 进入设置菜单. 2.2 点击安装JetBr ...
- struts2简单入门-配置文件-struts.xml
struts.xml 作用:配置struts中的action,result,package,全局action,result,等等. 基本文件格式: <?xml version="1.0 ...
- Centos7 设置vim 显示文本不同颜色
Centos7 设置vim 显示文本不同颜色 本人在查找设置 centos7 vim 文本显示颜色时, 学习了作者: luffy5459 (博客连接:https://blog.csdn.net/fei ...
- C/C++ 函数指针使用总结
一 函数指针介绍 函数指针指向某种特定类型,函数的类型由其参数及返回类型共同决定,与函数名无关.举例如下: int add(int nLeft,int nRight);//函数定义 该函数类型为int ...
- redis更多
应用场景 存放频繁操作的数据,以及一些无须保存到数据库的中间值 应用: - 配合django做缓存,常用且不易修改的数据放进来(博客) - 购物车信息 - Session - 缓存配置文件 - ses ...
- 斜率优化dp 的简单入门
不想写什么详细的讲解了...而且也觉得自己很难写过某大佬(大米饼),于是建议把他的 blog 先看一遍,然后自己加了几道题目以及解析...顺便建议看看算法竞赛(蓝皮书)的 0x5A 斜率优化(P294 ...
- 【原创】大叔经验分享(21)yarn中查看每个应用实时占用的内存和cpu资源
在yarn中的application详情页面 http://resourcemanager/cluster/app/$applicationId 或者通过application命令 yarn appl ...
- C#中用ILMerge合并DLL和exe文件成一个exe文件或者DLL
ILMerge是一个将多个.NET程序集合并到一个程序集中的实用程序.它既可以作为 开源使用,也可以作为NuGet包使用. 如果您在使用它时遇到任何问题,请与我们联系.(mbarnett _at_ ...
- matplotlib学习笔记
1.简介 matplotlib是python的一个2D绘图库,它可以在不同平台上地使用多种通用的绘图格式(hardcopy formats)和交互环境绘制出出版物质量级别的图片.matplotlib可 ...
- mysql触发器Before和After的区别
Before与After区别:before:(insert.update)可以对new进行修改. after不能对new进行修改. ...