日常小知識 移動端

1：修改預設的placeholder顏色

::-webkit-input-placeholder 

:-moz-placeholder 
:-moz-placeholder 
:-ms-input-placeholder 

input[type=button],

}

-webkit-overflow-scrolling: touch;

原理：去掉預設樣式，根據:checked改變背景圖

效果圖：

<

ul class
="radiocon"
>
<
li>
<
label
>
<
input 
type
="radio"
name
="a"
>
這裡是第乙個選項
label
>
li>
<
li>
<
label
>
<
input 
type
="radio"
name
="a"
>
這裡是第二個選項
label
>
li>
ul>
input[type=radio]
input[type=radio]:checked

5：複寫radio和checkbox的樣式(二，適用於支援css：checked選擇器的瀏覽器)

原理：隱藏元素，根據checked改變label的樣式

效果圖：

>這裡是選項1

label

>

li>

<

li>

<

input

type

="radio"

name

="b"

id="radiob"

>

<

label

for="radiob"

>這裡是選項1

label

>

li>

ul>

input[type=radio]

label

input[type=radio]:checked + label

view code

6：關於手機橫屏豎屏

css3**查詢寫法

@media (orientation: landscape)  橫屏

@media (orientation: portrait) 豎屏

window.addeventlistener("onorientationchange" in window ? "orientationchange" : "resize", function

()  
if (window.orientation === 90 || window.orientation === -90)  
}, false);

1

8，css文字兩端對齊

<

p>設計師<
span
>
span
>
p>
<
p>限量銷售<
span
>
span
>
p>
<
p>限量銷售設計<
span
>
span
>
p>

pp > span

text-overflow:ellipsis;

white-space:nowrap;
overflow:hidden;

overflow: hidden;

text-overflow: ellipsis;
/*文字溢位包含元素時顯示省略符號來代表被修剪的文字
*/display: -webkit-box;
/*必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
*/-webkit-line-clamp: 3;
/*限制的行數 是乙個 不規範的屬性,它沒有出現在 css 規範草案中。
*/-webkit-box-orient: vertical;
/*規定框的子元素應該被水平或垂直排列。從上向下垂直排列子元素。
*/

//滾動條軌道

ul::-webkit-scrollbar //滾動條滑塊
ul::-webkit-scrollbar-thumb 

移動端知識小總結

1 ppi每英吋的物理畫素點 2 兩倍圖 想在螢幕中顯示一張100100的 先製作一張200 200的 再設定為100100，這樣高清屏會放大兩倍，這樣會造成模糊效果。這裡的兩倍不是尺寸放大兩倍，而是用兩倍的畫素來顯示。3 布局視口 layout viewport 為了pc端的網頁在手機上顯示 4 ...

日常小知識

關閉php警告報錯 error reporting 0 linux查詢檔案命令 find name print 獲取網頁內容 file get contents url 開啟mysql 慢查詢 log slow queries long query time 1 log long format 開啟...

CSS日常小知識

假如有乙個padding border margin 與其他的三條邊不同，其他三條邊一樣，這個時候我們設定總體樣式，再單獨去設定它的樣式。border 5px solid red css 層疊特效 border bottom 10px dashed green 有一些標籤會有預設的樣式，比如預設的m...