在div css中,不同的寬度使用不同的樣式,如何實現

時間 2021-10-20 06:08:48

1樓:卷陽炎

你說的是相應式佈局嗎 要是那樣的話 用css的**查詢即可 沒必要真js jq之類的複雜查詢

/* large desktop */

@media (min-width: 1200px)

/* portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 979px)

/* landscape phone to portrait tablet */

@media (max-width: 767px)

/* landscape phones and down */

@media (max-width: 480px)

2樓:王大爺丶悶

親,這是js實現的,首先獲取當前螢幕的解析度,得到寬度,然後再把值賦過去。

3樓:指尖

不要設具體數值,設為百分比就可以實現了

4樓:北大青鳥清河

就是寬度不要設定熟知,設定成100%

5樓:為人愛兮

先匯入jquery。然後$("*** > div").css("width","xx");

6樓:匿名使用者

什麼寬度?螢幕寬度,還是div的寬度?

div+css如何讓一個div塊不受整體的css樣式控制

7樓:

1、新建一個html檔案,命名為test.html。

2、在test.html檔案內,使用css對div進行初始化,設定其內外邊距都為0,並讓div浮動向左。

3、在test.html檔案內,建立一個div,並設定其class屬性為xx,用於下面定義其css樣式。

4、在test.html檔案內,使用css設定類名為xx的div樣式,設定其寬度、高度都為300px,背景顏色為紅色。

5、在test.html檔案內,在上面div的內部,再建立一個div,並設定其類名為ss。

6、在test.html檔案內,使用css設定類名為ss的div樣式,設定其高寬為100px,背景顏色為白色,上邊距為100px,左邊距為100px。

8樓:yty隨意

1、首先,新建一個新html檔案,寫好html基本結構。在body區域中先寫一個div盒子,用來裝導航選單裡面的所有內容。

2、接著,做下拉選單的內容,是一串連結內容,把它放在一個盒子裡面,方便後續寫樣式進行調整。

3、接著,用瀏覽器開啟,就可以看到把大概的結構給搭建好了。

4、接著,開始寫css樣式,先美化下選單導航(下拉選單暫時先不動)。

5、把要下拉的選單內容做美化,並調整選單的排版。

6、接著,把要在下拉顯示的內容做隱藏處理,如圖。

7、接著,開始製作滑鼠經過的時候,把下方的內容顯示出來。

8、最後預覽一下看看,就完成了。

9樓:匿名使用者

給一個div一個id值,然後在css裡面單獨給這個id值寫屬性值。例如:html中:

在css裡面這樣寫:#cube

10樓:匿名使用者

!important標識這個div的css

11樓:濮虎

這樣寫就可以了(假設類為classname):div.classname a補充其他:

div.classname a:linkdiv.

classname a:visiteddiv.classname a:

hoverdiv.classname a:active

12樓:匿名使用者

直接用position:absolute;定位,想在那裡就在**!

13樓:杰倫

在這個div裡面加一個類名class(如class=「abc」),在css檔案裡面寫上這個class的屬性,如:

.abc

14樓:鰟鮍魚

給這個div單獨定義一個類寫樣式

如何控制div+css適應不同的瀏覽器

15樓:go陌小潔

讓div+css相容所有瀏覽器:

1.doctype 影響 css 處理

2.ff: div 設定 margin-left, margin-right 為 auto 時已經居中, ie 不行

3.ff: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可居中

4.ff: 設定 padding 後, div 會增加 height 和 width, 但 ie 不會, 故需要用 !important 多設一個 height 和 width

5.ff: 支援 !important, ie 則忽略, 可用 !important 為 ff 特別設定樣式

6.div 的垂直居中問題: vertical-align:

middle; 將行距增加到和整個div一樣高 line-height:200px; 然後插入文字,就垂直居中了。缺點是要控制內容不要換行

7.cursor: pointer 可以同時在 ie ff 中顯示遊標手指狀, hand 僅 ie 可以

8.ff: 連結加邊框和背景色,需設定 display:

block, 同時設定 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設定高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。

9.在mozilla firefox和ie中的box模型解釋不一致導致相差2px解決方法: div注意這兩個margin的順序一定不能寫反, important這個屬性ie不能識別,但別的瀏覽器可以識別。

所以在ie下其實解釋成這樣: div重複定義的話按照最後一個來執行,所以不可以只寫margin:xxpx!

important;

11.ul標籤在mozilla中預設是有padding值的,而在ie中只有margin有值所以先定義 ul

16樓:

1.ie8下相容問題,這個最好處理,轉化成ie7相容就可以。在頭部加如下一段**,然後只要在ie7下相容了,ie8下面也就相容了

2.flaot浮動造成ie6下面雙倍邊距問題,這個最常見,也最好處理,!important解決,比如

margin-left:10px !important;/*ie7,ie8,ff下是10px*/;

