NEC学习 ---- 布局 -三列,右侧自适应
2024-10-12 06:18:14
效果如图
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的确有帮助, 同时对于自己的编码也有一定启发.
希望能小中见大, 触类旁通, 达到运用的目的.
最新文章
- 网络第一节——NSURLConnection
- 五一干货来袭!开源Moon.Orm标准版发布!
- Thinkphp源码分析系列(四)–Dispatcher类
- Git本地提交到远程指定分支
- 透过proxy进行docker pull(Centos6.8)
- smartjs - DataManager API
- js中等性操作符(==)、关系操作符(<;,>;)和布尔操作符(!)比较规则
- 【转】google play上传应用
- Linux系统编程(6)——文件系统
- iOS在Xcode6中添加空模板
- hdu Diophantus of Alexandria(素数的筛选+分解)
- c/c++ 基金会(七) 功能覆盖,虚函数,纯虚函数控制
- Masonry的简单使用
- Gradle之恋-任务1
- Flink从入门到放弃(入门篇4) DataStreamAPI
- solr部署tomcat 访问HTTP Status 403 – Access to the requested resource has been denied
- UNITY 打包时提示sdk tools 或 sdk build tools版本低时可以直接点update 按钮进行更新
- 使用firefox插件httperrequest,模拟发送及接收Json请求 【转】
- iOS Swift WisdomScanKit二维码扫码SDK,自定义全屏拍照SDK,系统相册图片浏览,编辑SDK
- ios中布局(推荐一)