基础编程题
表单边框的设置
<form id="form1" name="form1" method="post" action=" ">
<fieldset>
<legend>用户调查</legend>
姓名:<input name="username" type="text" size="20" maxlength="18" /><br>
网址:<input name="url" type="text" value="http://" size="40" /><br>
<input type="submit" name="button" id="button" value="提交">
</fieldset>
</form>
datalist的使用
<datalist id="datalistid">
<option >HTML5</option>
<option >CSS3</option>
<option >Javascript</option>
</datalist>
required /> placeholder="请输入搜索信息"
multiple="multiple"
autofocus="autofocus"
source src="https://alphaspaces.pek3b.qcstor.com/1/gsls.mp3" type="audio/mp3">
border-radius:160px/80px
word-wrap: break-word;//自动换行
列表属性样式设置
ul {
8
list-style-type: none;
9
list-style-image: url(https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F600a35021b184a51608dff10%2FDSZGZKH4K03Q.gif);
10
list-style-position: outside;
11
}
重复渐变
.left{ float: left; background-image: repeating-linear-gradient(45deg,yellow 10%,white 15%,green 20%); } .right{ float: right; background-image: repeating-radial-gradient(circle at center,#FFF 10%,#00F 20%,#FFF 30%); }
径向渐变
background-image:radial-gradient(circle at center,#FFF,#00F); /*设置径向渐变*/ }
线性渐变
background-image: linear-gradient(45deg,yellow 20%,white 60%,green 80%); /*设置线性渐变*/ }
背景图像的裁剪区域
background: #cbe8f9 url(https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F60092e6b1b184a51608dfe12%2FFVNPHDVCKG6F.jpg) no-repeat; /*背景图像复合属性*/
background-size:cover; /*背景图像大小*/
background-origin:border-box; /*背景背景图像的显示区域*/
background-clip:padding-box; /*背景背景图像的显示区域*/
背景图像的坐标
background: #cbe8f9 url(https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F60092e6b1b184a51608dfe12%2FFVNPHDVCKG6F.jpg) no-repeat; /*背景图像复合属性*/
background-size:cover; /*背景图像大小*/
background-origin:content-box; /*背景背景图像的显示区域*/
背景图像的大小
background-size:60%
透明效果(0.8)
img{opacity: 0.8;}
- 5、设置类名为’p2’的元素样式为:每个单词的所有字母小写;
- 6、设置类名为’p3’的元素样式为:宽度(500px)、同一行内显示所有文本、设置溢出(溢出后隐藏)、用省略标记“…”标示被修剪文本。
.p2{text-transform: lowercase;} /*设置字母转换*/
.p3{
width: 500px; /*设置文本对象的宽度*/
white-space: nowrap; /*同一行内显示所有文本*/
overflow: hidden; /*设置溢出,溢出后隐藏*/
text-overflow:ellipsis; /*用省略标记“...”标示被修剪文本*/
}
斜体、英文显示为小型的大写字母字体、粗体、字号(14px)、行高(24px)、字体(黑体)
p{font:italic small-caps bold 14px/24px 黑体;}
h2[class^="font"]{ /*属性选择器,class属性以font开头的h2元素*/
font-family: "微软雅黑";
}
[class$="title"]{ /*属性选择器,class属性以title结尾的所有元素*/
color: red;
}
a[href*="www"]{ /*属性选择器,所有href属性包含www字符串的a元素*/
color: green;
}
<link href="https://alphaspaces.pek3b.qcstor.com/1/4-3.css" type="text/css" rel="stylesheet" />
draggable="true"
<textarea spellcheck="true" cols="50" rows="4">Welcome to Jiangsu</textarea>
<progress value="60" max="100">
<cite>——唐·盂郊《游子吟》</cite> //斜的引用
mark 高亮
<ruby>瞾<rt>zhao</rt></ruby>
<dl>
11
<dt>中国画</dt>
12
13
<dd>汉族传统绘画形式是用毛笔蘸水、墨、彩作画于绢或纸上,这种画种被称为“中国画”,简称“国画”。</dd>
14
<dt>中国书法</dt>
15
<dd>中国书法是一门古老的汉字的书写艺术,从甲骨文、石鼓文、金文(钟鼎文)演变而为大篆、小篆、隶书,至定型于东汉、魏、晋的草书、楷书、行书等,书法一直散发着艺术的魅力。</dd>
16
17
18
</dl>
<img src="https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F5ffe70941b184a51608dd590%2FM9NDR1KJIEM8.png" width="270" border="1px" align="right" vspace="10px" hspace="20px" alt="百度网Logo图片" title="全球最大的中文搜索引擎、最大的中文网站" />
<hr width="90%" size="2px" align="right" color="#f00">
h1>strong //子选择器
display:block;
display:inline;
display:inline-block;
transition:all 2s linear 1s;
@font-face
{
font-family: myFirstFont;
src: url(http://www.w3cschool.css/css3/Sansation_Light.ttf)
}
div
{
font-family:myFirstFont;
}
编程题
简单的:37,44,
输1的:
css
11. 川菜
<style>
*{
margin:0px;
padding:0px;
}
body {
background-color: #D9D9D9;
}
#topnav{
width:100%;
position:fixed;
height:40px;
left:0;
top:0;
background:#F1F1F1;
z-index:100;
}
#top{
width:1000px;
height:40px;
margin:0 auto;
position:relative;
font:12px 黑体;
}
#top a:hover{
color:red;
}
#logo{
position:absolute;
top:0px;
left:0px;
}
#logo img{
width:30px;
height:30px;
}
#sbmt {
width: 50px;
height: 20px;
font: 12px 楷体;
text-align: center;
transition: all 1s;
border-radius: 3px;
cursor: pointer;
}
#sbmt:hover {
background-color: #FF8023;
}
#bread{
position:absolute;
right:8px;
top:8px;
}
#toplist{
margin-left:60px;
margin-top:8px;
}
#toplist li{
display:inline-block;
margin:5px;
}
#topnav #topform{
position:absolute;
top:5px;
left:400px;
}
#main{
width:1000px;
background:#E8A94C;
height:1850px;
margin:0 auto;
position:relative;
top:40px;
}
#banner img{
width:1000px;
height:320px;}
#nav {
background:#F2CAB3;
}
#nav li{
display:inline-block;
width:12.5%;
text-align:center;
}
#nav li a{
display:block;
padding:10px 0px 6px;
font:18px 楷体;
text-decoration: none;
color:black;
}
#nav li a:hover{
background:#E8A94C;
border-bottom:4px brown solid;
padding-bottom:2px;
}
#nav li a #current{
background:#E8A94C;
}
#footer{
margin-top:40px;
width:100%;
background:#333;
color:white;
padding:10px;
}
#footer p{
text-align:center;
}
#main h1{
border-bottom:1px black solid;
width:80%;
font:24px/1.5em 黑体;
margin:40px;
}
.lft_img{
float:left;
margin:10px 40px;
}
.lft_img img{
width:480px;
height:350px;
}
.rgt_txt{
width:400px;
height:200px;
float:left;
}
.rgt_txt p,.lft_txt p{
font:20px/1.4em 隶书;
margin-bottom:1.6em;
}
.rgt_img{
float:left;
}
.rgt_img img{
width:480px;
height:350px;
}
.lft_txt{
width:400px;
height:200px;
float:left;
margin:0px 40px;
}
.clear{
clear:both;
}
</style>
13. 学生信息登记表
<style>
body{font-size:12px; font-family:"微软雅黑";} /*全局控制*/
body,form,input,h1,p{padding:0; margin:0; border:0; } /*重置浏览器的默认样式*/
form{
width:600px;
margin:50px auto; /*使表单在浏览器中居中*/
padding:30px; /*设置绝对定位*/
border: 1px solid black;
}
h2{ /*控制标题*/
text-align:center;
margin:16px 0;
font-size: 24px;
font-weight: 700;
}
p{margin-top:20px;}
p span{
width:100px;
display:inline-block; /*将行内元素转换为行内块元素*/
text-align:right;
padding-right:10px;
}
p input{
width:200px;
height:18px;
border:1px solid #d4cdba;
padding:2px; /*设置输入框与输入内容之间拉开一些距离*/
}
.lucky input{
width:100px;
height:24px;
}
.btn input{ /*设置两个按钮的宽高、边距及边框样式*/
width:100px;
height:30px;
background:#93b518;
margin-top:20px;
margin-left:75px;
border-radius:3px; /*设置圆角边框*/
font-size:18px;
font-family:"微软雅黑";
color:#fff;
}
.xb,.dx{
width: 25px;
height: 15px;
line-height: 18px;
}
</style>
<body>
<form action="#" method="get" autocomplete="off">
<h2>学员信息登记表</h2>
<p><span>用户登录名:</span><input type="text" name="user_name" value="myemail@163.com" disabled readonly />(不能修改,只能查看)</p>
<p><span>真实姓名:</span><input type="text" name="real_name" placeholder="例如:王明" required autofocus/>(必须填写)</p>
<p><span>真实年龄:</span><input type="number" name="real_lage" value="24" min="15" max="120" required/>(必须填写)</p>
<p><span>性别:</span><label for="boy"><input type="radio" name="sex" id="boy" class="xb"/>男</label>
<label for="girl"><input type="radio" name="sex" id="girl" class="xb"/>女</label></p>
<p><span>你感兴趣的课程:</span><input type="checkbox" class="dx"/>平面设计
<input type="checkbox" class="dx" />程序设计
<input type="checkbox" class="dx" />网页设计
<input type="checkbox" class="dx" />视频编辑
</p>
<p><span>出生日期:</span><input type="date" name="birthday" value="1990-10-1" required/>(必须填写)</p>
<p><span>电子邮箱:</span><input type="email" name="myemail" placeholder="123456@126.com" required />(必须填写)</p>
<p><span>身份证号:</span><input type="text" name="card" required pattern="^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$"/>(必须填写,能够以数字、字母x结尾的短身份证号)</p>
<p><span>手机号码:</span><input type="tel" name="telphone" pattern="^\d{11}$" required/>(必须填写)</p>
<p><span>个人主页:</span><input type="url" name="myurl" list="urllist" placeholder="http://www.itcast.cn" pattern="^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"/>(请选择网址)
<datalist id="urllist">
<option>http://www.itcast.cn</option>
<option>http://www.boxuegu.com</option>
<option>http://www.w3school.com.cn</option>
</datalist>
</p>
<p class="lucky"><span>幸运颜色:</span><input type="color" name="lovecolor" value="#fed000"/>(请选择你喜欢的颜色)</p>
<p><span>留言:</span><textarea cols="60" rows="10"></textarea></p>
<p class="btn">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</p>
</form>
</body>
14.表单样式
<style type="text/css">
body{ font-size:12px; font-family:"宋体";} /*全局控制*/
body,form,input,p{ padding:0; margin:0; border:0;} /*重置浏览器的默认样式*/
form{
width:320px;
height:150px;
padding-top:20px;
margin:50px auto; /*使表单在浏览器中居中*/
background:#f5f8fd; /*为表单添加背景颜色*/
border-radius:20px; /*设置圆角边框*/
border:3px solid #4faccb;
}
p{
margin-top:15px;
text-align:center;
}
p span{
width:40px;
display:inline-block;
text-align:right;
}
.num,.pass{ /*对文本框设置共同的宽、高、边框、内边距*/
width:152px;
height:18px;
border:1px solid #38a1bf;
padding:2px 2px 2px 22px;
}
.num{ /*定义第一个文本框的背景、文本颜色*/
background:url(https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F6646c9b88972cf57041de8dc%2FB2A9QOXSHVSD.jpg) no-repeat 5px center #FFF;
color:#999;
}
.pass{ /*定义第二个文本框的背景*/
background:url(https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F6646c9b88972cf57041de8dc%2FB2R20OZ9XBA3.jpg) no-repeat 5px center #FFF;
}
.btn01,.btn02{
width:60px;
height:25px;
border-radius:3px; /*设置圆角边框*/
border:1px solid #6b5d50;
margin-left:30px;
}
.btn01{ background:#3bb7ea;} /*设置第一个按钮的背景色*/
.btn02{ background:#fb8c16;} /*设置第二个按钮的背景色*/
</style>
15.QQ登录
<style>
.login{
margin:20px auto;
width: 400px;
height: 500px;
border: 1px solid #CCCCCC;
border-radius: 10px;
text-align: center;
box-shadow: 10px 10px 10px gray;
}
p{
font-size: 30px;
font-weight: 700;
}
.inp1,.inp2{
width: 300px;
height: 40px;
margin-bottom: 30px;
outline: none;
font-size: 20px;
border: 1px solid #CCCCCC;
box-shadow: 1px 1px 10px gainsboro inset;
padding-left: 10px;
}
input[type="submit" ]{
width: 300px;
height: 50px;
border-radius: 10px;
outline:none;
background-color: #0066FF;
border: 1px solid #CCCCCC;
color: white;
font-size: 32px;
font-weight: 700;
}
input[type="submit" ]:hover{
background-color: #84DEFF;
}
#dan{
text-align: left;
margin-bottom: 30px;
width: 20px;
height: 20px;
}
</style>
16.企业新闻
<style>
body{font-size:12px; font-family:"宋体"; color:#222;}
/*重置浏览器的默认样式*/
body,h2,ul,li{ padding:0; margin:0; list-style:none;}
.all{ /*控制最外层的大盒子*/
width:300px;
height:200px;
margin:20px auto;
}
.head{
font-size:12px;
color:#fff;
height:30px;
line-height:30px;
border-bottom:5px solid #cc5200; /*单独定义下边框进行覆盖*/
background:#f60 url(https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F6645dfb089b33456864ecc6b%2FHXVYWCA0OPJO.png) no-repeat 11px 7px;
padding-left:34px;
}
.content{
padding:25px 0 0 15px;
background:#fff5ee;
}
.content li{
height:26px;
background:url(https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F6645dfb089b33456864ecc6b%2FO851JLALJ9TE.png) no-repeat left top;
padding-left:22px;
}
.content li a:link,.content li a:visited{ /*未点击和点击后的样式*/
color:#666;
text-decoration:none;
}
.content li a:hover{ /*鼠标移上时的样式*/
color:#F60;
}
</style>
17. 潮流前线
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
font-family: "arial black";
}
a {
display: inline-block;
height: 80px;
line-height: 80px;
padding: 0 30px;
text-decoration: none;
color: black;
}
.top li:hover a {
background: black;
color: white;
}
.top {
position: fixed;
height: 80px;
width: 100%;
min-width: 768px;
background: white;
z-index: 100;
opacity: 0.80;
}
.top li {
float: left;
height: 100%;
}
.top ul {
height: 100%;
padding-left: 130px;
}
.qrcode {
width: 100px;
height: 100px;
position: fixed;
right: 0;
bottom: 250px;
z-index: 999;
}
.qrcode img {
width: 100%;
height: 100%;
}
#logo {
position: relative;
width: 160px;
}
#logo img {
position: absolute;
height: 60px;
width: 160px;
top: 10px;
left: -10px;
}
.banner img {
width: 100%;
}
.content img {
width: 100%;
}
.content dl {
position: relative;
width: 250px;
float: left;
margin: 20px;
border: 1px solid #ddd;
background:#eee;
}
.sub-title {
clear: both;
background: #eee;
border-bottom: 1px solid brown;
}
.content dt,
.content dt img {
height: 375px;
}
.content dl hr {
border: 0;
border-bottom: 1px solid #ddd;
}
.hot {
position: absolute;
height: 60px;
width: 60px;
left: 0;
top: 0;
}
.star-show dd {
position: absolute;
left: 0;
bottom: 0;
display: inline-block;
width: 100%;
color: white;
background: gray;
opacity: 0.7;
}
.star-show,
.product-clothes {
width: 1200px;
margin: 0 auto;
}
.price {
text-decoration: line-through;
}
.cur-price {
color: red;
}
.product-clothes dt img {
position: absolute;
left: 0;
top: 0
}
.product-clothes dt img:hover {
opacity: 0;
}
.product-clothes dd button {
width: 100%;
background: white;
/* border-width:0; */
border: 1px solid brown;
cursor: pointer;
}
.custom {
clear: both;
background: url('https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F662b24eb9dd8ea2e4134259e%2FKRX1MKKALG3X.jpg');
margin-bottom: 200px;
position: relative;
height: 350px;
}
.custom .card {
position: absolute;
width: 500px;
top: 100px;
left: 200px;
border: 1px solid #ddd;
background: #eee;
box-shadow: 2px 6px 3px -1px #e2e2e2;
}
.custom .cumtom-content {
width: 500px;
float: right;
color: white;
margin-top: 50px;
margin-right: 50px;
}
.footer {
clear: both;
background: brown;
color: white;
height: 120px;
line-height: 60px;
}
</style>
19.陕北革命根据地
<style>
.out{text-align: center;
width: 800px;
margin: 20px auto;
}
h2{
font-size: 30px;
font-weight: 700;
text-shadow: -3px 4px black;
color: darkorange;
letter-spacing: 5px;
}
.bcx{
text-align: left;
line-height: 26px;
text-indent: 2em;
letter-spacing: 2px;
}
span{
font-size: 14px;
}
.yc{
border: 1px solid black;
padding: 10px 20px;
}
.xzx{
float: left;
width: 260px;
padding: 10px;
border: solid 1px black;
margin: 10px;
}
.xzx>img{
width: 200px;
}
hr{
height: 3px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="out">
<h2>陕北革命根据地的创建和发展</h2>
<hr />
<p class="bcx">陕北革命根据地是先后在中共陕西省委、中共河北省委、中共北方局、中共中央驻北方代表的领导下,由谢子长、马明方等带领陕北人民经过艰苦探索和奋斗而创建的一块红色区域。全盛时期的陕北革命根据地的辖区设有赤源、秀延、延川、延水、绥德、清涧、佳县、吴堡、神木等九个苏维埃县治。1935年2月,陕北革命根据地与陕甘边革命根据地统一为西北革命根据地。</p>
<img src="https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F66446e9b0c1a7d6e803b0ebe%2FI4S1CWBF9XJC.jpg" class="yc"><br />
<p><span>陕北特委的建立及前期的活动</span></p>
<p class="bcx">陕北地区党的组织1924年开始建立。到1926年,陕北许多县的中小学都有了党的组织或党员,城镇、农村和一些地方军队中也有党员。1926年春中央决定陕北划归中共北方区委管辖。6月中共绥德地委成立,辖4个特支一个工人支部和一个军队支部。不久榆林地委和延安地委成立。其时陕北地区共有党员390余人。</p>
<div class="xzx"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F66446e9b0c1a7d6e803b0ebe%2FNS91BYCPJ4GZ.jpg"><br />习仲勋</div>
<p class="bcx">到1934年2月,以南梁为中心的陕甘边红色区域扩大到保安、安塞、甘泉、富县、庆阳、合水、宁县、正宁、旬邑、淳化、耀县、铜川、宜君和黄陵等14个县的部分地区。2月25日,由中共红四十二师党委主持在南梁小河沟四合台村(今属华池县)召开群众大会,成立了新的陕甘边区革命委员会,选举习仲勋任主席,白天章、贾生秀任副主席,蔡子伟任政治秘书长。陕甘边区革命委员会的成立,标志着陕甘苏区初具规模。</p>
<p class="bcx">1935年1月25日至27日,陕北苏区第一次工农兵代表大会在赤源县白庙岔召开,出席大会代表150余人,会议讨论了加强和建立各级农民政权、发动群众分配土地、巩固和发展根据地等问题,通过了《陕北省工农兵代表大会选举法》《陕北省工农兵代表大会组织法》《陕北省工农代表大会土地法》《陕北省工农代表大会婚姻法》等法令,正式成立了陕北省苏维埃政府,马明方任主席,崔田民、霍维德任副主席。</p>
<p class="bcx">1935年初,蒋介石调集6个师加上各县民团共五六万人,对陕甘边和陕北根据地发动第二次“围剿”。为粉碎敌人的“围剿”,中共西北工委和西北军委于2月5日成立,领导由陕甘边和陕北两块根据地统一而成西北革命根据地的党组织和红军。至此,陕甘边革命根据地成为西北革命根据地的组成部分。</p>
</div>
</body>
22.推荐套餐
p {
margin: 0px;
padding: 0px;
text-align: justify;
}
article {
width: 960px;
margin: 0 auto;
padding: 0 5px;
}
#out {
width: 960px;
padding: 50px 0px;
}
#out h1 {
color: #1b2308;
font-size: 24px;
margin: 0 20px 15px 20px;
padding: 0 0 15px 0;
border-bottom: 1px dotted #1b2308;
}
#out h2 {
font-size: 14px;
color: #1f1f1f;
margin: 0;
padding: 0 0 5px 0;
}
.dishes_box {
float: left;
width: 215px;
margin-left: 20px;
}
.dishes_box img {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
border: 5px solid #e1e0e0;
}
23.课表
<style>
table {
border: 1px solid blue;
width: 600px;
border-collapse: collapse;
margin: 0 auto;
}
td {
border: 1px solid blue;
text-align: center;
height: 40px;
}
</style>
<table>
<caption>
<h1>软件21级学生作息时间表</h1>
</caption>
<tr>
<td>时间/星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
</tr>
<tr>
<td>8:00-9:50</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10:10-12:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6">中午休息12:00-14:30</td>
</tr>
<tr>
<td>14:40-16:30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>16:40-18:30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6">下午休息12:00-14:30</td>
</tr>
<tr>
<td>19:40-21:30</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
25.导航菜单
header {
width: 960px;
margin: 0 auto;
}
.top-img {
width: 100%;
height: 154px;
background-image: url(https://alphaspaces.pek3b.qcstor.com/1%2Fheader.jpg);
}
nav {
width: 960px;
height: 45px;
background-image: url(https://alphaspaces.pek3b.qcstor.com/1%2Fmenu_bg.jpg);
}
li {
list-style-type: none;
float: left;
width: 100px;
text-align: center;
line-height: 45px;
}
li>a {
color: white;
text-decoration: none;
}
li:hover {
background-color: green;
}
26.考古新发现
.xw-right {
width: 300px;
border: 1px solid black;
padding: 20px;
text-align: center;
margin: 50px auto;
}
.xw-right img {
width: 260px;
height: 300px;
}
.xw-right li {
list-style-type: none;
padding-left: 20px;
background-color: cornflowerblue;
line-height: 2em;
margin-bottom: 10px;
text-align: left;
}
.xw-right span {
display: inline-block;
width: 20px;
font-size: 18px;
}
.xw-right .re {
color: red;
}
.xw-right a {
color: white;
text-decoration: none;
}
.xw-right li:hover {
background-color: burlywood;
}
27.西双版纳美食
tr td {
border: 1px solid midnightblue;
text-align: center;
padding: 3px;
width: 283px;
}
.B-img img {
width: 720px;
}
.V-img img {
width: 275px;
}
.H-img img {
width: 330px;
}
<table>
<caption>
<h2>西双版纳美食</h2>
</caption>
<tr>
<td rowspan="3" colspan="3" class="B-img"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Ffood.jpg" /></td>
<td class="V-img"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Ffood1.png" /></td>
</tr>
<tr>
<td class="V-img"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Ffood2.png" /></td>
</tr>
<tr>
<td class="V-img"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Ffood3.png" /></td>
</tr>
<tr>
<td class="H-img"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Ffood6.png" /></td>
<td class="H-img"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Ffood7.png" /></td>
<td class="H-img" colspan="2"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Ffood8.png" /></td>
</tr>
</table>
29.图标导航
style type="text/css">
#icon{
width: 1500px;
margin: 100px auto;
}
#icon img{
width: 100px;
}
#icon>.icblock{
float: left;
width: 210px;
height: 150px;
text-align: center;
border-right: 1px solid #bcbcbc;
font-size: 15px;
}
#icon>.icblock:last-child{
border-right: none;
}
#icon a{
display: block;
margin-top: 20px;
text-decoration: none;
}
.icblock:hover{
background: #CCCC99;
}
</style>
<div id="icon">
<div class="icblock"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Fspe-web.png"><br><a>专题网站</a></div>
<div class="icblock"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Fmail-sys.png"><br><a>邮件系统</a></div>
<div class="icblock"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Fvpn.png"><br><a>校内平台</a></div>
<div class="icblock"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Fin-OA.png"><br><a>校内OA</a></div>
<div class="icblock"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Fcap-OA.png"><br><a>校际OA</a> </div>
<div class="icblock"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Fsub-plat.png"><br><a>投稿平台</a></div>
<div class="icblock"><img src="https://alphaspaces.pek3b.qcstor.com/1%2Fwechat.png"><br><a>公众号</a></div>
</div>
34.求职意向登记表
<style>
*{
margin: 0;
padding: 0;
}
fieldset{
width: 450px;
margin: 0 auto;
padding-left: 10px;
border-radius: 30px;
}
#btn{
text-align: center;
margin: 30px auto;
}
#sub{
background: url(https://alphaspaces.pek3b.qcstor.com/1/submit.png) no-repeat;
width: 104px;
height: 35px;
border: none;
}
#res{
background: url(https://alphaspaces.pek3b.qcstor.com/1/reset.png) no-repeat;
width: 104px;
height: 35px;
border: none;
}
</style>
<form action="">
<fieldset id="job"><legend align="center"><h4>求职意向</h4></legend><br />
工作地点:<input type="text" list="area" placeholder="按行政区域划分"/>
<datalist id="area">
<option>-----全国-----</option>
<option>东北地区</option>
<option>西北地区</option>
<option>华北地区</option>
<option>华中地区</option>
<option>华东地区</option>
<option>华南地区</option>
<option>西南地区</option>
<option>台港澳地区</option></datalist><br /><br />
工作城市:<select>
<option>-----均可-----</option>
<option>一二线大城市</option>
<option>三四线中小城市</option>
<option>县级市</option>
<option>县及以下</option></select><br /><br />
工作岗位:<select>
<option>-----均可-----</option>
<option>技术研发</option>
<option>销售业务</option>
<option>管理培训</option>
<option>售后服务</option>
<option>生产一线</option></select><br /><br />
工作性质:<select>
<option>-----均可-----</option>
<option>全职</option>
<option>兼职</option>
<option>专职</option></select><br /><br />
发展方向:<input type="text" required="required"/><br /><br />
薪资要求:<input type="number" min="800" max="10000"/ step="100"> 至
<input type="number" min="1000" max="20000"/ step="100"><br /><br />
其他要求:<br /> <textarea cols="60" rows="4"></textarea> <br /><br />
</fieldset>
<div id="btn">
<button type="submit" id="sub"/>
<button type="reset" id="res"/>
</div>
</form>
35.九寨沟风景
<style>
*{
margin: 0;
padding: 0;
}
h1{
text-align: center;
height: 80px;
line-height: 80px;
text-shadow: 2px 2px 5px #000000;
color: #FFFFFF;
}
h1:hover{
color: #FFFF00;
}
#head{
width: 95%;
margin: 0 auto;
padding: 10px;
text-align: center;
}
#head-t{
height: 300px;
overflow: hidden;
}
#head-t #left{
width: 20%;
height: 300px;
position: relative;
top: -60px;
margin-right: 30px;
}
#head-t #right{
width: 20%;
height: 300px;
position: relative;
top: -60px;
margin-left: 30px;
}
#head-t #center{
width: 50%;
height: 300px;
position: relative;
top: -60px;
}
hr{
border: none;
background: linear-gradient(to right,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff);
height: 5px;
}
#body{
margin: 20px auto;
width: 95%;
}
#body .pic1,.pic2{
width: 20%;
float: left;
margin-left: 20px;
}
.pic1{
margin-top: 80px;
}
.pic1 img{
width: 160px;
padding: 2px;
border: 1px dashed #FF00FF;
}
.pic2{
padding: 0 6px;
border: 1px dashed #FF00FF;
}
.pic2 p{
line-height: 25px;
text-indent: 32px;
font-size: 16px;
font-family: "楷体";
}
.pic2 h1{
font-family: "微软雅黑";
font-size: 30px;
color: #FF0000;
}
</style>
41.个人信息登记表
<style>
fieldset{
width: 450px;
margin: 0 auto;
border-radius: 30px;
}
#sub{
background: url(https://alphaspaces.pek3b.qcstor.com/1/submit.png) no-repeat;
width: 104px;
height: 35px;
border: none;
}
#res{
background: url(https://alphaspaces.pek3b.qcstor.com/1/reset.png) no-repeat;
width: 104px;
height: 35px;
border: none;
}
#btn{
text-align: center;
margin-top: 30px;
}
</style>
<body>
<form>
<fieldset><legend align="center"><h3>个人信息</h3></legend>
姓 名:<input type="text" autofocus="autofocus" required="required"/><br /><br />
性 别:<input type="radio" name="sex" checked="checked"/>女
<input type="radio" name="sex"/> 男
年 龄:<input type="number" min="18" max="30" required="required"/><br /><br />
最高学历:<select>
<option></option>
<option>专科</option>
<option>本科</option>
<option>研究生</option></select>
最高学位:<select>
<option></option>
<option>学士学位</option>
<option>硕士学位</option>
<option>博士学位</option></select><br /><br />
<label>毕业学校:<input type="text" placeholder="最高学历学校" required="required"/></label><br /><br />
<label>专业方向:<input type="text" placeholder="最高学历学校毕业专业" required="required"/></label><br /><br />
<label>爱好特长:<input type="text" placeholder="专业爱好特长" required="required"/></label><br /><br />
<label>联系邮箱:<input type="email" autocomplete="off" required="required"/><br/></label><br /><br />
</fieldset>
<div id="btn">
<button type="submit" id="sub"/>
<button type="reset" id="res"/>
</div>
</form>
</body>
43.云台山风景
<style>
*{
margin: 0;
padding: 0;
}
h1{
text-align: center;
height: 80px;
line-height: 80px;
text-shadow: 2px 2px 5px #000000;
color: #FFFFFF;
}
h1:hover{
color: #FFFF00;
}
#head{
width: 95%;
margin: 0 auto;
padding: 10px;
text-align: center;
}
#head-t{
height: 300px;
overflow: hidden;
}
#head-t #left{
width: 20%;
height: 330px;
position: relative;
top: -100px;
margin-right: 30px;
}
#head-t #right{
width: 20%;
height: 330px;
position: relative;
top: -100px;
margin-left: 30px;
}
#head-t #center{
width: 50%;
height: 330px;
position: relative;
top: -100px;
}
hr{
border: none;
background: linear-gradient(to right,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff);
height: 5px;
}
#body{
margin: 20px auto;
width: 95%;
}
#body .pic1,.pic2{
width: 20%;
float: left;
margin-left: 20px;
}
.pic1{
margin-top: 80px;
}
.pic1 img{
width: 180px;
padding: 2px;
border: 1px dashed #FF00FF;
}
.pic2{
padding: 0 6px;
border: 1px dashed #FF00FF;
}
.pic2 p{
line-height: 25px;
text-indent: 32px;
font-size: 16px;
font-family: "楷体";
}
.pic2 h1{
font-family: "微软雅黑";
font-size: 30px;
color: #FF0000;
}
</style>
82.游子吟
<style>
div{
width: 330px;
height: 320px;
margin: 0 auto;
}
h2,p{
text-align: center;
}
a{
text-decoration: none;
color: #000000;
font-size: 14px;
}
</style>
</head>
<body>
<div>
<h2>游子<sup><a href="#">①</a></sup>吟<sup><a href="#">②</a></sup></h2>
<h4 align="right">孟郊 〔唐代〕</h4>
<p>慈母手中线,</p>
<p>游子身上衣。</p>
<p>临行密密缝,</p>
<p>意恐迟迟归。</p>
<p>谁言寸草心,</p>
<p>报得三春晖。</p>
<hr />
<span align="left">①游子:古代称远游旅居的人。</span><br />
<span align="left">②吟:诗体名称。</span>
</div>
</body>
92.表单的组成
<form action="#" target="_blank" method="post">
用户名:<input type="text" name="word" /> <br/>
密码:<input type="password" name="pass" /> <br/>
所受教育:<input type="radio" name="edu" value="高职" />高职
<input type="radio" name="edu" value="本科" />本科
<input type="radio" name="edu" value="硕士" />硕士<br/>
期望的工作城市:<input type="checkbox" name="city" value="北京" />北京
<input type="checkbox" name="city" value="上海" />上海
<input type="checkbox" name="city" value="南京" />南京
<input type="checkbox" name="city" value="其他" />其他<br/>
证件类型:
<select name="Certificates" size="1">
<option value="身份证" selected>身份证</option>
<option value="护照">护照</option>
<option value="军官证">军官证</option>
</select><br/>
证件附件:<input type="file" name="filetype" /> <br/>
<input type="button" value="普通按钮" />
<input type="reset" value="重置按钮" />
<input type="submit" value="提交按钮" />
<input type="image" src="https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F600e81181b184a51608e09ec%2FR2JPTTM08I3B.png" />
</form>
98.图片边框
div{
width: 500px;
height: 500px;
background-color: #cafc32;
border-image:url(https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F600a7bef1b184a51608e0086%2FVKUL87MVMMTI.png) 33%/100px/0px repeat;
-moz-border-image:url(https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F600a7bef1b184a51608e0086%2FVKUL87MVMMTI.png) 33%/100px/0px repeat;
-webkit-border-image:url(https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F600a7bef1b184a51608e0086%2FVKUL87MVMMTI.png) 33%/100px/0px repeat;
}
101.border边框属性
<style type="text/css">
p{
line-height:160%;
text-indent:2em;
border-width: 2px; /*定义边框的宽度*/
border-style:dotted solid; /*定义边框的样式*/
border-color: #00F #FCA90A #F00; /*定义边框的颜色*/
}
img{
border:4px double #FCA90A;
}
</style>
121.子元素伪类选择器
li:first-child{text-decoration: underline;} /*子元素伪类,第1个子元素*/
li:last-child{text-decoration:line-through;} /*子元素伪类,最后第1个子元素*/
li:nth-child(even){background-color:#FF0000;} /*子元素伪类,偶数子元素*/
li:nth-child(odd){background-color:#EEEEEE;} /*子元素伪类,奇数子元素*/
li:only-child{ background-color: #FFFF00;} /*子元素伪类,唯一子元素*/
h2:nth-of-type(1){color: red;} /*子元素伪类,第1个同级兄弟元素h2*/
h2:nth-last-of-type(2){color:green;} /*子元素伪类,倒数第2个同级兄弟元素h2*/
122.基础的结构化伪类选择器
<style tyle="text/css">
:root{color: blue;} /*root伪类选择器*/
body *:not(h2){color: red;} /*not伪类选择器*/
li:empty{background-color: red;} /*empty伪类选择器*/
</style>
138.长城和黄山
<details>
<summary>长城</summary>
<h2>八达岭长城</h2>
<img src="https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F600501801b184a51608de4ce%2FK3OIQNBP2YEM.jpg" alt="八达岭长城" />
</details>
<details>
<summary>黄山</summary>
<h2>安徽黄山</h2>
<img src="https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F600500951b184a51608de4a5%2FFO838JFVTBWA.jpg" alt="安徽黄山" />
</details>
146.工资明细表
<table width="400" border="3" frame="hsides" cellpadding="5" cellspacing="2">
<caption>工资明细表</caption>
<thead>
<tr bgcolor="#FC0">
<th>账号</th>
<th>姓名</th>
<th>岗位工资</th>
<th>薪级工资</th>
<th>见习期工资</th>
</tr>
</thead>
<tbody>
<tr>
<td>100088</td>
<td>张辉</td>
<td>1800</td>
<td>380</td>
<td>680</td>
</tr>
<tr bgcolor="#eee">
<td>100085</td>
<td>李刚</td>
<td>1800</td>
<td>380</td>
<td>680</td>
</tr>
<tr>
<td>101338</td>
<td>赵旭</td>
<td>1800</td>
<td>380</td>
<td>680</td>
</tr>
</tbody>
</table>
147.影像地图
<img src="https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F5fffb1c31b184a51608dd867%2FBT0AU113IK6U.png" usemap="#Mapzoo">
<map name="Mapzoo">
<area shape="circle" coords="182,232,40" href="https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F5fffb1c31b184a51608dd867%2FV2YO8ZF229ZJ.jpg">
<area shape="rect" coords="291,212,394,275" href="https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F5fffb1c31b184a51608dd867%2FJ09FMCR3DPS7.jpg">
<area shape="poly" coords="460,146,429,200,489,257,599,223,546,134" href="https://alphaspaces.pek3b.qcstor.com/1%2Fresource%2F5fffb1c31b184a51608dd867%2FME7W1Y82AHZ0.jpg">
<area shape="default" nohref>
</map>
150.文本格式化标签练习
<h2 align="center">文本格式化</h2>
<p><strong>粗体</strong>的文字效果</p>
<p><em>这是斜体的文字</em></p>
<p><del>删除这行文本</del></p>
<p><ins>下划线文本</ins></p>
勾股定理:<br/>
3<sup>2</sup>+4<sup>2</sup>=5<sup>2</sup><br/>
方程式:<br>
X<sub>1</sub>+X<sub>2</sub>=5<br/>
239. 层定位
.one
{
position:fixed;
left:30px;
top:30px;
}
.two
{
position:fixed;
bottom:30px;
right:30px;
}
.three
{
position:relative;
top:30px;
left:30px;
}
.four
{
position:relative;
top:30px;
right:30px
}
.five
{
position:absolute;
left:100px;
top:150px
}
243.CSS 3D效果
#div1{
transform:rotate3d(1,1,1,180deg);
}
#div2{
transform:rotateX(60deg);
}
#div3
{
transform:rotateY(60deg);
}
#div4
{
transform:rotateZ(60deg);
}
244.CSS 动画
@keyframes move
{
0% {background-color:yellow;}
30% {background-color:blue;}
60% {background-color:green;}
100% {background-color:red;}
from {left:0px;}
to {left:200px;}
}
251.CSS 表格
table{width:700px;
height:200px;
border-collapse:collapse;
text-align:left;
vertical-align:middle;}
td{border:2px solid blue;
padding:3px 7px;}
th{border:5px double red;
padding:2px 7px;}
</style>
252.CSS 列表
ol.first{list-style-type: none;list-style-position:inside}
ol.second{list-style-type: circle;list-style-position:outside}
ol.third{list-style-type: decimal;list-style-position:inside}
ol.forth{list-style-type: lower-alpha;list-style-position:outside}
ol.fifth{list-style-image:url('https://www.w3school.com.cn/i/eg_arrow.gif');list-style-position:inside}
255.CSS 背景图像位置
body{background-image:url('https://static.runoob.com/images/mix/paper.gif')}
p{background-image:url("https://www.runoob.com/try/demo_source/img_flwr.gif");
background-repeat:repeat-y;
background-attachment:fixed;
background-position:left;}
276.标签综合案例2
<div>
<h1>课程满意度调查</h1>
</div>
<hr>
<div>
<p>各位同学,感谢大家在百忙之中填写问卷。</p>
</div>
<hr>
<div>
<p>一、基本信息</p>
姓名:<input type="text" />
<br>
<br>
性别:
<select>
<option value="boy">男</option>
<option value="girl">女</option>
</select>
</div>
<hr>
<div>
<p>二、课程满意度</p>
1、您学习的课程是:
<br>
<input type="radio" value="python" checked="checked" />python
<input type="radio" value="web" />web前端
<input type="radio" value="test" />软件测试
<br>
<br>
2、该课程需要改进的地方有:
<br>
<input type="checkbox" value="1" checked="checked" />判题不严谨
<br>
<input type="checkbox" value="2" />内容不充实
<br>
<input type="checkbox" value="3" />知识点不足
<br>
<input type="checkbox" value="4" />其他
<br>
<br>
3、您对该课程还有什么建议:
<br>
<textarea></textarea>
</div>
<hr>
<div>
<input type="reset" value="重置" />
<input type="submit" value="提交" />
</div>
js
20.电影排行
<style type="text/css">
*{
margin: 0;
padding: 0;
}
h1{
text-align: center;
margin: 20px;
}
body>div{
width: 300px;
margin: 50px auto;
}
.con{
text-align: center;
}
.con p{
text-align: left;
font-size: 18px;
font-family: "楷体";
text-indent: 32px;
}
.con img{
width: 200px;
text-align: center;
}
.bt{
text-align: center;
background: linear-gradient(to bottom, #474d54, #2f363d);
border: 1px solid #000000;
color: #FFFFFF;
font-size: 20px;
height: 35px;
line-height: 35px;
}
</style>
<script type="text/javascript">
$(function(){
$("p+div").hide();
$("p").click(function(){
$(this).css("color","#FF0000");
$(this).next("div").show();
var lis=$(this).parent("div").siblings("div");
lis.children("p").css("color","#FFFFFF");
lis.children("div").hide();
})
})
</script>
21.恐龙简介
<style type="text/css">
h1{
text-align: center;
}
#box{
width: 1070px;
height: 490px;
margin: 50px auto;
background: #474d54; }
#left{ float: left; }
#right{
float: right;
margin-right: 35px; }
#center{
float: left;
margin: 25px auto; }
.lileft,.liright{
line-height: 45px;
margin-top: 35px;
list-style-type:none ;
font-size: 14px;
text-align: center;
color: white;
text-shadow: 0 1px 0 black;
border: 1px solid black;
box-shadow: 0 1px 0 dimgrey inset, 0 1px 3px darkgrey;
background: -webkit-linear-gradient(top, #474d54, #2f363d); }
.licenter{ list-style-type:none ; }
img{ width:650px ; }
li:hover{
color: #FFFF00;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#center>li').hide();
$('#center>li:eq(0)').show();
$('#left>li').mouseover(function(){
var index=$(this).index();
$('#center>li:eq('+index+')').siblings('li').hide();
$('#center>li:eq('+index+')').show();
});
$('#right>li').mouseover(function(){
var index=$(this).index()+5;
$('#center>li:eq('+index+')').siblings('li').hide();
$('#center>li:eq('+index+')').show();
});
});
</script>
30.背景图片手动切换
<body>
<div>
<ul>
<li>纸知校园</li>
<li>网通天下</li>
<li>浮光掠影</li>
<li id="li2">绕梁余音</li>
</ul>
<br>
<button>切换颜色</button>
</div>
</body>
<script>
$(document).ready(function() {
$("button").click(function() {
//请在此处填写对应的选择器及调用的方法
$("body").css("background","gray");
$('li').css("text-shadow","0 1px 0 #484f58");
$('#li2').css("color","#FFFFFF");
$("div,li").css("background","-webkit-linear-gradient(top, #474d54, #2f363d)");
$('div,li').css("box-shadow","0 1px 0 #616a74 inset, 0 1px 5px #212528");
})
})
</script>
31.形态各异的恐龙
<script type="text/javascript">
$(document).ready(function(){
$('#center>li').hide();
$('#center>li:eq(0)').show();
$('#left>li').mouseover(function(){
var index=$(this).index();
$('#center>li:eq('+index+')').siblings('li').hide();
$('#center>li:eq('+index+')').show();
});
$('#right>li').mouseover(function(){
var index=$(this).index()+5;
$('#center>li:eq('+index+')').siblings('li').hide();
$('#center>li:eq('+index+')').show();
});
});
</script>
32.学生摄影大赛获奖作品
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#bt{
text-align: center;
margin-top: 50px;
}
ul{
width: 450px;
margin: 50px auto;
}
ul li{
list-style-type: none;
font-size: 18px;
color: #0f1214;
}
img{
width: 450px;
}
ul li h1{
text-align: center;
background: linear-gradient(to bottom, #474d54, #2f363d);
border: 1px solid #000000;
color: #FFFFFF;
font-size: 24px;
height: 55px;
line-height: 55px;
}
</style>
<script type="text/javascript">
$(function(){
$("h1+div").hide();
$("h1").click(function(){
$(this).css("color","#FF0000");
$(this).next("div").show();
var lis=$(this).parent("li").siblings("li");
lis.children("h1").css("color","#FFFFFF");
lis.children("div").hide();
})
})
</script>
38. 新中式风格
<script>
$(function(){
$("#limage img").hide();
$("#limage img:first").show();
$("#rtext li").mouseover(function(){
var i=$("#rtext li").index(this);
$("#limage img").hide();
$("#limage img:eq("+i+")").show();
});
});
</script>
39.电影排行榜
.bt{
text-align: center;
background: linear-gradient(to bottom, #474d54, #2f363d);
border: 1px solid #000000;
color: #FFFFFF;
font-size: 20px;
height: 35px;
line-height: 35px;
}
<script type="text/javascript">
$(function(){
$("p+div").hide();
$("p").click(function(){
$(this).css("color","#FF0000");
$(this).next("div").show();
var lis=$(this).parent("div").siblings("div");
lis.children("p").css("color","#FFFFFF");
lis.children("div").hide();
})
})
</script>
83.全局变量与局部变量
<script type="text/javascript">
var myname = "HTML";
document.write("函数外:myname=" + myname+"<br/>");
function myfun() {
var myname;
myname = "CSS";
document.write("函数内:myname=" + myname + "<br/>");
}
myfun();
document.write("函数外:myname=" + myname + "<br/>");
</script>
程序填空
1 2 3 prompt
4. write write eval var write
5. z-index
6. solid vertical-align:middle;
7. disc
8. collapse colspan="2"
9. margin-right text-indent
10. _blank map
单选题
-
1.
如果要将网页中的两个div对象制作为重叠效果,()
1.0 / 1.0 分
A.是不可能的
B.利用表格标记
C.<table>
利用样式表定义中的
D.z-index
属性利用样式表定义中的绝对位置与相对位置属性
参考答案: C
考生答案: C
-
2.
使用内嵌式添加CSS样式,CSS样式需要写在()。
1.0 / 1.0 分
A.
B.<title></title>
标记之间
C.<head></head>
标记之间
D.<body></body>
标记之间<style></style>
标记之间参考答案: D
考生答案: D
-
3.
若要以加粗宋体、12号字显示“vbscript”以下用法中,正确的是( )。
1.0 / 1.0 分
A.
B.<b><font face=”宋体” size=12>vbscript</font></b>
C.<b><font size=12>vbscript</b></font>
D.<b><font face=“宋体” size=12>vbscript</b></font>
<b><font face=“宋体” fontsize=12>vbscript</b></font>
参考答案: A
考生答案: A
-
4.
下列标签中,哪一项是用于表示文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容( )
1.0 / 1.0 分
A.
B.<footer>
C.<header>
D.<aside>
<article>
参考答案: D
考生答案: D
-
5.
以下哪个对象可用来在浏览器窗口中载入一个新网址?( )
0.0 / 1.0 分
A.
B.document.url
C.window.location
D.window.close
window.url
参考答案: B
考生答案: D
-
6.
以下哪个选项是对对象进行定位的()
1.0 / 1.0 分
A.display
B.margin
C.padding
D.position
参考答案: D
考生答案: D
-
7.
怎样给所有的
<h1>
标签添加背景颜色()1.0 / 1.0 分
A.
B.h1.all {background-color:#FFFFFF}
C..h1 {color:#FFFFFF}
D.#h1 {background-color:#FFFFFF}
h1 {background-color:#FFFFFF;}
参考答案: D
考生答案: D
-
8.
关于数学对象的描述中错误的是( )。
0.0 / 1.0 分
A.math对象包含一些常用的属性和方法
B.Math对象无需创建
C.可以直接通过属性对象.属性名调用
D.Math对象拥有构造函数
参考答案: D
考生答案: B
-
9.
下列对表单对象的属性表述不正确的是( )。
1.0 / 1.0 分
A.target:返回/设定表单提交内容的编码方式
B.name:返回表单的名称
C.action:返回/设定表单的提交地址
D.length:返回该表单所含元素的数目
参考答案: A
考生答案: A
-
10.
下面代码使用HTML元素的id属性,将样式应用于网页上的某个段落:
<p id="firstp">这是第一个段落</p>
以下关于样式规则定义正确的是()
1.0 / 1.0 分
A.
B.<style type="text/css"> p.firstp {color:red} </style>
C.<style type="text/css"> #firstp {color:red} </style>
D.<style type="text/css"> .firstp {color:red} </style>
<style type="text/css"> p{color:red} </style>
参考答案: B
考生答案: B
-
11.
css默认的定位类型是()
1.0 / 1.0 分
A.relative
B.absolute
C.fixed
D.static
参考答案: D
考生答案: D
-
12.
下列()表示p元素中的字体是粗体
1.0 / 1.0 分
A.
B.p {text-size:bold}
C.p {font-weight:bold}
D.<p style="text-size:bold">
<p style="font-size:bold">
参考答案: B
考生答案: B
-
13.
下面的选项中, CSS样式规则的具体格式正确的是()。
1.0 / 1.0 分
A.选择器{属性1:属性值1;属性2:属性值2 属性3:属性值3}
B.选择器{属性1:属性值1 属性2:属性值2 属性3:属性值3}
C.选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
D.选择器{属性1:属性值1, 属性2:属性值2, 属性3:属性值3;}
参考答案: C
考生答案: C
-
14.
float属性说法不正确的是()
0.0 / 1.0 分
A.该属性可以用于浮动定位
B.该属性可以用于网页分栏
C.该属性可以用于盒子层叠
D.该属性可以用于图文混排
参考答案: C
考生答案: A
-
15.
下列选项中,( )不是Web浏览器。
1.0 / 1.0 分
A.Linux
B.Opera
C.Firefox
D.Safari
参考答案: A
考生答案: A
-
16.
position属性取值()表示相对定位。
1.0 / 1.0 分
A.absolute
B.fixed
C.static
D.relative
参考答案: D
考生答案: D
-
17.
在Javascript数组对象方法中,( )可以实现删除最后一个元素,返回最后一个元素。
1.0 / 1.0 分
A.unshift(元素1,元素2,…)
B.pop()
C.sort()
D.concat(数组1,数组2,…)
参考答案: B
考生答案: B
-
18.
以下( )表达式产生一个0-7之间(含0,7)的随机整数
1.0 / 1.0 分
A.Math.ceil(Math.random()*8)
B.Math.floor(Math.random()*7)
C.Math.floor(Math.random()*8)
D.Math.floor(Math.random()*6)
参考答案: C
考生答案: C
-
19.
为了使得元素可拖动,可以把( )属性设置为ture( )
1.0 / 1.0 分
A.draggable
B.contenteditable
C.editable
D.dropzone
参考答案: A
考生答案: A
-
20.
以下( )图像支持动画格式。
1.0 / 1.0 分
A.bmp
B.jpg
C.png
D.gif
参考答案: D
考生答案: D
-
21.
可以通过( )元素来为同一个媒体数据指定多个播放格式与编码方式。
1.0 / 1.0 分
A.以上都不是
B.video
C.audio
D.source
参考答案: D
考生答案: D
-
22.
下列属性中指定媒体是否在页面加载后自动播放的是( )
1.0 / 1.0 分
A.auto
B.100p
C.autoplay
D.poster
参考答案: C
考生答案: C
-
23.
如何使文本以大写字母开头()
1.0 / 1.0 分
A.
B.无法通过 CSS 来实现
C.text-transform:uncapitalize
D.text-transform:uppercase
text-transform:capitalize
参考答案: D
考生答案: D
-
24.
下列哪个不是块元素()
1.0 / 1.0 分
A.
B.<div>
C.<span>
D.<p>
<h1>
参考答案: B
考生答案: B
-
25.
a:hover
表示超链接文字在()时的状态1.0 / 1.0 分
A.访问过后
B.鼠标放上去
C.原始状态
D.鼠标按下
参考答案: B
考生答案: B
-
26.
字符串对象是常用的对象之一,下列语句正确的是( )
1.0 / 1.0 分
A.var string4 Hello
B.var string2 “Hello”
C.var string3= Hello
D.var string1= “Hello”
参考答案: D
考生答案: D
-
27.
在表单中添加提交按钮,实现在用户单击“提交“按钮时,自动将表单提交到ACTION属性中指定的位置。下列语句正确的是( )
1.0 / 1.0 分
A.
B.<form method=“post” action=“http://www.163.com”> <input type=“reset” value=“提交” name=“reser1”> </form>
C.<form method=“post” action=“http://www.163.com”> <button type=“submit” value=“提交” name=“b1”></button> </form>
D.<form method=“post” action=“http://www.163.com”> <input type=“submit” value=“提交” name=“submit1”> </form>
<form method=“post” action=“http://www.163.com”> <input type=“button” value=“提交” name=“b1”> </form>
参考答案: C
考生答案: C
-
28.
下列样式定义字体为宋体、字体颜色为红色、斜体、大小20px、粗细800号,正确的定义是()
1.0 / 1.0 分
A.
B.p{font-family:800; font-size:20px; font-weight:red; color:italic; font-style:宋体;}
C.p {font-family:宋体;font-size:20px;font-weight:800;color:red; font-style:italic; }
D.p {font-family:20px; font-size:800; font-weight:宋体; color:red; font-style:italic; }
p {font-family:20px; font-size:宋体; font-weight:800; color: red; font-style:italic; }
参考答案: B
考生答案: B
-
29.
clear属性取值说法正确的是()
1.0 / 1.0 分
A.取值为right表示右侧浮动元素被删除
B.取值为both表示清除两侧浮动
C.取值为left表示左侧浮动元素被删除
D.取值为all表示四周浮动元素被删除
参考答案: B
考生答案: B
-
30.
下列关于CSS的说法错误的是()。
1.0 / 1.0 分
A.CSS可以控制网页背景图片
B.属性值可以是百分比
C.字体大小单位可以是em
D.1em等于18像素
参考答案: D
考生答案: D
-
31.
下列选项中,没有对应的结束标记的是()。
1.0 / 1.0 分
A.
B.<title>
C.<body>
D.<html>
<br />
参考答案: D
考生答案: D
-
32.
以下对列表的描述,哪个是错误的()
0.0 / 1.0 分
A.list-style-position
B.list-style-image:url
C.list-style-color
D.list-style-type
参考答案: C
考生答案: B
-
33.
下列()表示a元素中的内容没有下划线
1.0 / 1.0 分
A.
B.a {decoration:no underline}
C.a {underline:none}
D.a {text-decoration:no underline}
a {text-decoration:none}
参考答案: D
考生答案: D
-
34.
在HTML5中,下列用于展现页面中某个事物完成的进度的元素是( )
1.0 / 1.0 分
A.details
B.meter
C.progress
D.command
参考答案: C
考生答案: C
-
35.
在下列的HTML标签中,可以为网页插入背景图像的是( )。
1.0 / 1.0 分
A.
B.<body background=background.gif>
C.<body src=background.gif>
D.<img src=background.gif background>
<body href=background.gif>
参考答案: A
考生答案: A
-
36.
张同学正在家里通过拨号上网访问新浪主页,此时,他自己的计算机是( )
1.0 / 1.0 分
A.服务器
B.既不是服务器也不是浏览器
C.浏览器
D.既是服务器也是浏览器
参考答案: C
考生答案: C
-
37.
CSS中的选择器不包括()。
1.0 / 1.0 分
A.标签选择器
B.超文本标记选择器
C.ID选择器
D.类选择器
参考答案: B
考生答案: B
-
38.
下列选项中,属于网页扩展名的是()。
1.0 / 1.0 分
A.html
B.css
C.txt
D.js
参考答案: A
考生答案: A
-
39.
list-style-type
属性叙述错误的是()1.0 / 1.0 分
A.可以设置列表项目标号类型
B.对有序列表有效
C.对表格单元格有效
D.对无序列表有效
参考答案: C
考生答案: C
-
40.
position属性取值()表示固定定位
1.0 / 1.0 分
A.static
B.fixed
C.absolute
D.relative
参考答案: B
考生答案: B
-
41.
css中哪些属性不可以继承()
1.0 / 1.0 分
A.font-size
B.color
C.border
D.font-family
参考答案: C
考生答案: C
-
42.
下列()表示列表项符号是小方块
1.0 / 1.0 分
A.type: square
B.list-style-type: square
C.list-type: square
D.type: 2
参考答案: B
考生答案: B
-
43.
在以下的 CSS 中,可使所有 p 元素变为粗体的正确语法是()
1.0 / 1.0 分
A.
B.<p style="font-size:bold">
C.<p style="text-size:bold">
D.p {text-size:bold}
p {font-weight:bold}
参考答案: D
考生答案: D
-
44.
下列()是定义样式表的正确格式。
1.0 / 1.0 分
A.
B.{body:color=black(body}
C.body {color: black}
D.body:color=black
{body;color:black}
参考答案: B
考生答案: B
-
45.
下列哪个css属性可以更改字体大小()
1.0 / 1.0 分
A.text-style
B.font-size
C.text-size
D.font-style
参考答案: B
考生答案: B
-
46.
如何显示没有下划线的超链接()
1.0 / 1.0 分
A.
B.a {underline:none}
C.a {text-decoration:no underline}
D.a {text-decoration:none}
a {decoration:no underline}
参考答案: C
考生答案: C
-
47.
下列关于浏览器对象的说法错误的是( )
1.0 / 1.0 分
A.history对象记录了用户在一个浏览器中已经访问过的URL
B.location对象相当于IE浏览器中的地址栏,包含关于当前URL地址的信息
C.location对象是history对象的父对象
D.location对象是window对象的子对象
参考答案: C
考生答案: C
-
48.
list-style-position
的取值包括()1.0 / 1.0 分
A.inside
B.outter
C.全都是
D.inner
参考答案: A
考生答案: A
-
49.
网页中的图像文件位于html文件的下一级文件夹img下,则以下标签书写正确的是()。
1.0 / 1.0 分
A.
B.<img src="img\logo.gif" />
C.<img src="logo.gif" />
D.<img src="img/logo.gif" />
<img src="img/logo" />
参考答案: C
考生答案: C
-
50.
JAVASCRIPT的onSubmit事件的作用是( )
1.0 / 1.0 分
A.当一个表单中的对象被点击时,执行的 JavaScript 事件
B.当用户提交一个表单时,需要执行的 JAVASCRIPT 事件
C.当一个鼠标指针从对象或区域之个移到对象或区域上时,调用的事件
D.当鼠标移出对象时发生的事件
参考答案: B
考生答案: B
-
51.
如何使文本变为粗体()
1.0 / 1.0 分
A.font:b
B.font-weight:bold
C.font-size:bold
D.style:bold
参考答案: B
考生答案: B
-
52.
以下关于class和id的说法错误的是()
0.0 / 1.0 分
A.
B.id和class只是在写法上有区别,在应用和意义上没有区别
C.id的应用方法:<指定标签 id=”id名”>
D.class的定义方法是:.类名{样式};
class的应用方法:<指定标签 class=“类名”>
参考答案: A
考生答案: C
-
53.
"<hr noshade>"
表示( )1.0 / 1.0 分
A.表示水平线没有阴影
B.表示水平线没有边框
C.表示水平线不显现
D.表示页面边界没有阴影
参考答案: A
考生答案: A
-
54.
a:link
表示超链接文字在()时的状态0.0 / 1.0 分
A.访问过后
B.鼠标放上去
C.鼠标按下
D.初始状态
参考答案: D
考生答案: C
-
55.
如何产生带有正方形项目的列表()
1.0 / 1.0 分
A.list-style-type: square
B.type: 2
C.type: square
D.list-type: square
参考答案: A
考生答案: A
-
56.
下列属性中,用于设置鼠标悬停时图像的提示文字的是()
1.0 / 1.0 分
A.height
B.alt
C.width
D.title
参考答案: D
考生答案: D
-
57.
如下所示的这段CSS样式代码,定义的样式效果是()
a:active {color: #000000;}
1.0 / 1.0 分
A.活动链接是#000000颜色
B.访问过链接是#000000颜色
C.鼠标上滚链接是#000000颜色
D.默认链接是#000000颜色
参考答案: A
考生答案: A
-
58.
设置表单中密码框的最大长度为15正确的属性设置是( )
1.0 / 1.0 分
A.size=15
B.max=15
C.maxlength=15
D.maxsize=15
参考答案: C
考生答案: C
-
59.
图像文件名为myhome.jpg,要访问目标网站为
http://www.edu.cn
,以下创建一个以图像为链源的超链接正确的是1.0 / 1.0 分
A.
B.<a href="http://www.edu.cn" >myhome.jpg</a>
C.<a href="http://www.edu.cn" ><img src="myhome.jpg"></a>
D.<a href="http://www.edu.cn" ><img src="myhome.jpg">
<img src="myhome.jpg"><a href="http://www.edu.cn" ></a>
参考答案: B
考生答案: B
-
60.
下列哪个css属性能够更改文本字体()
1.0 / 1.0 分
A.text
B.font-family
C.line-height
D.text-decoration
参考答案: B
考生答案: B
-
61.
下列关于
<head>
与<body>
节点之间关系描述正确的是()。1.0 / 1.0 分
A.兄弟节点
B.子节点
C.父节点
D.根节点
参考答案: A
考生答案: A
-
62.
在HTML中,可以使用( )标记向网页中插入视频
1.0 / 1.0 分
A.
B.<src>
C.<path>
D.<audio>
<video>
参考答案: D
考生答案: D
-
63.
在HTML文本层次语义元素中,用于对参考文献的引用进行定义的是( )
1.0 / 1.0 分
A.
B.<strong>元素
C.<cite>元素
D.<var>元素
<mark>元素
参考答案: B
考生答案: B
-
64.
HTML中,用什么方法可以将段落内容在页面中居中()。
1.0 / 1.0 分
A.type=middle
B.place=middle
C.type=center
D.align=center
参考答案: D
考生答案: D
-
65.
CSS中的id选择符在定义的前面要有指示符()。
1.0 / 1.0 分
A.
B.%
C.#
D.!
*
参考答案: B
考生答案: B
-
66.
下列选项中,字号最大的是()
1.0 / 1.0 分
A.
B.<h4>
C.<h2>
D.<h3>
<h1>
参考答案: D
考生答案: D
-
67.
下面哪个CSS属性是用来更改背景颜色的()
1.0 / 1.0 分
A.color
B.background-color
C.bgcolor
D.back
参考答案: B
考生答案: B
-
68.
如何显示这样一个边框()
上边框 10 像素、下边框 5 像素、左边框 20 像素、右边框 1 像素
1.0 / 1.0 分
A.border-width:10px 5px 20px 1px
B.border-width:10px 20px 5px 1px
C.border-width:5px 20px 10px 1px
D.border-width:10px 1px 5px 20px
参考答案: D
考生答案: D
-
69.
下面选项中是合法的类样式的是()
1.0 / 1.0 分
A.
B.$word
C.#word
D..word
word
参考答案: C
考生答案: C
-
70.
下列哪种方式是用类选择器定义样式的()
1.0 / 1.0 分
A.
B.p,h1{color:red;}
C.p{color:red;}
D..one{color:red;}
#two{color:red;}
参考答案: C
考生答案: C
-
71.
表示圆角边框的属性是()
1.0 / 1.0 分
A.border-shadow
B.border-radius
C.border-round
D.border-box
参考答案: B
考生答案: B
-
72.
在下列选项中,不属于Web前端开发任务的是( )
1.0 / 1.0 分
A.页面特效
B.页面交互
C.页面布局
D.通信协议
参考答案: D
考生答案: D
-
73.
下列哪个样式定义后,行级元素可以定义宽度和高度()
0.0 / 1.0 分
A.display:inline
B.display:none
C.display:block
D.display:inheric
参考答案: C
考生答案: A
多选题
- 74.
关于JavaScript中的Math对象的说法,正确的是( )
1.0 / 1.0 分
A. Math.ceil(123.56)返回的结果是124
B. Math.round(-123.55)返回的结果为-123
C. Math.floor()方法用于对数字进行下取整
D. Math.random()返回的结果范围为0到1,包括0和1
参考答案: AC
考生答案: AC
- 75.
关于下面代码片段,解释正确的是( ).
<big> 内容1的显示 </big> <br/> <strong> 内容2的显示 </strong> <br/>
1.0 / 1.0 分
A. 标签strong用于设置内容比周围的文本大一个字体尺寸显示
B. 标签big用于设置内容以黑体显示
C. 标签br用于设置换行
D. 标签big用于设置内容比周围的文本大一个字体尺寸显示
参考答案: CD
考生答案: CD
- 76.
下面的选项中,哪些元素具有语义( )
0.0 / 1.0 分
A. h1
B. figure
C. time
D. div
参考答案: BC
考生答案: ABC
- 77.
正确获取表单myform中id名为txt的文本框值的是( )
0.5 / 1.0 分
A. document.all.txt.value
B. form.myform.txt.value
C. document.getElementById(“txt”).value
D. document.myform.txt.value
参考答案: CD
考生答案: D
- 78.
下列选项所表示的符号在正则表达式中所代表的意义解释正确的是( )
0.7 / 1.0 分
A. `^(尖号):匹配字符串的开头`
B. `\(反斜杠):对特殊字符的特殊元字符含义进行转义`
C. `$(美元符号):匹配字符串的结尾`
D. `?(问号):匹配前面的子表达式一次或多次`
参考答案: ABC
考生答案: AC
- 79.
在下列选项中,属于window对象的方法是( )
0.0 / 1.0 分
A. close()
B. alert()
C. clear()
D. write()
参考答案: AB
考生答案: ABCD
- 80.
若在html文件中应用abc.css文件中的样式,下列用法正确的是( )
1.0 / 1.0 分
A. `<link href=”abc.css” type=”text/css” rel=”stylesheet”>`
B. `<style type=”text/css”>@import url(abc.css);</style>`
C. `<style type=”text/css”>import url(abc.css);</style>`
D. `<style type=”text/css”>@import (abc.css);</style>`
参考答案: AB
考生答案: AB
- 81.
正确获取表单myform中id名为txt的文本框值的是( )
0.5 / 1.0 分
A. document.getElementById(“txt”).value
B. form.myform.txt.value
C. document.all.txt.value
D. document.myform.txt.value
参考答案: AD
考生答案: D
- 82.
HTML5新增的pattern属性具有对表单中输入字段的验证功能,它适合( )等
<input>
类型0.0 / 1.0 分
A. text
B. password
C. checkbox
D. radio
参考答案: AB
考生答案: ABCD
- 83.
在CSS中,以下关于字体属性的说法正确的是( )
0.0 / 1.0 分
A. font-weight属性用来设置字体粗细
B. font-variant属性用来设置字体样式
C. size属性用来设置字体大小
D. font-style属性可设置字体倾斜
参考答案: AD
考生答案: 未做
- 84.
以下对relative定位描述正确的是( )
0.0 / 1.0 分
A. relative定位根据父元素进行定位的
B. relative定位是根据浏览器窗口进行定位的
C. relative定位是根据元素本身的位置进行定位的
D. relative定位会使元素脱离正常文档流
参考答案: CD
考生答案: 未做
- 85.
下列选项中的术语名词,属于网页术语的是( )
0.0 / 1.0 分
A. IOS
B. HTTP
C. DNS
D. Web
参考答案: BCD
考生答案: 未做
- 86.
关于CSS的说法正确的是( )
0.0 / 1.0 分
A. CSS可以控制网页背景图片
B. 字体大小的单位可以是cm
C. 如果一个属性有多个值,则每个属性值之间用分号分隔
D. 对某个选择器定义多个属性时,则每个属性设置之间用分号分隔
参考答案: ABD
考生答案: 未做
- 87.
下面的选项中,关于Web标准说法正确的是( )
0.0 / 1.0 分
A. Web标准是由浏览器的各大厂商联合制定的
B. Web标准并不是某一个标准,而是一系列标准的集合
C. Web标准只要包括HTML标准
D. Web的网页标准主要包括结构标准、表现标准和行为标准三个方面
参考答案: BD
考生答案: 未做
- 88.
下列数学对象的属性中描述正确的是( )
0.0 / 1.0 分
A. LN2返回2的自然对数
B. PI返回圆周率
C. E返回算术常量e,即自然对数的底数
D. SQRT2返回2的平方根的倒数
参考答案: ABC
考生答案: 未做
- 89.
下列选项中,( )可以设置网页中某个标签的左外边距为5px
0.0 / 1.0 分
A. Margin:0 5px
B. Padding-left:5px
C. Margin:5px 0 0 0
D. Margin:0 0 0 5px
参考答案: AD
考生答案: 未做
- 90.
以下哪个是document对象包含的内容( )
0.0 / 1.0 分
A. 下拉列表框
B. 状态栏
C. 单选框、复选框
D. 文本域、按钮
参考答案: ACD
考生答案: 未做
- 91.
在HTML中,input元素的type属性用于制定表单元素的类型,下列不可用的类型有( )
0.0 / 1.0 分
A. image
B. textarea
C. select
D. hidden
参考答案: BC
考生答案: 未做
- 92.
关于样式表的优先级说法正确的是( )
0.0 / 1.0 分
A. 当样式中各层次属性设置冲突时,先设的属性起作用
B. 内嵌式优先于外链式
C. 直接定义在标签上的CSS样式级别最高
D. 外导式优先于内嵌式
参考答案: BC
考生答案: 未做
- 93.
盒模型的属性包括( )
0.0 / 1.0 分
A. padding
B. visible
C. margin
D. font
参考答案: AC
考生答案: 未做
- 94.
INPUT元素的TYPE属性用于指定表单元素的类型,可用的类型有( )
0.0 / 1.0 分
A. BUTTON
B. TEXTAREA
C. SELECT
D. HIDDEN
参考答案: AD
考生答案: 未做
- 95.
JavaScript中,关于日期及时间获取方法的描述正确的是( )
0.0 / 1.0 分
A. Date()返回当日的日期和时间
B. getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)
C. getFullYear()从 Date 对象以四位数字返回年份
D. getTime()返回2000年 1 月 1 日至今的毫秒数
参考答案: ABC
考生答案: 未做
- 96.
在无序列表中经常设置type属性,下列属于type属性值的是( )
0.0 / 1.0 分
A. Pointer
B. circle
C. square
D. Ellipses
参考答案: BC
考生答案: 未做
- 97.
CSS文本属性中,文本对齐属性text-align的取值有( )
0.0 / 1.0 分
A. right
B. justify
C. auto
D. center
参考答案: ABD
考生答案: 未做
- 98.
下列数组对象方法的描述中,正确的是( )
0.0 / 1.0 分
A. shift()删除第一个元素,返回第一个元素
B. sort()排序数组
C. unshift(元素1,元素2,…)添加元素至数组开始处
D. push(元素1,元素2,…)添加元素,返回添加元素的长度
参考答案: ABC
考生答案: 未做
- 99.
在JavaScript中,下列关于String对象的charAt()方法和indexOf()方法理解正确的是( )
0.0 / 1.0 分
A. indexOf()方法的参数为指定的索引值
B. indexOf()方法是查找字符或字符串的位置,返回第一次出现的位置
C. charAt()方法的参数可以为一个或两个
D. charAt()方法是获取指定索引位置的字符
参考答案: BD
考生答案: 未做
- 100.
下列关于浏览器前缀描述正确的是( )
0.0 / 1.0 分
A. -ms-是IE 浏览器前缀
B. -webkit-是苹果、欧朋和谷歌浏览器前缀
C. -edge-是微软浏览器前缀
D. -moz-是Firefox火狐浏览器前缀
参考答案: AD
考生答案: 未做
- 101.
以下对relative定位描述正确的是( )
0.0 / 1.0 分
A. relative定位是根据元素本身的位置进行定位的
B. relative定位是根据浏览器窗口进行定位的
C. relative定位根据父元素进行定位的
D. relative定位会使元素脱离正常文档流
参考答案: AD
考生答案: 未做
- 102.
以下关于HTML语言中的表格的说法正确的是( )
0.0 / 1.0 分
A. 有多少对`<TD>`标签,就有多少个单元格
B. 有多少对`<TR>`标签,就有多少列
C. 有多少对`<TD>`标签,就有多少行
D. 在HTML语言中,表格必须由`<TABLE>`标签、`<TR>`标签、 `<TD>`标签组成,缺一不可
参考答案: AD
考生答案: 未做
- 103.
以下代码,在浏览器中将显示( )
<table border=“0”> <tr> <th>姓名</th><th>年龄</th> </tr> <tr> <td>张敏</td></td>22</td> </tr> <tr> <td>李霞</td></td>21</td> </tr> </table>
0.0 / 1.0 分
A. 表格无边框
B. 两行三列的表格
C. 表格带有边框
D. 三行两列的表格
参考答案: AD
考生答案: 未做
- 104.
在CSS中,下列选择器的名称要严格区分大小写的是( )
0.0 / 1.0 分
A. 类选择器
B. 通用选择器
C. ID选择器
D. 标签选择器
参考答案: AC
考生答案: 未做
- 105.
在JavaScript中,下列关于String对象的charAt()方法和indexOf()方法理解正确的是( )
0.0 / 1.0 分
A. indexOf()方法的参数为指定的索引值
B. indexOf()方法是查找字符或字符串的位置,返回第一次出现的位置
C. charAt()方法的参数可以为一个或两个
D. charAt()方法是获取指定索引位置的字符
参考答案: BD
考生答案: 未做
- 106.
关于下列代码片段分析正确的是( )
<form name=“form1” action=“login.do” method=“post”> …… </form>
0.0 / 1.0 分
A. 表单的数据提交的位置是post
B. 表单提交的数据将会出现在地址栏中
C. 此表单提交数据的大小不受限制
D. 表单的名称是form1
参考答案: CD
考生答案: 未做
- 107.
关于HTML5的全局属性,下列说法正确的是( )
0.0 / 1.0 分
A. 某个元素hidden属性为true时,元素属于不可见状态,元素内的内容也不会被浏览器创建
B. spellcheck设置true可以对用户进行拼写和语法检查
C. draggable设置true则规定元素可拖动
D. 某个元素使用tabindex属性后,该元素可以激活快捷键
参考答案: BC
考生答案: 未做
- 108.
关于text-indent的属性设置正确的是( )
0.0 / 1.0 分
A. text-indent:left
B. text-indent:20px
C. text-indent:2em
D. text-indent:right
参考答案: BC
考生答案: 未做
- 109.
下列关于JavaScript函数的描述中,正确的是( )
0.0 / 1.0 分
A. 要先定义后使用
B. 函数需要在每次使用的时候重新定义
C. JS函数可以定义在HTML文件的主体body标记中的任何位置
D. JS函数可以定义在HTML文件的头部或外部JS文件中
参考答案: ACD
考生答案: 未做
- 110.
以下关于class和id的说法正确的是( )
0.0 / 1.0 分
A. Class和id只是在写法上有区别,在应用和意义上没有区别
B. class样式的定义方法是:#类名{样式}
C. id的样式的定义方法是:#id名{样式}
D. class名和id名严格区分大小写
参考答案: CD
考生答案: 未做
- 111.
以下关于class和id的说法正确的是( )
0.0 / 1.0 分
A. class名和id名严格区分大小写
B. Class和id只是在写法上有区别,在应用和意义上没有区别
C. id的样式的定义方法是:#id名{样式}
D. class样式的定义方法是:#类名{样式}
参考答案: AC
考生答案: 未做
- 112.
对下面代码说法正确的是( )
省略部分代码…… <form id=”form1” name=”form1” method=”post” action=”adv.html” onsubmit=”return js()’>
0.0 / 1.0 分
A. 密码长度可以是12位
B. 密码长度可以是6位
C. 密码必须是数字
D. 以上都正确
参考答案: AB
考生答案: 未做
- 113.
下列选项中,( )属于
<img/>
标签的属性0.0 / 1.0 分
A. src
B. href
C. width
D. alt
参考答案: ACD
考生答案: 未做
- 114.
JavaScript中日期及时间的获取方法中正确的是( )
0.0 / 1.0 分
A. Date()返回当日的日期和时间
B. getTime()返回2000年 1 月 1 日至今的毫秒数
C. getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)
D. getFullYear()从 Date 对象以四位数字返回年份
参考答案: ACD
考生答案: 未做
- 115.
清除浮动影响的方法有( )
0.0 / 1.0 分
A. 最后一个浮动元素之后添加一个块元素并设置clear:both
B. 父元素添加宽度
C. 父元素添加position:relative
D. 父元素添加overflow:hidden
参考答案: AD
考生答案: 未做
- 116.
下列选项中属于HTML常用页面节点标签的是( )
0.0 / 1.0 分
A. `<title>` 标签
B. `<nav>` 标签
C. `<address>` 标签
D. `<section>` 标签
参考答案: BCD
考生答案: 未做
- 117.
下列选项中,有关CSS样式表优点的描述正确的是( )
0.0 / 1.0 分
A. 有利于提高网页浏览速度
B. 实现内容和表现的分离
C. 不利于搜索引擎搜索
D. 页面布局更加灵活
参考答案: ABD
考生答案: 未做
- 118.
下列哪些选项属于HTML5为了页面的排版需要而提供的语义分组元素( )
0.0 / 1.0 分
A. blockquote
B. height
C. pre
D. figure
参考答案: ACD
考生答案: 未做
- 119.
在CSS中,下列选择器的名称要严格区分大小写的是( )
0.0 / 1.0 分
A. 通用选择器
B. 标签选择器
C. ID选择器
D. 类选择器
参考答案: CD
考生答案: 未做
- 120.
清除浮动影响的方法有( )
0.0 / 1.0 分
A. 父元素添加宽度
B. 父元素添加overflow:hidden
C. 父元素添加position:relative
D. 最后一个浮动元素之后添加一个块元素设置clear:both
参考答案: BD
考生答案: 未做
- 121.
JS针对数值对象,可实现对数值型小数位数的保留操作的方法有( )
0.0 / 1.0 分
A. floor(x)
B. toFixed(x)
C. abs(x)
D. toPrecision(x)
参考答案: BD
考生答案: 未做
- 122.
HTML头部标签中,关于
<title>
标签的作用说法正确的是( )0.0 / 1.0 分
A. 用于在浏览器的标题栏中显示标题
B. 可以用作默认快捷方式或收藏夹的名称
C. 可以在`<title>`标签对之间允许有其它的标签存在
D. 可以作为搜索引擎结果中的页面标题
参考答案: ABD
考生答案: 未做
- 123.
关于样式表的优先级说法正确的是( )
0.0 / 1.0 分
A. 内嵌式样式优先于外链式样式
B. 外导式样式表优先级别最低
C. 当样式中属性重复时,先设的属性起作用
D. 直接定义在标签上的CSS样式级别最高
参考答案: ABD
考生答案: 未做
- 124.
关于CSS的说法正确的是( )
0.0 / 1.0 分
A. 如果一个属性有多个值,则每个属性值之间用分号分隔
B. 字体大小的单位可以是cm
C. 对某个选择器定义多个属性时,则每个属性设置之间用分号分隔
D. CSS可以控制网页背景图片
参考答案: BCD
考生答案: 未做
- 125.
关于float的属性取值,正确的有( )
0.0 / 1.0 分
A. none
B. center
C. right
D. left
参考答案: ACD
考生答案: 未做
- 126.
关于text-indent的属性设置正确的是( )
0.0 / 1.0 分
A. text-indent:20px
B. text-indent:left
C. text-indent:right
D. text-indent:2em
参考答案: AD
考生答案: 未做
- 127.
float的属性值正确的有( )
0.0 / 1.0 分
A. left
B. none
C. center
D. right
参考答案: ABD
考生答案: 未做
- 128.
盒模型的属性包括( )
0.0 / 1.0 分
A. visible
B. font
C. padding
D. margin
参考答案: CD
考生答案: 未做
- 129.
HTML头部标签中,关于标签的作用说法正确的是( )
0.0 / 1.0 分
A. 在HTML5中新增字符编码的属性设置
B. 对页面的属性设置
C. 对搜索引擎的属性设置
D. 提供有关页面的元信息
参考答案: ABCD
考生答案: 未做
- 130.
下列关于input标签的type属性取值中,具有校验功能的是( )
0.0 / 1.0 分
A. radio
B. email
C. submit
D. url
参考答案: BD
考生答案: 未做
- 131.
在语句
<input type=* value=# size=n1 maxlength=n2>
中,*
可以是( )0.0 / 1.0 分
A. password
B. table
C. radio
D. text
参考答案: ACD
考生答案: 未做
- 132.
在CSS中,以下关于字体属性的说法正确的是( )
0.0 / 1.0 分
A. font-weight属性用来设置字体粗细
B. font-style属性可设置字体倾斜
C. size属性用来设置字体大小
D. font-variant属性用来设置字体样式
参考答案: AB
考生答案: 未做
- 133.
CSS文本属性中,文本对齐属性text-align的取值有( )
0.0 / 1.0 分
A. auto
B. justify
C. center
D. right
参考答案: BCD
考生答案: 未做
- 134.
关于列表,下列说法正确的是( )
0.0 / 1.0 分
A. 列表不能进行嵌套
B. 无序列表中可以嵌套有序列表
C. 无序列表中可以嵌套无序列表
D. 有序列表中可以嵌套无序列表
参考答案: BCD
考生答案: 未做
- 135.
关于JAVASCRIPT事件,下列说法正确的是( )
0.0 / 1.0 分
A. 当一个表单中的对象被单击时,执行的 JavaScript 事件是 onClick
B. 对象发生改变时调用的事件是 onChange
C. 当浏览器完成加载一个窗口或者加载完成框架集合中的所有框时,执行的 JavaScript 事件是 onLoad
D. 事件是用户对浏览器所做的特定的动作(操作),是实现交互操作的一种机制
参考答案: ACD
考生答案: 未做
- 136.
下列选项中,( )是HTML 5所支持的视频格式
0.0 / 1.0 分
A. Ogg
B. WebM
C. MP4
D. AVI
参考答案: ABC
考生答案: 未做
- 137.
关于HTML5,下列说法正确的是( )
0.0 / 1.0 分
A. 所有的主流浏览器都支持HTML5
B. HTML5主要是针对移动端进行了优化
C. HTML5解决了文档结构不明确的问题
D. HTML5兼容以前HTML4下浏览器
参考答案: CD
考生答案: 未做
- 138.
以下哪项属于html全局属性( )
0.0 / 1.0 分
A. form
B. class
C. img
D. id
参考答案: BD
考生答案: 未做
- 139.
下列选项中,可以控制英文单词间距及字母间距的属性是( )
0.0 / 1.0 分
A. word-spacing
B. Letter-spacing
C. text-indent
D. font-weight
参考答案: AB
考生答案: 未做
- 140.
下面哪些是
<link>
标签的常用属性( )0.0 / 1.0 分
A. href
B. rel
C. type
D. title
参考答案: ABC
考生答案: 未做
- 141.
下列选项中,可以去掉列表的项目符号的是( )
0.0 / 1.0 分
A. list-style-type:no
B. list-style-type :null
C. text-decoration: none
D. list-style-type:none
参考答案: CD
考生答案: 未做
- 142.
下列选项中,( )可以设置网页中某个标签的左外边距为5px
0.0 / 1.0 分
A. Margin:0 0 0 5px
B. Margin:5px 0 0 0
C. Padding-left:5px
D. Margin:0 5px
参考答案: AD
考生答案: 未做
- 143.
下列选项中,可以控制英文单词间距及字母间距的属性是( )
0.0 / 1.0 分
A. text-indent
B. word-spacing
C. font-weight
D. Letter-spacing
参考答案: BD
考生答案: 未做
- 144.
下列选项中,属于网页中常见的图片格式为( )。
0.0 / 1.0 分
A. psd
B. bng
C. gif
D. png
参考答案: CD
考生答案: 未做
- 145.
关于JavaScript中的Math对象的说法,正确的是( )
0.0 / 1.0 分
A. Math.round(-123.55)返回的结果为-123
B. Math.ceil(123.56)返回的结果是124
C. Math.floor()方法用于对数字进行下取整
D. Math.random()返回的结果范围为0到1,包括0和1
参考答案: BC
考生答案: 未做
- 146.
下列选项中,属于常见页面布局的方式是( )
0.0 / 1.0 分
A. 静态布局
B. 流式布局
C. 弹性布局
D. 固定布局
参考答案: BCD
考生答案: 未做
- 147.
下列选项中,属于音视频相关的方法是( )
0.0 / 1.0 分
A. load()
B. pause()
C. addTextTrack()
D. close()
参考答案: ABC
考生答案: 未做
- 148.
下列属于系统内置对象的是( )
0.0 / 1.0 分
A. 浏览器对象
B. 数学对象
C. 数组对象
D. 字符串对象
参考答案: BCD
考生答案: 未做
- 149.
下列选项中,有关CSS样式表优点的描述正确的是( )
0.0 / 1.0 分
A. 实现内容和表现的分离
B. 页面布局更加灵活
C. 不利于搜索引擎搜索
D. 有利于提高网页浏览速度
参考答案: ABD
考生答案: 未做
- 150.
下列数学对象的属性中描述正确的是( )
0.0 / 1.0 分
A. PI返回圆周率
B. LN2返回2的自然对数
C. E返回算术常量e,即自然对数的底数
D. SQRT2返回2 的平方根的倒数
参考答案: ABC
考生答案: 未做
判断题
- 151.
HTML5新增的URL表单类型本身就具有对表单数据进行验证的功能。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 152.
下面两条语句,盒子阴影模糊范围一样大。
box-shadow: 10px 10px 5px #888; box-shadow: 10px 20px 5px #888;
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 153.
事件句柄onkeydown表示当键盘被按下时触发事件
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 154.
CSS选择器的优先级从高到低分别为:通用选择器、标签选择器、类选择器、ID选择器。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 155.
字符串对象方法toLowerCase()是将字符串对象转换为大写
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 156.
在JavaScript中,使用内置对象Array创建数组对象。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 157.
表单元素是允许用户在表单中加载音频的元素。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 158.
HTML不区分大小写。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 159.
在表单控件中,对复选框应用checked属性,指定默认选中项。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 160.
如需定义元素内容与边框间的空间,可使用 padding 属性,并可使用负值
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 161.
JavaScript不声明变量的数据类型,变量可直接使用。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 162.
document.images [1] 引用的是文档中第1个图像。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 163.
利用float属性将3个div盒子水平排列,可以将3个盒子都设置float:right。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 164.
浮动元素在文档流中的原位置依然保留。
0.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: A
- 165.
浏览器中显示的所有文本、图像、音频和视频等信息都必须位于
<body>
标记内。1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 166.
JavaScript使用location对象来访问窗体加载时当前文档的URL。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 167.
如果某元素的 border-radius属性设置为 0,则这个元素的边框为正方形的角。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 168.
< cite>元素定义带有记号的文本,可以高亮显示文档中的文字以达到醒目的效果。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 169.
将字符串s中的所有字母变为小写字母的方法是s.toUpperCase()。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 170.
样式表的所有属性都具有继承性
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 171.
Javascript不允许用户定义自己的对象类型。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 172.
可使用align属性设定标题标签的对齐方式,如:left、right、up、down。
0.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: A
- 173.
在CSS中,用background-color属性改变背景颜色。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 174.
代码
<td rowspan="3">万柏林区</td>
表示的意思是将水平方向的三个单元格合并为一个单元格。1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 175.
position属性设定,表示定位的参照物是哪个元素;而定位位置则由top,bottom,left,right的取值决定。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 176.
与传统的表格布局相比,纯CSS布局与结构式HTML相结合可以实现将网页外观与结构相分离的作用
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 177.
在CSS中,list-style-position属性用于控制列表项目符号的位置。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 178.
HTML5新增的URL表单类型本身就具有对表单数据进行验证的功能。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 179.
用于播放 HTML5 音频文件的元素是audio。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 180.
Java与JavaScript是同一种语言
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 181.
JavaScript中允许两个日期对象相减,相减之后将会返回这两个日期之间毫秒数的差。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 182.
相对于GIF,PNG最大的优势是体积更小,支持alpha透明,并且颜色过渡更平滑,但PNG不支持动画。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 183.
在CSS中,样式background-position:-5px 10px代表的意义是“背景图片向左偏移5px向上偏移10px”。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 184.
<title>
与</title>
标记之间,用于输入HTML文档的标题。1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 185.
“HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 186.
“HTTP”是一种详细规定了浏览器和万维网服务器之间互相通信的规则。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 187.
在JavaScript数组中的元素索引号是从1开始计算的,然后依次加1。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 188.
相对于GIF,PNG最大的优势是体积更小,支持alpha透明(全透明,半透明,全不透明),并且颜色过渡更平滑,但PNG不支持动画。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 189.
可使用align属性设定
<title>
标签中标题的对齐方式,如:left、right、up、down。0.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: A
- 190.
块状元素都不可以定义自己的宽度和高度 。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 191.
属性href用于设置或返回音频/视频元素的当前来源。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 192.
在CSS中,用font属性改变元素的字体。
0.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: A
- 193.
所有的浏览器对同一个CSS样式的解析都相同,因此页面在不同浏览器下的显示效果完全一样。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 194.
属性href用于设置或返回音频/视频元素的当前来源。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 195.
多个页面需要应用相同样式时,应该使用外部样式表
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 196.
在表单控件中,对复选框应用checked属性,指定默认选中项。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 197.
块状元素可以作为其他元素的容器,它可以容纳其他行内元素和其他块状元素。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 198.
setInterval定时器与setTimeout定时器功能是一样的
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 199.
数学对象无需创建,通过把Math作为对象使用就可以调用其所有属性和方法。
0.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: B
- 200.
< cite >
元素定义带有记号的文本,可以高亮显示文档中的文字以达到醒目的效果。1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 201.
如果一个父元素的所有子元素都浮动起来,则这个父元素默认高度坍缩为0。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 202.
在CSS中,list-style-type属性用于控制列表项显示符号的类型。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: A
考生答案: A
- 203.
条件运算符的基本语法格式为“条件表达式?表达式1:表达式2”,它的含义是先计算条件表达式,若结果为true,计算表达式2,若结果为false,计算表达式1。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 204.
a:hover是鼠标激活时的超链接样式。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 205.
box-shadow属性不能设置盒子的阴影颜色,只能是黑色阴影。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B
- 206.
所有的浏览器对同一个CSS样式的解析都相同,因此页面在不同浏览器下的显示效果完全一样。
1.0 / 1.0 分
A. 正确
B. 错误
参考答案: B
考生答案: B