| 全选 | 学号 | 姓名 | 学院 | 操作 |
| 20172204001 | 唐僧 | 法学院 | ||
| 20172204002 | 悟空 | 航空学院 | ||
| 20172204003 | 八戒 | 医学院 | ||
| 20172204004 | 沙僧 | 信自院 |
操作成功
WEB基础之HTML、CSS
一、知识体系结构
二、课程介绍
1.HTML
- 用于勾勒出网页的结构和内容
2.CSS
- 用于美化网页
3.JavaScript
- 让网页呈现动态的数据和效果
4. jQuery
- 框架，提高JavaScript的开发效率
三、HTML原理
四、XML和HTML的联系
1.XML
- 可扩展标签语言
- 标签，属性，标签的嵌套关系都可以扩展
- 用来存储或传输数据
扩展：自定义
2.HTML
- 超文本标签语言
- 语法是固定的（w3c）
- 用来显示数据
- 有一些特定的版本严格遵守XML的规范
可以将HTML理解为标签固定的XML
五、常用标签
1. 网页基本结构
第一个网页
HTML不错.
2. 标题、段落、列表
//代码写在body标签内
一级标题
二级标题
三级标题
我叫Dany
我喜欢打篮球
- 江苏省
- 云南省
- 四川省
- 山东省
- 北京
- 上海
- 广州
-
江苏省
- 南京
- 泰州
-
云南省
- 昆明
- 曲靖
3. div分区
此处该放一张图片
宫爆鸡丁的做法
首先要放油
再放鸡丁炒炒
再放花生炒炒
出锅吃吧
版权所有,违者必究.
那是一个 秋天,
我在家门口,
看到了美丽的 晚霞.
4. 图片的绝对路径与相对路径
5. 超链接
链接到网页的锚点位置
将超链接链接到本网页的某个位置
将超链接链接到本网页的某个位置
锚点位置
6. 表格（跨行、跨列、行分组）
跨行、跨列
Insert title here
苹果
西瓜
香蕉
葡萄
苹果
西瓜
葡萄
苹果
香蕉
葡萄
编号
名称
金额
1
键盘
100
2
鼠标
60
合计
160
7. 练习
英雄联盟_百度百科
英雄联盟
《英雄联盟》（简称lol）是由美国Riot Games开发，腾讯游戏运营的英雄对战网游。 《英雄联盟》除了即时战略、团队作战外，还拥有特色的英雄、自动匹配的战网平台，包括天赋树、召唤师系统、符文等元素。
中文名称
英雄联盟
发行商
腾讯游戏
其他名称
撸啊撸、lol
发行日期
2011年9月22日
游戏类型
策略、角色扮演、竞技、团队合作
玩家人数
多人
游戏平台
PC
游戏画面
3D
目录
- 游戏背景
- 战争学院
- 德玛西亚
- 游戏系统
- 天赋系统
- 符文系统
1.游戏背景
战争学院
战争学院是英雄联盟裁决瓦洛兰政治纠纷之地。这里是绝对中立的领土，严禁任何纷争。 违反者将面对学院的士兵和魔法。学院坐落于一座巨型水晶枢纽之上，由黑曜石、 贵金属和魔法塑形而成。它位于莫格罗恩关隘的北方入口，刚好位于相互敌对的城邦德玛西亚和诺克萨斯之间。
除了作为英雄联盟所在地，战争学院还是瓦洛兰最权威的军事培训机构。 很多图书馆都致力于收录战争学院的英雄信息，并向所有研究者开放。
德玛西亚
人类城邦德玛西亚坐落在瓦洛兰的西部海岸。德玛西亚人民的共同目标是通过善良和正义 让所有人都过得更好。他们认为恶毒自私如同疾病，应当从人类灵魂中根除。来到德玛西亚并定居于此的人们， 具有和本地居民一样的理想和美德。
2.游戏系统
天赋系统
天赋技能分为三类：攻击类、防御类、通用类，天赋技能点总共为30点。
攻击类：提高物理、法术攻击强化偏重攻击的召唤师技能。
防御类：提高物理、法术防御及抗打击回复能力，强化偏重防御和回复的召唤师技能。
通用类：提高召唤师其他能力，强化多用途召唤师技能，减少技能冷却时间。
符文系统
符文有四种颜色，分别是印记（红色）、符印（黄色）、雕文（蓝色）和精华（紫色），不同的符文 类型在镶嵌时也要镶嵌到对应的符文槽里，在符文书每一页都有9个蓝槽、9个红槽、9个黄槽和3个紫槽供你镶嵌符文。
在游戏中，只是购买了符文是不能对召唤师所选择的英雄有任何帮助的， 你需要将符文镶嵌在符文页当中，才能使符文在游戏中产生作用。
© 2017年 | 百科协议 | Dany
六、表单元素、表单控件
Insert title here
七、样式（内联、内部、外部样式）
颜色
1.样式分类
- 内联样式
- 内部样式
- 外部样式
HTML代码
Insert title here
CSS
CSS有3种用法
1.内联样式
2.内部样式
3.外部样式
my.css代码
p {
color:yellow;
}
2. 样式的继承性、层叠性、优先级
Insert title here
苹果
西瓜
八、 选择器
Insert title here
概率论与数理统计
英语读写译
数字信号处理
高等数学
都要学习啊
云南省昆明市呈贡区景明南路昆明理工大学恬园3-308.
九、边框、边距设置
1.表框设置
Insert title here
泰州
泰州,是江苏省一个美丽的城市.
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
轻轻的我走了，
正如我轻轻的来；
我轻轻的招手，
作别西天的云彩。
那河畔的金柳，
是夕阳中的新娘；
波光里的艳影，
在我的心头荡漾。
2. 边距设置
Insert title here
d0
d1
d2
d3
d4
d5
十、背景图、背景色设置（前提：1.图片存在；2.图片位置正确）
Insert title here
十一、文本样式（居中、下划线、首行缩进、行高）
Insert title here
英雄联盟
英雄联盟简称lol是由美国一家公司开发，
腾讯游戏运营的英雄对战网游。英雄联盟
除了即时战略、团队作战外，还拥有特色
的英雄、自动匹配的战网平台，包括天赋
树、召唤师系统、符文等元素。
十二、浮动
Insert title here
浮动时看我的位置浮动时看我的位置浮动时看我的位置
十三、练习（前提：图片存在）
练习1
admin_list.html代码
管理员列表
©版权所有,违者必究.
地址:云南省昆明市呈贡区景明南路昆明理工大学
list.css代码
/*0.对网页做统一的设置*/
* {
padding: 0;
margin: 0;
}
/*1.给网页分区,设置每个区域的尺寸*/
div {
border: 1px solid red;
margin: 0 auto;
}
.logo {
width: 960px;
height: 100px;
}
.menu {
height: 91px;
}
.core {
height: 410px;
/*顶部内边距的空间用来放渐变条*/
padding-top: 10px;
}
.copy {
width: 960px;
height: 50px;
}
.content {
width: 950px;
height: 390px;
border: 5px solid #8ac1db;
}
.content div {
width: 910px;
height: 40px;
}
.content .data {
height: 310px;
}
/*2.设置背景*/
body {
background-color:#0EA8D8;
}
.logo {
background-image:url(../img/km.jpg);
}
.menu {
background-color: #0488BB;
}
.content {
background-color: #e8f3f8;
}
/*渐变条做成一个小图的目的是为了在网络上传输时更快,
更节约流量,但它不够大,需要横向平铺*/
.core {
background:url(../img/content_bg.png) repeat-x top;
}
/*3.设置文本样式*/
body {
font-family:"微软雅黑","文泉驿正黑","黑体";
font-size: 14px;
}
/*设置退出按钮位置*/
.logo {
text-align:right;
line-height:100px;
}
.logo a {
margin-right:40px;
color: #fff;
text-decoration: none;
}
.logo a:hover{
font-weight: bold;
}
.copy p {
color: #fff;
text-align: center;
line-height: 25px;
}
/*4.设置表格样式*/
.data table {
border:1px solid #ccc;
/*边框合并必须写在table上*/
border-collapse: collapse;
width:100%;
}
.data td {
border:1px solid #ccc;
text-align: center;
}
/*单元格中的文字默认垂直居中*/
.data thead tr {
background-color: #fbedce;
height: 40px;
font-weight: bold;
}
.data tbody tr {
background-color: #fff;
height: 32px;
}
.data tbody tr:hover {
background-color: #f7f9fd;
}
/*设置按钮的样式*/
.modify {
padding-left: 15px;
background:
url(../img/modification.png)
no-repeat left;
border: 0;
}
.delete {
padding-left: 13px;
background:
url(../img/delete.png)
no-repeat left;
border: 0;
}
.data input:hover {
/*将鼠标悬停时变为手型*/
cursor: pointer;
}
/*5.设置消息区*/
.content {
/*将其作为子元素绝对定位的目标*/
position: relative;
}
.content .msg {
position:absolute;
left: 200px;
top: 100px;
width: 550px;
height: 70px;
}
.msg img {
float: right;
margin: 5px;
}
.msg img:hover {
cursor: pointer;
}
.msg p {
margin-left: 38px;
line-height: 80px;
}
.msg {
background: #fdecec url(../img/ok.png) no-repeat 10px 32.5px;
border: 1px solid #f68a8a;
}
/*6.设置菜单栏样式*/
.menu ul {
border: 1px solid yellow;
width: 960px;
height: 91px;
margin: 0 auto;
list-style-type: none;
}
.menu li {
border: 1px solid yellow;
width: 68px;
height: 77px;
margin: 7px 13px;
float: left;
}
.one {
background-image: url(../img/index_out.png);
}
.one:hover {
background-image: url(../img/index_on.png);
}
.two {
background-image: url(../img/role_out.png);
}
.two:hover {
background-image: url(../img/role_on.png);
}
.three {
background-image: url(../img/admin_out.png);
}
.three:hover {
background-image: url(../img/admin_on.png);
}
.four {
background-image: url(../img/fee_out.png);
}
.four:hover {
background-image: url(../img/fee_on.png);
}
.five {
background-image: url(../img/account_out.png);
}
.five:hover {
background-image: url(../img/account_on.png);
}
.six {
background-image: url(../img/service_out.png);
}
.six:hover {
background-image: url(../img/service_on.png);
}
.seven {
background-image: url(../img/bill_out.png);
}
.seven:hover {
background-image: url(../img/bill_on.png);
}
.eight {
background-image: url(../img/report_out.png);
}
.eight:hover {
background-image: url(../img/report_on.png);
}
.nine {
background-image: url(../img/information_out.png);
}
.nine:hover {
background-image: url(../img/information_on.png);
}
.ten {
background-image: url(../img/password_out.png);
}
.ten:hover {
background-image: url(../img/password_on.png);
}
/*收尾:去掉调试过程中的边框*/
.menu ul,.menu li,div {
border: 0;
}
运行结果
练习2
Insert title here
-
那是一个秋天
-
风儿那么缠绵
-
让我想起他们
-
那双无助的眼
-
那美丽的地方
-
你在何方?
练习3
Insert title here
沿着这条路一直走
练习4
Insert title here
十四、标记
Insert title here
- 江苏省
- 浙江省
- 云南省
- 山东省
- 湖南省
- 北京
- 上海
- 广州
- 南京
- 泰州
