<!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. 织梦内容管理系统(DedeCms) 小说模块insert注入漏洞

    漏洞版本: Dedecms 漏洞描述: DedeCms是免费的PHP网站内容管理系统. 织梦内容管理系统(DedeCms) 以简单.实用.开源而闻名,是国内最知名的PHP开源网站管理系统,也是使用用户 ...

  2. 你认为A和B所在方格颜色相同吗?

    [你认为A和B所在方格颜色相同吗? ]据说全世界只有0.003%的人和photoshop能看出它们的颜色是相同的. 我属于那 99.9997% 的人...因为我不是神...

  3. HTMLTestRunner 自动化测试报告

    http://tungwaiyip.info/software/HTMLTestRunner.html下载,将下载后的文件放在python的Lib目录下 # -*- coding:utf-8 -*- ...

  4. JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)

    本节讲Dom和Bom模型概念讲解(节点获取,window对象). out.js: 写了2个输出到页面的函数. function println(param){ document.write(param ...

  5. BWT(Burrows-Wheeler Transformation)的讲解及java实现

    BWT(Burrows-Wheeler Transformation) 1.什么是BWT 压缩技术主要的工作方式就是找到重复的模式,进行紧密的编码. BWT(Burrows–Wheeler_trans ...

  6. Java Servlet 工作原理问答

    导读 本文来自stackoverflow的问答,讨论了Java Servlet的工作机制,如何进行实例化.共享变量和多线程处理. 问题:Servlet是如何工作的?Servlet 如何实例化.共享变量 ...

  7. Java的垃圾回收概述

    Java语言建立了垃圾收集机制,即GC,用以跟踪正在使用的对象和发现并回收不再使用的对象,垃圾清理势在必行,以下讲述java垃圾收集算法. 1.Java垃圾收集算法的核心思想 Java语言建立了垃圾收 ...

  8. JAVA 面向对象-2-继承(Inheritance)

    i.继承(Inheritance) 1.继承的概念 继承:在面向对象编程的过程中,通过扩展一个已有的类,并继承该类的属性和行为,来创建一个新的类. 继承是面向对象编程最重要的特征之一. 继承的优点:1 ...

  9. struts2 表单处理

    在这篇教程里我们将探究如何处理表单提交.本文例子介绍: javabean存储表单数据 在action中重写validate方法进行简单的校验 创建一个struts2表单并和javabean匹配 jav ...

  10. 实时的.NET程序错误监控产品Exceptionless开源了

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:实时的.NET程序错误监控产品Exceptionless开源了.