前言
为了让从来没有接触过web前端的小伙伴们，通过短时间的学习，快速完成一个页面的编写，老手请别过，本文将以最直接粗暴的方式快速完成一个H5页面的代码编写。
最终效果图
每日优鲜图片.png
欲完成上面页面的制作，需要掌握以下知识
- html相关知识
- 掌握以下标签img、div、input、button、p
- 标签的分类 块级标签和行内标签
- 标签的属性
- 样式相关知识
- 宽高设置
- 背景颜色
- margin和padding设置
- 边框border，外边框设置
- 圆角设置
- 文字大小、颜色设置
- 对齐方式设置
html知识点练习
打开您的编辑器（随便一种，初学者建议使用hbuilder），新建一个html文件demo.html,输入一下内容，开始的时候您可以直接复制粘贴，然后自己写一遍。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- div标签 -->
<div> 我是div标签1 </div>
<div> 我是div标签2 </div>
<p>我是p标签1</p>
<p>我是p标签2</p>
<input />
<img src="logo.png"/>
<button>按钮</button>
</body>
</html>
知识点讲解：
- <!DOCTYPE html> 是文档声明，您可以暂时别管它干嘛用的，新建的时候默认就有。
- html、header、body、meta等都是标签，其中有些是成对出现的，有些是单个出现，这个取决于标签的功能。
- html标签是在最外层，我们称之为根标签，head标签主要用来对网页进行设置，body标签则是网页的主体，需要显示的东西都写在它里面。
- 用浏览器打开demo.html，您会发现div和p标签都会占据一行，这种标签我们称之为块级标签，而input、img、button这几个则不会占据一行，这种我们称之为行内标签。
- div标签与p标签的区别，仔细观察会发现，p便签的上下都会与相邻的元素有一定的距离，而div则没有
样式讲解
效果图
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1 {
/*背景颜色*/
background: gray;
/*宽*/
width: 300px;
/*高*/
height: 100px;
/*边框*/
border: 5px solid green;
/*字体大小*/
font-size: 30px;
/*字体颜色*/
color: white;
/*圆角*/
border-radius: 10px;
/*left center right*/
text-align: center;
}
.div2 {
/*元素与外部的距离*/
margin-top: 50px;
/*元素顶部与内容的距离*/
padding-top: 10px;
padding-left: 10px;
background: orange;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="div1">
我是div1标签
</div>
<div class="div2">
我是div2标签
</div>
</body>
</html>
说明：
- style便签里面写的东西，相当于把多个样式打成一个包，方面使用。
- class="div1" 给元素添加一个样式包，这个样式包的名字叫做div1，样式包的具体设置在 .div1的大括号里面，里面设置了宽高、字体大小等。
- 宽度和高度的设置还可以使用百分比
- margin是元素与外部元素的距离，有上下左右四个方向，padding则是元素边框与元素内容的距离，也要上下左右四个方向。
- border-radius设置为50%，在宽高都一样的情况下就变成了一个圆。
每日优鲜活动页面的编写
有了上面的html和css知识后，我们就可以编写每日优鲜的页面了。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
<title></title>
<style type="text/css">
.top {
width: 100%;
}
.input-box {
margin-top: 28px;
padding-left: 33px;
padding-right: 33px;
}
.text {
border-bottom: 1px solid #e2e2e2;
padding-bottom: 18px;
}
.text input {
font-size: 14px;
outline: none;
}
.btn-box{
margin-top: 30px;
text-align: center;
}
.btn {
width: 311px;
height: 44px;
background: #fc4c91;
color: #fff;
outline: none;
border-radius: 6px;
font-size: 16px;
}
.tip {
text-align: center;
}
.bottom {
width: 100%;
}
</style>
</head>
<body>
<img class="top" src="img1.png" />
<div class="input-box">
<div class="text">
<input type="text" placeholder="请输入您的手机号" />
</div>
</div>
<div class="btn-box">
<button class="btn">现在领取</button>
</div>
<p class="tip">
领劵后可购买，优质生鲜1小时达
</p>
<img class="bottom" src="img2.png" />
</body>
</html>
说明：
- 这是一个移动端的页面，我们需要在head标签里添加这么一句，<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">，电脑端则不用，它的作用就是让网页按手机模式来显示，不加的话显示就不正常。
- outline: none; input好button标签默认有外边框，这句话是去掉外边框
- border也是有四个方向，我们可以只显示其中一个方向，border-bottom是给元素加上下边框。
网友评论