網頁製作時可以拿起就用的小技巧總結

2022-09-24 18:27:11 字數 1769 閱讀 8614

前言

總結如下:

一、box-sizing:允許以特定的方式去定義匹配某個區域的特定元素。

content-box:在規定乙個框的寬高之外給這個框加內邊距和邊框。

border-box:(textarea和select預設值)在規定的乙個框的寬高之內給這個框加內邊距和邊框。

/*看個人習慣而用,但一般標籤預設屬性是content-box,除textarea,select*/

box-sizing: content-box;

-moz-box-sizing: content-box;

-webkit-box-sizing: content-box;

二、美化input框

/*在ie10+瀏覽器中, 使用css即可隱藏input文字輸入框右側的叉號*/

input[type=text]::-ms-clear,::-ms-reveal

input::-ms-clear,::-ms-reveal

input

三、美化textarea文字域

textarea

四、改變placeholder的字型顏色大小

input::-webkit-input-placeholder

input:-moz-placeholder

input::-moz-placeholder

input:-ms-input-placeholder

五、美化select

/*清除ie的預設選擇框樣式清除,隱藏下拉箭頭*/

select::-ms-expand

select

六、美化button按鈕

button

七、美化單選框、多選框或者是上傳檔案按鈕

/*因為用input[type="radio"]和input[type="cheakbox"]都不能直接改變它們的樣式,這個時候要用到label標籤關聯,然後隱藏input標籤,直接給label標籤樣式就好了。選中label就是選中了此標籤*/

程式設計客棧ot;***">男

八、多出文字用省略號表示

white-space: nowrap; /* 強制不換行 */

overflow:hidden; / *內容超出寬度時隱藏超出部分的內容 */

text-overflow:ellipsis;/* 當物件內文字溢位時顯示省略標記(...) ,需與overflow:hidden;一起使用。*/

九、css頁面點選文字出現藍色底色去掉方法

-moz-user-select: none; /* 火狐 */

-webkit-user-select: none; /* webkit瀏覽器 */

-ms-user-select: none; /* ie10 */

-khtml-user-select: none; /* 早期瀏覽器 */

user-select: none;

十、在遇見圖示的垂直位置很難調整的時候可以用這個屬性

vertical-align: 30%;

vertical-align: middle;

十一、如何讓乙個div在頁面中上下左右居中

程式設計客棧

div十二、js

// 在js中寫的返回鍵

onclick = 'history.go(-1)';

// 強制重新整理頁面

window.location.reload(true);

十三、換行,不換行,字間距

總結本文標題: 網頁製作時可以拿起就用的小技巧總結

本文位址:

CSS網頁製作時實現自動換行的小技巧

大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 css如何將他們換行的方法!對於div 1.ie瀏覽器 white space normal word break break all 這裡前者是遵循標準。wrap 或者 wrap eg.ddd11111111111111...

CSS網頁製作時實現自動換行的小技巧

大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 css如何將他們換行的方法!對於div 1.ie瀏覽器 white space normal word break break all 這裡前者是遵循標準。wrap 或者 wrap div id wrap ddd11111...

CSS網頁製作時實現自動換行的小技巧

大家都知道連續的英文或數字能是容器被撐大,不能根據容器的大小自動換行,下面是 css如何將他們換行的方法!對於div 1.ie瀏覽器 white space normal word break break all 這裡前者是遵循標準。wrap 或者 wrap div id wrap ddd11111...