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样式实现下图显示效果：

【效果】

【代码】

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index2</title>
  6. </head>
  7. <style>
  8. .wrap{
  9.     margin-top: 200px;
  10. }
  11. #pic1{
  12.     display:block;
  13.     width: 200px;
  14.     height: 200px;
  15. }
  16. #pic2{
  17.     display:block;
  18.     width: 200px;
  19.     height: 200px;
  20.     margin-top:-300px;
  21.     margin-left: 200px;
  22. }
  23. </style>
  24. <body>
  25. <center>
  26.     <div class="wrap">
  27.         <img id="pic1" src="bg1.jpg" alt="">
  28.         <img id="pic2" src="bg2.jpg" alt="">
  29.     </div>
  30. </center>
  31. </body>
  32. </html>

4.页面上有一个下拉框，用javascript实现选中其中一个选项时，打开一个新窗口，并且打开页面的底色边城选中的颜色。

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

5.网页上面有以下控件

  1. <form name="testform">
  2.      城市名称：
  3.      <input type="text" id="cityid" value="请输入">
  4. </form>
  5. <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"。

  1. <form action="">
  2.      <input type="text" value="杰伦">
  3.      <input type="text" value="志玲">
  4.      <input type="text" value="霆锋">
  5. </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. <select id="city">
  2.     <option value="请选择">请选择</option>
  3. </select>
  4. <script>
  5.     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>

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

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

几个简单的html+css+js题目的更多相关文章

  1. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  2. PNotify – 简单易用的 JS 通知，消息提示插件

    PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...

  3. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  4. 【开源】前端练手笔记，Chrome扩展应用程序(html+CSS+JS) （1）

    项目名称:github-notification 项目地址:https://github.com/WQTeam/github-notification 说明:本人打算抽时间学习前端(html + cs ...

  5. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. css+js整站变灰（兼容IE7+）

    原文:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那 ...

  7. NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  8. C# 封装miniblink 使用HTML/CSS/JS来构建.Net 应用程序界面和简易浏览器

    MiniBlink的作者是 龙泉寺扫地僧 miniblink是什么?   (抄了一下 龙泉寺扫地僧 写的简洁) Miniblink是一个全新的.追求极致小巧的浏览器内核项目,其基于chromium最新 ...

  9. Sublime Text 插件之HTML-CSS-JS Prettify—格式化HTML CSS JS与显示函数列表

    插件名称:HTML-CSS-JS Prettify 安装步骤: 1.ctrl + shift + p 打开控制台2.输入install package,选择install package(如果已经安装 ...

随机推荐

  1. Rain on your Parade

    Rain on your Parade Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 655350/165535 K (Java/Ot ...

  2. Java多线程初学者指南系列教程

    转自:http://developer.51cto.com/art/200911/162925.htm 51cto 本系列来自NokiaGuy的“真的有外星人吗”博客,系列名称为<Java多线程 ...

  3. 更新Android SDK之后Eclipse提示ADT版本过低的一个简易解决办法

    首先说明一下发表这一篇博文的“历史原因”吧,因为在更新SDK之后,进入Eclipse设置Android SDK目录的时候,会突然说我的版本低什么的,尝试自己解决但失败之后,我在搜索引擎上找了很多中文的 ...

  4. 你能不用计算机来计算S=a+(a+1)+(a+2) + ...... + b的解的数目吗？

    S=a + (a + 1) + (a + 2) + ...... + b(其中a, b > 0) 现在我们要求,给定一个正整数S,求有多少种不同的<a,b>,使得上述的等式成立. 这 ...

  5. Qt5.4 VS2010 Additional Dependancies

    Go to Linker -> General -> Additional LIbrary Directories: qtmaind.libQt5Cored.libQt5Guid.libQ ...

  6. Css - 基础的css阴影效果

    基本的css3阴影效果 width:971px; height:608px; border:1px solid #ccc; background-color:#fff; filter:progid:D ...

  7. PHP对于Session漏洞的防范

    目前,基于PHP的网站开发已经成为目前网站开发的主流,本文笔者重点从PHP网站攻击与安全防范方面进行探究,旨在减少网站漏洞,希望对大家有所帮助! 一.常见PHP网站安全漏洞 对于PHP的漏洞,目前常见 ...

  8. while,do while和for循环语句的用法

    一.while的用法 //循环 int i = 10; while(i > 0){ if(i==8) {i--; continue;//跳过 } System.out.println(--i); ...

  9. Linux下LDAPSearch的例子

    apt-get install ldap-utils LdapSearch examples The following examples are taking from various ldapse ...

  10. SDUT 2610 Boring Counting（离散化+主席树区间内的区间求和）

    Boring Counting Time Limit: 3000MS Memory Limit: 65536KB Submit Statistic Discuss Problem Descriptio ...