<!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. Android JNI使用方法

    经过几天的努力终于搞定了android JNI部分,下面将我的这个小程序和大家分享一下.android JNI是连接android Java部分和C/C++部分的纽带,完整使用JNI需要Java代码和 ...

  2. 更好的 SQL 模式的 10 条规则

    更好的 SQL 模式的 10 条规则 2015-06-17 11:57:392353浏览1评论 在创建新表和数据仓库时,要做很多决定.一些在当时似乎无关紧要的地方,却让你和用户在数据库的生命期内感到痛 ...

  3. 启动redis出现Creating Server TCP listening socket *:6379: bind: No such file or directory

    E:\redis>redis-server.exe redis.windows.conf [8564] 10 Oct 20:00:36.745 # Creating Server TCP lis ...

  4. PEP Index > PEP 339 -- Design of the CPython Compiler 译文

    http://www.python.org/dev/peps/pep-0339/ PEP: 339 标题: CPython的编译器设计 版本: 425fc5598ee8 最后修改: 2011-01-1 ...

  5. ☀【Grunt】package.json, Gruntfile.js, npm install, grunt

    npm install --registry http://registry.npm.taobao.org/ 切换源 Grunt.js 在前端项目中的实战http://beiyuu.com/grunt ...

  6. 实验记录贴 —— 账号同步实验 RTX 和 LDAP（AD域）

    目前,公司有多个系统,RTX,邮箱(MD),OA,NC. 这些系统之间,如果要实现单点登录的话,账户肯定需要同步,或者某一种映射机制. 如果所有数据都和中央账号数据库(LDAP,这里是AD域)看齐,那 ...

  7. MS SQL Server 如何得到执行最耗时的前N条T-SQL语句-

    --得到最耗时的前N条T-SQL语句 --适用于SQL SERVER 2005及其以上版本 --给N赋初值为30 ;with maco as ( select top (@n) plan_handle ...

  8. PowerDesigner 如何生成数据库更新脚本

    最近在学习使用PowerDesigner 这个数据库设计工具,发现真的很强大,可以做很多事情,其中就涉及到如果数据库要进行更新了怎么办,主要是增加表,最麻烦的是修改字段名称,增加字段等操作,遇到主要的 ...

  9. Bzoj 4034: [HAOI2015]T2 树链剖分,子树问题,dfs序

    4034: [HAOI2015]T2 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1841  Solved: 598[Submit][Status] ...

  10. 利用Dnspod api批量更新添加DNS解析【python脚本】 - 推酷

    利用Dnspod api批量更新添加DNS解析[python脚本] - 推酷 undefined