首页 前端知识 卓音前端第一次讨论班_实例分析(涉及知识点:HTML、CSS基础)

卓音前端第一次讨论班_实例分析(涉及知识点:HTML、CSS基础)

2024-05-05 21:05:45 前端知识 前端哥 37 910 我要收藏

卓音前端第一次讨论班_实例分析(涉及知识点:HTML、CSS基础)

文章目录

  • 卓音前端第一次讨论班_实例分析(涉及知识点:HTML、CSS基础)
    • 一、 页面展示
    • 二、 页面分析
    • 三、 “主页”页面
      • 1. 导航栏
      • 2. 图片
      • 3. 工作室介绍
      • 4. 部门介绍
      • 5. 风采展示
    • 四、“报名表”页面
      • 1. 头部导航栏
      • 2. 报名表
    • 五、 完整代码

一、 页面展示

  • 主页

在这里插入图片描述

  • 报名表

在这里插入图片描述

二、 页面分析

在我们拿到产品的 需求文档+原型图 后,应该先 (以前端开发的角度细读需求文档,列出模糊点,与产品商讨,)分析,有几个页面,每个页面是什么内容,每个页面应该分几个模块去做,(如果是团队开发,还应根据 需求模块 分工)

以本次案例为例(以上括号中的内容暂不涉及):

  • 整个网站有两个页面,主页(主要是工作室的相关介绍),报名表
  • 主页,有导航栏、大图片、工作室介绍、部门介绍、风采展示五部分,可以分成5个div去做
  • 报名表,有导航栏、报名表两部分,可以分成两个div去做

三、 “主页”页面

1. 导航栏

  • div、span同为无语义标签,其作用主要为划分模块,为什么这里要用div?

    • div为块级元素,span为行内元素

    • 知识点:

      标签显示模式是否可以设置宽高是否独占一行默认宽度
      块级元素可以独占一行父级的100%
      行内元素不可以不独占一行由内容决定
      行内块元素可以不独占一行由内容决定
    • 显示模式的转化:

      display: block;				/* 转化为块级元素 */
      display: inline;			/* 转化为行内元素 */
      display: inline-block;		/* 转化为行内块元素 */
      
  • 导航栏一般使用无序列表

    • 语义化标签,比如h1、p等等;无序列表 更符合导航栏的语义

    • 其他的标签(例如span等等)也可以实现,只是通常会使用无序列表

    • 补充知识点:

      list-style: none; 		/* 去掉无序列表的小圆点 */
      

      列表相关详见 4.2

  • 超链接a

    • 如何去掉超链接的默认效果?

      color: black;				/* 修改字体颜色 */
      text-decoration: none;		/* 去掉下划线效果 */
      
    • 超链接的分类:

      • 外部链接:访问其他网址

        <a href="http://www.baidu.com/">外部链接</a>
        
      • 内部链接:跳转到另一个HTML文件

        <a href="./index.html">内部链接</a>
        
      • 锚点链接:跳转到同一页面的不同位置

        <a href="#idName">锚点链接</a>
        ......
        <div id="idName"></div>
        
      • 除此之外还有邮件链接、下载链接,,但是不常用

        <!-- 邮件链接 -->
        <a href="mailto:接收方邮件地址">邮件链接</a>
        <!-- 下载链接 -->
        <a href="文件路径" download>下载链接</a>
        
    • 空链接怎么写?图片链接怎么写?

      <!-- 空链接 -->
      <a href="#"></a>
      <!-- 图片链接 -->
      <a href="#"><img src=""/></a>
      
    • target属性(用来指定超链接打开的位置)

      • _self( 默认值):在当前页面中打开超链接
      • _blank:在一个新的页面中打开超链接
      • 其余值(_parent_topframename)基本已不再使用
    • title属性:鼠标悬停在链接上面的时候显示的文字

  • css的三种写法

    • 行内样式:

      <div style=""></div>
      
    • 嵌套样式:

      <style>
          * {
              color: black;
          }
      </style>
      
    • 外联样式:

      <link rel="stylesheet" href="../css.css" />
      
  • 四种基本选择器

    • 标签选择器(常用于清除默认效果)
    • 类选择器 (常用)
    • id选择器 (后期交互常用,css样式用得比较少)
    • 通配符选择器 (常用于清除默认效果)
  • 鼠标悬浮的效果

    • 使用伪类选择器实现

    • 常用的伪类选择器:

      Selector:hover {   }		/* 鼠标悬停时的样式,常用于增强用户体验  */
      Selector:active {   }		/* 鼠标按下时触发的样式,常用于增加交互性  */
      Selector:visited {   }		/* 访问过的链接的样式,常用于增强网站的导航体验  */
      Selector:focus {   }		/* 获取焦点时的样式,常用于表单元素 */
      
  • CSS相关属性:

    /* 字体相关 */
    font-size: 20px;
    font-weight: 700;   		/* normal/bold/400/700 */
    font-style: italic;			/* normal/italic */
    line-height: 100px;
    font-family: STHeiti;
    text-indent: 2em;			/* 注意单位 */
    text-align: center;			/* left/center/right */
    text-decoration: none;		/* none/underline/overline/line-through */
    color: black;
    font: italic bold 20px/50px STHeiti;
    /* 其他 */
    width: 100px;
    height: 100px;
    background-color: white;
    

