很久没写过页面了，现在写起来也觉得捡起来还是挺快的。

当时遇到了这样的问题，我有一个大的div包涵了整个网站，有网页头部，中部还有底部。头部就是一个标题，中部就是几张图片跟文字排版，结果左右两边的图片边距不一样，这根本就不是我一开始想要的排版，在几经修改下，如下。

1.把图片的那个div设为margin:0 50px;这样就是上下边距为0，左右边距各位50。样式如下：

body{margin:0;padding: 0px; width:1440px;height:500px;background-color: #F0F0F0;font:"微软雅黑";}

#top{height:60px;line-height: 60px;text-align: center;margin-top: 20px;}

#middle{height: 400px;margin:0px auto;}

.left{height: 400px;float: left;text-align: left;margin:10px 50px;}

#bottom{height: 40px;line-height:40px;clear: both;}

2.底部的文字一直没有下去，而是贴着图片的文字，设了高度、行高 ，都没有效果，后来想到了清除前面的样式：clear:both;解决了问题。

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>欢迎加入我们的团队</title>

		<link charset="UTF-8" href="css/index.css" rel="stylesheet">

	</head>

	<body>

		<div id="total">

			<div id="top">ni

				<h2>欢迎加入我们的团队</h2>

			</div>

			<div id="middle">

				<div class="left" id="left1">

					<img src="img/TIM图片20171201135253.png" width="250px" height="300px;"/>

					<br>

						姓名：11<br>

						1233232<br>

						23232<br>

						34343<br>

				</div>

				<div class="left">

					<img src="img/TIM图片20171201135253.png" width="250px" height="300px;"/>

				<br>

						姓名：11<br>

						1233232<br>

						23232<br>

						34343<br>

				</div>

				<div class="left">

					<img src="img/TIM图片20171201135253.png" width="250px" height="300px;"/>

				<br>

						姓名：11<br>

						1233232<br>

						23232<br>

						34343<br>

				</div>

				<div class="left">

					<img src="img/TIM图片20171201135253.png" width="250px" height="300px;"/>

				<br>

						姓名：11<br>

						1233232<br>

						23232<br>

						34343<br>

				</div>

			</div>

			<div id="bottom">

				<center>

					<p>网页底部网页底部</p>

				</center>

			</div>

		</div>

	</body>

</html>

　　网页的最终效果图如下：

网页的居中显示，使用了margin、clear:both的更多相关文章

  1. Js打开网页后居中显示

    使用JavaScript定义打开网页后居中显示,并可为窗口设置大小,使用“window.open”方法打开新窗口:先来看完整的代码及调用方法: <html xmlns="http:// ...

  2. jQery使网页在显示器上居中显示适用于任何分辨率

    这篇文章主要介绍了jQery使网页在任何分辨率的显示器上居中显示的方法,需要的朋友可以参考下 检测屏幕宽度,并设置为id为frame的div宽度, 根据自己网页的最大宽度来调节,小demo最大宽度为1 ...

  3. IE8 margin:0 auto 不能居中显示的问题

    ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码 今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了 ...

  4. 盒子模型、网页自动居中、float浮动与清除、横向两列布局

    1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...

  5. CSS 如何让li横向居中显示

    先给一个简单的示例HTML代码 <body> <form id="form1" runat="server"> <div id=& ...

  6. CSS基础之居中显示

    这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...

  7. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

  8. 多个div居中显示

    页面中有多个div时我们希望并排居中显示,可以通过在并排显示的div上一层再加一个div,设定宽度,然后让其居中显示达到需要的效果. 关键是要对外层div设定宽度. <!DOCTYPE html ...

  9. css div居中显示的4种写法

    Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...

随机推荐

  1. uva 10118，记忆化搜索

    这个题debug了长达3个小时,acm我不能放弃,我又回来了的第一题! 一开始思路正确,写法不行,结果越改越乱 看了网上某神的代码,学习了一下 coding+debug:4小时左右,记忆化搜索+dp类 ...

  2. App 组件化/模块化之路——使用SDK的思路进行模块化设计接口

    在不久之前分享一篇<App 组件化/模块化之路——如何封装网络请求框架>文章介绍了我在项目中封装网络请求框架的思路.开发一个 App 会涉及到很多网络请求 API ,例如登录注册接口.用户 ...

  3. PHPExcel-1.8导出

    //PHPExcel-1.8导出excel<?phpheader("Content-type: text/html; charset=utf-8");mysql_query( ...

  4. du和df显示磁盘空间使用差异大的几种情况

     接触客户多了,发现经常有客户遇到du看到系统只使用了一部分磁盘空间,但df看时磁盘空间已经满了,或者差异较大,我遇到过三次不一样的原因,下面做一下总结,恶补一下!也希望对大家有点帮助! 现象:有客户 ...

  5. PHP的重载及魔术方法

    首先你要知道什么是php的魔术方法,它不是变魔术的,如果你想学习变魔术来错地方了哦! 定义:PHP 将所有以 __(两个下划线)开头的类方法保留为魔术方法.所以在定义类方法时,除了上述魔术方法,建议不 ...

  6. Vue源码后记-钩子函数

    vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...

  7. How to use VisualSVN Server and TortoiseSVN to host your codes and control your codes' version

    ###############################   PART ONE   ############################### #1. Introduction of the ...

  8. 基于Nginx+redis的Asp.net站点搭建

    剧情介绍 在传统的信息系统(比如小规模的ERP\MES系统),往往只是进行简单的应用服务器和数据库服务器的分布式部署,以此来提高应用系统的负载能力,而伴随着访问的增大,应用服务器层面除了做硬件和网络的 ...

  9. [译]ASP.NET Core 2.0 布局页面

    问题 如何在ASP.NET Core 2.0项目中共享可见元素.代码块和指令? 答案 新建一个空项目,首先添加GreetingService服务和UserViewModel模型: public int ...

  10. easyui dialog 中嵌入html页面

    最近使用easyui比较多,这个插件确实很好用.在使用时也遇到了大大小小的问题,好在都一一解决了. 记录一下今天遇到的问题. 目的:用easyui的dialog嵌入一个html页面(html中仍有要执 ...