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

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

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

【解】为图片添加display属性为hidden即可。

2.编写样式表，要求图片在文字右方，标题字号16px 粗体居中，内容字号10px，图片宽度为300px。

【解】图片在文字右方可以通过右浮动和设置margin属性实现。

【效果】

【代码】

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index1</title>

 </head>

 <style>

     *{background-color: #dedede;}

     #title{

         font-size:20px;

         font-weight: bold;

         text-align: center;

         margin-top:50px;

         margin-bottom:30px;

     }

     #content{

         font-size: 15px;

     }

     img{

         width: 300px;

         float: right;

         margin-left: 10px;

         margin-right: 10px;

 /*        使用绝对定位会出现z-index效果（即重叠）mini

         position: absolute;

         top:100px;

         right: 50px;*/

     }

     p{text-indent: 2em;}

 </style>

 <body>

     <div id="title">浪漫城市巴黎</div>

     <div id="content">

     <img src="bg1.jpg" alt="oilpainting">

     <p>浪漫城市巴黎的街景总是出现在无数摄影师的镜头里，或画家的画纸上。富有设计感的建筑，闲适的人群，每一个角落都能够成为美好的风景。

     艺术家Poul就将这美景收入画笔中，用油墨色彩诠释了他眼中的小小巴黎。受其艺术家母亲的教导和影响，Paul注重细节，欣赏艺术，也成为一名出色的艺术家，油画是他的爱好和特长。光线，自然，动感都成为他的创作灵感。文中的每一幅作品都是他经过的建筑和商店，大部分关闭着，剩下各色的门和空空的座椅，巴黎在他的笔下呈现出安静慢调的模样，仿佛一个喷嚏就能够吵醒这座昏昏欲睡的城市。</p>

     </div>

 </body>

 </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欢迎您!"

如输入北京，显示"北京欢迎您"，如果没有输入就回车，打开警告框提示"请输入城市名称"。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index5</title>

 </head>

 <style>

 form{

     width: 400px;

     height: 100px;

     margin-top:200px;

     line-height: 100px;

     background-color: #dedede;}

 input{text-align: center;}

 </style>

 <body>

 <center>

     <form action="">

         城市名称：

         <input type="text" id="cityid" placeholder="请输入" onkeypress="change()">

     </form>

     <div id="content">你好~</div>

 </center>

 </body>

 <script>

     function change() {

         var input = document.getElementById('cityid');

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

         var text = document.getElementById('cityid').value;

         if(text==''){

             alert("请输入城市名称！");

         }else{

             alert(text);

             content.textContent = text+"欢迎您!";

         }

     }

 </script>

 </html>

6.用javascript实现找到页面中所有的名称包括"student"的text框，将名称合并，并打开警告框提示"学生名单有: xxx,xxx,xxx"。

<form action="">

     <input type="text" value="杰伦">

     <input type="text" value="志玲">

     <input type="text" value="霆锋">

</form>

【效果】

【代码】

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index6</title>

 </head>

 <body>

     <form action="">

         <input type="text" value="杰伦">

         <input type="text" value="志玲">

         <input type="text" value="霆锋">

     </form>

 </body>

 <script>

     var input = document.getElementsByTagName('input');

     var el1 = input[0].value;

     var el2 = input[1].value;

     var el3 = input[2].value;

     var merge = el1+', '+el2+', '+el3;

     alert("学生名单有:"+merge);

 </script>

 </html>

7.页面上有一个下拉框，并有一个数组，请将数组的数据添加到下拉框中，并选中上海。

<select id="city">

    <option value="请选择">请选择</option>

</select>

<script>

    var all=['北京','上海','江苏','安徽'];

【效果】

【代码】

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index7</title>

 </head>

 <body>

     <select id="city">

         <option value="请选择">请选择</option>

     </select>

 </body>

 <script>

     var all=['北京','上海','江苏','安徽'];

     //创建下拉选项

     var op1 = document.createElement('option');

     var op2 = document.createElement('option');

     var op3 = document.createElement('option');

     var op4 = document.createElement('option');

     //将数组值赋给各个下拉选项

     op1.innerHTML = all[0];

     op2.innerHTML = all[1];

     op3.innerHTML = all[2];

     op4.innerHTML = all[3];

     var select = document.getElementById('city');

     //讲下拉选项加到下拉列表中

     select.appendChild(op1);

     select.appendChild(op2);

     select.appendChild(op3);

     select.appendChild(op4);

     //选中上海

     select.value = op2.innerHTML;

 </script>

 </html>

8.页面中有一数组，实现对该数组的降序排列，如[6,5,4,3,2,1]。

【效果】

【代码】

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index9</title>

 </head>

 <script>

 function sort(){

     var num = new Array(4,2,5,6,3,1);

     var i,j,temp;

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

         for(j=i+1;j<num.length;j++){

             if(num[i]<num[j]){

                 temp = num[j];

                 num[j] = num[i];

                 num[i] = temp;

             }

         }

     }

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

     sort.innerHTML = '['+num+']';

 }

 </script>

 <body>

     <br>

     <br>

 <center>

     <div id="sort">[4,2,5,6,3,1]</div>

     <br>

     <input type="button" value="点我排序" onclick="sort()">

 </center>

 </body>

 </html>

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

