css樣式查找,css查詢
為什么在css樣式里寫的媒體查詢樣式?jīng)]作用？
原因
我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、豐澤ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的豐澤網(wǎng)站制作公司
書寫錯誤，查看是否寫正確。
分辨率不適用，需要調(diào)整到指定分辨率。
CSS （層疊樣式表）?
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化。
CSS 能夠?qū)W(wǎng)頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
語言標(biāo)準(zhǔn)
在CSS 2.1規(guī)范中，識別符（包括選擇符中的元素名、類、ID）只能包含A～Z、a～z、0～9等字符，加上連字符“-”、下劃線“_”。識別符不能以數(shù)字開頭，以連字符和下劃線開頭也是不允許的。只有屬性、屬性值、單位、偽類、偽元素和“@”規(guī)則可以由連字符“-”開頭。同時，其他元素名稱、類和ID標(biāo)識符也不允許用連字符開頭。
CSS的識別符也需要用反斜杠“\”規(guī)避特殊字符，這些規(guī)避字符遵循IS010646規(guī)范。特殊字符的規(guī)避方法有兩種：第一種方法是遇到特殊字符則在這些字符前直接添加反斜杠，例如，“ATT”變?yōu)椤癆T\T”；另一種方法為用反斜杠和Unicode或IS010646等值的十六進制數(shù)值一起，規(guī)避特殊字符，例如，“ATT”變?yōu)椤癆T\26T”。
CSS搜索框樣式
這個搜索框做的很好，看似簡單，里面包含了大量CSS基礎(chǔ)知識。由于時間關(guān)系，這里寫了一個相似度為95%的樣式供參考和學(xué)習(xí)，由于無法確認(rèn)字體，先挑選了比較接近的Gautami
先上HTML
body
div?id="A"
input?id="inputTxt"?type="text"?placeholder="Search"?/
div?id="inputBtn"Go/div
/div
/body
這里開始寫CSS
body?{?padding:?0;?margin:?0;?background:?#D6D6D6;?}
/*固定容器*/
#A?{?width:?316px;?height:?28px;?margin:?22%?auto;?border:?1px?solid?#A3A3A3;?border-top-color:?#939393;?border-bottom-color:?#D5D5D5;?border-radius:?3px;?box-shadow:?0px?1px?1px?#f4f4f4;?position:?relative;?}
#A??*?{?position:?absolute;?top:?0;?}
/*輸入框*/
#inputTxt?{?left:?0;?width:?246px;?height:?24px;?background:?#E6E6E6;?border:?0;?border-top:?1px?solid?#C8C8C8;?border-bottom:?1px?solid?#E6E6E6;?outline:?none;?padding-left:?30px;?color:?#666;?}
#inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder?{?color:?#B8B8B8;?font:?600?13px?'Gautami';?}
/*按鈕*/
#inputBtn?{?right:?0;?width:?38px;?height:?26px;?line-height:?26px;?background:?linear-gradient(#E4E4E4,?#B5B5B5);?border:?1px?solid?transparent;?border-top-color:?#FCFCFC;?border-left-color:?#ADADAD;?border-bottom-color:?#B5B5B5;?color:?#6E6E6E;?text-align:?center;?font-size:?smaller;?font-weight:?bold;?cursor:?pointer;?}
/*文字陰影*/
#inputTxt,?#inputBtn,?#inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder?{?text-shadow:?1px?1px?0px?#fff;?}
/*圖標(biāo)*/
#A:before,?#A:after?{?content:?"";?position:?absolute;?z-index:?2;?box-shadow:?0px?1px?0px?#fff;?}
#A:before?{?left:?9px;?top:?9px;?width:?6px;?height:?6px;?border:?2px?solid?#ccc;?border-radius:?50%;?}
#A:after?{?left:?17px;?top:?18px;?width:?6px;?height:?2px;?background:?#ccc;?transform:?rotate(45deg);?-webkit-transform:?rotate(45deg);?-o-transform:?rotate(45deg);?}
最后，上效果圖：上為原始搜索框，下為本次代碼實現(xiàn)的搜索框
搜索框css樣式
!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"
html?xmlns="
head
meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/
title無標(biāo)題文檔/title
script?type="text/javascript"?src="jquery.js"/script
style
.{?padding:0;?margin:0;?list-style:none;}
.htmlBox{?width:100%;?min-width:500px;?height:500px;?border:1px?solid?#A349A4;?border-radius:5px;}
.sskBox{?width:100%;?height:35px;?margin-top:150px;?border:1px?solid?#000;?border-left:0;?border-right:0;}
.zc{?width:100px;?height:35px;?float:left;}
.zj{?width:250px;?height:35px;?float:left;?border-left:1px?solid?#000;?border-right:1px?solid?#000;}
.yc{?height:35px;?float:right;}
/style
/head
body
div?class="htmlBox"
div?class="sskBox"
div?class="zc"左邊100/div
div?class="zj"中間250/div
div?class="yc"右邊自適應(yīng)/div
/div
/div
/body
script
tmntH();//加載的時候執(zhí)行一次
$(window).resize(function()?{tmntH();});//瀏覽器窗口變化時執(zhí)行
function?tmntH()
{
var?ycw=$(".sskBox").width()-352+'px';//yc的寬度等于sskBox寬度-350-2(邊框線)
//alert(div3);
$(".yc").css("width",ycw);
}
/script
/body
/html
前端如何快速尋找到css樣式的位置
CSS樣式實現(xiàn)快速定位bug的六大技巧
1、檢查是否清除浮動
其實有不少的CSSBUG問題是因為沒有清除浮動造成的。養(yǎng)成良好的清除浮動的習(xí)慣是必要的，推薦使用無額外HTML標(biāo)簽的清除浮動的方法（盡量避免使用overflow:hidden;zoom:1的類似方法來清除浮動，會有太多的限制性）。
2、檢查IE下是否觸發(fā)haslayout
很多的IE下復(fù)雜CSS BUG都與IE特有的haslayout息息相關(guān)。熟悉和理解haslayout對于處理復(fù)雜的CSSBUG會事半功倍。推薦閱讀old9翻譯的《Onhavinglayout》（如果無法翻越穿越偉大的GFW，可閱讀藍色上的轉(zhuǎn)帖）
快捷提示：如果觸發(fā)了haslayout，IE的調(diào)試工具IEDeveloperToolbar中的屬性中將會顯示haslayout值為-1。
3、邊框背景調(diào)試法
故名思議就是給元素設(shè)置顯眼的邊框或者背景（一般黑色或紅色），進行調(diào)試。此方法是最常用的調(diào)試CSSBUG的方法之一，對于復(fù)雜BUG依舊適用。經(jīng)濟實惠還環(huán)保.
4、檢查頁面的標(biāo)簽是否閉合
不要小看這條，也許折騰了你兩天都沒有解決的CSS BUG問題，卻僅僅源于這里。畢竟頁面的模板一般都是由開發(fā)來嵌套的，而他們很容易犯此類問題。
快捷提示：可以用Dreamweaver打開文件檢查，一般沒有閉合的標(biāo)簽，會黃色背景高亮。
5、樣式排除法
有些復(fù)雜的頁面也許加載了N個外鏈CSS文件，那么逐個刪除CSS文件，找到BUG觸發(fā)的具體CSS文件，縮小鎖定的范圍。
對于剛才鎖定的問題CSS樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發(fā)樣式定義，甚至是具體的觸發(fā)樣式屬性。
6、模塊確認(rèn)法
有時候我們也可以從頁面的HTML元素出發(fā)。刪除頁面中不同的HTML模塊，尋找到觸發(fā)問題的HTML模塊。
DW中如何快速找到CSS類別
DW中快速找到CSS類別步驟：
需要將css樣式的這個窗口打開，然后你在DW的邊界上就能看到這個css的窗口，如圖：
然后這些顯示出來的css中右鍵，有個菜單選擇轉(zhuǎn)到代碼，就調(diào)到了指定的代碼區(qū)域
網(wǎng)頁名稱：css樣式查找,css查詢
標(biāo)題URL：http://m.jiaotiyi.com/article/phgsoi.html