立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 5415|回复: 0

[DIV+CSS 教程笔记02] 第十七课程 div css当中的 DIV块状居中参数设置详细教程详解

[复制链接]
发表于 2014-12-4 21:43:38 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

亲注册登录道勤网-可以查看更多帖子内容哦!(包涵精彩图片、文字详情等)请您及时注册登录-www.daoqin.net

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 asp老师 于 2014-12-4 21:58 编辑

首先我们新建一个17.html的文件和17.css同时把17.css文件引入我们17.html当中;
17.html代码如下
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <link href="17.css" rel="stylesheet" type="text/css">
  7. </head>

  8. <body>
  9. <div class="aaa">111</div>
  10. </body>
  11. </html>
复制代码
17.css代码如下;
  1. .aaa{background:#F00; width:960px; height:450px;}
复制代码
那么此时效果如下;
01.jpg
此时我们可以看到,现在的效果是这样的,但是我们会发现此时的会有一个蓝色的左面和上面都有个边距,(默认的是浏览器有8个px的大小边距的)那么我们通常可以这么来设置来取消这个边距白色的问题,因为我们正常的一个网页应该是没有这个的,所以我们可以在17.css当中加一个这样的css代码;如下
  1. <font color="#ff0000">body{margin:0px; padding:0px;}</font>
复制代码
效这样呢,我们去取消了8个px的大小效果如下:
02.jpg
那么我们如何操作,才可以让这个div居中呢,我们可以用到这个代码
  1. <font size="5"> margin:0px auto;</font>
复制代码
我们来分析下这个代码这个就是让这个div上下的边距为0px 左右2面自动处理,效果如下;
03.jpg
那么这样左右就可以自动调整了,margin:0px atuo; (这样的方法是比较好的,因为我们每个电脑的显示器分别率是不一样的,如果是我们给左右2个margin更具自己设定了一个数值的话,那么可能在不同的分辨率会出现错乱的页面效果,)
此时我们在17.html当中继续添加一个div 代码如下:

  1. <body>
  2. <div class="aaa">


  3. <div class="ccc">12</div>




  4. </div>

  5. </body>
复制代码
css代码如下:
  1. body{margin:0px; padding:0px;}


  2. .aaa{background:#F00; width:960px; height:450px; margin:0px auto; }
  3. .ccc{background:#FF0; width:860px; height:150px; margin:0px auto;}
复制代码
我们来分析这个代码:他也是让这个.ccc的div 居中;那么此时的效果如下
04.jpg

margin:50px 250px 10px 20px; 这样呢,就表示的数值是上右下左  如果是margin:10px 30px; 就表示上下 左右的数值

那么如果想要让我们的.ccc黄色的div为垂直居中的话,我们应该怎么办呢?可以设置它的边距margin的数值,当然也可以设置外面大的div的内边距的数值padding
那么我们可以回忆总结下知识点;
如果我们想要让一个div居中的话-那么就要考虑到2个因素一个是水平居中和一个是垂直居中;当然不管是什么定位,我们只要设置它或者是包含这个div的margin和padding的数值就可以了;



道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信:q792472177免费电话、后台提交工单这些方式联系道勤主机客服! 如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

道勤网- 推荐内容!上一条 /2 下一条

!jz_fbzt! !jz_sgzt! !jz_xgzt! 快速回复 !jz_fhlb! !jz_lxwm! !jz_gfqqq!

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号-1 )

GMT+8, 2024-3-28 18:07

Powered by DaoQin! X3.4 © 2016-2063 Dao Qin & 道勤科技

快速回复 返回顶部 返回列表