<!DOCTYPE html>

<html lang="zh-CN"><head>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>爆牙齿的Web标准面试题 - 习题与演示 - CSS魔法</title>

<meta http-equiv="X-UA-Compatible" content="IE=7">

<meta name="Keywords" >

<meta name="Description" content="这是一个CSS面试题/练习题/演示/教程的演示页面，涉及HTML/XHTML/CSS/JavaScript等网页制作技术，遵循Web标准，力推CSS布局与网站重构，关注网页的可用性/可访问性/用户体验。">

<style>

* {margin:0;padding:0;}

body {

    font: 12px/1.2 SimSun, sans-serif;

    color: black;

    background: white;

}

h2,dt {

    font: 700 14px/1.2 SimSun, sans-serif;

}

p,dd {

    line-height: 1.25;

}

a:link,a:visited {

    color: black;

    text-decoration: none;

}

a:hover,a:active {

    text-decoration: underline;

}

a.more {

    position: absolute;

    bottom: 2px;

    right: 5px;

}

#dv_wrap {

    margin: 0 auto;

    max-width: 700px;

    _width: expression(documentElement.clientWidth<700?'auto':'700px');  /** 模拟max-width @ IE6 **/

}

#dv_wrap div {

    overflow: hidden;

}

#dv_head {

    height: 100px;

    background: #09c;

}

h1 {

    float: left; _display: inline;

    margin: 35px 0 0 20px;

    font: 700 25px/1.2 Arial, Helvetica, SimHei, sans-serif;  /** 标准浏览器得到更好的中英混排效果 **/

    *font: 700 25px/1.2 SimHei, sans-serif;

    text-align: right;

}

h1 em {

    font: italic 700 12px/1.2 Verdana, Arial, Helvetica, sans-serif;

}

h1 span {

    display: block;

    font: 400 12px/1.2 SimSun, sans-serif;

}

#dv_head dl {

    float: right; _display: inline;

    margin: 12px 10px 0 0;

}

#dv_col-1,

#dv_col-5 {

    position: relative;

    width: 120px;

    height: 300px;

}

#dv_col-2,

#dv_col-3,

#dv_col-4 {

    position: relative;

    _left: -3px;  /** 修复3px bug @ IE6 **/

    margin: 0 120px;

    _margin: 0 117px 0 120px;  /** 修复3px bug @ IE6 **/

    height: 100px;

}

#dv_col-1 {

    float: left; _display: inline;

    background: #FF9900;

}

#dv_col-2 {

    background: #990000;

}

#dv_col-3 {

    background: #003399;

}

#dv_col-4 {

    background: #990000;

}

#dv_col-5 {

    float: right; _display: inline;

    margin-top: -300px;

    background: #FFFF00;

}

#dv_col-1 dl,

#dv_col-5 dl {

    padding: 2px 0 0 4px;

}

#dv_col-2 dl,

#dv_col-3 dl,

#dv_col-4 dl,

#dv_foot dl {

    padding: 10px 0 0 10px;

}

#dv_foot {

    clear: both;

    height: 100px;

    background: #009966;

}

#dv_note {

    float: right; _display: inline;

    margin-top: -100px;

    padding: 10px 10px 0 0;

    width: 120px;

}

#dv_note strong {

    font-weight: 400;

    color: white;

}

#dv_back {

    margin: 0 auto;

    padding-top: 20px;

    width: 700px;

}

</style>

</head>

<body>

<div id="dv_wrap">

    <div id="dv_head">

        <h1>爆牙齿的Web标准面试题 <em>beta</em> <span>2006 7 11</span></h1>

        <dl>

            <dt>页头</dt>

                <dd>页面居中时宽度为700px</dd>

                <dd>页面自适应时宽度自适应</dd>

                <dd>高度固定为100px</dd>

                <dd>色彩代码为：#0099CC</dd>

        </dl>

    </div>

    <div id="dv_col-1">

        <dl>

            <dt>栏目一</dt>

                <dd>宽度固定120px</dd>

                <dd>高度固定为300px</dd>

                <dd>色彩代码为：#FF9900</dd>

        </dl>

        <a href="###" class="more">更多&gt;&gt;</a>

    </div>

    <div id="dv_col-2">

        <dl>

            <dt>栏目二</dt>

                <dd>页面居中时宽度为460px</dd>

                <dd>页面自适应时宽度自适应</dd>

                <dd>高度固定为100px</dd>

                <dd>色彩代码为：#990000</dd>

        </dl>

        <a href="###" class="more">更多&gt;&gt;</a>

    </div>

    <div id="dv_col-3">

        <dl>

            <dt>栏目三</dt>

                <dd>页面居中时宽度为460px</dd>

                <dd>页面自适应时宽度自适应</dd>

                <dd>高度固定为100px</dd>

                <dd>色彩代码为：#003399</dd>

        </dl>

        <a href="###" class="more">更多&gt;&gt;</a>

    </div>

    <div id="dv_col-4">

        <dl>

            <dt>栏目四</dt>

                <dd>页面居中时宽度为460px</dd>

                <dd>页面自适应时宽度自适应</dd>

                <dd>高度固定为100px</dd>

                <dd>色彩代码为：#990000</dd>

        </dl>

        <a href="###" class="more">更多&gt;&gt;</a>

    </div>

    <div id="dv_col-5">

        <dl>

            <dt>栏目五</dt>

                <dd>宽度固定120px</dd>

                <dd>高度固定为300px</dd>

                <dd>色彩代码为：#FFFF00</dd>

        </dl>

        <a href="###" class="more">更多&gt;&gt;</a>

    </div>

    <div id="dv_foot">

        <dl>

            <dt>页脚</dt>

                <dd>页面居中时宽度为700px</dd>

                <dd>页面自适应时宽度自适应</dd>

                <dd>高度固定为100px</dd>

                <dd>色彩代码为：#009966</dd>

        </dl>

    </div>

    <div id="dv_note">

        <h2>附：考题说明</h2>

        <p>请写出xhtml和css展现出图片中所有内容</p>

        <p><strong>没有标准答案</strong></p>

        <p>JS部分未来加上</p>

    </div>

