`

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常见布局面试题总结WEB前端常见布局面试题总结

    前端面试题总结.docx

    前端面试笔记总结，html ,css ,html5 ,css3 ,js,vue基础的面试题，HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。

    前端开发面试题.html

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

    前端最全汇总面试题及答案.docx

    前端面试题以及答案 HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript： 数据类型、面向对象、继承、闭包、...

    JAVA面试题最全集

    68.GUI布局管理器的使用，FlowLayout,BorderLayout,GridBagLayout 69.如何构造一棵树？选择树的一个节点时，如何得到这个节点？ 70.向编辑框中输入字符时，如何控制只输入整数？ 71.描述使用JDBC连接数据库的...

    front-end-interview:2021前端面试题汇总

    个人经验：这部分面试题一般笔试考知识点多一些（多背），面试考布局更多一些（多实践）。所以CSS我拆成了两部分，把布局单独拧出来了。 2.1 知识点 + 部分面试题 2.2 布局 3 JavaScript 这部分是面试重中之重，基本...

    总计近700页的超全面的前端面试题、笔试题大合集.rar

    总计近700页的超全面的前端面试题、笔试题大合集，基本涵盖了前端技能树上各类常用技术的面试、笔试的常考点、高频考点，不用再麻烦的零零碎碎的到处搜集整理了，主要内容包括： HTML部分、CSS部分、JS部分、TS部分...

    前端vue面试题大全汇总

    4、div+css 的布局较table 布局有什么优点？ 5、img 的alt 与title 有何异同？ strong 与em 的异同？ 6、你能描述一下渐进增强和优雅降级之间的不同吗? 7、为什么利用多个域名来存储网站资源会更有效？ 8、请谈一下...

    阿里巴巴面试题leetcode-anxiaoyi.github.io:anxiaoyi.github.io

    阿里巴巴面试题leetcode 赵坤的个人网站 前端优化指南 初级/中级/高级前端面试进阶题 收录各大公司最全前端面试题 HTML HTML CSS 布局 JavaScript Array Basic 浏览器 浏览器 输入 URL 后发生了什么 综合性解决方案 ...

    面试题：三行三列布局、表格有合并且不准嵌套使用表格

    有个面试题，要求：三行三列布局，其中，第一行的第二列和第二行的第二列合并，第三行的第二列和第三列合并，不准嵌套使用表格 复制代码代码如下: &lt;!DOCTYPE HTML &gt; &lt;html lang=”ch-CN”&gt; &lt;head&gt; &...

    网易校园招聘历年经典面试题汇总：前端岗1

    （3）、低版本浏览器不支持HTML5标签怎么解决 （4）、用js使低版本浏览器支持HTML5标签 底层是怎么实现的 （5）、实现一个布局：左边固定宽度为200，

    圣杯布局和双飞翼布局解析.docx

    圣杯布局和双飞翼布局 （典型的面试题：加载逻辑） 两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间部分在DOM结构上优先，以便先行渲染。（核心目的：先解析中间栏，展示当前页面的...

    前端面经文档-技术要点-面试编程题-资源-html-前端-web-计算机-计算机前端面试题目-校招

    ★ 熟练HTML、CSS、JavaScript开发，熟悉HTML5、CSS3的新特性、动画实现、flex布局、CSS阻塞 情况以及优化HTML5新特性 答：语义化标签、音视频、画布、矢量图、本地存储 1、语义化标签，比如header、footer、nav、...

    前端开发面试题–htmlcss篇

    1.说一下盒子模型 1.1 标准盒模型（默认值） box-sizing: content-box ：宽和高代表的仅仅是盒子内容，特点是给盒子加边框和内边距会撑大盒子 ...1.3 弹性盒模型（flex布局） 是当前页面需要适应不同的屏幕大

    HTML5 常见面试题之PC端和移动端区别介绍

    移动端屏幕相对窄小，一般是单列显示，最多也只能是双列+响应式，但是PC端的屏幕大，布局可以更加灵活。 2）使用习惯。移动端的操作尺度比较大，单击误差大，所以按钮、链接等元素比较设计的大一些。而P

    Front-End-Interview:前端面试题

    前端面试知识点 html，css DOCTYPE 声明必须是 HTML 文档的第一行，位于 `` 标签之前, 不是html标签，它是指示浏览器页面使用哪种HTML版本进行编写的指令， 在html 4.01中，&lt;!DOCTYPE&gt;声明引用DTD，以为html ...

    CSS Float布局过程与老生常谈的三栏布局

    使用CSS布局网页，那是前端的基本功了，什么两栏布局，三栏布局，那也是前端面试的基本题了。一般来说，可以使用CSSposition属性进行布局，或者使用CSSfloat属性布局。前者适合布局首页，因为首页上的内容往往可以...

    HTML入门-页面结构&基础标签

    (面试题)三、三个版本和一个标准（面试题）四、html5的扩展五、html创建文件（重点）六、html格式（重点）七、html基本结构（重点）八、注释九、基础标签（重点）十、文本标签十一、布局标签十二、特殊符号 ...

    高级java笔试题-chenhaoact-fe-learn:我的前端学习大汇总。前端技术学习收获总结整理，学习资源，职业规划，面试题，学习计划

    前端技术学习收货总结整理，学习资源，职业规划，面试题，学习计划大汇总。 会一直更新,如果觉得有帮助,就去github上 star一下吧： 目录 html开发中遇到问题的解决整理与技巧方法总结（包含html5） 最好统一使用flex...

    2022前端企业高频问答题

    前端面试题以及答案 HTML&CSS： 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。 JavaScript： 数据类型、面向对象、继承、闭包、插件...

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