css布局补充一

图片边框问题

注意css布局时img图片标签默认有的浏览器有边框，所以大多时候需要去除图片的边框

CSS各种居中方法

水平居中的text-align:center 和 margin:0 auto

这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响，否则一切都是无用功。margin:0 auto
也可以被写成margin:0 auto 0 auto。不能理解的童鞋们可以自己去找找关于css缩写的内容。

垂直居中的line-height

什么？！margin在垂直居中里不起作用了？显然事情确实如此，我们仅有margin:0 auto的用法而没有auto 0的情况。至于line-height，他也是作用在父元素上，当他的值等于父元素的height值时
，内部的文字就会自动的垂直居中了。此处好像仅仅只能是文字而已，遗憾。

利用position定位来实现元素的水平和垂直居中

html代码

  1. <div class="a">
  2.     <div class="b">
  3.         <p>这是一段文本</p>
  4.     </div>
  5. </div>

css代码

  1. @charset "utf-8";
  2. *{
  3.     margin:;
  4.     padding:;
  5. }
  6. .a{
  7.     width: 400px;
  8.     height: 300px;
  9.     background-color: #ff3820;
  10.     /*将父元素绝对定位*/
  11.     position: relative;
  12. }
  13. .b{
  14.     width: 100px;
  15.     height: 50px;
  16.     background-color: #3437ff;
  17.     /*将子元素相对定位*/
  18.     position: absolute;
  19.     /*定位上面百分之五十*/
  20.     top: 50%;
  21.     /*定位左边百分之五十*/
  22.     left: 50%;
  23.     /*外边距左边负元素宽度的一半*/
  24.     margin-left: -50px;
  25.     /*外边距上负元素高度的一半*/
  26.     margin-top: -25px;
  27. }

css布局边距问题

有的标签有默认边距，布局起来不方便，我们一般在布局的时候，会先用*将所以内外边距去除

  1. *{
  2.     margin:;
  3.     padding:;
  4. }

利用position: absolute;相对定位来布局管理后台

css代码

  1. @charset "utf-8";
  2. *{
  3.     margin:;
  4.     padding:;
  5.     overflow: hidden;
  6. }
  7. body{
  8.     background-color: #00C5CE;
  9.     color: #FFFFFF;
  10. }
  11. /*头部区域*/
  12. .tou{
  13.     width: auto;
  14.     height: 100px;
  15.     background-color: #00C5CE;
  16.     text-align:center;
  17.     border-bottom: 4px solid #fef6ff;
  18. }
  19. .tou h1{
  20.     font-size: 30px;
  21.     font-weight: bold;
  22.     line-height: 100px;
  23. }
  24. /*左边导航区域*/
  25. div .dh{
  26.     background-color: #5DA7AA;
  27.     width: 180px;
  28.     height: 572px;
  29.     border: 4px solid #3B5521;
  30.     border-radius: 6px;
  31.     /*将导航区域相对定位*/
  32.     position: absolute;
  33.     left:;
  34. }
  35. div .dh h3{
  36.     width: 182px;
  37.     height: 25px;
  38.     background-color: #2E5FC4;
  39.     font-size: 15px;
  40.     text-align: center;
  41.     line-height: 25px;
  42. }
  43. div .dh ul li{
  44.     background-color: #A2D3D3;
  45.     margin-top: 2px;
  46.     margin-bottom: 2px;
  47.     text-align: center;
  48.     color: #1618ff;
  49.     border: 2px solid #A2D3D3;
  50.     border-radius: 6px;
  51. }
  52. /*内容区域*/
  53. div .lr{
  54.     height: 572px;
  55.     /*内容区域相对定位*/
  56.     position: absolute;
  57.     left: 190px;
  58.     right:;
  59.     bottom: 50px;
  60.     top: 104px;
  61.     color: #1618ff;
  62.     background-color: #D3EAEF;
  63.     border: 4px solid #3B5521;
  64.     border-radius: 6px;
  65.     overflow: scroll;
  66. }
  67. /*底部区域*/
  68. div .db{
  69.     width: auto;
  70.     height: 42px;
  71.     background-color: #5DA7AA;
  72.     /*底部相对定位*/
  73.     position: absolute;
  74.     top: 687px;
  75.     left:;
  76.     right:;
  77.     bottom:;
  78.     text-align: center;
  79.     line-height: 42px;
  80. }

