html-css试卷

测试说明1、此试卷分三部分：HTML测试，CSS测试，综合测试；HTML部分主要测试的是HTML标签，CSS部分主要测试的是CSS应用，综合部分测试的是二者的结合应用；2、HTML测试，请将代码都写在html_test.html文件里；3、CSS测试，请将html代码写在css_test.html文件里，css代码写在style01.css文件中；4、综合测试，请将html代码写在complex.html里，css代码写在style02.css中；5、HTML测试中用到的样式请全部用HTML属性实现，CSS测试和综合测试中的样式实现请用CSS代码，也可以用HTML属性。6、此次测试所有用到的图片都放在images文件下；7、此次测试中如果有日文，可以换成其它文字；HTML测试1.请参照下图做一张表格效果如下：2.用img标签显示一张图片（sushi2_thumb.jpg）效果如下：3.将下面的效果用列表标签体现出来。效果如下：4.用form标签做一个form表单。效果如下：要求性别部分，当点击“男女”文字部分也可以选中/取消选中radio.CSS测试1.按以下要求给div设置样式给下面div标签加一个class属性,并在样式文件（style.css）中给它加上样式，单位请用像素：宽：300，高：100，边框宽度：1像素，边框类型：实线，边框颜色：黑色，里面的文字居中显示，并设置外边距上：10，下10，左20，右：30；内边距：上：10，下：10，左：20，右：20。背景颜色：#cccccc，字体大小：20效果如下：2.按以下要求给div设置背景图片div宽：300，高：100，边框宽度：1，边框类型：点划线，边框颜色：黑色，背景图片：sushi2_thumb.jpg。效果如下：3.用表格标签和css样式实现以下效果。效果如下：4.float布局用float属性实现以下DIV左右布局，HTML标签给你们一个参考，如下，也可自己写，只要效果实现就行。divclass=wrapdivclass=columnLcolumnleft/divdivclass=columnRcolumnright/divdivclass=cb/div/div效果如下：5.Position布局用Position来实现以下效果。HTML代码给你们一个参考，如下，也可自己写，只要效果实现就行。divclass=titleBarh3class=titletitletitletitle/h3divclass=btninputname=新規作成type=buttonvalue=新規作成//div/div效果如下：综合测试请参照以下两个页面，做出和它们一样的效果。（如看不清，请看原图：/img/sample01.png,/img/sample02.png）