您的位置 首页 java

东莞理工学院WEB前端实训第1次课

  1. 开发的工具软件:VS Code;
  2. 需要安装中文插件,输入simple ,出现简体中文,直接安装(installing)。
  3. 分析,确定我们的 主题 ,3个人一组,最多4人。今天下午报过来。
  4. 搜集素材,素材分为图片、视频、宣传语等。
  5. 在E盘下面建立一个自己组的项目名,比如说,我这里是game,也可以是food、shop等,组员的名要和组长的保持一致。
  6. 在项目下面,建立三个子目录,分别为img、video、css,用来存放图片、视频、 样式文件
  7. 第一步是设计你的项目的布局。

不同项目的布局是不一样滴!

  1. 在项目空白处,新建一个“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>  
  1. 在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;

}  
  1. 在index.html增加对外部样式的链接,<link rel=”stylesheet” href=’./css/index.css’/>
  2. 效果参考

文章来源:智云一二三科技

文章标题:东莞理工学院WEB前端实训第1次课

文章地址:https://www.zhihuclub.com/197860.shtml

关于作者: 智云科技

热门文章

网站地图