`

html布局面试题

    博客分类：
  • css
 
阅读更多

效果图：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>html布局面试题</title>	
</head>
<style type="text/css">
	body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td {margin:0;padding:0; border: 0;}
	body{font: 12px/1.2 SimSun, sans-serif;color: black;}
	#page{ width: auto; height: auto;}
	#header{background:#09c;width:700px;height:100px;margin: 0 auto;}
	h2,dt {font: 700 14px/1.2 SimSun, sans-serif;}
	#header 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;
	}
	#header h1 span {
		display: block;
		font: 400 12px/1.2 SimSun, sans-serif;
	}
	#header dl {
		float: right; 
		_display: inline;	
		margin: 12px 10px 0 0;
	}
	a:link,a:visited {
		color: black;
		text-decoration: none;
	}
	a:hover,a:active {text-decoration: underline;}
	#left a.more,#rigth a.more { position: absolute; bottom: 2px; right: 5px;}
	#content{width:700px; height: 300px;margin: 0 auto;}
	#content #left{width: 120px; height: 300px; background:#ff9900; float: left;position: relative;}
	#content #main{width: 65.5%; height: 300px; float: left;}
	#content #main div a{float: right; margin-top: 8px;}
	#content #main #main_1{background: #990000; height: 100px;}
	#content #main #main_2{background: #003399; height: 100px;}
	#content #main #main_3{background: #990000; height: 100px;}
	#content #rigth{width: 120px; height: 300px; background: #ffff0c; float: left;position: relative;}
	#footer{width:700px;background:#009966;margin: 0 auto; height: 100px;}
	#footer #footer_left{float: left;}
	#footer #footer_rigth{float: right;}
</style>
<body>


</body>
<div id="page">
	<div id="header">
		<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="content">
		<div id="left">
			<dl>
				<dt>栏目一</dt>
				<dd>宽度固定120px</dd>
				<dd>高度固定为300px</dd>
				<dd>色彩代码为：#FF9900</dd>
			</dl>
			<a href="###" class="more">更多&gt;&gt;</a>
		</div>
		<div id="main">
			<div id="main_1">
				<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="main_2">
				<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="main_3">
				<dl>
					<dt>栏目四</dt>
					<dd>页面居中时宽度为460px</dd>
					<dd>页面自适应时宽度自适应</dd>
					<dd>高度固定为100px</dd>
					<dd>色彩代码为：#990000</dd>
				</dl>
				<a href="###" class="more">更多&gt;&gt;</a>
			</div>
		</div>
		<div id="rigth">
			<dl>
				<dt>栏目五</dt>
				<dd>宽度固定120px</dd>
				<dd>高度固定为300px</dd>
				<dd>色彩代码为：#FFFF00</dd>
			</dl>
			<a href="###" class="more">更多&gt;&gt;</a>
		</div>
	</div>
	<div id="footer">
		<span id="footer_left">
			<dl>
			    <dt>页脚</dt>
				<dd>页面居中时宽度为700px</dd>
				<dd>页面自适应时宽度自适应</dd>
				<dd>高度固定为100px</dd>
				<dd>色彩代码为：#009966</dd>
			</dl>
		</span>
		<span id="footer_rigth">
			<h2>附：考题说明</h2>
			<p>请写出xhtml和css展现</p>
			<p>出图片中所有内容</p>
			<p><strong>没有标准答案</strong></p>
			<p>JS部分未来加上</p>
		</span>
	</div>
</div>
</html>
 

 

 

  • 大小: 40.6 KB
分享到：
| jQuery的滑动式动画导航栏
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML+CSS常见布局面试题总结

    下面将对HTML+CSS常见的布局面试题进行深入解析和总结。 1. **HTML布局基础** HTML元素通过`&lt;div&gt;`标签进行分组，形成网页的基本结构。`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`、`&lt;aside&gt;`、`&lt;footer&gt;`等语义...

    HTML+CSS面试题及答案

    ### HTML+CSS面试题知识点详解 #### 一、Web标准及其组成部分 - **定义**：Web标准是由一系列标准组成的集合，旨在确保Web内容在不同浏览器和设备上的兼容性和一致性。 - **制定机构**：主要由W3C（万维网联盟）和...

    html5+css3面试题答案.docx

    HTML5 和 CSS3 面试题答案 HTML5 和 CSS3 是当前 Web 开发中两个非常重要的技术，以下是关于 HTML5 和 CSS3 的一些常见面试题答案： 优雅降级和渐进增强 优雅降级（Gracious Degradation）和渐进增强...

    JS、CSS、HTML面试题

    这篇文档将深入探讨JS、CSS、HTML面试题中的常见知识点，帮助求职者更好地准备技术面试。 ### HTML面试题知识点： 1. **HTML基本结构**：理解HTML文档的基本结构，包括`&lt;!DOCTYPE&gt;`声明，`&lt;html&gt;`，`&lt;head&gt;`，`...

    html+css面试题追加

    以下是一些关于HTML和CSS面试题的详细解答，旨在帮助你深入理解这两个领域的关键知识点。 1. **HTML基础** - **什么是HTML？** HTML（HyperText Markup Language）是一种标记语言，用于创建网页结构和内容。 - **...

    2017前端面试题整理汇总

    2017年，随着Web技术的快速发展，前端面试题也日益多元化，涵盖了JavaScript、HTML、CSS等核心领域的深度和广度。这份"2017前端面试题整理汇总"旨在为求职者提供一个全面了解前端面试趋势和必备技能的平台。 1. **...

    2021前端HTML5面试题.pdf

    HTML5是现代网页开发的核心，其面试题涵盖了各种技术细节。HTML5的新特性包括但不限于： 1. 存储机制：HTML5提供了多种本地存储方式，如Cookie、sessionStorage和localStorage。Cookie是传统的存储方式，但有大小...

    40个重要的HTML5面试题及答案

    ### 重要知识点解析 ...以上总结涵盖了HTML5面试题及答案中提到的重要知识点，包括HTML5的基本概念、新特性以及与CSS、JavaScript的集成使用等方面，希望能够帮助你全面了解HTML5及其相关技术的发展现状和应用场景。

    2017前端开发最新面试题

    2017年，尽管已是几年前，但那时的前端面试题仍然能反映出当时的主流技术和趋势，对于今天的开发者来说，仍具有相当的学习价值。下面我们将详细探讨这些面试题所涵盖的知识点。 首先，前端开发的基础部分是必不可少...

    html+css+js面试题

    ### HTML+CSS+JS面试题知识点解析 #### 1. HTML是什么意思？ - **知识点**：HTML（HyperText Markup Language）是一种标记语言，用于构建网页结构。它通过一系列的标签来定义网页的不同部分，如标题、段落、列表等...

    js面试题面试题面试题

    根据给定的文件信息，以下是对每一道JS面试题的知识点进行详细解析： ### 第一题：编写一个方法求一个字符串的字节长度 #### 解析： 在这道题目中，我们需要编写一个函数来计算字符串的字节长度。这里的重点在于...

    HTML5面试题面试整理（含答案）最新版.docx

    HTML5 面试题总结 一、Doctype 的作用 Doctype（文档类型）是 HTML 文档的开头部分，位于 `&lt;html&gt;` 标签之前，告知浏览器的解析器，用什么文档类型规范来解析这个文档。DOCTYPE 不存在或格式不正确会导致文档以...

    一道经典的前台程序员面试题

    这道"经典的前台程序员面试题"显然关注的是前端布局技术，特别是使用DIV和CSS来构建网页结构。这里，我们重点讨论这个话题，并通过提供的压缩包文件名暗示的可能内容进行深入探讨。 首先，让我们理解`DIV`元素。在...

    经典的CSS面试题（含答案）

    在CSS（层叠样式表）领域，面试题通常涵盖了各种概念、技巧和最佳实践，旨在评估候选人的基础知识、问题解决能力和实践经验。以下是一些经典的CSS面试题及其详细解答： 1. **什么是CSS？** CSS（Cascading Style ...

    网页编程面试题大全、网络面试

    在网页编程方面，面试题可能涵盖HTML、CSS、JavaScript等基础知识。HTML是构建网页结构的基础，面试中可能会涉及标签的使用、语义化元素的理解以及表单控件的应用。CSS则关乎网页的样式和布局，面试官可能会询问选择...

    前端面试题汇总.pdf

    前端面试题汇总主要涵盖HTML和CSS相关的重要知识点，旨在考察面试者对于网页构建的基础知识、浏览器兼容性、页面性能优化以及SEO策略等的理解。以下是对这些面试题的详细解析： 1. **浏览器测试**：面试者应熟悉...

    HTML面试题

    ### HTML面试题详解 #### 一、Div+CSS布局与Table布局的优点对比 **问题:** Div+CSS的布局相比Table布局有哪些优势？ **答案:** 使用Div+CSS进行网页布局相较于传统的Table布局，具有以下明显的优势： 1. **改版...

    351道前端工程师HTML、CSS面试题和训练题（含答案）.docx

    本文档提供了多种HTML和CSS面试题和训练题，涵盖了HTML和CSS的多个方面，包括布局、样式、交互等。 一、HTML面试题 1. HTML结构 tags的使用 * 什么是HTML结构 tags？如何使用？ * HTML结构 tags有什么作用？ 2. ...

    前端开发面试题.html

    非常全面的前端开发面试题： HTML&CSS;： 对Web标准的理解（结构、表现、行为）、浏览器内核、渲染原理、依赖管理、兼容性、CSS语法、层次关系，常用属性、布局、选择器、权重、盒模型、 Hack、CSS预处理器、CSS3...

Magicbox
Global site tag (gtag.js) - Google Analytics