一、元件
  1. 自定义按钮
    可用button或a   display为 inline-block 方便设置格式，通过 padding,height,line-height,font-size设置按钮的大小

    1.  <!DOCTYPE html>
    2.  <html>
    3.  <head>
    4.      <title>BUTTON</title>
    5.      <meta charset="utf-8">
    6.      <style type="text/css">
    7.          a {
    8.              text-decoration: none;
    9.          }
    10.          span{
    11.              display: inline-block;
    12.              border-style: solid;
    13.              border-width: 4px 4px 0;
    14.              border-color: #fff transparent transparent;
    15.              vertical-align: middle;
    16.              margin-left: 3px;
    17.          }
    18.          .u-btn{
    19.              display: inline-block;
    20.              box-sizing: content-box;
    21.              -moz-box-sizing: content-box;
    22.              -webkit-box-sizing: content-box;
    23.              padding: 4px 15px;
    24.              margin: 20px;
    25.              height: 20px;
    26.              line-height: 20px;
    27.              border: 1px solid #2b88bf;
    28.              border-radius: 5px;
    29.              background:linear-gradient(#6dbde4,#399dd8);
    30.              font-size: 12px;
    31.              color: #fff;
    32.              cursor: pointer;
    33.          }
    34.          .u-btn:hover{
    35.              background-color:#122772;
    36.          }
    37.      </style>
    38.  </head>
    39.  <body>
    40.      <button class="u-btn">click</button>
    41.      <a class="u-btn" href="#">click</a>
    42.      <a class="u-btn" href="#">
    43.          click
    44.          <span></span>
    45.      </a>
    46.  </body>
    47.  </html>
  2. 按钮组合
    灵活使用display  inline-block设置下拉列表 
    1.  <!DOCTYPE html>
    2.  <html>
    3.  <head>
    4.      <title>按钮组合</title>
    5.      <meta charset='utf-8'>
    6.      <style type="text/css">
    7.          span{
    8.              display: inline-block;
    9.              border-style: solid;
    10.              border-width: 4px 4px 0;
    11.              border-color: #fff transparent transparent;
    12.              vertical-align: middle;
    13.              margin: 0;
    14.          }
    15.  
    16.          .u-btns{
    17.              position: relative;
    18.              display: inline-block;
    19.              margin: 20px;
    20.          }
    21.          .u-btn{
    22.              display: inline-block;
    23.              float: left;
    24.              padding: 6px 15px;
    25.              margin: 0px;
    26.              font-size: 12px;
    27.              color: #fff;
    28.              border: 1px solid #2b88bf;
    29.              background:linear-gradient(#6dbde4,#399dd8);
    30.              border-width: 1px 1px 1px 0;
    31.              cursor: pointer;
    32.          }
    33.          button:first-child{
    34.              border-radius: 5px 0 0 5px;
    35.          }
    36.          button:last-child{
    37.              border-radius: 0 5px 5px 0;
    38.          }
    39.          ul{
    40.              position: absolute;
    41.              top: 13px;
    42.              left: auto;
    43.              right: 0px;
    44.              padding: 0;
    45.              display: inline-block;
    46.              list-style-type: none;
    47.              border: 1px solid #d0d0d0;
    48.              border-radius: 5px;
    49.          }
    50.          li,a{
    51.              height: 30px;
    52.              line-height: 30px;
    53.              text-decoration: none;
    54.              font-family: Arial;
    55.              font-size: 12px;
    56.              color: #333;
    57.              cursor: pointer;
    58.          }
    59.          a{
    60.              display: block;
    61.              padding: 4px 8px;
    62.              text-align: center;
    63.          }
    64.          li:empty{
    65.              border-top: 1px solid #ddd;
    66.              height: 5px;
    67.              line-height: 5px;
    68.              margin: 0px;
    69.          }
    70.          li:hover{
    71.              background: #f7f7f7;
    72.          }
    73.      </style>
    74.  </head>
    75.  <body>
    76.      <div class="u-btns">
    77.          <button class="u-btn" type="button">click</button>
    78.          <button class="u-btn" type="button">
    79.              <span></span>
    80.          </button>
    81.          <ul>
    82.              <li><a href="#">下拉式菜单项</a></li>
    83.              <li><a href="#">下拉式菜单项</a></li>
    84.              <li><a href="#">下拉式菜单项</a></li>
    85.              <li></li>
    86.              <li><a href="#">下拉式菜单项</a></li>
    87.          </ul>
    88.      </div>
    89.  </body>
    90.  </html>

二、BUG

  1. 问题：如果参照物没有触发haslayout，那么在ie6中“绝对定位的容器”的left和bottom就会有问题

    解决方案：在“相对定位的父容器”上加入 zoom:1 来触发ie的haslayout即可解决

    小技巧：通常我们在设置一个容器为position:relative的时候，都会加上zoom:1来解决很多ie下的问题

  2. 问题：在ie67下，红色区域溢出，拖动垂直或水平滚动条时，红色区域不会动
    解决方案：只需要在有滚动条的容器上也设置相对定位即可。
  3. 问题：IE6下参照物宽高为奇数时，绝对定位元素设置了位置为0或100%时，仍会有1px的空隙
    解决方案：设为偶数
  4. 问题：浮动时margin加倍
    解决：设置为inline

三、布局

  1. 全局自适应

    所有元素绝对定位，上下部固定高度，宽度100%，中间高度auto
    注意合并样式，精简代码

    1.  <!DOCTYPE html>
    2.  <html lang="en">
    3.  <head>
    4.      <meta charset="UTF-8">
    5.      <title>全局自适应布局</title>
    6.      <style type="text/css">
    7.          div{
    8.              position: absolute;
    9.              left: 0px;
    10.          }
    11.          .hd,.foot{
    12.              width: 100%;
    13.              height: 100px;
    14.          }
    15.          .hd{
    16.              top: 0px;
    17.              background-color: #ccc;
    18.          }
    19.          .con-left,.con-right{
    20.              top: 100px;
    21.              bottom: 100px;
    22.              height: auto;
    23.          }
    24.          .con-left{
    25.              left: 0px;
    26.              width: 300px;
    27.              background-color: #b8d9e0;
    28.          }
    29.          .con-right{
    30.              right: 0px;
    31.              margin-left: 300px;
    32.              background-color: #b8d9aa;
    33.          }
    34.          .foot{
    35.              bottom: 0px;
    36.              background-color: #ccc;
    37.          }
    38.      </style>
    39.  </head>
    40.  <body>
    41.      <div class="hd"></div>
    42.      <div class="con-left"></div>
    43.      <div class="con-right"></div>
    44.      <div class="foot"></div>
    45.  </body>
    46.  </html>
  2. 前自定义后跟随
    定义两层结构，利用magin的负值保持跟随者在尾部的空间
  3. 表头固定内容滚动的表格
    给内容设置最大高度值，超出时使用滚动条
    注意：overflow-y是用来给div进行裁剪的，所以tbody部分需要在div中
    table>head,div(table>tbody)
  4. 纯CSS手风琴
    通过列表显示图片，定义ul固定宽高，定义li

自定义按钮~自适应布局~常见bug的更多相关文章

  1. 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范

    常用样式制作思路   学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...

  2. Flutter 中的常见的按钮组件 以及自定义按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...

  3. 22Flutter中的常见的按钮组件 以及自定义按钮组件

    /* Flutter中的常见的按钮组件 以及自定义按钮组件 一.Flutter中的按钮组件介绍 Flutter里有很多的Button组件,常见的按钮组件有:RaisedButton/FlatButto ...

  4. 常见css水平自适应布局

    左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  5. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  6. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  7. 为iPhone6设计自适应布局

    Apple从iOS6加入了Auto Layout后开始就比较委婉的开始鼓励.建议开发者使用自适应布局,但是到目前为止,我感觉大多数开发者一直在回避这个问题,不管是不是由于历史原因造成的,至少他们在心底 ...

  8. 为iPhone6 设计自适应布局（一）

    译者的话:本文是自适应布局的巩固篇,所以对布局约束的添加操作步骤等没有详细的说明.如果看着吃力的话请先移步Swift自适应布局(Adaptive Layout)教程. Apple从iOS6加入了Aut ...

  9. Swift自适应布局（Adaptive Layout）教程（二）

    给TextContainer中添加内容 打开 Main.storyboard ,从组件库(Object Library)中拖拽两个 Label 组件到TextContainer中,位置可以随意摆放: ...

随机推荐

  1. <meta>标签的作用

    <META> 是放于 <HEAD> 与 </HEAD>之间的标记,功用与变化等对,所以我公式化地介绍. <meta name="Descriptio ...

  2. KendoUI 用下来的小总结

    Kendoui Aspnetmvc * 引用jquery.1.10以上 * 1.项目引用 Kendo.Mvc.dll 2.页面引用 @using Kendo.Mvc.UI; 3.Name和 HtmlA ...

  3. MySQL分表

    一.概念 1.为什么要分表和分区?日常开发中我们经常会遇到大表的情况,所谓的大表是指存储了百万级乃至千万级条记录的表.这样的表过于庞大,导致数据库在查询和插入的时候耗时太长,性能低下,如果涉及联合查询 ...

  4. 如何安装并使用bower包依赖工具

    什么是bower Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和 ...

  5. angularjs 路由回退，返回到上一个路由

    在现阶段比较流行的angularjs框架中:路由是一个比较重要的应用:angularjs的单页面是其强大功能之一: 所有的页面其实就只是在一个页面就实现的:angularjs通过对路由的控制来进行页面 ...

  6. 第一百三十二节，JavaScript，封装库--下拉菜单

    JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...

  7. Establishing SSL connection without server's identity verification is not recommended. According to MySQL 5.5.45+, 5.6.26+ and 5.7.6+ requirements SSL connection must be established by default if expl

    检查你的用户名和密码是否正确 ,以及位置是否正确:

  8. 关于一条定制长按Power键弹出Dialog的需求

    如题,需要定制长按Power键弹出的Dialog,UI上的大致效果是:全屏,中间下拉按钮“Swipe Down To Power Off”下拉关机,底部左右两侧“Reboot”,“Cancel”按钮, ...

  9. Theos 工程make package时报错

    错误: /Applications/Xcode.app/Contents/Developer/usr/bin/make package requires you to have a layout/ d ...

  10. neovim的新体验

    A. 缘由  vim下的CtrlP插件好用,但是当文件较多时,不能很快检索,时有卡死的情况发生.听说neovim引入了很多新的功能,例如异步处理,job管理等. B. 安装neovim1. Ubunt ...