var cc = new Clock();

cc.alarm();

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

CSS & JS 制作滚动幻灯片
==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...
PNotify – 简单易用的 JS 通知，消息提示插件
PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...
css+js+html基础知识总结
css+js+html基础知识总结一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
【开源】前端练手笔记，Chrome扩展应用程序(html+CSS+JS) （1）
项目名称:github-notification 项目地址:https://github.com/WQTeam/github-notification 说明:本人打算抽时间学习前端(html + cs ...
html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
css+js整站变灰（兼容IE7+）
原文:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那 ...
NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源
NanUI文档目录 NanUI简介开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源使用网页来设计整个窗口如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...
C# 封装miniblink 使用HTML/CSS/JS来构建.Net 应用程序界面和简易浏览器
MiniBlink的作者是龙泉寺扫地僧 miniblink是什么? (抄了一下龙泉寺扫地僧写的简洁) Miniblink是一个全新的.追求极致小巧的浏览器内核项目,其基于chromium最新 ...
Sublime Text 插件之HTML-CSS-JS Prettify—格式化HTML CSS JS与显示函数列表
插件名称:HTML-CSS-JS Prettify 安装步骤: 1.ctrl + shift + p 打开控制台2.输入install package,选择install package(如果已经安装 ...

随机推荐

MFC+Android模拟器实现自动玩“天天爱消除”
朋友用QT做了个自动玩的,觉得有意思,自己也想用MFC做个试试. 模拟器用的BlueStacks.Android SDK带的那个模拟器不知道是不是设置的问题,开游戏很卡. 用MFC建了对话框工程,配置 ...
Period[HDU1358]
Period Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
Travel Problem[SZU_K28]
DescriptionAfter SzuHope take part in the 36th ACMICPC Asia Chendu Reginal Contest. Then go to QingC ...
Session赋值（备注）
Session赋值也是在后台赋,不是在前台赋追问不好意思那还真能在AJAX中赋值我已经解决了加一个接口IRequiresSessionState 就OK 提问者评价太感谢了,真心有用
shell函数
1. 定义 : func() { } 或 function func() { } 2.参数 func 1 2 3 4 可在函数中直接调$1来使用,>=10的用${n}
Idea_编译报错 javacTask: 源发行版 1.6 需要目标发行版 1.6
在idea中编译时发生如下的错误 Information:Using javac 1.7.0_75 to compile java sources Information:java: javacTas ...
android ScrollView滚动距离和判断滚动停止状态
今天很高兴,自己解决了判断ScrollView滚动停止的监听,现在分享给大家. 因为ScrollView没有像listView中的setOnScrollListener()监听,当然也就没有SCROL ...
QQ空间分享功能（二）
http://sns.z.qq.com/tools/share/demo_html.jsp 手机QQ空间分享功能接入指引: 1.请求地址: http://sns.z.qq.com/share 2.请 ...
IOS第四天(6:答题区按钮点击和乱序)
#pragma mark - 答题区按钮点击方法 - (void)answerClick:(UIButton *)button { // 1. 如果按钮没有字,直接返回 ) return; // 2. ...
找到n中最小的k个数
题目:n个数中,求最小的前k个数. 这道题在各个地方都看到过,在国内出现的频率也非常高. 面完阿里回来听说这道题又被考了,所以还是决定回来写一写,对于这种高频题...顺便再吐槽一下阿里的面试,我竟然一 ...

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

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

随机推荐

热门专题