今天开始要做的是模拟制作一个手机网站,简单的选择了一个登录页面,这样子块标签较少易于规划。
这是样图,今天主要根据样图做出主要的框架,即把一些模块的HTML代码敲出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0 "/>
<title>百度登录页</title>
</head>
<body>
<div>
<div>
<h2>
登录百度账号 精彩永相随
</h2>
</div>
<div>
<input type="text" value="请输入手机号/用户名/邮箱"/>
</div>
<div>
<button>下一步</button>
</div>
<div>
<a href="#"><font size="3" color="black">本机号码一键登录</font></a>
</div>
<div>
<input type="checkbox">
<font size="2" color="black">
请你阅读并同意<a href="#"><font color="black"> 百度用户协议 </font></a>
和<a href="#"><font color="black"> 隐私政策 </font></a>
以及<a href="#"><font color="black"> 儿童个人信息保护声明 </font></a>
</font>
</div>
<div>
<a href="#"><font size="6">×</font></a>
</div>
<div>
<img src="img/wechatlogo.jpg"/ width="40px" height="40px">
</div><div >
<img src= "img/QQlogo.jpg" ="40px" height="40px">
</div><div>
<img src="img/microbloglogo.jpg"40px" height="40px">
</div><div>
<img src="img/YYlogo.jpg" width="40px" height="40px">
</div>
</div>
</body>
</html>
这是没有经过布局将一些子块全部堆叠在一起的效果图。