学习网页布局

<!DOCTYPE <!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>猪八戒</title>

<style>

body{

margin: 0px;

padding: 0px;

}

</style>

</head>

<body>

<div style="width: 1422px;height: 33px; background: grey; margin: 0 auto">

</div>

<div style="width: 1190px;height: 60px; background: black; margin: 0 auto">

</div>

<div style="width: 1190px;height: 542px; margin: 0 auto">

<div style="width: 205px;height: 542px; background: red;float: left;">

</div>

<div style="width: 985px;height: 42px; background: blue;float: left;">

</div>

<div style="width: 672px;height: 500px; background: green;margin-left: 6px;  float: left;">

<div style="width: 450px;height: 500px; background: yellow;  float: left;">

</div>

<div style="width: 222px;height: 500px;float: left; ">

<div style="width: 222px;height: 166px; background: black;float: left;">

</div>

<div style="width: 222px;height: 166px; background: blue;float: left;"></div>

<div style="width: 222px;height: 168px; background: red;float: left;"></div>

</div>

</div>

<div style="width: 300px;height: 500px; background: yellow;margin-left: 7px; float: left;">

<div style="width: 300px;height: 166px; background: red;float: left;"></div>

<div style="width: 300px;height: 166px; background: yellow;float: left;"></div>

<div style="width: 300px;height: 168px; background: blue;float: left;"></div>

</div>

</div>

<div style="width: 1190px;height: 102px; background: grey; margin: 0 auto; margin-top:20px;">

</div>

<div style="width: 1190px;height: 200px; margin: 0 auto; margin-top:20px;">

<div style="width: 170px;height: 200px; background:red;float: left;">

</div>

<div style="width: 332px;height: 200px; background:blue;float: left;margin-left: 8px;"></div>

<div style="width: 332px;height: 200px; background:black;float: left;margin-left: 8px;"></div>

<div style="width: 332px;height: 200px; background:green;float: left;margin-left: 8px;"></div>

</div>

<div style="width: 1190px;height: 200px; margin: 0 auto; margin-top:23px;">

<div style="width: 170px;height: 200px; background:black;float: left;">

</div>

<div style="width:1014px;height: 200px; background:blue;float: left;margin-left: 6px;">

<div style="width:169px;height: 100px; background:red;float: left;"></div>

<div style="width:169px;height: 100px; background:white;float: left;"></div>

<div style="width:169px;height: 100px; background:red;float: left;"></div>

<div style="width:169px;height: 100px; background:white;float: left;"></div>

<div style="width:169px;height: 100px; background:red;float: left;"></div>

<div style="width:169px;height: 100px; background:white;float: left;"></div>

<div style="width:169px;height: 100px; background:yellow;float: left;"></div>

<div style="width:169px;height: 100px; background:red;float: left;"></div>

<div style="width:169px;height: 100px; background:white;float: left;"></div>

<div style="width:169px;height: 100px; background:red;float: left;"></div>

<div style="width:169px;height: 100px; background:white;float: left;"></div>

<div style="width:169px;height: 100px; background:red;float: left;"></div>

</div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 306px; margin: 0 auto; margin-top:23px;">

<div style="width: 590px;height: 306px; background:red;float: left;">

</div>

<div style="width:587px;height: 306px; background:blue;float: left;margin-left: 13px;"></div>

</div>

<div style="width: 1190px;height: 260px; margin: 0 auto; margin-top:23px;">

<div style="width: 190px;height: 260px; background:red;float: left;"></div>

<div style="width:190px;height: 260px; background:blue;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:yellow;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:red;float: left;margin-left:10px;"></div>

<div style="width:190px;height: 260px; background:blue;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:yellow;float: left;margin-left: 10px;"></div>

</div>

<div style="width: 1190px;height: 260px; margin: 0 auto; margin-top:23px;">

<div style="width: 190px;height: 260px; background:red;float: left;"></div>

