1、掌握CSS中結構性偽類選擇器—target的用法
1、實現以下選單效果,當點擊公眾號彈出4個子選單,當點擊小程序,彈出另外2個子選單,先前展示的子選單需要自動收縮起來,且使用純DIV CSS,必須使用結構性偽類選擇器—target
附加說明:
1、整體寬度是140px
2、一層選單字體16px,加粗顯示
1、準備素材:根目錄建立images資料夾,把相關素材圖片都存放與此,我們會發現以上的素材為幾張小logo圖片,我們準備把它當做背景圖片來使用
2、創建好index.html,寫好架構,架構如何分析呢
思路分析:
## 1.目標分成2個部分,每個部分帶一個一級選單,當點擊該選單,需要展示下面的子選單,而這裡我們就可以使用要求的知識點:結構性偽類選擇器—target
2、上下兩部分都是類似的,只是每個選單的背景圖片不同,所以第二部分很多程式碼可以復用第一個部分的,但是他們需要單獨的設置,所以需要給它們單獨設定類別名稱好,先依照分析,寫好思路,暫時不管css的實作程式碼如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>结构性伪类选择器—target实现可搜索菜单案例</title> </head> <body> <div class="container"> <div class="title title1"><a href="#wechataccount">公众号</a></div> <div class="menu" id="wechataccount"> <ul> <li class="li1"><a href="">微信公众号</a></li> <li class="li2"><a href="">公众号应用</a></li> <li class="li3"><a href="">公众号模板</a></li> <li class="li4"><a href="">微信开放平台</a></li> </ul> </div> <div class="title title2"><a href="#applet">小程序</a></div> <div class="menu" id="applet"> <ul> <li class="li5"><a href="">微信小程序</a></li> <li class="li6"><a href="">小程序应用</a></li> </ul> </div> </div> </body> </html>
3、寫樣式,建立css資料夾,裡面新建index.css,裡面的樣式怎麼寫了,以下是分析思路
想法分析:
1、整體容器的子元素
思路分析
1、為了設定容器裡的所有元素的公共樣式,我們可以將這些公共代碼寫入.container * 樣式內,例如padding,margin,不這樣設定的話,然後在每個元素內部去設置,這樣會造成程式碼冗餘,所以還是跟其他案例一樣,先把這個最基礎的寫起
所以index.css中加入程式碼如下:
.container *{ padding:0; margin:0; }2 、外層容器本身.container思路分析:1、根據要求得知寬140,有淺灰色邊框,上下左右存有一定的padding
所以index.css中加入程式碼如下:
.container{ width: 140px; border: 1px solid lightgray; padding: 10px; }
3、標題.title
1、根據要求字體大小16px,顏色淺灰,字體加粗,然後每個標題我們發現它的背景圖片是不重複的,且水平方向是靠右,垂直方向是居中,所以index.css中添加代碼如下:###.title{ font-size: 16px; color:lightgray; padding:10px; font-weight: bold; background-repeat: no-repeat; background-position-y:center; background-position-x:right; }###4、兩個標題的單獨設定#########1、2個標題的不同之處就在於背景圖片不同######所以index.css添加程式碼如下:###
.title1{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .title2{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); }###5、選單.menu###
1、一级菜单下面的子菜单首先是要隐藏起来的,只是当点击标题菜单的时候就需要展开,此刻我们可以把子菜单当做是标题菜单的目标即target,而CSS中:target其实表示所有的target,在此文档中target为id=wechataccount和id=applet的2个div,但是每次只对某一个target生效,当另外一个target被触发了,其他的target的样式就会失效,恢复成默认状态,就好像此页面中默认状态是隐藏,但是当公众号点击了,它下面的target就会应用当前的:target样式,但另外一个target触发了,此刻它的样式就又恢复成display:none了
所以index.css中添加代码如下:
.menu{ display: none; } :target{ display:block; }
6、列表公共样式 ul li
1、因为根据实现效果可以看出没有黑色圆点,然后因为每个li都有背景图片,所以一定会有间距padding,且背景图片垂直方向居中,背景图片不重复
所以index.css中添加代码如下:
ul li{ list-style: none; padding:10px 10px 10px 29px!important; background-position-y:center; background-repeat: no-repeat; }
7、每个li的单独样式
1、每个li的唯一不同就是背景图片不同
所以index.css中添加代码如下:
.li1{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .li2{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .li3{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .li4{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .li5{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .li6{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); }
8、链接设置a
1、每个链接默认是有颜色的,一般为蓝色,但是这里的连接颜色为灰色,不带默认的下划线
所以index.css中添加代码如下:
a{ color:rgb(5, 5, 5); text-decoration: none; }
到此为止,index.css的全部内容如下:
.container *{ padding:0; margin:0; } .container{ width: 140px; border: 1px solid lightgray; padding: 10px; } .title{ font-size: 16px; color:lightgray; padding:10px; font-weight: bold; background-repeat: no-repeat; background-position-y:center; background-position-x:right; } .title1{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .title2{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .menu{ display: none; } :target{ display:block; } ul li{ list-style: none; padding:10px 10px 10px 29px!important; background-position-y:center; background-repeat: no-repeat; } .li1{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .li2{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .li3{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .li4{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .li5{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } .li6{ background-image: url(../images/結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )); } a{ color:rgb(5, 5, 5); text-decoration: none; }
然后将index.css引入index.html中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>结构性伪类选择器—target实现可搜索菜单案例</title> <link href="css/index.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <div class="title title1"><a href="#wechataccount">公众号</a></div> <div class="menu" id="wechataccount"> <ul> <li class="li1"><a href="">微信公众号</a></li> <li class="li2"><a href="">公众号应用</a></li> <li class="li3"><a href="">公众号模板</a></li> <li class="li4"><a href="">微信开放平台</a></li> </ul> </div> <div class="title title2"><a href="#applet">小程序</a></div> <div class="menu" id="applet"> <ul> <li class="li5"><a href="">微信小程序</a></li> <li class="li6"><a href="">小程序应用</a></li> </ul> </div> </div> </body> </html>
运行效果如下:
点击小程序的时候运行效果如下:
到此为止,我们就实现了全部的需求
1、学习了CSS中结构性伪类选择器—target的用法
以上是結構性偽類選擇器—target實作可搜尋選單案例(程式碼實例 )的詳細內容。更多資訊請關注PHP中文網其他相關文章!