HTML5构建“2020中国互联网大会”会议注册页面

HTML5页面制作

  • 页面制作
    • 实现代码
      • 实现界面
  • 细节处分析

页面制作

1.整个页面采用article标记构架。使用header、footer、hgroup、figure、figcaption、form、fieldset等标记来进行页面布局。技术网址
2.会议注册页面,采用fieldset、legend进行表单元素分组。在其中分别采用input类型为text、email、tel、date、submit、reset等来布局页面,注册姓名、报告题目、工作单位等文输入域不能为空。
3.页面样式控制,统一采用行内样式。
4.页面效果及结构分析如下:

HTML5构建“2020中国互联网大会”会议注册页面_第1张图片

实现代码

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>2020中国互联网大会</title>
    </head>
    <body>
      <article style="display:block;width: 25cm;margin:0 auto;background-color:rgb(188,109,238)">
            <p>
                <header>
                    <hgroup>
                       <h1 style="text-align:center" >2020中国互联网大会</h1>
				<h3 style="text-align:center" >寻找中国互联网产业新动能”活动启动</h3>
                        <p style="text-indent:2em;margin-left:1cm;margin-right:1cm;margin-bottom:1cm;">
                            2020(第十九届)中国互联网大会将于723-25日在云端召开,本届大会由线上论坛、线上展览和特色活动组成。作为特色活动之一,“寻找中国互联网产业的新动能”活动现已正式启动。
                        </p>
                        <figure style="text-align:center;">
                            <img src="internet.png" width="550px" border="0"><br>
                            <figcaption>新基建,新机遇</figcaption>
                        </figure>
                    </hgroup>
            </header>
            <form method="post" action="">
                 <center>
          <fieldset style="font-family:宋体;text-align:center;margin:10px 40px;">
                 
                <legend>
                    会议注册页面
                </legend>
              
                注册姓名:<input type="text" required>
                报告题目:<input type="text" required><br>
                工作单位:<input type="text" required>
                手机号码:<input type="tel" ><br>
                电子邮件:<input type="email">
                报告时间:<input type ="date"><br>
                <input type ="submit" value="注册">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="重置">
                    </center>
                </fieldset>
            </form>
            </p>
           <p style="font-family:宋体;text-indent:2em;margin-left:0.5cm;margin-right:0.5cm;margin-bottom:0.5cm;margin-top:0.5cm">
                           本次寻找活动的主题是“新基建,新机遇 — 寻找中国互联网产业的新动能”。聚焦在线教育、企业应用、智慧交通、医疗新基建和网络安全等领域,将动员社会各界力量、广泛征集案例、聆听多方观点,组织专家点评,最终寻找出在时代背景下对互联网产业产生积极、深刻影响的案例(产品、服务、解决方案),激发更多的企业找到与“新基建”有机结合的发展新机遇,释放出推动自身发展、促进产业升级的新动能。
                        </p><br>
        </article>
    </body>
</html>

HTML5构建“2020中国互联网大会”会议注册页面_第2张图片

实现界面

HTML5构建“2020中国互联网大会”会议注册页面_第3张图片

细节处分析

设置背景颜色方法
两种方法:

  • 取色器取色
  • QQ截图时按住鼠标左键不要松开在右下角就有改颜色的rgb值
  <article style="display:block;width: 25cm;margin:0 auto;background-color:rgb(188,109,238)">

设置文本的上下左右间距让页面更加美观

style="text-indent:2em;margin-left:1cm;margin-right:1cm;margin-bottom:1cm;"

其中text-indent:2em;代表首段空两个空格


设置一个提交与重置按钮

 "submit" value="注册"; ; ; ; ; ; ;"reset" value="重置">
这些年的成长让我意识到,敢于直视自己过的不好,是一条很有意思的出路。

你可能感兴趣的:(html)