- 开发的工具软件:VS Code;
- 需要安装中文插件,输入simple ,出现简体中文,直接安装(installing)。
- 分析,确定我们的 主题 ,3个人一组,最多4人。今天下午报过来。
- 搜集素材,素材分为图片、视频、宣传语等。
- 在E盘下面建立一个自己组的项目名,比如说,我这里是game,也可以是food、shop等,组员的名要和组长的保持一致。
- 在项目下面,建立三个子目录,分别为img、video、css,用来存放图片、视频、 样式文件 。
- 第一步是设计你的项目的布局。
不同项目的布局是不一样滴!
- 在项目空白处,新建一个“index.html”文件,写H5的代码,写页面的整体布局。
参考代码如下所示:
<!-- 设计页面的布局;outer:是一个整体的标记ID,这个ID就像我们的身份证一样,唯一的;
div完毕之后,按下Tab键,可以出来标签;
div:是一个空白块的概念;要让它出来,需要设置宽 高,这是必须的;
绝招:设置它的背景色或者边框;
网页的化妆品:样式表;
-->
<div id="outer">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
- 在css子目录右键,新建一个index.css的样式文件。
参考代码如下所示:
/*
------------------------------------------------------------------
实训收获第1天
注释快捷键:Ctrl+/
w+数字/h+数字 ,然后 Tab 键;
单词首字母 直接写;
C V程序员;
margin : 页面元素和页面元素之间的外边距;
默认是4个参数;上 右 下 左的顺序;可以写2个参数; 上下 左右;
-------------------------------------------------------------------
*/
body{background-color: brown;
margin: 0;
}
#outer{
width:1024px;height: 1000px;
background-color: antiquewhite;
/* margin-left: 448px; 只适合于宽度是1920的固定宽度 */
margin:0 auto;
}
#header{
width: 1024px;height: 100px;
background-color: #f0f;
}
#content{
width: 1024px;height: 800px;
background-color: #00f;
}
#footer{
width: 1024px;height: 100px;
background-color: #000;
}
- 在index.html增加对外部样式的链接,<link rel=”stylesheet” href=’./css/index.css’/>
- 效果参考