2. 图片

  • 第一周学习的内容无法完全用标签实现效果

    • img标签相关

      <img src=" " alt=" "/>
      <!-- src:图片的位置和名称(必须属性) 
      alt:图片无法显示时显示的文字
      title:鼠标悬停在图片上面的时候显示的文字 
      width:图片宽度(不常用) 
      height:图片长度(不常用) -->
      
  • 路径:

    • 绝对路径:绝对路径是指文件在硬盘上真正存在的路径,从盘符出发
    • 相对路径:相对于自己的目标文件位置,从当前文件出发
  • 使用背景图片来实现效果

    • CSS背景图片相关

      background-image: url(../img.png);
      background-repeat: repeat;				/* repeat/no-repeat/repeat-x/repeat-y */
      background-position: center center;		/* 第一个值是水平方向;第二个值是竖直方向;若只有一个值,第二个值默认center */
      background-size: cover;					/* 第一个值设置宽度,第二个值设置的高度/cover/contain */
      background-attachment: fixed;			/* fixed/scroll/local */	
      
  • 标题标签系列默认效果有margin-top、margin-bottom(下周学习内容),所以本周先用其他标签

3. 工作室介绍

  • 标题标签系列

    <!-- 字体加粗,字号逐渐减小,独占一行 -->
    <h1></h1>
    <h2></h2>
    <h3></h3>
    <h4></h4>
    <h5></h5>
    <h6></h6>
    
  • 段落标签

    <!-- 独占一行,段落之间存在间隙 -->
    <p></p>
    

4. 部门介绍

  • 并集选择器

    .class1 h1,
    .class2 h1 {  }
    
  • 文本格式化标签

    • 加粗(strong标签、b标签、css实现 font-weight: 700; )
    • 倾斜(em标签、i标签、css实现 font-style: italic; )
    • 下划线(ins标签、u标签、css实现 text-decoration: underline; )
    • 删除线(del标签、s标签、css实现 text-decoration: line-through; )

5. 风采展示

  • 表格相关:

    <!-- 
    1. 表格默认没有边框,边框属性  border="1px"
    2. 表格高度height、宽度width (一般使用css调整高度宽度,不使用这两个属性)
    3. cellpadding每个单元格的内边距
    4. cellspacing单元格与单元格之间的间隙
    -->
    <table>
        <thead>
            <tr>
                <!-- 表头默认效果:加粗、居中 -->
                <th></th><th></th><th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td>
            </tr>
            <tr>
                <td></td><td></td><td></td>
            </tr>
        </tbody>
    </table>
    
  • CSS三大特性:继承性、层叠性、优先级

  • 合并单元格

    • 在行上合并单元格colspan

      <table>
          <thead>
              <tr>
                  <th></th><th></th><th></th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <!-- 
      				1. 找好要合并的几个单元格,在第一个单元格上加属性colspan="要合并的个数"
      				2. 删除其余要合并的单元格
      			-->
                  <td colspan="2"></td>        <td></td>
              </tr>
              <tr>
                  <td></td><td></td><td></td>
              </tr>
              <tr>
                  <td></td><td></td><td></td>
              </tr>
          </tbody>
      </table>
      
    • 在列上合并单元格rowspan(同上)

  • 结构伪类选择器

    E:first-child {   }		/* 第一个 */
    E:last-child {   }		/* 最后一个 */
    E:nth-child(任意整数) {   }		/* 指定第几个 */
    E:nth-child(含n的公式) {   }		/* 例:nth-child(2n) 第偶数个 */
    
  • 表格居中

    margin: auto;			/* 外边距,下周学习内容 */
    

四、“报名表”页面

1. 头部导航栏

返回首页的“<”可以用字符实体,也可以用伪元素选择器

  • 字符实体

    &nbsp;
    &lt;
    &gt;
    
  • 伪元素选择器

    E::before {
        content: "";		/* 必须要有 */
    }
    E::after {
        content: "";		/* 必须要有 */
    }
    

