企业建站知识推广知识小程序微信营销 APP开发前端设计 MindManager 开发语言自媒体

Web前端零基础系列-每日优鲜活动页面

发表日期：2018-11 文章编辑：小灯浏览次数：1133

前言

为了让从来没有接触过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是给元素加上下边框。

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://dengtar.com/16511.html

上一篇：<web前端就业形势依然是一片光明下一篇：有多少web前端工程师在开始学习都会忽略的这些地方？>

移动业务

更多业务

解决方案

我们的产品