html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>后台管理系统</title>
  6.     <link rel="stylesheet" type="text/css" href="1.css"/>
  7. </head>
  8. <body>
  9. <!--头部-->
  10. <div class="tou">
  11.     <h1>欢迎登陆后台管理系统</h1>
  12. </div>
  13. <!--主体-->
  14. <div class="zht">
  15.     <div class="dh">
  16.         <h3>导航中心</h3>
  17.         <ul>
  18.             <li>列表1</li>
  19.             <li>列表2</li>
  20.             <li>列表3</li>
  21.             <li>列表4</li>
  22.             <li>列表5</li>
  23.         </ul>
  24.     </div>
  25.  
  26.     <div class="lr">
  27.          <h1>这是内容</h1>
  28.          <h1>这是内容</h1>
  29.          <h1>这是内容</h1>
  30.          <h1>这是内容</h1>
  31.          <h1>这是内容</h1>
  32.          <h1>这是内容</h1>
  33.          <h1>这是内容</h1>
  34.          <h1>这是内容</h1>
  35.          <h1>这是内容</h1>
  36.          <h1>这是内容</h1>
  37.          <h1>这是内容</h1>
  38.          <h1>这是内容</h1>
  39.          <h1>这是内容</h1>
  40.          <h1>这是内容</h1>
  41.     </div>
  42.  
  43.     <div class="db">
  44.     玉秀文化传播版权所有©
  45.     </div>
  46. </div>
  47. </body>
  48. </html>

效果图：

利用font-awesome图片和position定位来实现文本框图标

css代码

  1. @charset "utf-8";
  2. .shrk{
  3.     width: 190px;
  4.     height: auto;
  5.     background-color: #194aff;
  6.     position: relative;
  7. }
  8. .shrk input{
  9.     width: 170px;
  10.     height: 25px;
  11.     padding-right: 25px;
  12.     border: 2px solid #2758ff;
  13.     border-radius: 6px;
  14. }
  15. .shrk span{
  16.     /*定位图片*/
  17.     position: absolute;
  18.     right: 0px;
  19.     top: 8px;
  20.     opacity: 0.7;
  21.     color: #2758ff;
  22. }

html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>输入框</title>
  6.     <link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/css/font-awesome.css"/>
  7.     <link rel="stylesheet" type="text/css" href="1.css"/>
  8. </head>
  9. <body>
  10. <div class="shrk">
  11.     <input type="text"/>
  12.     <span class="fa fa-user"></span>
  13. </div>
  14. </body>
  15. </html>

利用position定位来设置模态对话框

html代码

  1. <!--网页层-->
  2. <div class="wy">
  3.     <p>这是网页层</p>
  4. </div>
  5.  
  6. <!--遮罩层-->
  7. <div class="mt">
  8. </div>
  9.  
  10. <!--提示层-->
  11. <div class="tshk">
  12.     <h2>提示框</h2>
  13. </div>

css代码

  1. @charset "utf-8";
  2. *{
  3.     margin:;
  4.     padding:;
  5. }
  6. /*网页层*/
  7. .wy{
  8.     width: auto;
  9.     height: 2000px;
  10.     background-color: #ffd41e;
  11. }
  12. /*遮罩层*/
  13. .mt{
  14.     position: fixed;
  15.     top:;
  16.     right:;
  17.     bottom:;
  18.     left:;
  19.     z-index:;
  20.     background-color:black;
  21.     opacity: 0.8;
  22. }
  23. /*提示层*/
  24. .tshk{
  25.     width: 400px;
  26.     height: 300px;
  27.     background-color:aliceblue;
  28.     position: fixed;
  29.     top: 50%;
  30.     left: 50%;
  31.     z-index:;
  32.     margin-left: -200px;
  33.     margin-top: -150px;
  34. }

布局购物商城的购买数量加减框

html代码

  1. <div class="a">
  2.     <div class="b">-</div>
  3.     <div class="c">
  4.         <input type="text" value="1"/>
  5.     </div>
  6.     <div class="d">+</div>
  7. </div>

css代码

  1. @charset "utf-8";
  2. *{
  3.     margin:;
  4.     padding:;
  5. }
  6. .a{
  7.     width: 150px;
  8.     height: 30px;
  9.     margin-top: 10px;
  10.     margin-left: 10px;
  11.     border: 1px solid #C6C6C6;
  12.     cursor: pointer;
  13. }
  14. .b{
  15.     width: 30px;
  16.     height: 30px;
  17.     background-color: #C6C6C6;
  18.     border-right: 1px solid #9B9898;
  19.     text-align: center;
  20.     line-height: 30px;
  21.     font-size: 20px;
  22.     float: left;
  23. }
  24. .c{
  25.     width: 88px;
  26.     height: 30px;
  27.     float: left;
  28. }
  29. .c input{
  30.     width: 88px;
  31.     height: 30px;
  32.     border:;
  33.     text-align: center;
  34.     line-height: 30px;
  35. }
  36. .d{
  37.     width: 30px;
  38.     height: 30px;
  39.     background-color: #C6C6C6;
  40.     border-left: 1px solid #9B9898;
  41.     text-align: center;
  42.     line-height: 30px;
  43.     font-size: 20px;
  44.     float: right;
  45. }

