我的第一个html页面-CSDN博客

本文链接：https://blog.csdn.net/Flynn_curry/article/details/88077414

在经历了三次尝试后，成功创建了一个兼容各种设备的静态HTML页面。布局设计是一大挑战，特别是要确保在iPhone5和iPad Pro等设备上正常显示。通过使用浮动和自创的栅格化方法解决了布局问题。页面已完成并附带源码和图片素材。

摘要由CSDN通过智能技术生成

写了三遍，终于写成了，感动。。。。。

静态页面，主要难在布局，布局效果需要使所有设备都兼容。iphone5和ipadpro...一言难尽。。不过总算真正写好了。

只用了浮动，然后，栅格化(我自己发明的，就是说分了很多底块)程度很大，为了防止不同设备跑偏。

我实现的是这个页面。

接下来贴上源码：

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset= "utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>即刻招聘</title>
		<link href="test3.css" rel="stylesheet" type="text/css" />
	</head>
<body>
	<!-- 头部 -->
	<div id="header">
		即刻招聘
	</div>
	<!-- 内容 -->
	<div id="content">
		<!-- 三个组件层 -->
		<div class="conponent-bkg">
			<div class="area-bkg">
				<div style="background-color: #fff;">
					<select class="area" name="城市">
						<option value="忻州">忻州</option>
						<option value="太原">太原</option>
						<option value="长治">长治</option>
						<option value="朔州">朔州</option>
					</select>
				</div>
			</div>
			<div class="search-bkg">
				<div class="search">
					<form>
						<input type="button" name="findjob" class="searchbutton">
						<input type="text" name="findjob" class="searchframe" placeholder="找工作，找学校">
					</form>
				</div>
			</div>
			<div class="weather-bkg">
				<img class="weather" src="./images/15.png" />
			</div>
		</div>
		<!-- 广告层 -->
		<div class="adv">
			<a target="_blank" href="https://hao.360.cn/?src=bm">
				<img class="adv" border="0" src="./images/adv.png">
			</a>
		</div>
		<!-- 菜单层 -->
		<div class="menu-bkg">
			<div class="menu-item-bkg">
				<a target="_blank" href="https://hao.360.cn/?src=bm">
					<img class="menu-item-img" src="./images/1.png">
					<div class="menu-item-desc">学校招生</div>
				</a>
			</div>
			<div class=&#