<div style="width:190px;height: 260px; background:blue;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:yellow;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:red;float: left;margin-left:10px;"></div>

<div style="width:190px;height: 260px; background:blue;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:yellow;float: left;margin-left: 10px;"></div>

</div>

<div style="width: 1190px;height: 260px; margin: 0 auto; margin-top:23px;">

<div style="width: 190px;height: 260px; background:red;float: left;"></div>

<div style="width:190px;height: 260px; background:blue;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:yellow;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:red;float: left;margin-left:10px;"></div>

<div style="width:190px;height: 260px; background:blue;float: left;margin-left: 10px;"></div>

<div style="width:190px;height: 260px; background:yellow;float: left;margin-left: 10px;"></div>

</div>

<div style="width: 1190px;height: 382px; margin: 0 auto;background: #c1c2c2; margin-top:23px;">

<div style="width:195px;height: 333px; background:red;float: left;margin-top:25px;margin-left: 27.5px;"></div>

<div style="width:195px;height: 333px; background:blue;float: left;margin-top:25px;margin-left: 40px;"></div>

<div style="width:195px;height: 333px; background:yellow;float: left;margin-top:25px;margin-left: 40px;"></div>

<div style="width:195px;height: 333px; background:red;float: left;margin-top:25px;margin-left:40px;"></div>

<div style="width:195px;height: 333px; background:blue;float: left;margin-top:25px;margin-left: 40px;"></div>

</div>

<div style="width: 1190px;height: 35px; margin: 0 auto;background: #c1c2c2; margin-top:20px;"></div>

<div style="width: 1190px;height: 430px; margin: 0 auto;background: red; margin-top:25px;"></div>

<div style="width: 1190px;height: 35px; margin: 0 auto;background: #c1c2c2; margin-top:20px;"></div>

<div style="width: 1190px;height: 370px; margin: 0 auto; margin-top:82px;">

<div style="width: 290px;height: 370px; background:red;float: left;"></div>

<div style="width: 625px;height: 370px; background:yellow;float: left;margin-left: 40px;">

<div style="width: 200px;height: 180px; background:blue;float: left;"></div>

<div style="width: 417px;height: 180px; background:blue;float: left;margin-left: 8px;"></div>

<div style="width: 200px;height: 180px; background:blue;float: left;margin-top:10px ">

</div>

<div style="width: 200px;height: 180px; background:blue;margin-left: 10px;float: left;margin-top: 10px;">

</div>

<div style="width: 200px;height: 180px; background:blue;margin-left: 15px;float: left;margin-top: 10px;">

</div>

</div>

<div style="width: 200px;height: 370px; background:blue;float: left;margin-left: 35px;"></div>

</div>

<div style="width: 1190px;height: 440px; margin: 0 auto;background: #c1c2c2; margin-top:75px;"></div>

<div style="width: 1422px;height: 195px; margin: 0 auto;background: black; margin-top:22px;"></div>

</body>

</html>

时间： 2024-10-15 04:28:38

学习网页布局的相关文章

【网页布局基础】css布局学习总结

三种定位机制 1.标准文档流:从上到下,从左到右输出文档内容 2.浮动 3.绝对定位 需要注意的是块级元素如div p ul 等 行级元素如span strong img input等 块级元素与行级元素都是盒子模型,下面说下盒子模型 盒子模型 盒子模型是网页布局的基石,border padding margin 下面给出盒子3d模型图便于理解 常见布局 自动居中一列布局 布局时候最重要的是把握三个技能点:标准文档流,块级元素,margin属性 自动居中代码:margin:0 auto: aut

网页布局基础

网页布局基础     简介 什么是网页布局?    网页布局是网页制作的基础,使用DIV+CSS布局网页是基础中的基础.三种基本布局方式:流式布局,浮动布局,绝对定位布局. 网页设计的特点:1:网页宽度可变  2头+内容主体(根据需要分栏)+页脚(不重要的内容)   对长度设置百分比可实现网页自适应 W3C标准包括结构化标准语言,表现标准语言,行为标准语言,倡导结构,样式,行为分离. CSS中,存在三种定位机制:标准文档流,浮动,绝对定位. 标准文档流:从上到下,从左到右输出文档内容,由块级元素

