几个简单的html+css+js题目

1.页面中有一图片,请在下划线处添加代码能够实现隐藏该图片的功能

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实现选中其中一个选项时,打开一个新窗口,并且打开页面的底色边城选中的颜色。

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

 

5.网页上面有以下控件

1
2
3
4
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="请输入" οnkeypress="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"。

1
2
3
4
5
<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.页面上有一个下拉框,并有一个数组,请将数组的数据添加到下拉框中,并选中上海。

1
2
3
4
5
< 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="点我排序" οnclick="sort()">
32 </center>
33 </body>
34 
35 </html>
复制代码

 

 9.有一个闹钟Clock对象,有一个方法alarm,实现整点报时,请实现Clock。

1
2
var cc = new Clock();
cc.alarm();

 

转载于:https://www.cnblogs.com/zhangyuhang3/p/6873398.html

评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页