原创 瞭解盒模型

一、盒模型概述: 通過對日常生活中的盒子和網頁中單個模塊內部結構的分析,我們發現它們的結構是非常類似的,由外到內分別是:外邊距、邊框、內邊距、內容。是用來佈局網頁的重要容器。網頁佈局中的盒模型運用是非常廣泛的,所有頁面中的元素都可以看成是

原创 css float

浮動是瀏覽器解析網頁的一個重要概念。對於一個XHTML網頁,body元素下的任意元素,根據其先後順序,組成了一個上下關係,這便是文檔流。瀏覽器根據這些元素的順序去顯示它們在網頁中的位置。文檔流是瀏覽器的默認顯示規則。 float :non

原创 網頁常見佈局,讓圖片在div中,垂直居中,水平居中

網頁常見佈局,圖片在div中垂直居中,水平居中  div{text-align:center;border:1px solid #000;width:500px;height:500px;vertical-align:middle;dis

原创 css 優化

隨着項目規模的增加,項目中的CSS代碼也會越來越多,如果沒有及時對CSS代碼進行維護,CSS代碼不斷會越來越多。我們寫CSS代碼時,不僅僅只是完成頁面設計的效果,還應該讓CSS代碼易於管理,維護。 我們對CSS代碼優化主要有兩個目的: 1

原创 網頁常見功能,超出寬度,省略號代替

現在網頁常見的功能,超出寬度,省略號代替: <style> div{width:200px;height:200px;border:1px solid #000;} p{white-space:nowrap;overflow:hidden

原创 網頁佈局,左右固定,中間自適應

網頁常見佈局,左右固定,中間寬度隨屏幕尺寸自適應: <style type="text/css">      .zuo{width: 100px;height: 100px;float: left;background-color: re

原创 jquery驗證碼驗證效果

<head>     <style type="text/css">         .mob{margin-top:10px;}         .mob label{display:inline-block;width:70px;te

原创 對html標籤語義化的理解

根據網頁內容命名,不要看他像什麼而命名,選擇合適的標籤(代碼語義化)便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。爲什麼進行標籤語義化? 爲了在沒有CSS的情況下,頁面也能呈現出很好地內容結構、代碼結構 用戶體驗

原创 css hack

一、什麼是CSS hack? CSS hack是通過在CSS樣式中加入一些特殊的符號,讓不同的瀏覽器識別不同的符號(什麼樣的瀏覽器識別什麼樣的符號是有標準的,CSS hack就是讓你記住這個標準),以達到應用不同的CSS樣式的目的。 二、

原创 瞭解css

一、Css概念 CSS(cascading style sheets)譯爲層疊樣式表,是用於控制網頁樣式並允許將樣式內容與網頁內容分離的一種標記性語言。實現表現與結構相分離。 ① css是用於佈局和美化網頁的。 ② 是一種標記性語言,

原创 css網站製作流程

一、創建網站目錄: 第二步、整理素材,切片等:第三步、分析網頁結構,構建整體框架,並添加註釋: <!--foot start--> <div class="foot">你好</div> <!--foot end-->第四步、創建CSS文

原创 網頁佈局,右邊距margin爲0

網頁佈局,右邊距margin爲0 <style> body,ul{padding:0;margin:0;}li{float:left;width:100px;height:100px;margin-right:50px;list-styl

原创 網頁常見效果,jquery彈出層

網頁當中常見的效果,點擊按鈕,圖片等出現彈出層 <style> .pop-body{display:none;background:#000;position:absolute;z-index:1000;top:0;left:0;opac

原创 怎樣用css創建三角形?

用css創建三角形其實很簡單: <style>.one{width: 0;height: 0;border:5px solid transparent;border-bottom:10px solid red; } </style><di

原创 標籤命名

以下爲DIV+CSS的命名規則總結,相信通過規範的CSS命名給你以後網站網頁的維護帶來方便。 一、命名規則說明:(1)所有的命名最好都小寫(2)屬性的值一定要用雙引號("")括起來,且一定要有值如class="divcss5",id="d