您的位置：首页 > Web前端 > CSS

CSS属性选择器_鼠标点击出现列表

2016-07-22 12:51 549 查看

效果图：

代码实现：

<!--demo3.html-->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>属性选择器Input鼠标点击出现列表的实现</title>
<link rel="stylesheet" type="text/css" href="css/demo3.css"/>
</head>
<body>
<ul>
<li><input type="checkbox" id="a"/><label for="a">Friends</label>
<div>
Find New Friends<br/>
Poke A Friends<br/>
Incinerate Existing Friends<br/>
</div>
</li>
<li><input type="checkbox" id="b"/><label for="b">Videos</label>
<div>
My Videos<br/>
My Downloaded Videos<br/>
My Well Dodgy Videos<br/>
</div>
</li>
<li><input type="checkbox" id="c"/><label for="c">Galleries</label>
<div>
My Deviant Art<br/>
Latest Dribble Images<br/>
Sample Flickr Stream<br/>
Sample Picasa Stream<br/>
</div>
</li>
</ul>
</body>
</html>

可以针对个人喜爱，对颜色边框进行修改；

/*demo3.css*/
body{
width:1000px;
margin: 0 auto;
font-size: 12px;
background: #3f4348;
}
ul{
margin: 0 auto;
list-style: none;
width:300px;
}
li{
line-height:35px;
background: gray;
color:#fff;
border-radius: 5px;
}
/*隐藏input固有的选择小方块*/
input{
display: none;
}
/*默认情况下div是隐藏的*/
div{
display: none;
background: #3f4348;
color:gray;
}
/*设置label大小并将其设置块级元素， 可以点击任何一个地方都能达到效果*/
label{
display: block;
width: 300px;
height: 35px;
border-top:1px solid #878e98;
border-bottom:1px solid #33373d;
text-align: center;
}
/*当选中某个label，将div显示 "+" 表示只能找到后面的一个兄弟*/
input[type=checkbox]:checked+label+div{
display: block;
padding: 0 0 0 20px;
}

下面对css3新增属性进行设置

先看联系效果图

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3</title>
<link rel="stylesheet" type="text/css" href="css/demo2.css"/>
</head>
<body>
<!--第一行与其他行不一样的颜色|效果-->
<p>啊的说法萨芬的撒发的萨芬的撒发的萨芬的撒发萨芬的撒萨芬的撒发的撒地方撒的阿斯顿发生的发生地方撒
阿斯顿发萨芬萨芬的萨芬撒地方萨芬的撒对方的身份萨芬的撒发撒旦法
阿斯顿发撒发的萨芬的撒发生的发顺丰妈妈妈妈妈妈妈妈的萨芬的撒发撒</p>

<p>东奔西走d啊的说法</p>
<p class="a">东奔西走d啊的说法</p>
<p>东奔西走d啊的说法</p>
<p>东奔西走d啊的说法</p>
<p class="ab">东奔西走d啊的说法</p>

<input type="text" value="斯蒂芬森"/>
<input type="button" value="斯蒂芬森"/>
<input type="text" value="斯蒂芬森"/>
<input type="button" value="斯蒂芬森"/>

<input type="checkbox" id="apple"/><label for="apple">苹果</label>
</body>
</html>

/*demo.css*/
body{
width:500px;
margin: 0 auto;
}
/*不管文字宽度是多少， 永远改变第一行的效果颜色*/
/*只有第一行 没有最后一行*/
p:first-line{
color:red;
/*background: pink;*/
}
p:first-letter{
color:yellow;
font-size:40px;
/*background: purple;*/
}

/*属性选择器*/

/*具有什么属性的是 ：标签属性*/
p[class]{
background: yellowgreen;
}
p[class=ab]{
background: gray;
}

input[type=text]{
background: red;
}
input[type=button]{
background:pink;
}
/*给单选按钮和复选按钮使用*/
/*隐藏checeked自带的小方块*/
input{
display: none;
}
label{
width:89px;
height:55px;
display: block;
background: url(../img/a.jpg) no-repeat;
font-size:0px;
}
input:checked+label{
background: url(../img/b.jpg) no-repeat;
}
/*input:checked{
width:100px;
height:100px;
background: #ccc;
}*/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航