超出隱藏，不換行，省略號
overflow:hidden;? ?//超出的文本隱藏
text-overflow:ellipsis;? ?//溢出用省略號顯示
white-space:nowrap;? ?//溢出不換行
兩行超出隱藏，不換行，省略號
? text-overflow: -o-ellipsis-lastline;
? overflow: hidden;
? text-overflow: ellipsis;
? display: -webkit-box;
? -webkit-line-clamp: 2;
? -webkit-box-orient: vertical;
清除浮動 clearfix
.clearfix:after {
? ? content: "";
? ? display: block;
? ? height: 0;
? ? clear: both;
? }
.clearfix {
clear:both;
}
CSS中劃線（刪除線）樣式代碼 （價格）
text-decoration:line-through;
a超鏈接
text-decoration:?underline;??/*加下劃線*/
text-decoration:none;? ? ?/*刪除下劃線*/
a鏈接偽元素
a:link? ??/*未訪問的鏈接*/
a:visited? ?/*訪問過的鏈接*/
a:hover? ?/*鼠標經過時*/
a:active? ?/*在鼠標點擊的同時*/
css? ? ?3個4個5個字兩邊對齊
text-align-last: justify;
text-align: justify;
text-justify:distribute-all-lines;
邊框樣式border
none? ? //無邊框?
dotted? ?//邊框為點線
dashed? ?//邊框為長短線
solid? ? //邊框為實線
double? //邊框為雙線
鼠標手形狀
cursor:hand;
垂直對齊
vertical-align? ?//參數
top? //頂對齊
bottom? //底對齊
text-top? ?//相對文本頂對齊
text-bottom? //相對文本底對齊
baseline //基準線對齊
middle? //中心對齊
sub? //以下標的形式顯示
super? //以上標的形式顯示
css文本縮進
text-indent? ?// 縮進距離
12px相當于一個文字距離
字體樣式
font-family :?宋體,sans-serif;? ? ? ?/*文字字體*/
font-style: itelic;? ? ? /*文字斜體*/
letter-spacing :? 1pt;? ? /*字間距離*/
列表樣式
list-style-type? ? //樣式
circle? ? // 標記是空心圓
square? ?// 標記是實心方塊
decimal? ? //標記是數字
lower-roman? ? //小寫羅馬數字
upper-roman? ?// 大寫羅馬數字
li標簽去掉圓點
list-style: none;?
input[type="date"]日期樣式
????::-webkit-datetime-edit – 控制編輯區域的
??? ::-webkit-datetime-edit-fields-wrapper – 控制年月日這個區域的
??? ::-webkit-datetime-edit-text – 這是控制年月日之間的斜線或短橫線的
??? ::-webkit-datetime-edit-month-field – 控制月份
??? ::-webkit-datetime-edit-day-field – 控制具體日子
??? ::-webkit-datetime-edit-year-field – 控制年文字, 如2017四個字母占據的那片地方
??? ::-webkit-inner-spin-button – 這是控制上下小箭頭的
??? ::-webkit-calendar-picker-indicator – 這是控制下拉小箭頭的
??? ::-webkit-clear-button –這是控制清除按鈕的
????????/* 控制編輯區域的 */
? ? ? ? ? input[type="date"]::-webkit-datetime-edit{
? ? ? ? ? ? /* content: '起始時間'; */
? ? ? ? ? ? color: rgb(188,188,188);
? ? ? ? ? ? padding-left: 10px;
? ? ? ? ? }
? ? ? ? ? /* 控制年月日這個區域的 */
? ? ? ? ? input[type="date"]::-webkit-datetime-edit-fields-wrapper {
? ? ? ? ? ? background-color: #eee;
? ? ? ? ? }
? ? ? ? ? /* 這是控制年月日之間的斜線或短橫線的 */
? ? ? ? ? input[type="date"]::-webkit-datetime-edit-text {
? ? ? ? ? ? color: blue;
? ? ? ? ? ? padding: 0 .3em;
? ? ? ? ? }
? ? ? ? ? /* 控制年字 */
? ? ? ? ? input[type="date"]::-webkit-datetime-edit-year-field {
? ? ? ? ? ? color: purple;
? ? ? ? ? }
? ? ? ? ? /* 控制月字 */
? ? ? ? ? input[type="date"]::-webkit-datetime-edit-month-field {
? ? ? ? ? ? color: red;
? ? ? ? ? }
? ? ? ? ? /* 控制日字 */
? ? ? ? ? input[type="date"]::-webkit-datetime-edit-day-field? {
? ? ? ? ? ? color: pink;
? ? ? ? ? }
? ? ? ? /*控制下拉小箭頭的*/
? ? ? ? input[type="date"]::-webkit-calendar-picker-indicator {
? ? ? ? ? display: inline-block;
? ? ? ? ? width: 15px;
? ? ? ? ? height: 15px;
? ? ? ? ? /* position: absolute;
? ? ? ? ? top: 12px;
? ? ? ? ? right: 0px; */
? ? ? ? ? border: 1px solid #ccc;
? ? ? ? ? border-radius: 2px;
? ? ? ? ? box-shadow: inset 0 1px #fff, 0 1px #eee;
? ? ? ? ? background-color: #eee;
? ? ? ? ? /* background:url('../images/icon.png') -188px -99px; */
? ? ? ? ? background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
? ? ? ? ? color: #666;
? ? ? ? }
? ? ? ? /* 去掉date中上下小三角，但是保留input類型為number的小三角。 */
? ? ? ? input[type=date]::-webkit-inner-spin-button {
? ? ? ? ? visibility: hidden;
? ? ? ? }
? ? ? ? /*----------用來移除叉叉按鈕 鼠標移上去還會顯示----------*/
? ? ? ? input[type="date"]::-webkit-clear-button{
? ? ? ? display:none;
? ? ? ? }?
? ? ?修改按鈕背景圖片
? ??????input[type="checkbox"]+label::before{
? ? ? ?content: "\a0";
? ? ? display: inline-block;
? ? ? width: 14px;
? ? ? height: 14px;
? ? ? border: 1px solid #dadada;
? ? ? box-sizing: border-box;
? ? ? ?background-color: #fff;
? ? ? ?margin-right: 7px;
? ? ? position: relative;
? ? ? ?top: 5px;
? ? ? ? }
? ? ? input[type="checkbox"]:checked+label::before{
? ? ?background: url(../images/icon_Choice@2x.png) no-repeat;
? ? border: none;
? ? ?background-clip: content-box;
? ? ?}
? ? input[type="checkbox"] {
? ? position: absolute;
? ? clip: rect(0, 0, 0, 0);
? ? }
