<!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. Linux的线程同步对象：互斥量Mutex，读写锁，条件变量

        进程是Linux资源分配的对象,Linux会为进程分配虚拟内存(4G)和文件句柄等 资源,是一个静态的概念.线程是CPU调度的对象,是一个动态的概念.一个进程之中至少包含有一个或者多个线程.这 ...

  2. 【转】iOS开发：开发证书知识点总结

    原文网址:http://www.jianshu.com/p/9c166a5e4930 1. Error: An App ID with identifier "*" is not ...

  3. 【转】linux设备驱动之MMC SD卡——核心层简单分析

    原文网址:http://blog.chinaunix.net/uid-28685940-id-3889878.html /*************************************** ...

  4. TeamViewer 远程时出现：现在无法捕捉画面。这可能是由于恰的用户切换或远程桌面会话断开、最小化

    关掉远程访问主机的TeamViewer ,再重新打开软件

  5. BASH小脚本

    1.查找当前目录中所有大于500M的文件,把这些文件名写到一个文本文件中,并统计其个数. find ./ -size +500M -type f | tee file_list | wc -l 2.在 ...

  6. Bzoj 3450: Tyvj1952 Easy 期望/概率,动态规划

    3450: Tyvj1952 Easy Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 431  Solved: 325[Submit][Status] ...

  7. Axure RP 8.0 中继器初体验

    为了解决增删等复杂交互的问题,中继器是个不错的选择. 拖拽出一个默认的中继器 中继器的数据集感觉就像是数据库一样,在右边检视窗口中可以看到中继器的默认数据集,可以理解成一张二维表.默认有1列,现成的3 ...

  8. webview改变网页宽度

    - (void)webViewDidFinishLoad:(UIWebView *)webView { //修改服务器页面的meta的值 NSString *meta = [NSString stri ...

  9. Morris Traversal 二叉树遍历。

    那天做了个SWAP NODE的题,要求constant space,不得不Morris Traversal. 稍微研究了一下,真正意义上的O(1)space对二叉树进行遍历.好像是1979年的算法. ...

  10. SSM拦截器应用

    1.创建工具包 2.编写拦截器业务逻辑类容(在此为验证登录效果) @Override public void doFilter(ServletRequest req, ServletResponse ...