html5如何制作一份邀请函

  目的:制作这个简易的邀请函,只是为了让新手入门Web开发。
 
  在制作页面之前,我们先来看看整个邀请函的整体面貌。
 
  一、首先编写HTML代码
 
  说明:
 
  <!doctype html> :这形如一个对文档的声明。
 
  <html>标签:代表了对html的开始,</html>代表着html的结束。
 
  <head> 标签:它包含了对html5页面各种属性,配置信息的描述。因此在某种程度上可以视为一张“身份证”。
 
  <meat> 标签:使用<meat>标签的charset来加以设置,将其字符编码指定为UTF-8;UTF-8这是一种通用编码形式,又被称为“万国码”。
 
  <title>标签:即页面的标题,显示在浏览器器的菜单栏上。
 
  <body> 标签:包含了所有要呈现给浏览者的内容信息。
 
  <div>  标签:这是一个常见的块级元素,相当于一个容器,它经常用来div css布局。在这里我们用他来调整页面的位置。
 
  <h1>   标签:这是一个标题,他有1——6六个级别。
 
  <p>    标签:这表示一个段落。
 
  <a>    标签:这是一个链接。
 
  二、页面的美化:CSS
 
  1、给页面添加背景图片:
 
  我们在给网页添加背景图片的时候,我们选取的背景图片可能像素比较大,不适应我们的浏览器窗口;所以我们给body的background属性在横向和纵向两个方向上居中(center),由于浏览器默认是没有给予body高度属性的,所以要给body和body的父级(html)设置height:100%属性。在body设置属性background-size:cover;实现背景图片自适应充满全屏。
 
  2、为网页添加字体的样式
 
  font-family:属性可以改变字体。
 
  color:可以改变字体的颜色,由于css具有继承机制,所以后续的元素都有这一属性。
 
  3、调整邀请函内容区域位置。
 
  首先,我们使用margin: 0;padding: 0;这是一个很常见的作法,能够清楚浏览器对页面元素预设的一些默认边距值,使得css自主控制更加精确。
 
  这里我们使用id选择器(# id名),我们设置其宽度100%;利用text-ailgn:center,让其文本水平居中。
 
  那么如何实现竖直剧中呢? 这里就用到了定位:我们要控制container的top属性,这要建立在绝对定位的前提下,而要使得container绝对定位,就要使他的父级(body)设置为相对  定位。 之后我们利用属性,让top距顶50%。
 
  现在还没有结束,我们可以利用html5的transform属性,设置translateY(-50%);即向上移动其高度的一半。
 
  这样整个container将会显示在页面的正中央。
 
  4、为其内容标签设置一些文字字体与字号。
 
  说明:
 
  font-size :设置字体的大小。
 
  text-transform:uppercase :是文本都转化为大写字母。
 
  margin-bottom:20px  :这里牵扯到盒模型,其意思是下边框有20px的宽度。
 
  5、制作邀请函按钮。
 
  border:为其设置边框,该属性的三个参数分别代表了边框宽1px,实线,颜色。
 
  border-radius: 为其边框设置了3px的圆角。
 
  padding:上下内边距为10px;左右内边距为100px。
 
  text-decoration:none : 这样可以去掉链接的下划线。
 
  整体css文件:
 
  三、为页面创建交互
 
  首先我们为<a>链接添加id为button。
 
  利用document.getElementById(id名)来获取a链接,并将其赋给变量btn。
 
  然后为btn添加单机属性调用执行函数。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61756.shtml

张贴在2