Html 网页布局(一)
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="decsription" content="一列布局变混合布局" />
- <title>一列布局混合布局</title>
- <style type="text/css">
- body {
- margin: 0;
- padding: 0; /*清楚默认样式*/
- }
- .top {
- height: 100px;
- background: blue;
- }
- .nav{height:100px;width:1000px;background:#f60;margin:0 auto;}
- .main {
- width: 800px;
- height: 600px;
- background: #ccc;
- margin: 0 auto;
- }
- .left{width:200px;height:600px;background:yellow;float:left;}
- .right{width:600px;height:600px;background:#369;float:right;}
- .sub_l{width:400px;height:600px;background:#218;float:left;}
- .sub_r{width:200px;height:600px;background:green;float:right;}
- .sub_r_up{width:200px;height:200px;background:#765;}
- .sub_r_down{width:200px;height:300px;background:red;}
- .bottom {
- width: 800px;
- height: 100px;
- background: #b0b;
- margin: 0 auto;
- }
- </style>
- </head>
- <body>
- <div class="top">
- <div class="nav"></div>
- </div>
- <div class="main">
- <div class="left"></div>
- <div class="right">
- <div class="sub_l"></div>
- <div class="sub_r">
- <div class="sub_r_up"></div>
- <div class="sub_r_down"></div>
- </div>
- </div>
- </div>
- <div class="bottom"></div>
- </body>
- </html>
Html 网页布局(一)的更多相关文章
- 利用@media screen实现网页布局的自适应
利用@media screen实现网页布局的自适应 优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽 ...
- 在网页布局中合理使用inline formating context(IFC)
引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- MasonJS – 创建完美的砌体结构网页布局
MasonJS 插件用来解决目前大多数的网格系统使用中的问题——间距.当使用 Masonry,Isotope 或任何其他网格插件时,布局中会出现空白或边缘参差不齐的情况.MasonJS 可以帮助你填补 ...
- 《精通CSS网页布局》读书报告 ----2016-12-5补充
第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...
- DIV+CSS常用网页布局技巧!
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- PS网页设计教程XXVI——如何在PS中创建一个专业的网页布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...
- 一、HTML和CSS基础--网页布局--网页布局基础
W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...
- 一、HTML和CSS基础--网页布局--如何用css进行网页布局
什么叫做布局? 又称版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合. 网页设计的特点 网页可以自适应宽度 网页的高度理论上可以无限延长 网页分栏 分栏又称为分列,常见的布局分为:一列布局 ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
随机推荐
- SQLSERVER建立MYSQL连接服务器
1. 在SQL SERVER端安装MYSQL的ODBC驱动 2. 在ODBC数据源添加MYSQL(控制面板\所有控制面板项\管理工具) 在用户DSN 和系统DSN添加配置驱动程序 注:字符集一定要和M ...
- solr searcher
solr searcher 前面我配置好了solr,并且数据库建立索引也完成了. 为php添加搜索 首先下载solrphp http://wiki.apache.org/solr/SolPHP 在so ...
- android_audio
参考 source.android.com/devices/audio.html
- String to Date 多种格式转换
在做Excel数据导入的时候,有些日期文本转换为日期格式时,需要适应多种格式,转换代码如下: static Date multiParse(String strDate){ if (strDate?. ...
- Changing Project Binding to Surround SCM Integration Provider with Visual Studio 2010
Changing Project Binding to Surround SCM Integration Provider with Visual Studio 2010 Sarah Wigser t ...
- Part 2: Oracle E-Business Suite on Cloud FAQ
Running Oracle E-Business Suite on Oracle Cloud is simple, but it doesn't take too much effort to co ...
- LevelDB(v1.3) 源码阅读之 Slice
LevelDB(v1.3) 源码阅读系列使用 LevelDB v1.3 版本的代码,可以通过如下方式下载并切换到 v1.3 版本的代码: $ git clone https://github.com/ ...
- 资源 | 数十种TensorFlow实现案例汇集:代码+笔记
选自 Github 机器之心编译 参与:吴攀.李亚洲 这是使用 TensorFlow 实现流行的机器学习算法的教程汇集.本汇集的目标是让读者可以轻松通过案例深入 TensorFlow. 这些案例适合那 ...
- 深入研究 蒋金楠(Artech)老师的 MiniMvc(迷你 MVC),看看 MVC 内部到底是如何运行的
前言 跟我一起顺藤摸瓜剖析 Artech 老师的 MiniMVC 是如何运行的,了解它,我们就大体了解 ASP.NET MVC 是如何运行的了.既然是“顺藤摸瓜”,那我们就按照 ASP.NET 的执行 ...
- 【目录】C#操作Excel组件Spire.XLS系列文章目录
本博客所有文章分类的总目录链接:http://www.cnblogs.com/asxinyu/p/4288836.html 1.C#操作Excel组件Spire.XLS文章目录 1.[原创].NET读 ...