目录
课程介绍
1. web前端: 学习如何搭建页面。
2. 数据库: 学习如何对数据进行增删改查 。
3. Servlet: 判断请求的目的从而做出对应的响应 (获取请求并做出响应)。
服务器
- 指一台高性能的电脑。
- web服务器:就是安装了web服务的软件的高性能电脑。
- 邮件服务器:就是安装邮件服务的软件的高性能电脑。
- 数据库服务器: 在高性能电脑上安装了 数据库服务软件。
- ftp服务器: 在高性能电脑上安装了 文件上传下载服务 。
Web前端课程介绍
1. HTML: 负责搭建页面结构和内容 (盖房子)。
2. CSS: 负责美化页面 (装修)。
3. JavaScript: 负责给页面添加动态效果和动态内容 。
4. jQuery: 是一个js框架,用于简化原生JavaScript开发 。
5. Bootstrap: 是一个前端框架,基于html css jQuery, 让前端页面开发变得更简洁。
HTML
- HTML(Hyper Text Markup Languge): 超文本标记语言 ,XML是可扩展标记语言 其内部的标签程序员可以自定定制扩展, 学习HTML主要学习的就是HTML内部有哪些标签,标签有哪些属性,标签和标签的嵌套关系。
- 超文本:不仅仅是纯文本,还包括字体相关设置(大小,颜色,风格等)还包括多媒体信息(图片/音频/视频)。
创建HTML
- 新建文件->other->搜索html
HTML结构介绍
<!DOCTYPE html><!-- 以h5的标准,解析页面 -->
<html><!-- 根标签 -->
<head><!-- 头标签:里面的内容是给浏览器看的 -->
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body><!-- 体标签:里面的内容是给用户看的 -->
</body>
</html>常见的文本标签
1. 内容标题: h1-h6
独占一行,字体加粗,自带上下间距。
2. 段落标签: p
独占一行,自带上下间距。
3. 加粗和斜体
<b> <i>
列表标签
1. 无序列表: <ul> <li>
<ul type="square"><!-- unordered list 无序列表 -->
<li>刘备</li><!-- list item 列表项 -->
<li>孙尚香</li>
<li>妲己</li>
<li>刘禅</li>
<li>韩信</li>
</ul>
2. 有序列表: <ol><li>
<ol type="1" start="10" reversed="reversed"><!-- ordered list 有序列表 -->
<li>打开冰箱门</li>
<li>大象装进去</li>
<li>关上冰箱门</li>
<li>关上冰箱门</li>
<li>关上冰箱门</li>
<li>关上冰箱门</li>
</ol>
3. 定义列表: <dl><dt><dd>
<dl><!-- 定义列表 -->
<dt>凉菜</dt> <!-- 定义术语(标题) -->
<dd>拍黄瓜</dd> <!-- 定义描述 -->
<dd>芥末鸭掌</dd>
<dd>花毛一体</dd>
<dt>热菜</dt>
<dd>宫保鸡丁</dd>
<dd>水煮鱼</dd>
<dd>酱烧排骨</dd>
</dl>
4. 列表嵌套: 有序和无序 可以任意无限嵌套
<ul>
<li>河北
<ol>
<li>aaa
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</li>
<li>bbb</li>
<li>ccc</li>
</ol>
</li>
<li>河南</li>
<li>山东</li>
</ul>
图片标签img
src 路径
1. 相对路径: 访问站内资源时使用
a. 同目录: 直接写图片名
b. 上级目录: ../图片名
c. 下级目录: 文件夹名/图片名
2. 绝对路径: 访问站外资源时使用(图片盗链)
以http开头, 好处:节省本站资源 坏处: 可能找不到图片
- alt: 当图片不能正常显示时显示的文本
- title: 鼠标悬停时显示的文本
- width/height: 1. 像素 2. 百分比
超链接a
- href: 路径(可以指向站内,也可以指向站外) , 可以指向页面资源和文件资源(浏览器支持浏览则浏览不支持则下载)。
- 图片超链接: 用a标签把img标签包裹后 就是图片超链接。格式如下：
<a href="xxxx"><img src="xxxx"></a>
表格table
- 子标签: tr(table row 表格的行) td(table data 表格的列) th(table head表头,加粗并居中) caption表格标题
- 属性: border边框 cellspacing单元格之间的间距 rowspan跨行 colspan跨列
表单form
- 作用: 用于获取用户输入的各种信息,并且信息 提交到服务器 。
- 学习form主要学习的就是表单中有哪些控件: 文本框text/密码框password/单选radio/多选checkbox/下拉选select/日期选择器date/文件选择器file等。
- 表单的实现效果和代码:
<!-- 所有控件 必须有一个name属性
不然用户写的信息不会提交 -->
<form action="http://www.tmooc.cn">
<!-- value设置默认值
placeholder 占位文本 -->
用户名:<input type="text" name="username"
value="hehe" placeholder="请输入用户名"><br>
密码:<input type="password" name="pw"
placeholder="请输入密码"><br>
<!-- 单选中的value控制提交内容
checked默认选中 -->
性别:<input type="radio" name="gender"
value="m">男
<input type="radio" name="gender"
value="w" checked="checked">女<br>
爱好:<input type="checkbox" name="hobby" value="cy">抽烟
<input type="checkbox" name="hobby" value="hj">喝酒
<input type="checkbox" checked="checked"
name="hobby" value="tt">烫头<br>
生日:<input type="date" name="birthday"><br>
<input type="submit" value="注册">
</form>文件选择器和下拉选的实现效果和代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="http://www.tmooc.cn">
<!-- 文件选择器 -->
靓照:<input type="file" name="pic"><br>
<!-- 下拉选 -->
所在城市:
<select name="city">
<option>请选择</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<!-- selected 默认选中 -->
<option value="xg"
selected="selected">香港</option>
</select><br>
<input type="submit" value="注册">
</form>
</body>
</html>注册表单练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="http://www.tmooc.cn">
<table border="1" cellspacing="0"
align="center">
<caption>注册表单</caption>
<tr>
<td>用户名:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pw1"></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="pw2"></td>
</tr>
<tr>
<td>昵称:</td>
<td><input type="text" name="nick"></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="gender" value="m">男
<input type="radio" name="gender" value="w">女</td>
</tr>
<tr>
<td>爱好:</td>
<td><input type="checkbox" name="hobby"
value="cy">抽烟
<input type="checkbox" name="hobby"
value="hj">喝酒
<input type="checkbox" name="hobby"
value="tt">烫头</td>
</tr>
<tr>
<td>生日:</td>
<td><input type="date" name="birthday"></td>
</tr>
<tr>
<td>靓照:</td>
<td><input type="file" name="pic"></td>
</tr>
<tr>
<td>城市:</td>
<td>
<select name="city">
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
<option value="gz">广州</option>
</select>
</td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text" name="yzm">
<img src="../imgs/2.gif" width="50" height="20"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</body>
</html>修改eclipse默认的缩进方式
- window->prefrences->web->html files->Editor->勾选Indent use spaces把下面的1改成2。
实体引用(特殊字符)
- 空格折叠现象:当连续有多个空格出现时 浏览器只能识别一个空格.
- 空格:
- 小于号: <
- 大于号: >
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>刘备 关羽 张飞 <abc> </p>
<div>div1</div><div>div2</div><div>div3</div>
</body>
</html>分区标签div
- 标签自身没有任何显示效果。
- 用于将多个相关的标签进行统一管理。
- div默认独占一行
- 一个页面至少分为三大区 头 体 尾(脚)
<div>头</div>
<div>体</div>
<div>尾(脚)</div>
- 为了提高代码的可读性,html5中 新增了几个分区标签,作用和div一样
1. header 头
2. footer 脚
3. article 文章/正文
4. section 块/区域
5. nav 导航
<header>头</header>
<article>体</article>或<section>体</section>
<footer>脚</footer>
CSS
- Casecading Style Sheet: 层叠样式表。
- 作用: 负责美化页面。
CSS的三种引入方式
1. 内联样式: 在任意标签的style属性中添加样式代码,弊端:不能复用
2. 内部样式: 在head里面添加style标签在标签体内添加样式代码,弊端:只能当前页面复用,不能多页面复用.
3. 外部样式: 在单独的css文件中写样式代码,需要引用样式的页面,在head标签里面通过link标签引入css样式文件, 可以多页面复用.
- 三种引入方式的优先级: 内联优先级最高,内部和外部优先级相同,后执行覆盖先执行的。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 通过选择器 选中标签后再添加样式 */
/* 标签名选择器 */
h4{
color: blue;
}
</style>
<!-- 引入css样式文件 rel是关系单词的前三个字母-->
<link rel="stylesheet" href="first.css">
</head>
<body>
<h4>aaa</h4>
<h4>bbb</h4>
<h3 style="color: red">今天web前端第二天</h3>
<h3 style="color: red">该吃饭了!</h3>
</body>
</html>first.css文件：
@charset "UTF-8";
/* 标签名选择器 */
h3{
background-color: green;
}
选择器
- 选择器用于选中页面中的某些标签。
1. 标签名选择器
- 选取页面中所有同名标签。
- 格式: 标签名{样式代码}
2. id选择器
- 任何标签都可以添加一个id属性,id值不建议重复。
- 格式: #id{样式代码}
3. class选择器
- 当需要选取页面中多个不相关的标签时可以给多个标签添加相同的class。
- 格式: .class{样式代码}
4. 属性选择器
- 通过元素已有属性选择标签。
- 格式: 标签名[属性名='属性值']{样式代码}
5. 分组选择器
- 将多个选择器合并成一个选择器。
- 格式: h3,#abc,.c1{样式代码}
6. 子孙后代选择器
- 通过标签之间的层级关系选择标签。
- 格式: body div p{样式代码}
选取body里面的div里面的所有p。
7. 子元素选择器
- 通过标签之间的层级关系选择标签。
- 格式: body>div>p{样式代码}
选取body里面的div里面的p子元素。
8. 伪类选择器
- 选取的是标签的状态。
- 有哪些状态: 1. 未访问状态 2. 访问过状态 3. 悬停状态 4. 点击状态
- 格式: a:link/visited/hover/active{样式代码}
9. 任意元素选择器
- 选取页面中所有的标签。
- 格式: *{样式代码}
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* id选择器 */
#b{
color: red;
}
/* 类选择器 */
.c1{
color: green;
}
/* 属性选择器 */
input[type='text']{
background-color: green;
}
/* 让h2,id=b和class=c1的所有元素背景色为紫色 */
/* 分组选择器 将多个选择器通过,合并成一个 */
h2,#b,.c1{
background-color: purple;
}
</style>
</head>
<body>
<h2>我是个h2</h2>
<h3>aaa</h3>
<h3 id="b">bbb</h3>
<h3 class="c1">ccc</h3>
<div>d1</div><div>d2</div>
<div class="c1">d3</div>
<p>p1</p><p>p2</p><p class="c1">p3</p>
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
</body>
</html>
子孙后代和子元素选择器代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 子孙后代选择器 */
/* 选取body里面div里面所有的p */
/* body div p{
color: red;
} */
/* 子元素选择器 */
/* body里面的div里面的p子元素 */
body>div>p{
color: red;
}
</style>
</head>
<body>
<p>p1</p>
<div>
<p>p2</p>
<div>
<p>p3</p>
</div>
<div>
<p>p4</p>
<div>
<p>p5</p>
</div>
</div>
</div>
</body>
</html>任意元素选择器代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 访问过 */
a:visited {
color: red;
}
a:link{/* 未访问 */
color: yellow;
}
a:hover {/* 悬停 */
color: purple;
}
a:active {/* 点击 */
color: green;
}
/* 任意元素选择器 */
*{
/* 边框: 粗细 样式 颜色 */
border: 1px solid red;
}
</style>
</head>
<body>
<h3>这是h3</h3>
<p>这是个p</p>
<div>这是个div</div>
<a href="../imgs/a.jpg">超链接1</a>
<a href="../imgs/b.jpg">超链接2</a>
<a href="../imgs/c.jpg">超链接3</a>
<a href="../imgs/d.jpg">超链接4</a>
</body>
</html>常见样式
颜色赋值
- 三原色: 红绿蓝 rgb red green blue 每种颜色的取值范围0-255。
1. 颜色单词赋值 。
2. 6位16进制赋值 #ff0000 每两位表示一个颜色。
3. 3位16进制赋值 #f00 每一位重复并表示一个颜色。
4. 3位10进制赋值 rgb(255,0,0);
5. 4位10进制赋值 rgba(255,0,0,0.5) a=alpha透明度取值0-1 值越小越透明。
背景图片
background-image: url("../imgs/a.jpg");
background-size: 100px 100px;
background-repeat: no-repeat;/* 禁止重复 */
background-position: 50% 50%; /* 控制背景图片的位置 */
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h3{
color: red;
/*
#ff0000
#f00
rgb(255,0,0)
rgba(255,0,0,0.5)
*/
}
#d1{
width: 300px;
height: 300px;
background-color: pink;
background-image: url("../imgs/a.jpg");
background-size: 100px 100px;
background-repeat: no-repeat;/* 禁止重复 */
/* 控制背景图片的位置 */
background-position: 50% 50%;
}
#d2{
/* 宽611高376 背景颜色#e8e8e8
图片尺寸318*319 */
width: 611px;
height: 376px;
background-color: #e8e8e8;
background-image: url("http://doc.tedu.cn/tstore_v1/images/itemCat/study_computer_img1.png");
background-size: 318px 319px;
background-repeat: no-repeat;
background-position: 90% 70%;
}
</style>
</head>
<body>
<div id="d1" ></div>
<div id="d2"></div>
<h3>颜色测试</h3>
</body>
</html>元素的显示方式display
1.block: 块级元素, 独占一行, 元素可以修改宽高。
h1-h6, p , div
2.inline: 行内元素, 共占一行,元素不能修改宽高。
b , i , span(容器:作用是装各种行内元素)
3. inline-block:行内块元素, 共占一行,并且可以修改宽高。
img
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div,span{
border: 1px solid red;
}
span{/* span是行内元素不能修改宽高 */
width: 100px;
height: 100px;
/* 把默认的行内元素inline改成块级元素block
span就可以修改宽高了 */
display: inline-block;
}
img{
width: 50px;
}
</style>
</head>
<body>
<img src="../../imgs/2.gif">
<img src="../../imgs/2.gif">
<img src="../../imgs/2.gif">
<img src="../../imgs/2.gif">
<div>div1</div>
<div>div2</div><div>div3</div>
<span>span1</span><span>span2</span><span>span3</span>
<img src="">
</body>
</html>盒子模型
盒子模型=外边距+边框+内边距+宽高
- 通过所学的盒子模型可以控制元素在页面中的显示效果(位置/大小/边框/内容句边框的位置)。
盒子模型之宽高 width/height
- 赋值方式: 1. 像素 2. 百分比
- 行内元素不能修改宽高。
盒子模型之外边距
- 什么是外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距。
- 赋值方式:
margin-left/right/top/bottom: 10px;
margin:10px; 四个方向10个像素
margin:10px 20px; 上下10 左右20
margin: 0 auto; 居中
margin: 10px 20px 30px 40px;上右下左 顺时针
- 行内元素上下外边距无效。
- 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时会出现粘连问题,通过给上级元素添加overflow:hidden解决。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#d1{
width: 100px;
height: 100px;
background-color: blue;
/* 添加外边距 */
/* margin-left: 100px; 一个方向*/
/* margin: 50px; 四个方向*/
/* margin:50px 100px; */ /* 上下50 左右100 */
/* margin: 0 auto; */ /* 居中 */
/* margin:10px 20px 30px 40px; */ /*上右下左 顺时针 */
}
#d2{
/* margin-top:50px; */
width: 100px;
height: 100px;
background-color: green;
}
#s1{
margin-left: 50px;
margin-right: 50px;
/* 行内元素上下外边距无效 */
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="d1">div1</div>
<span id="s1">span1</span><span>span2</span>
<div id="d2">div2</div>
</body>
</html>盒子模型之边框
- 赋值方式: border: 边框粗细 边框样式 颜色;
border-left/right/top/bottom: 边框粗细 边框样式 颜色;
- 圆角: border-radius:20px; 值越大越圆。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body>div{
border:1px solid purple;
/* 圆角设置 值越大越圆 */
border-radius:30px;
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;/* 解决了粘连问题 */
}
div>div{
width: 50px;
height: 50px;
background-color: green;
margin-left: 50px;
/* 当元素上边缘和上级元素上边缘重叠时会出
现粘连问题 通过给上级元素添加overflow:hidden解决 */
margin-top: 50px;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>盒子模型之内边距
- 什么是内边距: 元素边框距内容的距离。
- 赋值方式: 和外边距类似
padding-left/right/top/bottom: 10px;
padding:10px; 四个方向
padding:10px 20px; 上下10 左右20
padding:10px 20px 30px 40px; 上右下左 顺时针
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#d1{
width: 100px;
height: 100px;
border: 1px solid red;
/* 添加内边距 */
padding-top: 50px;
padding-left: 50px;
/* 添加外边距 */
margin: 30px 0 0 40px;
}
</style>
</head>
<body>
<div id="d1">ABC</div>
</body>
</html>练习代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#d1{
width: 100px;
height: 80px;
background-color: blue;
margin: 40px 0 0 40px;
overflow: hidden;
}
#d1>div{
width: 40px;
height: 30px;
background-color: yellow;
margin: 20px 0 0 10px;
}
#d2{
width: 130px;
height: 60px;
background-color: green;
border-radius: 10px;
border: 1px solid black;
margin: 20px 0 0 180px;
padding: 20px 0 0 10px;
}
</style>
</head>
<body>
<div id="d1">
<div></div>
</div>
<div id="d2">又该吃饭了<br>做完去吃饭!</div>
</body>
</html>文本相关样式
- 水平对齐方式
text-align:left/right/center;
- 文本修饰
text-decoration: overline/underline/line-through/none
- 文本颜色
color: red;
- 行高
line-height: 30px;
字体相关
- 字体大小
font-size: 像素
- 字体加粗
font-weight: bold/normal;
- 斜体
font-style: italic;
- 字体设置
font-family: xxx,xxx,xxx,xxx;
font: 字体大小 xxx,xxx,xxx;
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 200px;
height: 80px;
border: 1px solid red;
/* 水平对齐方式 left/right/center*/
text-align: center;
/* 文本修饰
none/overline/underline/line-through */
text-decoration: none;
/* 文本颜色 */
color: red;
/* 行高 */
line-height: 80px;
/* 字体大小 */
font-size: 30px;
/* 字体加粗 */
font-weight: bold;
}
a{
/* 去掉超链接自带下划线 */
text-decoration: none;
}
h1{
/* 去掉自带加粗 */
font-weight: normal;
/* 斜体 */
font-style: italic;
/* 字体设置 */
/* font-family: 黑体; */
font: 15px 黑体;
}
</style>
</head>
<body>
<h1>这是h1</h1>
<a href="">超链接</a>
<div>下午上课好困!</div>
</body>
</html>CSS的三大特性
1. 继承性: 元素可以继承上级元素的文本和字体相关的样式, 部分标签自带效果不受继承影响,比如:h1-h6自带的字体大小不受继承影响, 超链接的自带字体颜色也不受继承影响。使用继承性 可以让样式代码复用,提高开发效率。
2. 层叠性: 不同的选择器有可能会选择到相同的元素,如果作用的样式不同则全部层叠生效,如果作用的样式相同则由选择器的优先级决定。
3. 优先级(选择器的优先级,前面学的是引入方式的优先级): 作用范围越小优先级越高 id选择器>类选择器>标签名>继承(继承属于间接选中)。
练习代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body>div{
width: 611px;
height: 376px;
background-color: #e8e8e8;
background-image: url("http://doc.tedu.cn/tstore_v1/images/itemCat/study_computer_img1.png");
background-repeat: no-repeat;
background-size: 318px 319px;
background-position: 90% 70%;
overflow: hidden;/* 解决粘连问题 */
}
div>div{
width: 245px;
height: 232px;
margin: 68px 0 0 36px;
}
.p1{
color: #333;
font-size: 32px;
margin-bottom: 12px;
}
.p2{
font-size: 12px;
margin-bottom: 24px;
color: #666;
}
.p3{
font-size: 24px;
font-weight: bold;
color: #0aa1ed;
margin-bottom: 12px;
}
a{
background-color: #0aa1ed;
color: white;
font-size: 20px;
text-decoration: none;
/* 修改为块级元素 不然不能修改宽高 */
display: block;
width: 132px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 3px;
}
</style>
</head>
<body>
<div>
<div>
<p class="p1">灵越 燃7000系列</p>
<p class="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br>英特尔HD显卡620含共享显卡内存</p>
<p class="p3">￥4999.00</p>
<a href="http://www.tmooc.cn">查看详情</a>
</div>
</div>
</body>
</html>溢出设置overflow
- hidden 超出隐藏
- visible 超出显示(默认)
- scroll 超出滚动显示
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 300px;
height: 300px;
border: 1px solid red;
/* 溢出设置hidden隐藏 scroll滚动显示 */
overflow: scroll;
}
</style>
</head>
<body>
<div>
<img src="../../imgs/k.jpg">
</div>
</body>
</html>定位方式
- 定位方式有4+1种。
position定位
1.静态定位:static 默认的定位方式 也称为文档流定位,特点: 元素从上到下,从左向右排列, 通过外边距控制元素的位置。
2.相对定位:relative, 特点: 元素从初始位置通过left/right/top/bottom做位置偏移,元素不会脱离文档流(仍然占着原来的位置) 。
3.绝对定位:absolute, 特点: 元素相对于窗口或某一个上级元素(做相对定位的上级元素),通过left/right/top/bottom做位置偏移,元素脱离文档流(不占原来的位置)。
4.固定定位:fixed, 特点: 元素通过left/right/top/bottom相对于窗口做位置偏移,脱离文档流, 当需要让元素固定在窗口的某个位置时使用固定定位。
5.浮动定位 float: left/right
元素从当前所在行向左或向右浮动,当装到上级元素边框或其它浮动元素时停止.元素脱离文档流(不占原来的位置)。
一行装不下会自动换行,换行时有可能被卡住。
应用场景: 当需要将纵向排列的元素改成横向排列时使用浮动定位。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
/* 相对定位 */
position: relative;
}
div:hover{
/* 相对定位元素相对于初始位置做偏移 */
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#d1,#d3{
width: 100px;
height: 50px;
border: 1px solid red;
}
#d2{
width: 50px;
height: 50px;
border: 1px solid blue;
/* 绝对定位 */
position: absolute;
/* top: 23px;
left: 60px; */
}
#big{
width: 200px;
height: 200px;
background-color: red;
margin: 50px 0 0 50px;
overflow: hidden;/* 解决粘连 */
}
#middle{
width: 100px;
height: 100px;
background-color: yellow;
margin: 50px 0 0 50px;
position: relative;/* 做位置参考 */
}
#small{
width: 50px;
height: 50px;
background-color: blue;
/* 绝对定位默认相对于窗口,如果希望相对
某个上级元素的话,需要把上级元素改成相对定位 */
position: absolute;
top: 0;
right:10px;
}
</style>
</head>
<body>
<div id="big">
<div id="middle">
<div id="small"></div>
</div>
</div>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
</body>
</html>代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{
margin: 0;/* 去掉自带8个像素的外边距 */
padding-top: 88px;
}
#d1{
width: 100%;
height: 80px;
background-color: red;
/* 固定定位 */
position: fixed;
top: 0;
}
#d2{
width: 50px;
height: 200px;
background-color: blue;
position: fixed;
right: 20px;
bottom: 50px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<img src="../../imgs/a.jpg">
<img src="../../imgs/b.jpg">
<img src="../../imgs/c.jpg">
<img src="../../imgs/d.jpg">
</body>
</html>代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body>div{
width: 200px;
height: 200px;
border: 1px solid red;
}
#d1{
width: 80px;
height: 50px;
background-color: red;
float: left;
}
#d2{
width: 80px;
height: 50px;
background-color: green;
float: left;
}
#d3{
width: 80px;
height: 50px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
</html>代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
li{
float: left;
width: 100px;
}
ul{
list-style-type: none;/* 去掉图标 */
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>免费课</li>
<li>直播课</li>
<li>会员课</li>
<li>精品课</li>
</ul>
</body>
</html>多背背知识点，以便后期得心应手！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