14.1 “1-2-1”变宽度网页布局

在上一章中,对固定宽度的页面布局傲了比较深入地分析和讲解.在本章中,将对变宽度的页面布局做进一步的分析.变宽度的布局要比固定宽度的布局复杂一些,根本的原因在于,宽度不确定,导致很多参数无法确定.因此．必须使用一些技巧来完成. 这里将介绍一些国外的CSS领域著名的设计师的研究成果,并对变宽度网页布局的总体情况进行归纳.希望读者能够保持清晰的思路,这样在实际工作中遇到具体的案例时,就可以灵活地选择解决方法.lodidance.com “1-1-1”布局过于简单,因此这里就不再介绍了.我们从“1-2-

（14）网页布局剖析与制作（下）

本篇学习资料主要讲解:       以变宽度的网页布局进行深入剖析,{以浏览器窗口为基准 或者 以父级div为基准}. 变宽度的布局要比固定宽度的布局复杂一些,原因是宽度不确定,导致很多参数无法确定,需要使用一些技巧来完成,下面将介绍一些通用的方法,预防未来在实际的工作中遇到具体的案列时,就可以灵活地选择解决方法. (1)1-2-1等比例变宽布局 这里先看效果图,然后再给出“ 1-2-1 等比例变宽布局布局”案例,以便大家都能现有一个感官上的认识,再往下看就会容易很多:如下图: 等比例布局图 (

CSS--沃顿商学院网页布局

源代码: <head> 右键CSS样式--附加样式表 </head> <body> <div id="dd"> <div id="menu" class="container"> <ul> <li>PENN</li> <li>WHARTON HOME</li> <li class="drop">C

练习数据库和网页布局（查询好友列表）

学习:查询好友列表 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

[看书][CSS精粹（第2版）]第三章 CSS和图像 & HTML网页布局

本章主要讲述作为背景图像方面的技巧. 1.边框(添加边框样式.去除边框): 2.为页面设置背景图像,位置设定,固定背景图像: 3.为任意元素设置背景图像: 4.文字放在图像的上面(作为背景图像): 5.为文档添加多个背景图像(本例利用html和body元素产生多重背景图像的效果): 6.在页面中使用透明效果(使用PNG格式图像). 利用网络搜索补充学习了padding的4个方向顺序(上右下左 顺时针),流式布局(看网上的解释结合书里的描述,大概是指页内布局元素采用百分数指定位置和大小). [个人

web前端如何让网页布局稳定性和标准性？

刚开始学css+div布局的同学们,都比较困惑和难写的就是兼容性的问题了,特别是ie6等低版本的浏览器,随意国内逐步慢慢消失取代,但是现阶段还是会有点考虑因素再里面.我们写的网页布局怎么样才是合理的,完整的,兼容性好的呢? 因此再这里,小强老师给大家列出网页布局标准性.合理性和兼容性的一些方法,希望对刚开始学习css的同学有所帮助. 一.<!DOCTYPE> 标记的重要性. 位 于文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准 规范,我们必需在开头处使用<

新手篇——学习网页开发需要多长时间就能找到工作

近几年Web前端框架层出不穷,比如 React, Vue, AngulaJS等吸引了大量的注意力,前端技术发展势头迅猛,各大互联网公司也越来越重视前端开发,前端开发再也不是过去那种按照设计图做静态网页,再随便写点jQuery的职位了.现在,市场上对于前端开发的需求越来越大,我们经常听说前端开发入门难度低,但学习前端开发究竟需要多长时间呢?学多长时间就能找到工作赚到钱?结合了周边同事和自身的经验来谈谈学习网页开发到底需要花多长时间. Note:一定要下定决心,并且要坚持. 1. 网页设计的基本概念