NEC学习 ---- 布局 -三列,右侧自适应
效果如图
html代码:
<div class="g-bd3 f-cb">
<div class="g-sd31">
<p>我是左侧</p>
</div>
<div class="g-sd32">
<p>我是中间</p>
</div>
<div class="g-mn3">
<div class="g-mn3c">
<p>我是右侧自适应</p>
</div>
</div>
</div>
css代码:
.g-bd3{
width:980px;border:3px ridge #3f34e7;
margin:45px auto;
}
.g-sd31,.g-sd32{
float: left;
width:230px;
position: relative;
}
.g-sd31{
width:190px;
margin-right:10px;
}
.g-mn3{
float: right;
width:100%;
margin-left: -460px;
}
.g-mn3c{
margin-left:440px;
}
.g-bd3 p{
height:150px;
background-color: pink;
padding: 5px;
}
目前为止, 关于布局的NEC了解完毕.
我觉得对于自己组织html和CSS的确有帮助, 同时对于自己的编码也有一定启发.
希望能小中见大, 触类旁通, 达到运用的目的.
NEC学习 ---- 布局 -三列,右侧自适应的更多相关文章
- NEC学习 ---- 布局 -三列, 左右定宽,中间自适应
---恢复内容开始--- 这个布局很牛掰, 我觉得学习价值很大. 通过这个的学习, 我发现, 能将简单的事情做好, 就距离成功不远了. 其实布局就是利用所学知识, 活用. 在没看这个之前, 发现自己的 ...
- NEC学习 ---- 布局 -三列,左侧自适应
效果图: html代码: <div id="demo4"> <div class="g-bd4 f-cb"> <div class ...
- NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应
CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...
- NEC学习 ---- 布局 -两列, 右侧定宽,左侧自适应
该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局, ...
- NEC学习 ---- 布局 -两列定宽
这个布局相对来说比较容易, 就是最外层的容器中包含两个子容器, 一个容器向右浮动, 另一个向左浮动, 两个容器的宽度+2个容器之间的距离等于外层容易的中宽度. html代码: <div clas ...
- flex左右布局 左边固定 右侧自适应
flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...
- HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...
- 简单的CSS网页布局--三列布局
三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...
- html布局,左侧固定右侧自适应
前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...
随机推荐
- wpf,CollectionViewSource,使用数据过滤 筛选 功能。
class TextListBoxVMpublic : ViewModelBase { public TextListBoxVMpublic() { var list = this.GetEmploy ...
- HTML5(常用的表单控件)
常用的HTML5的表单控件: Input 类型: color color 类型用在input字段主要用于选取颜色,如下所示: 从拾色器中选择一个颜色: 选择你喜欢的颜色: <input type ...
- Robotium编写测试用例如何模拟Junit4的BeforeClass和AfterClass方法1 - 条件判断法
本文来源于:http://blog.csdn.net/zhubaitian/article/details/39293883 Robotium的测试类ActivityInstrumentationTe ...
- volicity 模板类,java操作配置文件
import java.io.StringWriter; import java.util.HashSet; import java.util.Iterator; import java.util.M ...
- POJ3013 Big Christmas Tree(最短路径树)
题目大概说给一张点和边都有权的图,现在要求其一棵以1结点为根的生成树使树的边权和最小,树边权 = 对应的图边权 * 树边末端点为根的子树所有结点对于图顶点的点权和. 要求∑(边权*子树点权和),等价于 ...
- 【LINUX/UNIX网络编程】之简单多线程服务器(多人群聊系统)
RT,Linux下使用c实现的多线程服务器.这个真是简单的不能再简单的了,有写的不好的地方,还希望大神轻拍.(>﹏<) 本学期Linux.unix网络编程的第四个作业. 先上实验要求: [ ...
- Buy the Ticket{HDU1133}
Buy the TicketTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- BZOJ4451 : [Cerc2015]Frightful Formula
$(i,1)$对答案的贡献为$l_iC(2n-i-2,n-i)a^{n-1}b^{n-i}$. $(1,i)$对答案的贡献为$t_iC(2n-i-2,n-i)*a^{n-i}b^{n-1}$. $(i ...
- curl/wget 测试http请求的响应头信息
1. wget –debug wget可以使用debug信息来查看信息头,如下: [root@localhost ~]# wget --debug http://192.168.1.101:8080/ ...
- Android LocalBroadcastManager 与 BroadcastReceiver
Android中BroadcastReceiver主要用途有 发送通知,更新UI或者数据,应用程序间相互通信,监听系统状态(比如开机,网络等) Android中发送广播的方式: 普通广播:无论优先级大 ...