margin-left:5px;/*ie6下屬性寫的是5px,但在顯示出來的是10px

3.清除塊display,這個可以解決浮動造成的塊,造成塊後,當div背景填色或填**的時候,會出現背景斷開或差一小塊。這種相容出現的不太多,我做到現在,只遇到過兩次,方法是在出現相容的div的css中寫一個display:

block,或其它屬性,中文什麼意思我不知道,我英語差,但能達到想要的效果,6 e" z+ e% |8 g# |

4.很多朋友div+css的時候,會出現,在ie的幾個瀏覽器下都好了,但是在ff出問題了,用!important又會把ie7做的不相容,很頭疼,在想,有沒有什麼方法只對ff下進行操做,我用過這個方法,感覺得是百試不爽,就是在屬性前面加符號如:

*、&,¥,#,@,—,+,加過符號的屬性只有ie的瀏覽器才識別,而ff不識別,方法如下(注意有符號的屬性和沒符號的屬性的順序)

height:100px;/*ff下顯示100的高*/

+height:120px;/*ie678下顯示120高*/

5.有時候,會在佈局的時候,發現,有一個div浮動了,接下來的一個div本來是要在下面顯示的,結果跑上面去了,這種情況一般在ff下面會出現,解決的辦法就是清除一下浮動,在設定過浮動的那個div下面加一個div,css面寫個clear:both;如下

6. 再就是居中問題,這個問題在新手身上很多,主要原因是對盒子模型不夠理解,沒熟記盒子模型,如果發現你的頁面沒有局中,我現在知道的,有這幾個原因:1.

一個是沒盒子,就是body後的一個大div把所有div裝起來的那個,你沒寫。2.就是你寫了,但是寬度沒用絕對寬度:

而是用一個相對的寬度,想局中,必須用絕對寬度。-

7.擴充套件:如果我想在設計的時候,實現ie6,ie7,ff下出現三種不同的效果,比如ie6下背景紅色,ie7下藍色ff下綠色,這裡,我自己試過,可以,用相容的方法(注意順序,可以好好理解一下)。

7 l& t- o7 k- a1 i

background:red;/*ff裡顯示的紅色*/

+background:blue !important;/*ie7下面顯示的藍色*/

+background:green;/*ie6下面顯示的綠色*/

在這裡,我想說一下,雖然相容給你帶來很多鬱悶,讓人心煩,但同時,在你做多了後,你會發現,相容有時候會滿足你很多不好達到的效果,就像最後一個,要做那種效果,不用相容的方法,那你就js去吧,js還得想想ff和ie下的不同,當然,js的相容,我也不會,我沒去研究過。以後的事,先把css+div學熟再說。

多做,做練,始終把盒子模型放在心中,才會熟練,才會運用自如,才會在做的時候,自然而然就知道**會有相容問題,直接在測試前就解決掉那些最常見的相容問題。

17樓:匿名使用者

1、在頁面開頭加w3c宣告,html**規範,關閉該關閉的標籤:

http://www.w3.org/1999/xhtml">2、css**定義完整(寬度、對齊方式),用相對定位,清除浮動,超出隱藏

3、在ie6、ff3等主流瀏覽器中反覆測試

18樓:隱技術

多除錯 **規範 就沒問題了 往往不相容現象都是**不規範造成的

19樓:匿名使用者

這些是需要反覆聯絡才能看到的!!

20樓:ai嬌露

這個寫多了就好了,就知道哪不對,網上有許多相容瀏覽器的文件,多看看@

怎麼樣在div css中設定div的框並出現橫向滾動條

調調埋名 語法 overflow visible auto hidden scroll 引數 visible 不剪下內容也不新增滾動條。假如顯式宣告此預設值,物件將被剪下為包含物件的window或frame的大小。並且clip屬性設定將失效 auto 此為body物件和textarea的預設值。在需...

div css中的tr跟td是什麼

tr和td是html裡的標記!用法是這樣的 表示一列 分頁顯示記錄 表示一個單元格,一個tr裡面可以有很多td,就是說一列裡可以有很多單元格 div css一般不用 tr td 標誌 用div來分格 但是有時在運用一些 的時候,用 tr td 還是蠻有效的 誰說tr td不屬於div css裡的?只...

為什麼我做的DIV CSS在google瀏覽器顯示完美,在IE裡亂的呢。請教如何定位問題?有什麼工具之類的不

在前加入,以電腦上最新的瀏覽器核心來渲染。一般出現這個問題都是css引起的,如果懶的話就加這個標籤,如果閒的話建議去找到問題的所在。 寒流大兵 首先對於ie瀏覽器,ie9以下的版本對w3c標準的支援並不是很完善,所以你的css寫的只是遵循w3c標準的話在ie裡就可能顯示不正常。如果你的css想要相容...