html布局面试题

最新推荐文章于 2024-07-25 18:43:45 发布
最新推荐文章于 2024-07-25 18:43:45 发布
阅读量139 收藏
点赞数
分类专栏： css 文章标签： 面试 xhtml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ceoajun/article/details/84368895
版权

效果图：



<!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>
 

 

 

ceoajun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html面试题
qq_38801934的博客
05-05 314
1.html语义化（对语义化标签的理解） 好处： 对个人来讲，使用语义化能让自己的思路、代码结构更清晰 对团队来讲，别人维护和二次开发你的代码会更容易 对公司经营来讲，代码结构化很清晰、语义化很强的网站在搜索迎引擎当中被蜘蛛爬虫收到的几率更高，算是seo优化的一部分。 对用户来讲，语义化好的标签即使代码没有css也能呈现出良好的结构 行动： 少使用或者不适用div和span标签 用p标签代替div标签 强调文本放在strong或者em标签中，不要用b和i标签 使用table时，标题要用caption，
HTML面试题
qq_43141894的博客
06-16 149
HTML5 有哪些新特性？ Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义? 如何实现浏览器内多个标签页之间的通信？ ⾏内元素有哪些？块级元素有哪些？空(void)元素有哪些？⾏内元 素和块级元素有什么区别？ 简述⼀下src与href的区别？ cookies,sessionStorage,localStorage 的区别？ HTML5 的离线储存的使用和原理？ 怎样处理 移动端 1px 被 渲染成 2px 问题？ 浏览器是如何渲染页面的？ iframe 的优缺点？ Can
html常见面试题
m0_57391092的博客
10-05 4135
html常见面试题
html布局面试问题,css常见布局面试题集
weixin_36415835的博客
06-30 231
1.左列定宽，右列自适应浮动：leftright.left{width: 100px;background: red;float: left;}.right{background: yellow;}绝对定位leftright.wraper{width: 100%;position: relative;}.left{width: 100px;background: red;}.right{posit...
Vue前端面试题总结 响应式布局详解（一）
Rick_and_mode的博客
09-15 2301
1、 响应式布局如何实现 我们如何理解响应式布局 响应式布局是为了在开发中网站适应不同分辨率 不同设备的下提供的方法 1.1 常见的响应式布局分别有 1.百分比布局 2.利用媒体查询（css3新增特性 @media） 3.rem 响应式布局 4.vw vh 响应式布局 5.利用弹性盒子 Flex 布局 百分比布局 利用相对于父元素的设置 子元素会随着父元素的设置而改变 是不是这样理解有点难 到底是对于那个父元素的设置会导致根元素的改变 子元素的height或width中使用百分比，是相对于子元素的直
2018前端最新 HTML布局 面试题
陈浩然哦 的博客
03-25 1355
布局面试 一、flex弹性布局， 可以简单的使一个 div 元素居中（包括水平和垂直居中） CSS片段： - 水平居中 .box{ display: flex; justify-content:center; } - 垂直居中 .box{ display: flex; width: 500px; height: 20rem; ...
前端常见面试题：响应式布局
lucky_girl_girl的博客
02-22 3887
1.pc端响应式布局：是指屏幕大小缩放时样式发生相应改变。运用媒体查询@media来设置。 2.移动端响应式布局：是指根据移动端不同设备实现页面正常显示的方案。运用以下三种方案布局：a. 百分比布局。b. flex布局。c. rem布局 ...
html面试题.docx
10-06
列合并 rowspan)，CSS 布局的代码更加简洁，易于维护。2、对于搜索引擎优化（SEO），CSS...以上是对 HTML 面试题的详细解答，涵盖了 HTML 结构、语义化、布局、属性、元素等方面的知识，希望能对你的面试准备有所帮助。
前端面试题之Html相关题集.zip
06-21
以上是HTML相关面试题集可能涉及的一些关键知识点，深入理解和熟练掌握这些内容对于前端开发者来说至关重要，也是面试中常被考察的部分。通过系统学习和实践，可以提升HTML技能，更好地应对前端面试。
HTML+CSS常见布局面试题总结
10-31
下面将对HTML+CSS常见的布局面试题进行深入解析和总结。 1. **HTML布局基础** HTML元素通过`<div>`标签进行分组，形成网页的基本结构。`<header>`、`<nav>`、`<main>`、`<article>`、`<aside>`、`<footer>`等语义...
html常见面试题及答案/事件流
屈小康
08-03 2201
1、css优先级计算规则是怎样的？ ！important的优先级为最高。 ID > class > 元素选择器 但是外联样式不一定低于内联样式。 一般的时候行内样式大于外联样式和内联样式。 2、重置（resetting）CSS 和 标准化（normalizing）CSS 的区别是什么？ 重置（Resetting）： 重置意味着除去所有的浏览器默认样式。对于页面所有的元素，像margin、padding、font-size这些样式全部置成一样。你将必须重新定义各种元素的样式。 标准化（Nor
前端面试必备总结：页面布局5种解决方案
tomorrownan的博客
07-12 1916
在一面或者二面中，页面布局是经常问到的点，昨天在慕课网听了老师讲的课，今天自己敲下代码整理下。主要解答三栏布局下面两题目，两栏布局与三栏布局相似。 1.高度已知，左右宽度固定，使中间自适应。 2.上下高度固定，使中间自适应 1.左右宽度固定，中间自适应 float解决方案 css实现： html *{ padding: 0px; margin: 0px; } .box div{ min-...
html+css面试题集锦（一）
weixin_38606332的博客
07-22 1万+
1、对WEB标准以及W3C的理解与认识？ web标准简单来说可以分为结构、表现和行为，其中结构主要是有HTML标签组成，或者通俗点来讲，在页面Body中我们写入的标签都是为了页面的结构，表现指css样式表，通过css可使页面的结构标签更具美感，行为是指页面和用户具有一定的交互，同时页面结构或者行为发生变化，主要是js组成。 web标准一般是将该三部分独立分开，使其更具有模块化，但一般行为发生变...
HTML5 面试题~响应式布局、兼容浏览器
石虎
01-21 3787
//联系人:石虎 QQ:1224614774 昵称:嗡嘛呢叭咪哄 一、概念 1、谈谈对响应式布局的看法。      响应式布局有缺点也有优点。      优点：面对不同分辨率设备，灵活性强，能够快捷地解决设备显示适应问题。      缺点：兼容各种设备时所需工作量大、效率低下、代码累赘，会隐藏无用的元素，加载时间延长，其实这是一种折中性质的十设计解
自己总结的html+css试题
热门推荐
baisixue19870221的博客
10-23 1万+
1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? （1）<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 （2）严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。 （3）在混杂模式中，页面以宽松的向后兼容的方式显...
HTML面试题六：HTML有哪些布局元素，说明每种布局元素的应用场景
m0_54249336的博客
02-09 189
HTML面试题六：HTML有哪些布局元素，说明每种布局元素的应用场景 一. HTML有哪些布局元素 1. 内联元素——本身属性为 display:inline 典型的有：span,a,b,i,input,textarea,em,br,i 行内显示，从左到右排布 不能直接控制高度宽度等css属性，因为其宽高是由本身内容大小决定的（文字，图片等） 但能直接设置内外边距的左右值 只能容纳文本或者其他行内元素，不能嵌套块级元素 2. 块级元素本——身属性为display:block 典型的有 div,h,hr
2024年C++面试题汇总及答案解析
最新发布
soaring_casia的专栏
07-25 555
唯一的指针，不允许其他指针与他共享指向的对象。比如指针指向的内存被释放了，但是指针没有置nullptr. 多个指针指向同一个内存，当free掉一个指针之后，其他指针就变成了野指针。C++这些年虽然难度大，但是热度仍然不减，在编程排行榜基本上都是前几位，得益于它良好的薪资待遇。SPI协议是一种采用主从模式的串行，全双工，同步通信总线，包括时钟，输入，输出，片选四个信号线，片选信号用于选择slave设备，输入输出的每个bit都需要和时钟沿同步。区别：指针指向一块儿内存，他的内容是所指内存的地址。
"HTML面试题答案及常见问题解答
这些问题和解答只是HTML面试题中的一小部分，面试题题目涵盖了HTML的各个方面，包括基础知识、布局、样式等。对于面试者来说，熟练掌握这些知识点是非常重要的，可以为自己在面试过程中取得成功提供有力支持。 总的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值