第一题
.scroll{width: 360px; height: 190px; overflow: hidden; margin: 0 auto; position: relative;} a{ font-size: 14px; color: #39F; height: 18px; width: 20px; border: 1px solid #39F; text-decoration: none; display: block; float: left; margin-right:5px; text-align: center; background-color: #FFF; line-height: 20px; } a:hover { font-size: 14px; font-weight: bold; color: #FFF; background-color: #39F; border: 1px solid #39F; text-decoration: none; display: block; } #num { position:absolute; width:180px; height:25px; z-index:2; top: 160px; left: 100px; }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>图片轮换</title> <link rel="stylesheet" href="css/作业一.css"> </head> <body> <div class="scroll"> <div id="num"> <a href="#" onmouseover="down(1)">1</a> <a href="#" onmouseover="down(2)">2</a> <a href="#" onmouseover="down(3)">3</a> <a href="#" onmouseover="down(4)">4</a> <a href="#" onmouseover="down(5)">5</a> </div> <img src="图片/1.gif" alt="图片" id="photo"/> </div> <script> function down(num) { var it=document.getElementById("photo"); if(num==1){ it.setAttribute("src","图片/1.gif") }else if(num==2){ it.setAttribute("src","图片/2.gif") }else if(num==3){ it.setAttribute("src","图片/3.jpg") }else if(num==4){ it.setAttribute("src","图片/4.jpg") }else { it.setAttribute("src","图片/5.gif") } } </script> </body> </html>
第二题
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>上传文件</title> <style> #main{margin:0 auto; width: 500px;} dl{clear: both; width: 100%;} dt{ float: left; width: 100px; text-align: right; } </style> </head> <body> <div id="main"> <dl> <dt>文件路径:</dt> <dd><input name="fileImages" type="file" /></dd> </dl> <dl> <dt>文件路径:</dt> <dd><input name="fileImages" type="file" /></dd> </dl> <dl> <dt>文件路径:</dt> <dd><input name="fileImages" type="file" /></dd> </dl> <dl> <dt>文件路径:</dt> <dd><input name="fileImages" type="file" /></dd> </dl> <div id="addBtn"><input id="up" type="button" value="再上传一个文件" /></div> </div> </body> </html>
第三题
*{ margin:0; padding: 0; font-family: "Arial"; font-size: 12px; line-height: 23px; } ul,li{ list-style: none; } li{ float: left; margin-right: 1px; } .div_bg{ background-image:url(../图片/bg.jpg); background-repeat:no-repeat; width:169px; height:290px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding: 50px 0 0 15px; } .div_bg div{ clear: both; padding-top: 10px; } .white{ font-size:12px; color:#FFFFFF; padding-top:2px; cursor:pointer; } .white:hover{ font-size:12px; color:#FFFFFF; padding-top:2px; cursor:pointer; } a { color: #06329b;text-decoration: none;line-height:24px; } a:hover { color: #cc0000;text-decoration: none;line-height:24px; } .bg{ background-image:url(../图片/menu1.gif); background-repeat:no-repeat; height:23px; width:47px; text-align:center; } .nobg{ background-image:url(../图片/menu2.gif); background-repeat:no-repeat; height:23px; width:47px; text-align:center; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/第三题.css"> </head> <body> <div class="div_bg"> <ul> <li id="bg1"><a class="white">小说</a></li> <li id="bg2"><a class="white">非小说</a></li> <li id="bg3" ><a class="white">少儿</a></li> </ul> <div id="book1"> <a href="#" target=_blank>1.时间旅行者的妻子</a><br> <a href="#" target=_blank>2.女心理师(下)</a><br> <a href="#" target=_blank>3.鬼吹灯之精绝古城</a><br> <a href="#" target=_blank>4.女心理师(上)</a><br> <a href="#" target=_blank>5.小时候</a><br> <a href="#" target=_blank>6.追风筝的人</a><br> <a href="#" target=_blank>7.盗墓笔记2</a><br> <a href="#" target=_blank>8.输赢</a> </div> <div id="book2"> <a href="#" target=_blank>1.人生若只如初见</a><br> <a href="#" target=_blank>2.高效能人士的七个..</a><br> <a href="#" target=_blank>3.求医不如求己</a><br> <a href="#" target=_blank>4.人体使用手册</a><br> <a href="#" target=_blank>5.孩子,把你的手给我</a><br> <a href="#" target=_blank>6.别笑!我是英文单词书</a><br> <a href="#" target=_blank>7.人体经络使用手册</a><br> <a href="#" target=_blank>8.股市稳赚</a> </div> <div id="book3"> <a href="#" target=_blank>1.斯凯瑞金色童书・..</a><br> <a href="#" target=_blank>2.哈利・波特与“混..</a><br> <a href="#" target=_blank>3.不一样的卡梅拉(..</a><br> <a href="#" target=_blank>4.它们是怎么来的</a><br> <a href="#" target=_blank>5.五・三班的坏小子..</a><br> <a href="#" target=_blank>6.男生日记</a><br> <a href="#" target=_blank>7.哈利・波特与魔法石</a><br> <a href="#" target=_blank>8.噼里啪啦丛书(全7册)</a> </div> </div> <script> document.getElementById("book2").style.display="none"; document.getElementById("book3").style.display="none"; var divArr = document.getElementsByName("book"); function over(it,i) { it.className = "bg"; for(var j = 0; j < divArr.length; j++){ if(j == i){ divArr[j].style.display = "block"; }else{ divArr[j].style.display = "none"; } } } function out(it) { it.className = "nobg"; } </script> </body> </html>