2. 报名表

  • 两个单标签

    <!-- 换行 -->
    <br>
    <!-- 水平线 -->
    <hr>
    
  • 列表相关

    • 无序列表

      <!-- 无序列表
      1. ul标签里面只能包含li标签,li标签里面可以放任何标签
      2. type=""   可以修改小圆点样式(disc,circle,square)
      3. 通过css修改小圆点样式  list-style-type: ... -->
      <ul type="">
          <li></li>
          <li></li>
          <li></li>
      </ul>
      
    • 有序列表

      <!-- 有序列表
      1. ol标签里面只能包含li标签,li标签里面可以放任何标签
      2. type=""   可以修改序号样式(1,I,a)
      3. 通过css修改小圆点样式  list-style-type: ..
      4. start="50"  从指定数字开始排序 -->
      <ol type="">
          <li></li>
          <li></li>
          <li></li>
      </ol>
      
    • 定义列表

      <!-- 定义列表:
            dl标签里面只能包含dt和dd标签,dd和dt标签里面可以包含任意标签 -->
      <dl>
        <dt>列表标题</dt>
        <dd>列表内容1</dd>
        <dd>列表内容2</dd>
        <dd>列表内容3</dd>
      </dl>
      
    • 去掉默认的小圆点样式:list-style: none;

  • 表单相关form

    • input系列
    控件名称type值描述
    文本框(默认)text定义一个单行的文本字段(默认宽度为 20 个字符)
    密码框password定义密码字段
    单选框radio定义单选按钮
    复选框checkbox定义复选框
    提交按钮submit定义提交按钮
    重置按钮reset定义重置按钮(重置所有的表单值为默认值)
    普通按钮button定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)
    文件file选择文件按钮
    属性描述
    value赋默认值
    readonly只读
    required表示该信息必填,和表单域结合可以呈现验证内容
    disabled表示禁用,在页面中呈现灰色
    placeholder可以指定文本框输入前的信息提示
    checked单选框/复选框的默认选中
    • 定义文本域:

      <textatea cols="60" rows="10"></textatea>
      <!-- 
      可以通过cols和rows属性来规定textarea的尺寸大小(不常用)
      通常使用CSS的height和width属性
      -->
      

      取消其默认的拖拽缩放效果:resize: none;

    • 定义下拉选项列表:

      <select>
          <!-- selected指定默认选中 -->
          <option selected></option>   
          <option></option>
          <option></option>
      </select>
      
    • 定义点击按钮:

      <button type="button">按钮</button> 
      <button type="submit">提交</button>
      <button type="reset">重置</button> 
      

      与input相比,在 button 标签内部,可以放置任何内容

    • label标签(常与单选、复选结合使用,提高用户体验),以下为两种写法:

      <!-- 
      写法一 
      直接将input元素和其后的文字包含在label标签中
      -->
      <label><input type="checkbox" name="hobby" value="足球">足球</label>
      <!-- 
      写法二
      1. input标签写id属性
      2. 给input后面的文字加入label标签,for属性值是input的id值
      -->
      <input type="checkbox" name="hobby" value="足球" id="football"><label for="football">足球</label>
      

五、 完整代码

在这里插入图片描述

index.html如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="../css/index.css" />
  </head>
  <body>
    <!-- 导航栏部分 -->
    <div class="head">
      <ul>
        <li><a href="#officeIntro">工作室介绍</a></li>
        <li><a href="#partIntro">部门介绍</a></li>
        <li><a href="#show">风采展示</a></li>
        <li><a href="http://122.51.52.100/" target="_blank">进入博客</a></li>
        <li><a href="./application.html">加入卓音</a></li>
      </ul>
    </div>
    <!-- 图片部分 -->
    <div class="img">
      <div class="word">JOIN STUDIO</div>
    </div>
    <!-- 工作室介绍部分 -->
    <div class="officeIntro" id="officeIntro">
      <h2>工作室介绍</h2>
      <p>
        东北师范大学卓音工作室(JoinStudio)是东北师范大学学生就业指导服务中心直属的负责网络工作的机构。2000年3月25日卓音工作室正式成立。卓音即"Jo_In",本意为"Joblnformation",又与英文Join同音,暗含卓越、团结之意。由此,"建设全国一流的高校就业工作信息支持系统"成为了东北师大赋予卓音的时代使命。
      </p>
    </div>
    <!-- 部门介绍部分 -->
    <div class="partIntro" id="partIntro">
      <h2>部门介绍</h2>
      <p>
        <strong>前端开发</strong>
        主要做的是用户所能看到的前端展示界面。前端开发的核心技术分别是:HTML、CSS和JavaScript。HTML是一门描述性语言。CSS是用来控制网页外观的一种技术。JavaScript就是我们通常所说的JS,是一种嵌入到HTML页面中的脚本语言,由浏览器一边解释一边执行。
      </p>
      <p>
        <b>后端</b>
        也称服务器端开发,用户看不到但是又被用来为前端提供技术支持的就是后端,后端负责业务逻辑,提供技术支持,接口实现。首先需要有一定的Java语言基础,理解它的特性;其次需要学习数据库相关知识,实现数据的存储检索;然后需要学习JDBC和Servlet来深入理解Web开发。
      </p>
      <p>
        <em>产品</em>
        主要通过需求文档的编撰,流程图的绘制,UI交互设计来完成设计。需求分析主要是针对产品各项属性以及资源调配来实现项目的规划;
        UI设计是指对软件的人机交互、操作逻辑的整体设计。主要运用的软件有墨刀、axure。
      </p>
      <p>
        <i>设计</i>
        主要负责网页海报的设计,易拉宝设计工作、学习视频PPT以及照片后期的处理工作,学习PS技术,PR以及MAKA。在这里,设计与我们融而共生。
      </p>
    </div>
    <!-- 风采展示部分 -->
    <div class="show" id="show">
      <h2>风采展示</h2>
      <table cellspacing="0px">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年级</th>
            <th>发展</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>姓名一</td>
            <td>2017</td>
            <td>甲企业甲企业</td>
          </tr>
          <tr>
            <td>姓名二</td>
            <td>2018</td>
            <td>乙企业乙企业</td>
          </tr>
          <tr>
            <td>姓名三</td>
            <td rowspan="2">2020</td>
            <td>丙企业丙企业</td>
          </tr>
          <tr>
            <td>姓名四</td>
            <td>丁企业丁企业</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

