欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純CSS實現(xiàn)圓角折疊菜單的方法

  發(fā)布時間：2015-05-19 18:00:16   作者：佚名   我要評論
這篇文章主要為大家介紹了純CSS實現(xiàn)圓角折疊菜單的方法,通過多個寬度漸進變化的頁面元素堆加模擬圓角效果,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了純CSS實現(xiàn)圓角折疊菜單的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

復制代碼
代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS圓角折疊菜單</title>
<style type="text/css">
#menu {
font-size:12px;
height:380px;
margin:0;
padding:0;
width:180px;
overflow:hidden;
background:#f0f0f0;
list-style:none;
border-left:1px solid #DDD;
border-right:1px solid #DDD;
}
#menu li a {
display:block;
text-decoration:none;
color:#00b;
margin:0;
width:100%;
}
#menu li a span {
display:none;
color:#000;
height:120px
}
#menu li a.one span {
display:block;
margin:0 10px;
}
#menu li a:hover {
background:#f1f1f1;
}
#menu li a:hover span {
display:block;
margin:0 10px;
cursor:pointer;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#808;
font-variant:small-caps;
border:0;
}
#menu .h3 {
margin:0 5px;
padding:0;
color:#00b;
}
.curved {
width:180px;
margin:0 auto;
}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {
font-size:1px;
display:block;
background:#88c;
overflow: hidden;
}
.curved .b1, .curved .b2, .curved .b3 {
height:1px;
}
.curved .b2, .curved .b3, .curved .b4 {
background:#f0f0f0;
border-left:1px solid #DDD;
border-right:1px solid #DDD;
}
.curved .b1 {
margin:0 4px;
background:#DDD;
}
.curved .b2 {
margin:0 2px;
border-width:0 2px;
}
.curved .b3 {
margin:0 1px;
}
.curved .b4 {
height:2px;
margin:0px;
}
</style>
</head>
<body>
<div class="curved">
<b class="b1 c1">
</b>
<b class="b2 c2">
</b>
<b class="b3 c3">
</b>
<b class="b4 c4" ></b>
<ul id="menu">
<li>
<a href="/">
<b class="h2">ASP.net</b>
<span>內(nèi)容1</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="h2">sql</b>
<span>內(nèi)容2</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="h2">access</b>
<span>內(nèi)容3</span>
</a>
</li>
</ul><b class="b4"></b><b class="b3"></b>
<b class="b2"></b><b class="b1"></b></div>
</body>
</html>

希望本文所述對大家的div+css網(wǎng)頁設計有所幫助。

相關(guān)文章

  • 如何只使用CSS創(chuàng)建折疊標題效果的示例代碼

    這篇文章主要介紹了如何只使用CSS創(chuàng)建折疊標題效果的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編
    2019-07-15

  • 詳解CSS外邊距折疊引發(fā)的問題

    這篇文章主要介紹了詳解CSS外邊距折疊引發(fā)的問題的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-27

  • 詳解css外邊距折疊（margin collapsing）

    外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下
    2018-10-30

  • 純CSS實現(xiàn)可折疊樹狀菜單

    這篇文章主要介紹了純CSS實現(xiàn)可折疊樹狀菜單，不用js讓你體會到css的強大,需要的朋友可以參考下
    2018-04-17

  • CSS 實現(xiàn) 圖片鼠標懸停折疊效果

    這篇文章主要介紹了CSS 實現(xiàn) 圖片鼠標懸停折疊效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-09-21

最新評論