菜单 搜索
首页 前端知识 卓音前端第一次讨论班_实例分析（涉及知识点：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、_top和framename）基本已不再使用

    • 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
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Blocked opening '' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set. 报错

2024-05-10 13:05:47

HTML5-新增表单元素

2024-05-10 08:05:59

Dayjs 的一些常用方法

2024-05-10 08:05:59

Howler.js HTML5声音引擎

2024-05-10 08:05:59

HTML5七夕情人节表白网页制作【css3爱心表白背景特效】HTML CSS JavaScript 520情人节代码制作

2024-05-10 08:05:57

前端攻城狮HTML5自查手册

2024-05-10 08:05:51

WebView加载不出Html5网页的解决方法，android studio 拾色器，ViewPager高度问题

2024-05-10 08:05:41

JavaScript 基础入门

2024-05-10 08:05:41

HTML5新手入门指南

2024-05-08 10:05:28

HTML5中SVG与Canvas绘图技术的比较及选择依据

2024-05-10 08:05:10

大家推荐的文章
1

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
2

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
3

UE4.27支持HTML5

2024-05-07 13:05:261000
4

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
5

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
6

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
7

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
8

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
9

移动端css布局大全

2024-02-06 15:02:421000
10

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！