幾個簡單的html+css+js題目－互聯網

文章出處

1.頁面中有一圖片，請在下劃線處添加代碼能夠實現隱藏該圖片的功能

<img id="pic" src="door.jpg" width="200" height="300" ___________ >

【解】為圖片添加display屬性為hidden即可。

2.編寫樣式表，要求圖片在文字右方，標題字號16px 粗體居中，內容字號10px，圖片寬度為300px。

【解】圖片在文字右方可以通過右浮動和設置margin屬性實現。

【效果】

【代碼】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index1</title>
 6 </head>
 7 <style>
 8     *{background-color: #dedede;}
 9     #title{
10         font-size:20px;
11         font-weight: bold;
12         text-align: center; 
13         margin-top:50px;
14         margin-bottom:30px; 
15     }
16     #content{
17         font-size: 15px;
18     }
19     img{
20         width: 300px;
21         float: right;
22         margin-left: 10px;
23         margin-right: 10px;
24 /*        使用絕對定位會出現z-index效果（即重疊）mini
25         position: absolute;
26         top:100px;
27         right: 50px;*/
28     }
29     p{text-indent: 2em;}
30 </style>
31 <body>
32     <div id="title">浪漫城市巴黎</div>
33     <div id="content">
34     <img src="bg1.jpg" alt="oilpainting"> 
35     <p>浪漫城市巴黎的街景總是出現在無數攝影師的鏡頭里，或畫家的畫紙上。富有設計感的建筑，閑適的人群，每一個角落都能夠成為美好的風景。
36     藝術家Poul就將這美景收入畫筆中，用油墨色彩詮釋了他眼中的小小巴黎。受其藝術家母親的教導和影響，Paul注重細節，欣賞藝術，也成為一名出色的藝術家，油畫是他的愛好和特長。光線，自然，動感都成為他的創作靈感。文中的每一幅作品都是他經過的建筑和商店，大部分關閉著，剩下各色的門和空空的座椅，巴黎在他的筆下呈現出安靜慢調的模樣，仿佛一個噴嚏就能夠吵醒這座昏昏欲睡的城市。</p>
37     </div>
38 </body>
39 </html>

3.有兩張圖片，請編寫css樣式實現下圖顯示效果：

【效果】

【代碼】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index2</title>
</head>
<style>
.wrap{
    margin-top: 200px;
}
#pic1{
    display:block;
    width: 200px;
    height: 200px;
}
#pic2{
    display:block;
    width: 200px;
    height: 200px;
    margin-top:-300px;
    margin-left: 200px;
}
</style>
<body>
<center>
    <div class="wrap">
        <img id="pic1" src="bg1.jpg" alt="">
        <img id="pic2" src="bg2.jpg" alt="">
    </div>
</center>
</body>
</html>

4.頁面上有一個下拉框，用javascript實現選中其中一個選項時，打開一個新窗口，并且打開頁面的底色邊城選中的顏色。

<select id="s1">
     <option value="1">red</option>
     <option value="2">blue</option>
     <option value="3">yellow</option>
</select>

5.網頁上面有以下控件

<form name="testform">
     城市名稱：
     <input type="text" id="cityid" value="請輸入">
</form>
<div id="content"></div>

請用javascript實現在輸入框中輸入城市名稱后按回車鍵，在div中顯示"xxx歡迎您!"

如輸入北京，顯示"北京歡迎您"，如果沒有輸入就回車，打開警告框提示"請輸入城市名稱"。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index5</title>
 6 </head>
 7 <style>
 8 form{
 9     width: 400px;
10     height: 100px;
11     margin-top:200px; 
12     line-height: 100px;
13     background-color: #dedede;}
14 input{text-align: center;}
15 </style>
16 
17 <body>
18 <center>
19     <form action="">
20         城市名稱：
21         <input type="text" id="cityid" placeholder="請輸入" onkeypress="change()">  
22     </form>
23     <div id="content">你好~</div>
24 </center>
25 </body>
26 
27 <script>
28     function change() {
29         var input = document.getElementById('cityid');
30         var content = document.getElementById('content');
31         var text = document.getElementById('cityid').value;
32         if(text==''){
33             alert("請輸入城市名稱！");
34         }else{
35             alert(text);
36             content.textContent = text+"歡迎您!";
37         }
38     }
39 </script>
40 </html>

6.用javascript實現找到頁面中所有的名稱包括"student"的text框，將名稱合并，并打開警告框提示"學生名單有: xxx,xxx,xxx"。

<form action="">
     <input type="text" value="杰倫">
     <input type="text" value="志玲">
     <input type="text" value="霆鋒">
</form>

【效果】

【代碼】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index6</title>
 6 </head>
 7 <body>
 8     <form action="">
 9         <input type="text" value="杰倫">
10         <input type="text" value="志玲">
11         <input type="text" value="霆鋒">
12     </form>
13 </body>
14 <script>
15     var input = document.getElementsByTagName('input');
16     var el1 = input[0].value;
17     var el2 = input[1].value;
18     var el3 = input[2].value;
19     var merge = el1+', '+el2+', '+el3;
20     alert("學生名單有:"+merge);
21 </script>
22 </html>

7.頁面上有一個下拉框，并有一個數組，請將數組的數據添加到下拉框中，并選中上海。

<select id="city">
    <option value="請選擇">請選擇</option>
</select>
<script>
    var all=['北京','上海','江蘇','安徽'];

【效果】

【代碼】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index7</title>
 6 </head>
 7 <body>
 8     <select id="city">
 9         <option value="請選擇">請選擇</option>
10     </select>
11 </body>
12 <script>
13     var all=['北京','上海','江蘇','安徽'];
14     //創建下拉選項
15     var op1 = document.createElement('option');
16     var op2 = document.createElement('option');
17     var op3 = document.createElement('option');
18     var op4 = document.createElement('option');
19     //將數組值賦給各個下拉選項
20     op1.innerHTML = all[0];
21     op2.innerHTML = all[1];
22     op3.innerHTML = all[2];
23     op4.innerHTML = all[3];
24     var select = document.getElementById('city');
25     //講下拉選項加到下拉列表中
26     select.appendChild(op1);
27     select.appendChild(op2);
28     select.appendChild(op3);
29     select.appendChild(op4);
30     //選中上海
31     select.value = op2.innerHTML;
32 </script>    
33 </html>

8.頁面中有一數組，實現對該數組的降序排列，如[6,5,4,3,2,1]。

【效果】

【代碼】

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index9</title>
 6 </head>
 7 <script>
 8 function sort(){
 9     var num = new Array(4,2,5,6,3,1);
10     var i,j,temp;
11     for(i=0;i<num.length;i++){
12         for(j=i+1;j<num.length;j++){
13             if(num[i]<num[j]){
14                 temp = num[j];
15                 num[j] = num[i];
16                 num[i] = temp;
17             }
18         }
19     }
20     var sort = document.getElementById('sort');
21     sort.innerHTML = '['+num+']';
22 }
23 
24 </script>
25 <body>
26     <br>
27     <br>    
28 <center>
29     <div id="sort">[4,2,5,6,3,1]</div>
30     <br>
31     <input type="button" value="點我排序" onclick="sort()">
32 </center>
33 </body>
34 
35 </html>