</div>

<div id="dv_back">

    <a href="http://www.cssmagic.net/">&lt;&lt; 返回首页</a>

</div>

<!--=======================================================-->

<script>

var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-17208063-4']); _gaq.push(['_trackPageview']);

(function() {var ga = document.createElement('script'); ga.async = true; ga.src = 'http://www.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();

</script>

<!--=======================================================-->

</body></html>

原文地址：http://www.cssmagic.net/

爆牙齿的 Web 标准面试题 【转藏】的更多相关文章

  1. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  2. web前端面试试题总结---html篇

    HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...

  3. 深入理解Web标准（网站标准）

    深入理解Web标准(网站标准)   我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而 ...

  4. 2016最全的web前端面试题及答案整理

    面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...

  5. 理解Web标准（网站标准）

    我觉得一名Web前端应该好好理解Web标准到底是什么,为什么要在我们的实际实践中遵循Web标准. 什么是Web标准.百度百科的解释是: WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分 ...

  6. HTML+CSS总结/有关于web标准的总结

    关于这一话题,我认为我们需要解决的问题有:什么是web标准?定义web标准的目的?遵循web标准的好处? 一.百度百科对web标准的解释: WEB标准不是某一个标准,而是一系列标准的集合. 网页的主要 ...

  7. web前端面试试题总结---其他

    其他问题 原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的? 你遇到过比较难的技术问题是?你是如何解决的? 设计模式 知道什么是singleton, factory, strategy ...

  8. web前端面试试题总结---css篇

    CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...

  9. web前端面试试题总结---javascript篇

    JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...

随机推荐

  1. Cocos2d—X游戏开发之CCScrollView（滑动视图）（十二）

    CCScrollView在Cocos2d-X引擎中主要使用在图片尺寸远大于屏幕尺寸的时候使用. 总体来说,使用起来比较简单. 一个是CCScrollView控件本身,一个是CCScrollViewDe ...

  2. 【2015年最新App Store退款流程详解】最详细AppStore退款流程图文教程

    本帖最后由 想吐就吐出来 于 2015-7-1 14:25 编辑 如果你一不小心买错了iOS软件,从App Store上下载了游戏或软件后悔了,那怎么办?可以退款吗?答案是可以的!苹果这点还是很人性化 ...

  3. asp.net获取当前页面文件名,参数,域名等方法。统一session验证和权限验证的方法

    转:http://blog.csdn.net/llll29550242/article/details/6054323 ASP.net后台获取当前页面的文件名 System.IO.Path.GetFi ...

  4. ashx文件的使用

    转自:http://www.cnblogs.com/Tally/archive/2013/02/19/2916499.html ashx是什么文件 .ashx 文件用于写web handler的..a ...

  5. 单实例 winform zz

    (引用了 Microsoft.VisualBasic.ApplicationServices)SingleInstanceApplicationWrapper.cs using System.Wind ...

  6. structs 源码示例

    http://blog.csdn.net/wwwihpccn/article/details/5725518

  7. I Hate It HDOJ---1754

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  8. HDU-1391 Number Steps

    http://acm.hdu.edu.cn/showproblem.php?pid=1391 Number Steps Time Limit: 2000/1000 MS (Java/Others)   ...

  9. 论SOA架构的几种主要开发方式【转】

           面向服务架构soa以其独特的优势越来越受到企业的重视,它可以根据需求通过网络对松散耦合的粗粒度应用组件进行分布式部署.组合和使用.服务层是SOA的基础,可以直接被应用调用,从而有效控制系 ...

  10. [NOIP2005]采药

    2005年NOIP全国联赛普及组 [题目描述 Description] 辰辰是个天资聪颖的孩子,他的梦想是成为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个 ...