style設計(草稿)(分頁/legend/grid/icon)

by cactus77kiki

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h3 class="stitle">
  icon
</h3>
<div>
<span class="fa-stack fa-lg">
  <span class="iespan"><i class="fa fa-internet-explorer fa-stack-1x"></i></span>
  <span class="banspan"><i class="fa fa-ban fa-stack-2x text-danger fa-flip-horizontal"></i></span>
</span>
<span class="fa-stack fa-lg">
  <span class="iespan"><i class="fa fa-internet-explorer fa-stack-1x"></i></span>
  <span class="banspan"><i class="fa fa-times fa-stack-2x text-danger"></i></span>
</span>
<span class="fa-stack fa-lg">
  <i class="fa fa-chrome fa-stack-1x"></i>
  <span class="okspan"><i class="fa fa-check fa-stack-2x "></i></span>
</span>  
</div>
<h3 class="stitle">
  checkbox css test
</h3>
<div>
  <div class="roundchk-green">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1"></label>測試1
  </div> 
  <div class="roundchk-blue">
    <input type="checkbox" id="checkbox2" />
    <label for="checkbox2"></label>test2    
  </div>
</div>

<h3 class="stitle">fieldset test</h3>
<fieldset>
    <legend>
    	<span class="stitle">
        	保守型
        </span>
    </legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
<br/>
<!--<h2>Icon Buttons</h2>
<p>Icon buttons:</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>

<p>Icon buttons with text:</p>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i>...

CSS

/*h3 style*/
h3.stitle{
  background-color:#3333ff;
  color:#d1d1e0;
  text-align:center;
}
/*icon ban style*/
span.iespan{
  color:#218DD8;
}
span.banspan{
  color:#C20D12;
  opacity:0.8;
  filter:alpha(opacity=80);/*for ie 8*/
}
span.okspan{
  color:#27BB4B;
  opacity:0.7;
  filter:alpha(opacity=70);/*for ie 8*/
}
/*legend title*/
span.stitle{
    	color:#0066cc;
        font-weight: bold;
        background-color: #ffffb3;
    }
/*paging*/    
body {
    padding-top: 10px;
    padding-bottom: 30px;
    font-family: 微軟正黑體, Verdana, Arial;
}
.btn {
  /*background-color: DodgerBlue;#9AD8ED;#8ADAF2ㄤ*/  
  border: none;
  color: white;
  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 3px;
  font-family: 微軟正黑體, Verdana, Arial;
}
.btn-grey{
  background-color: #B2BBBE;
}

.btn-lightgrey {
    background-color: #CCD2D6;
    color: #7E7F80;
}
/*different color*/
.btn-orange {
    background-color: #EDAE4D;
}

.btn-red {
    background-color: #F1322C;
}

.btn-lightblue {
    background-color: #A9DEF7;
    color: #7E7F80;
}

.btn-blue {
    background-color: #2F7EC9;
}

.btn-lightgreen {
    background-color: #8AD8C1;
    color: #7E7F80;
}

.btn-lightyellow {
    background-color: #F9E79F;
    color: #7E7F80;
}

.btn-lightpurple {
    background-color: #BB8FCE;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: #919292;/*RoyalBlue;#5BC3ED*/
}

/*div.table {
  display: flex;
  justify-content: center;
  width:800px;
}*/

table.jsontable {
  border-collapse: collapse;
  align-self: center;
  width: 100%;  
}

table.jsontable, .jsontable th, .jsontable td {
  text-align: center;
  padding: 8px;
  border: 1px solid #ddd;
  /*border-bottom: 1px solid #ddd;*/
}

table.jsontable th {
  background-color: #7095F6;
  color: white;
}

table.jsontable tr:nth-child(even) {background-color: #f2f2f2;}

/*datagrid(div)*/
div.divtable{
  border-collapse: collapse;
  display:table;
  width: 100%;  
  border: 0.5px solid #ddd;
}
  ...

JavaScript

/*
ref: https://vuejsexamples.com/a-simple-pagination-bar-including-length-menu/
*/

/* css:
(table)ref1: https://codemyui.com/pure-css-responsive-table/   (rwd table css)
(checkbox) ref2: https://codepen.io/AllThingsSmitty/pen/WjZVjo   (checkbox css)(slack:it-share)
*/

/* div table by css:
用CSS+DIV畫表格(table)進行網頁排版
https://sofree.cc/css-table/

[CSS] 用div取代table
https://nknuahuang.wordpress.com/2016/06/17/css-%E7%94%A8div%E5%8F%96%E4%BB%A3table/

CSS Display的inline-table屬性(讓DIV也能夠像Table一樣)
https://engmeter.blogspot.com/2014/09/css-displayinline-tabledivtable.html

*/