选择卡

1.1 选择卡checkbox

<!DOCTYPE html>

<html>

</head>

<body>

</body>

function selectall()

{

var sports = document.getElementsByName("sport");

for (i=0;i<sports.length ;i++ )

{

var sportname =sports[i];

sportname.checked= true;

}

function selectnone()

{

var sports = document.getElementsByName("sport");

for (i=0;i<sports.length ;i++ )

{

var sportname =sports[i];

sportname.checked= false;

}

function selectback()

{

var sports = document.getElementsByName("sport");

for (a=0;a<sports.length ;a++ )

{

var sportname1 =sports[a];

if(sportname1.checked==false)

{

sportname1.checked= true;

}else{

sportname1.checked=false

}

</script>

</html>

1.2 选择卡tab(js)

<!DOCTYPE html>

<head>

<style>

#tabBox input {

background: #F6F3F3;

border: 1px solid #FF0000;

}

#tabBox .active {

background: #E9D4D4;

}

#tabBox div {

width:300px;

height:250px;

display:none;

padding: 10px;

background: #E9D4D4;

border: 1px solid #FF0000;

}

</style>

window.onload=function(){

var tabBox = document.getElementById('tabBox');

var tabBtn = tabBox.getElementsByTagName('input');

var tabDiv = tabBox.getElementsByTagName('div');

for(var i=0;i<tabBtn.length;i++){

tabBtn[i].index = i;

tabBtn[i].onclick = function (){

for(var j=0;j<tabBtn.length;j++){

tabBtn[j].className='';

tabDiv[j].style.display='none';

}

this.className='active';

tabDiv[this.index].style.display='block';

};

}

};

</script>

</head>

<body>

<div style="display:block;">这是主页内容</div>

<div>这是说说内容</div>

<div>这是日志内容</div>

</div>

</body>

</html>

1.3 选择卡-tree-垂直多级菜单

<!DOCTYPE html>

<head>

<title>垂直式多级菜单</title>

<style>

#menu ul{

list-style:none;

font-size:25px;

position:relative;

}

#menu li{

height:40px;

}

#menu a{

text-decoration: none;

background-color: blue;

padding:5px 20px;

color:red;

border:2px solid pink;

}

#menu ul ul{

visibility:hidden;

position:relative;

top:-25px;

left:78px;

}

#menu ul ul ul ul{

position:relative;

top:-25px;

left:110px;

}

#menu :hover>a{

text-decoration: underline;

background-color: green;

}

#menu ul li:hover ul{

visibility: visible;

}

#menu ul li:hover ul ul{

visibility: hidden;

}

#menu ul ul li:hover ul ul{

visibility: hidden;

}

#menu ul ul li:hover ul{

visibility: visible;

}

#menu ul ul ul li:hover ul {

visibility: visible;

}

</style>

</head>

<body>

<ul>

<ul>

<ul>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>

1.4 选择卡-tree-单列页面

<!DOCTYPE html>

<head>

<style>

padding: 0;

margin:0;

}

html,body{

padding:0;

margin:0;

height:100%;

}

#banner{

width:100%;

height:180px;

background: pink;

}

h1{

margin-left:10%;

padding-top:20px;

font-size: 50px;

color:orange;

}

sub{

font-size: 28px;

color:black;

}

nav{

margin-left:0px;

padding-top:48px;

}

text-decoration: none;

background-color:darkseagreen;

padding:10px 20px 10px 20px;

float:left;

border-right:2px solid white;

}

a:visited,a:link{

color:black;

}

a:active,a:hover{

color:green;

text-decoration: underline;

}

#maincontent{

top:200px;

width:80%;

height:800px;

margin: 0 auto;

}

#maintext{ /*定义底部文字部分样式*/

width:65%;

float: left; /*文字部分向左浮动*/

margin-top: 20px; /*距离底部边缘10px*/

margin-right: 20px;

}

#round{ /*定义底部图片部分样式*/

width:30%;

height: 600px;

float:right; /*图片部分向右浮动*/

background-color:black;

border: solid 2px darkslateblue;

border-radius: 2em; /*定义圆角边框*/

margin-top: 20px; /*距离底部边缘10px*/

}

#round p{

color: snow;

padding: 20px 10px;

}

#round img{

padding: 20px 10px;

width:90%;

height:25%;

}

line-height: 2em; /*文字行高*/

text-indent: 2em; /*首行缩进*/

padding-top: 10px;

}

span{

line-height: 100%;

font-size: 50px;

background-color: powderblue;

}

</style>

</head>

<body>

<nav>

<a href="#">作品手法欣赏</a>

<a href="#">上一篇文章</a>

<a href="#">下一篇文章</a>

</nav>

</div>

<p>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿⑴，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。<br></p>

<p> 沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁⑵的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。<br></p>

<p> 路上只我一个人，背着手踱⑶着。这一片天地好像是我的；我也像超出了平常的自己，到了另一个世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。<br></p>

<p><span>曲</span>曲折折的荷塘上面，弥望⑷的是田田⑸的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜⑹地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉⑺的流水，遮住了，不能见一些颜色；而叶子却更见风致⑻了。<br></p>

<p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲⑼上奏着的名曲。<br></p>

</div>

<p>朱自清（1898年11月22日—1948年8月12日），原名自华，号秋实，后改名自清，字佩弦。原籍浙江绍兴，出生于江苏省东海县（今连云港市东海县平明镇）。现代杰出的散文家、诗人、学者、民主战士。</p>

</div>

</body>

</html>

1.5 选择卡-tree-平行式二级菜单

<!DOCTYPE html>

<head>

<title>平行二级菜单</title>

<style>

#menu ul{

list-style: none;

}

#menu li{

float:left;

position:relative;

}

#menu ul ul{

visibility: hidden;

position:absolute;

left:-40px;

top:25px;

}

#menu a{

text-decoration: none;

background-color: pink;

color:black;

border:2px solid white;

padding:8px 25px;

margin:3px 1px;

}

#menu ul li:hover ul{

visibility: visible;

}

#menu ul ul li{

clear:both;

}

#menu ul ul li a{

display:block;

width:70px;

height:20px;

margin:0;

}

#menu ul a:hover{

background-color: red;

text-decoration: underline;

}

</style>

</head>

<body>

<ul>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

posted @ 2019-06-10 23:02 小丸子姐姐阅读(237) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

小丸子姐姐没有头发

选择卡

公告