本文是针对怎么写html5移动端个人博客网站首页联系我板块代码的开发教程
成品演示图：
拉伸后的演示图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的博客</title>
<style>
html {
margin: 0;
padding: 0;
}
body {
font-size: 14px;
color: #333;
background-color: #efefef;
padding: 10px;
margin: 0;
}
h2 {
font-size: 20px;
color: #d9534f;
text-align: center;
padding: 18px 0 18px 0;
margin: 0 0 10px 0;
}
.section {
background-color: #fff;
padding: 20px;
margin-bottom: 10px;
border-radius: 8px;
}
form {
text-align: center;
margin-top: 0;
}
.submit {
background-color: #d9534f;
padding: 12px 45px;
border-radius: 5px;
cursor: pointer;
/*cursor: pointer;光标呈现*/
color: #ffffff;
border: none;
outline: none;
/*outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。*/
margin: 0;
font-weight: bold;
}
.submit:hover {
background-color: #d2322d;
}
input, textarea {
margin-bottom: 10px;
font-size: 14px;
padding: 15px 10px 10px;
border: 1px solid #cecece;
background-color: #efefef;
color: #787575;
border-radius: 4px;
width: 70%;
outline: none;
/*outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。*/
}
</style>
</head>
<body>
<div class="section">
<h2><span>联系我</span></h2>
<form>
<input name="name" placeholder="Name" type="text" required /><br/>
<input name="email" placeholder="Email" type="email" required /><br/>
<textarea name="message" placeholder="Message" required ></textarea>
<input type="submit" value="发送" class="submit" />
</form>
</div>
</body>
</html>常用标签和属性都已经在上一篇文章所列出，不常用的属性在本文代码里面已经给大家解释说明了。
此版块主要在于使用了百分比来给版块布局，收集信息使用了form表单获取，表单里面附加了submit按钮来提交表单，表单使用了required来验证表单是否为空，required是CSS3的新增属性。
