前端学习CSS网页布局篇(五)
2016-10-17 15:52
375 查看
本篇简述利用CSS网页布局,知识点较少,了解实践一下就搞定了。
运行效果图如下:
![](https://img-blog.csdn.net/20161012164803119)
运行效果图:
![](https://img-blog.csdn.net/20161013102433498)
下面是相关代码
运行效果图:
![](https://img-blog.csdn.net/20161013165333622)
效果图:
![](https://img-blog.csdn.net/20161017154914500)
三列布局不仅仅是绝对定位可以实现,其他方式也可以,条条道路通罗马。
一列布局
又与代码比较简单,就不做过多说明,直接贴代码和效果图<!DOCTYPE html> <html> <meta charset="utf-8" /> <head> <title>单列布局</title> <style type="text/css"> body{ margin: 100px;padding: 0; } .header{ background: #ccc; width: 200px; color: #555; height: 100px; margin:0 auto; } .content{ width: 200px; background: #444; color: #fff; height: 200px; margin:0 auto; } .footer{ width: 200px; background: #ccc; color: #555; height: 100px; margin:0 auto; } </style> </head> <body> <div class="header"> </div> <div class="content"> </div> <div class="footer"> </div> </body> </html>
运行效果图如下:
自适应宽度及固定宽度的二列布局的实现
自适应宽度与固定宽度主要区别在于一个用百分比布局控制一个用固定值控制,下面是相关代码(固定宽度布局这里就不贴了)<!DOCTYPE html> <html> <meta charset="utf-8" /> <head> <title>自适应布局</title> <style type="text/css"> body{ background: #d3d4d7; margin: 200px;padding: 0; } .main{ background: #FFF; height: 400px; margin: auto; } .left{ background: #ccc; width: 30%; height: 50%; float: left; } .right{ background: #444; width: 70%; height: 50%; float: right; } </style> </head> <body> <div class="main"> <div class="left"> </div> <div class="right"> </div> </div> </body> </html>
运行效果图:
用position定位方法实现自适应效果的三列布局
三列布局用到position的绝对定位属性(不用float),实现左右拖动让中间列自适应,主要知识点:position、margin。下面是相关代码
<!DOCTYPE html> <html> <meta charset="utf-8" /> <head> <title>单列布局</title> <style type="text/css"> body{ background: #eee; margin: 0; padding: 0; } .left{ background: #FF0000; width: 20%; height: 100%; position: absolute; left: 0; top: 0; } .center{ background: #444444; width: 60%; height: 100%; margin: 0 20% 0 20%; } .right{ background: #FFF; width: 20%; height: 100%; position: absolute; right: 0; top: 0; } </style> </head> <body> <div class="left"> </div> <div class="center"> </div> <div class="right"> </div> </body> </html>
运行效果图:
用HTML+CSS实现复杂结构的混合布局
跟随慕课网学习,发现这块的知识比较简单,这里仅贴上自己的实践代码块和效果图,本篇仅作纪录,并无多少知识点。<!DOCTYPE html> <html> <meta charset="utf-8" /> <head> <title>混合布局</title> <style type="text/css"> body{ background: #ccc; margin: 0; padding: 0; } .left{ background: #E3E0D5; width: 20%; height: 100%; float: left; } .right{ background: #595959; width: 80%; height: 100%; float: right; } .header{ height: 50px; margin: 0 auto; background: #FFF; } .footer{ width: 60%; height: 100px; margin: 0 auto; background: #FFF; } .main{ width: 60%; height: 800px; margin: 0 auto; background: #888888; } .login{ height: 150px; background: #F0F0F0; margin: 10 auto; } </style> </head> <body> <div class="header"> </div> <div class="main"> <div class="left"> <div class="login"></div> </div> <div class="right"> </div> </div> <div class="footer"> </div> </body> </html>
效果图:
三列布局不仅仅是绝对定位可以实现,其他方式也可以,条条道路通罗马。
相关文章推荐
- 前端学习笔记--CSS--网页布局实践
- 前端基础学习-常见CSS网页布局
- 前端学习_01_css网页布局
- 前端学习笔记--HTML/CSS--网页布局
- 学习DIV+CSS网页布局之混合布局
- CSS.DIV网页样式与布局学习总结
- Web前端学习第十二天·fighting_使用CSS布局和定位(二)
- 学习DIV+CSS网页布局之两列布局
- 简单学习CSS网页布局(初学者)
- 系列文章--精通CSS.DIV网页样式与布局学习
- Web前端学习第十一天·fighting_使用CSS布局和定位(一)
- 通过实例学习CSS布局网页
- CSS+HTML网页设计与布局(学习笔记1)
- DIV+CSS网页制作布局技巧学习
- 学习CSS布局网页的一些实例
- CSS网页布局学习过程中选择什么软件来辅助?
- 新手该怎么学习DIV+CSS网页标准布局?
- web前端学习笔记(CSS固定宽度布局)
- 学习DIV+CSS网页布局之三列布局
- 学习DIV+CSS网页布局之一列布局