最近在看前端的css部分,嘗試寫出乙個頁面的頭部,我用ul做的選單欄,然後float向左沒有問題,因為右邊空出來,也不用,但是嘗試向右浮動,就出現問題了。
圖:
雖然可以向右,但是我寫的li都反了,html**:
class
="top-menu"
>
>
你好,請
href
="#"
>
登入a>
li>
class
="spilt"
>
|li>
>
href
="#"
>
免費註冊a
>
li>
class
="spilt"
>
|li>
>
href
="#"
>
我的訂單a
>
li>
class
="spilt"
>
|li>
>
href
="#"
>
我的京東a
>
li>
class
="spilt"
>
|li>
>
href
="#"
>
京東會員a
>
li>
class
="spilt"
>
|li>
>
href
="#"
>
企業採購a
>
li>
ul>
所以我就想,換成向左浮動:
但是我是想讓黃色部分右對齊,我就想要不加乙個div,填補下,但是右邊確實不好對齊,你要自己算寬度,對了,灰色的頂部上有乙個長度為1200px的div,我的紅色和黃色的部分都是在這個div裡面,我最後試到337.5px,不放大看著好像對齊了。
圖:
還嘗試使用了margin-right:0px;padding-right=0;沒用。要計算剩餘值挺麻煩的,畢竟li的選單內容也可能會變,你總不能再去改吧?
css**(部分):
.top-menu
.top-menu li
/*這個是用來佔空間的div類選擇器*/
.empty
html**(部分):
""class
="top"
>
""class
="w1200"
>
class
="loc"
>
安徽p>
""class
="empty"
>
測試div
>
class
="top-menu"
>
>
你好,請
href
="#"
>
登入a>
li>
class
="spilt"
>
|li>
>
href
="#"
>
免費註冊a
>
li>
class
="spilt"
>
|li>
>
href
="#"
>
我的訂單a
>
li>
class
="spilt"
>
|li>
>
href
="#"
>
我的京東a
>
li>
class
="spilt"
>
|li>
>
href
="#"
>
京東會員a
>
li>
class
="spilt"
>
|li>
>
href
="#"
>
企業採購a
>
li>
ul>
div>
div>
所以我覺得真實開發不會這麼做的,太麻煩了吧。我就在想怎麼弄,後來查了下資料,我發現我犯傻了。
解決:先將ul設為右浮動,裡面的li設定左浮動。
效果:
css**:
.top-menu
.top-menu li
注意上面的float值。
html部分刪除測試所在div即可。
我怎麼就沒有想到呢。太教條了,我得學會變通,表示太好玩了,自己有必要記錄下。
參考好,就到這,下次見。
sue2023年2月22日22:38:16
influxdb 一 關於時間的問題
一 influxdb預設的時間字段 在influxdb中缺省會有兩個欄位time,並且只能用utc形式儲存 二 influxdb中時間格式 influxdb支援三種時間格式,epoch time外,還支援rfc3339 date time string和rfc3339 like date time ...
一 關於網路傳輸中的加密和加簽的問題
開發中經常會存在不同系統之間的資料共享,那麼通過介面方式傳輸資料就是一件很方便的方式了。現在還有很多公司是用的http傳輸的資料,那麼資料是不安全的存在著資料在傳輸過程中發生洩漏的風險,所以現在資料傳輸常用的就是加密和加簽的方式來保證資料的安全。加密和加籤中用到了非對稱性加密 rsa 而非對稱性加密...
關於前端css的一些心得體會
1.css選擇符的權重規則 class的權重是10,id的權重是100 如果css選擇符權重相同,那麼樣式會遵循就近原則,那個選擇符最後低昂一,就採用那個選擇符的樣式 2.使用子代選擇器,會增加css選擇符的權重,css選擇符的權重越高,樣式越不容易被覆蓋,越容易對其他選擇符產生影響 3.是否使用雪...