第八十五节，css布局补充一的更多相关文章

  1. 第三百八十五节，Django+Xadmin打造上线标准的在线教育平台—登录功能实现，回填数据以及错误提示html

    第三百八十五节,Django+Xadmin打造上线标准的在线教育平台—登录功能实现 1,配置登录路由 from django.conf.urls import url, include # 导入dja ...

  2. 第二百八十五节，MySQL数据库-MySQL函数

    MySQL数据库-MySQL函数 1.MySQL内置函数 SELECT执行函数,后面跟要执行的函数 CHAR_LENGTH(str)函数:返回字符串的字符长度 -- CHAR_LENGTH(str)函 ...

  3. 第一百八十五节，jQuery，Ajax 表单插件

    jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 ...

  4. 第三百八十六节，Django+Xadmin打造上线标准的在线教育平台—HTML母版继承

    第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承 母板-子板-母板继承 母板继承就是访问的页面继承一个母板,将访问页面的内容引入到母板里指定的地方,组合成一个新页 ...

  5. 第三百八十四节，Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册

    第三百八十四节,Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册 基于类的路由映射 from django.conf.urls import url, incl ...

  6. 第三百五十五节，Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy信号详解

    第三百五十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy信号详解 信号一般使用信号分发器dispatcher.connect(),来设置信号,和信号触发函数,当捕获到信号时执行 ...

  7. 第三百一十五节，Django框架，CSRF跨站请求伪造

    第三百一十五节,Django框架,CSRF跨站请求伪造  全局CSRF 如果要启用防止CSRF跨站请求伪造,就需要在中间件开启CSRF #中间件 MIDDLEWARE = [ 'django.midd ...

  8. centos shell脚本编程1 正则 shell脚本结构 read命令 date命令的用法 shell中的逻辑判断 if 判断文件、目录属性 shell数组简单用法 $( ) 和${ } 和$(( )) 与 sh -n sh -x sh -v 第三十五节课

    centos   shell脚本编程1 正则  shell脚本结构  read命令  date命令的用法  shell中的逻辑判断  if 判断文件.目录属性  shell数组简单用法 $( ) 和$ ...

  9. centos lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装，只需修改配置文件即可 安装wordpress 安装phpmyadmin 定时备份mysql两种方法 第二十五节课

    centos  lamp/lnmp阶段复习 以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可 安装wordpress  安装phpmyadmin  定时备份mysql两种方法  第二十五节 ...

随机推荐

  1. 关于preg_match()函数的一点小说明

    int preg_match ( string $pattern , string $subject [, array &$matches [, int $flags = 0 [, int $ ...

  2. ipad 横屏 竖屏 CSS

    /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-devic ...

  3. 各种Python小玩意收集

    快速排序 quicksort = lambda lst: [] if not lst else quicksort([i for i in lst[1:] if i <= lst[0]]) + ...

  4. iOS -不同模拟器字体适配

    1.先建立一个UILabel的分类 导入#import <objc/runtime.h>头文件 2.在.m文件中写入如下代码 //不同设备的屏幕比例(当然倍数可以自己控制) #define ...

  5. 面试题-Java Web-网络通信

    1.HTTP响应的结构是怎么样的? HTTP响应由三个部分组成:状态码(Status Code):描述了响应的状态.可以用来检查是否成功的完成了请求.请求失败的情况下,状态码可用来找出失败的原因.如果 ...

  6. python代码随笔

    此篇随笔只是作为自己偶然想起的遇到过的代码片段..记录下! 1.巧用lambda,reduce实现多层嵌套的装饰器: 示例如下: #示例 函数chain([a,b,c,d) (input), 最终实现 ...

  7. 自动生成 Makefile (automake/autoconf 入门)

    作为Linux 下的程序开发人员,大家一定都遇到过Makefile ,用make 命令来编译自己写的程序确实是很方便.一般情况下,大家都是手工写一个简单Makefile ,如果要想写出一个符合自由软件 ...

  8. DB2数据库实例创建与删除 学习笔记

    以root身份执行 $DB2HOME/instance/db2idrop -f 实例名,注意一定要加-f,否则不会删除实例下面sqllib文件.如果不幸忘了,执行db2icrt,会报sqllib文件存 ...

  9. jmeter对http协议中post请求接口测试

     现在有很多的工具用于工作上的使用,在jmeter的开源工具当中的,提供了一个可以对http协议的post的请求上接口测试,用于实现接口测试的自动化测试,当然也可以使用自己写的工具. 进行打开jmet ...

  10. Elasticsearch相关配置（二）

    一.关于elasticsearch的基本概念 term 索引词,在elasticsearch中索引词(term)是一个能够被索引的精确值.foo,Foo Foo几个单词是不相同的索引词.索引词(ter ...