application.html如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>报名表</title>
    <link rel="stylesheet" href="../css/application.css" />
  </head>
  <body>
    <!-- 导航栏部分 -->
    <div class="head">
      <a href="./index.html">返回首页</a>
    </div>
    <!-- 报名表部分 -->
    <div class="form">
      <h1>报名表</h1>
      <hr />
      <form>
        姓名:<input type="text" placeholder="请输入姓名" /><br /><br />
        性别:
        <label><input type="radio" name="gender" checked /></label>
        <label><input type="radio" name="gender" /></label><br /><br />
        业余爱好:
        <label><input type="checkbox" name="hobby" checked />运动相关</label>
        <label><input type="checkbox" name="hobby" checked />娱乐相关</label>
        <label><input type="checkbox" name="hobby" />智力相关</label>
        <label><input type="checkbox" name="hobby" />乐器相关</label>
        <label><input type="checkbox" name="hobby" />文艺相关</label>
        <label><input type="checkbox" name="hobby" />游戏相关</label>
        <br /><br />
        来自城市:
        <select>
          <option>上海</option>
          <option selected>北京</option>
          <option>天津</option>
        </select>
        <br /><br />
        个人简介:
        <br /><br />
        <textarea cols="60" rows="10" placeholder="请输入个人简介"></textarea>
        <br /><br />
        <h3>我承诺:</h3>
        <ol>
          <li>本人为东北师范大学在读本科生</li>
          <li>真诚报名参加</li>
          <li>上述信息均为真实信息</li>
        </ol>
        <label><input type="checkbox" name="agree" />我同意所有条款</label>
        <br /><br />
        <input type="submit" value="报名" />&nbsp;&nbsp;&nbsp;
        <input type="reset" value="重置" />
      </form>
    </div>
  </body>
</html>

index.css如下:

.head {
    background-color: #0f1330;
    height: 90px;
}
.head ul li {
    list-style: none;
    display: inline-block;
}
.head a {
    color: white;
    font-size: 20px;
    font-weight: 700;
    line-height: 90px;
    display: inline-block;
    width: 200px;
    text-align: center;
    text-decoration: none;
}
.head a:hover {
    background-color: #2e027f;
}

.img {
    background-image: url(../img/图片.png);
    height: 850px;
    background-size: cover;
}
.img .word {
    color: white;
    line-height: 850px;
    text-align: center;
    font-size: 150px;
    font-weight: 700;
    font-family: STHeiti;
}
.officeIntro h2,
.partIntro h2,
.show h2 {
    text-align: center;
}
.officeIntro p,
.partIntro p {
    text-indent: 2em;
    font-size: 20px;
}
table {
    margin: auto;
    height: 350px;
    width: 500px;
    text-align: center;
    font-size: 20px;
}
table>thead {
    background-color: #5d18dc;
    color: white;
}
tbody tr:nth-child(2n+1) {
    background-color: #f7f3fd;
}
tbody tr:nth-child(2n) {
    background-color: #e7ddfa;
}

application.css如下:

.head {
    background-color: #0f1330;
    height: 90px;
}

.head a {
    color: white;
    font-size: 20px;
    line-height: 90px;
    display: inline-block;
    width: 200px;
    text-align: center;
    text-decoration: none;
}

.head a:hover {
    font-weight: 700;
}

.head a::before {
    content:'<';
}
.form h1 {
    text-align: center;
}
textarea {
    resize: none;
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7009.html
标签
评论
发布的文章

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!