卓音前端第一次讨论班_实例分析（涉及知识点：HTML、CSS基础）
文章目录
一、 页面展示
- 主页
- 报名表
二、 页面分析
在我们拿到产品的 需求文档+原型图 后，应该先 （以前端开发的角度细读需求文档，列出模糊点，与产品商讨，）分析，有几个页面，每个页面是什么内容，每个页面应该分几个模块去做，（如果是团队开发，还应根据 需求模块 分工）
以本次案例为例（以上括号中的内容暂不涉及）：
- 整个网站有两个页面，主页（主要是工作室的相关介绍），报名表
- 主页，有导航栏、大图片、工作室介绍、部门介绍、风采展示五部分，可以分成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. 头部导航栏
返回首页的“<”可以用字符实体，也可以用伪元素选择器
-
字符实体
< > -
伪元素选择器
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="报名" />
<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;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
