<!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. init进程 && 解析Android启动脚本init.rc && 修改它使不启动android && init.rc中启动一个sh文件

    Android启动后,系统执行的第一个进程是一个名称为init 的可执行程序.提供了以下的功能:设备管理.解析启动脚本.执行基本的功能.启动各种服务.代码的路径:system/core/init,编译 ...

  2. Drainage Ditches(Dinic最大流)

    http://poj.org/problem?id=1273 用Dinic求最大流的模板题,注意会有重边. 邻接矩阵建图 #include<stdio.h> #include<str ...

  3. POJ_1631_Bridging_Signals_(动态规划,LIS)

    描述 http://poj.org/problem?id=1631 铁路左右相连,要求去掉一些边,使得剩下的边不交叉,求剩余边数的最大值. Bridging signals Time Limit: 1 ...

  4. Jersey+Spring+Maven（转）

    spring和maven的搭建参考相关文档.本文只介绍与jersey有关配置. 一.jersey在maven中的依赖包 <!-- jersey --> <dependency> ...

  5. ES2015 (ES6)

    是时候使用ES 2015了 你可能不再需要Underscore BABEL Grunt 先 babel 再用 babel 后的文件 uglify 去掉严格模式.严格模式下全局的this转成了undef ...

  6. cocos2d-x 添加自定义字体---中文,英文

    1: 找到字体   xxx.ttf 2: 在xcode工程的 Info.plist文件中添加key Fonts provided by application,   或者 UIAppFonts(raw ...

  7. xcode duplicate symbol _GAD_MD5 解决方法

    添加了mobi的广告平台后,在Device状态打包时,出现此错误. duplicate symbol _GAD_MD5 in: 解决方法: Targets ->Build Setting  中设 ...

  8. Android4.0 -- UI控件之 Menu 菜单的的使用(二)

    上一讲我们讲解了android中在代码或者xml文件中定义菜单,这一讲我们继续来讲解一下定义菜单的其他方式:创建上下文的菜单.查看API文档 Menus :Creating Contextual Me ...

  9. HDU-2561 第二小整数

    http://acm.hdu.edu.cn/showproblem.php?pid=2561 第二小整数 Time Limit: 3000/1000 MS (Java/Others)    Memor ...

  10. CentOS搭建GIT服务器【一】-仓库搭建以及基于gitosis的SSH方式访问

    1.安装GIT核心 yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel gcc g ...