一、元件
  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. Netty 5.0源码分析-Bootstrap

    1. 前言 io.netty.bootstrap类包提供包含丰富API的帮助类,能够非常方便的实现典型的服务器端和客户端通道初始化功能. 包含的接口类: //提供工厂类的newChannel方法创建一 ...

  2. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  3. Finding Lines

    Finding Lines 题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8& ...

  4. Could not locate executable E:\SoftWave\Hadoop-2.2.0\bin\winutils.exe in the Hadoop binaries解决办法

    需要下载windows版本 bin目录下的文件,替换hadoop目录下原来的bin目录下的文件.下载网址是: https://github.com/srccodes/hadoop-common-2.2 ...

  5. 【顶】在node环境下玩转less

    1.先搭建node.js环境 具体步骤请点我 2.运行node.js环境 唤出dos窗口→进入工程目录→输入 →成功运行 3.关于less

  6. Jmeter之录制脚本

    目前,思路:先录制→再压测. [一]录制的准备: 第一种:直接的模板(¬_¬) [1]File→Templates [2]看见Select Template→Recording→create [3]好 ...

  7. 【锋利的Jquery】读书笔记十一

    项目进度太赶,天天公司加班12小时,没时间看书充电.2016年再更新一篇吧.现在凌晨2点36分. 2017加油哦 jquery合适的选择器 $("#id") 无疑是最佳提高性能的方 ...

  8. Oracle常用查询

    -- 创建Oracle sequence create sequence SEQ_XXHF minvalue 1 maxvalue 9999999999999999999999999999 start ...

  9. HTML <button>标签

    如果<button>标签在<form>中不加type="button",那么默认含义是"submit". <button>标 ...

  10. HashMap和Hashtable的同和不同

    一.综述 可以直接根据hashcode值判断两个对象是否相等吗?肯定是不可以的,因为不同的对象可能会生成相同的hashcode值.虽然不能根据hashcode值判断两个对象是否相等,但是可以直接根据h ...