HTML学习
1. HTML
- Hyper Text Markup Language(超文本标记语言)
- < body >、< /body>等成对的标签,分别叫做开放标签和闭合标签,
- 单独呈现的标签(空元素),如< hr/ >;意为用/来关闭空元素。
- html注释:< !–注释内容–>
<!--DOCTYPE:告诉浏览器使用什么规范(默认是html)-->
<!DOCTYPE html>
<!--语言 zh中文 en英文-->
<html lang="zh">
<!--head标签代表网页头部-->
<head>
<!--meta描述性标签,表示用来描述网站的一些信息-->
<!--meta一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="cherry的java学习">
<meta name="description" content="一起来学习java">
<!--title网站标题-->
<title>我的第一个网页</title>
</head>
<!--body代表主体-->
<body>
Hello World!
</body>
</html>
2. 网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>p换行1</p>
<p>p换行2</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
换行1 <br/>
换行2 <br/>
<!--换行标签比较紧凑,段落标签有明显段间距-->
<!--粗体 斜体-->
<h1>字体样式标签</h1>
粗体:<strong>I love you </strong><br/>
斜体:<em>I love you </em><br/>
<!--特殊符号-->
空格:1 2 3 4<br/>
空格:1 2 3 4<br/>
大于号:><br/>
小于号:<<br/>
版权符号:©<br/>
<!--特殊符号记忆:只要在idea中&敲出后就有提示-->
</body>
3. 图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片标签学习</title>
</head>
<body>
<!--src:资源地址 (必填)
相对地址(推荐使用),绝对地址
../ 上级目录
alt:在图片加载失败的时候,就会用文字代替 (必填)
title:鼠标悬停在图片上时,所显示的名字
width height 图片的高和宽-->
<img src="../resource/image/java学习.jpg" alt="oops!图像不见了" title="悬停文字" width="300" height="600">
</body>
</html>
4. 链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--a标签
href:跳转页面的地址 (必填)
a标签内文字:即显示的文字
可以把图片放在a标签内,点击图片跳转网页
target:表示在哪打开新网页_self:当前标签打开 _blank:新的页面中打开-->
<a href="1.我的第一个网页.html" target="_blank" title="123">点击跳转页面一</a> <br/>
<a href="https://www.baidu.com" target="_self">点击跳转百度</a> <br/>
<a href="https://www.baidu.com"><img src="../resource/image/java学习.jpg" alt="java学习图像不见了"></a>
<!--锚链接
1.需要一个标记锚,使用name做标记
2.跳转到标记
#页面内跳转-->
<a name="top"><顶部></顶部></a>
<a href="#top">回到顶部</a> <br/>
<!--也可以在网址后添加#号跳到对应网站的对应位置-->
<a href="https://www.baidu.com#down">百度底部</a> <br/>
<!--功能性链接
邮箱链接:mailto
QQ链接
-->
<a href="mailto:xxxxxxqq.com">点击联系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="你好加我领取小电影" title="你好加我领取小电影"/></a>
</body>
</html>
5. 行内元素和块元素
块元素: 无论内容多少,该元素独占一行
例如:<p></p><hr/> <h1>...<h6>
行内元素: 内容撑开宽度,左右都是行内元素的可以排在一行
例如:<a><strong><em>
6. 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>java</li>
<li>Python</li>
<li>C/c++</li>
<li>运维</li>
<li>前端</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>java</li>
<li>Python</li>
<li>C/c++</li>
<li>运维</li>
<li>前端</li>
</ul>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表内容-->
<dl>
<dt>学科</dt>
<dd>语文</dd>
<dd>数学</dd>
<dd>英语</dd>
<dt>语言</dt>
<dd>中文</dd>
<dd>英语</dd>
<dd>日语</dd>
</dl>
</body>
</html>
7. 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格table
行 tr
列 td
跨行 rowspan
跨列 colspan
-->
<table border="1px">
<tr><!--跨列-->
<td colspan="3">1-1</td>
</tr>
<tr><!--跨行-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
8. 视频和音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--视频和音频
src 资源路径
controls 控制面板
autoplay 自动播放
-->
<video src="../resource/video/xxx.mp4" controls autoplay></video>
<audio src="../resource/audio/晚风.m4a" controls autoplay></audio>
</body>
</html>
9. 页面结构
元素名 | 描述 |
---|---|
header | 标题头部区域的内容(用于页面或者页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用 |
nav | 导航类辅助内容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
10. 内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<!--iframe内联框架
src:内敛网站地址
w-h:宽度高度
name:框架标识名
-->
<iframe src="https://www.baidu.com" name="hello" width="1000" height="800"> </iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a> <!--在hello内联块内打开超链接-->
</body>
</html>
11. 表单(重点)
form标签,action属性为所提交的目的地址,method选择提交方式,可以选择使用post或者get方式提交
- get效率高,但在url中可以看到提交的内容,不安全,不能提交大文件
- post比较安全且可以提交大文件
标签 | 说明 |
---|---|
input标签 | 大部分表单元素对应的标签有text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text,可以提交用户名、密码等等 |
select标签 | 下拉选择框 |
textarea标签 | 文本域 |
属性 | 说明 |
---|---|
type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button,默认为text |
name | 指定表单元素的名称(提交时所对应的key) |
value | 元素的初始值,radio必须提供 |
size | 指定表单元素的初始宽度。当type为text或者password时,以字符为单位;其他type以像素为单位 |
maxlength | type为text或者password时,输入的最大字符数 |
checked | type为radio或者checkbox时,指定按钮是否被选中 |
表单初级验证:
属性 | 说明 |
---|---|
readonly | 只读,不可更改 |
disable | 禁用 |
hidden | 隐藏,虽然不可见但是会提交 |
id | 标识符,可以配合label的for属性增加鼠标的可用性 |
placehoder | text 文字域等输入框内的提示信息 |
required | 不能为空 |
patten | 正则表达式验证 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action:表单提交的动作,可以是交给一个网址,也可以是交给一个请求处理地址
method:post、get请求方式
get方法提交:可以在url中看到提交的信息,高效但不安全
post方式提交:比较安全,传输大文件-->
<form action="1.我的第一个网页.html" method="get">
<!--文本输入框:input type="text"-->
<p>用户名:<input type="text" name="username" value="请输入用户名" maxlength="10" size="20"></p>
<p>密 码:<input type="password" name="password" placeholder="请输入密码" required="required"></p>
<!--单选框标签:input type="radio"
value:单选框的值,在提交时对应value
name:单选框组名,在同一个组内的radio标签同时只能选中一个,name值在提交时对应key
checked:默认被选中
disable:禁用,不能选-->
<p>性别:
<input type="radio" value="boy" name="sex"/>
<input type="radio" value="girl" name="sex"/>
</p>
<!--多选框:input type="checkbox"-->
<p>爱好:
<input type="checkbox" value="basketball" name="hobby">打篮球
<input type="checkbox" value="sing" name="hobby">唱rap
<input type="checkbox" value="dance" name="hobby">跳舞
</p>
<!--按钮:input type="button" 普通按钮
input type="image" 图像按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
-->
<p>
<!--图片按钮默认是提交:和submit类似-->
<input type="button" name="btn1" value="按钮文字">
<input type="image" src="xxx/xxx">
</p>
<!--下拉框:selected:默认选项-->
<p>
你来自:
<select name="location">
<option value="china">中国</option>
<option value="us" selected>美国</option>
<option value="japan">日本</option>
</select>
</p>
<!--文本域-->
<p>
反馈:<textarea name="text" id="10" cols="30" rows="10" >文本内容</textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</p>
<!--邮件:会简单验证是否是邮箱地址
url:会简单验证是否是网络地址
number:数字验证-->
<p>邮箱:<input type="email" name="email">
url:<input type="url">
</p>
<!--数字验证
max最大数量
min 最小数量
step 每次点击增加或减少的数量-->
<p>商品数量:<input type="number" name="num" max="100" min="1" step="1"></p>
<!--滑块-->
<p>音量:<input type="range" min="0" max="100" name="voice" step="2"></p>
<!--搜索框-->
<p>搜索:<input type="search"></p>
<!--增强鼠标可用性-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
</p>
<p>
<!--submit提交表单,reset清空-->
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
CSS学习
如何学习
1.CSS是什么
2.CSS怎么用(快速入门)
3.CSS选择器(重点 + 难点)
4.美化页面(文字、阴影、超链接、列表、渐变…)
5.盒子模型
6.浮动
7.定位
8.网页动画(特效)
1. 什么是CSS
1.1 CSS
Cascading Style Sheet 层叠样式表
CSS:表现(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动
1.2 发展史
CSS1.0
CSS2.0:DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO
CSS2.1:浮动,定位
CSS3.0:圆角、阴影、动画…浏览器兼容性~
2. 快速入门
2.1 练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--规范,<style>可以编写CSS的代码,每一个声明最好以“;”结尾
语法:
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
建议使用这种规范(单独写一个css文件,用link标签引入css文件效果):
2.2 CSS的优势
- 内容和表现分离;
- 网页结构表现统一,可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO,容易被搜索引擎收录!
2.3 CSS的3种导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<!--内部样式-->
<style>
h1{
color: green;
}
</style>
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级:就近原则 行内样式 > 内部样式 > 外部样式-->
<!--行内样式:在标签元素种,编写一个style属性,编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>
拓展:外部样式两种方法
- 链接式:html
<!--外部样式-->
<link rel="stylesheet" href="css/style.css">
- 导入式:@import是CSS2.1特有的
<!--导入式-->
<style>
@import url("css/style.css");
</style>
3. 选择器
作用:选择页面上的某一个后者某一类元素
3.1 基本选择器
1.标签选择器:选择一种标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器,会选择到页面上所有这个标签的元素*/
h1{
color: orange;
background: blue;
border-radius: 10px;
}
h3{
color: orange;
background: blue;
border-radius: 10px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
<h3>标签选择器</h3>
<p>我爱学习</p>
<h1>学习JAVA</h1>
</body>
</html>
2.类选择器:选择所有class属性一致的标签,跨标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 .class的名称{}
好处:可以多个标签归类,是同一个class,可以复用*/
.demo1{
color: blue;
}
.demo2{
color: red;
}
.demo3{
color: aqua;
}
</style>
</head>
<body>
<h1 class="demo1">类选择器:demo1</h1>
<h1 class="demo2">类选择器:demo2</h1>
<h1 class="demo3">类选择器:demo3</h1>
<p class="demo3">p标签</p>
</body>
</html>
3.id选择器:全局唯一!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器:id必须保证全局唯一
#id名称{}
不遵循就近原则,优先级是固定的
id选择器 > class类选择器 > 标签选择器
*/
#demo1{
color: red;
}
.demo2{
color: green;
}
#demo2{
color: orange;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1 id="demo1" class="demo2">id选择器:demo1</h1>
<h1 class="demo2" id = "demo2">id选择器:demo2</h1>
<h1 class="demo2">id选择器:demo3</h1>
<h1 >id选择器:demo4</h1>
<h1>id选择器:demo5</h1>
</body>
</html>
优先级:id > class > 标签
3.2 高级选择器
1.层次选择器
- 后代选择器:在某个元素后面
- 子选择器:一代
- 相邻兄弟选择器:只有一个,向下相邻(弟弟选择器)
- 通用选择器:当前选中元素向下所有兄弟元素(弟弟们选择器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background: green;
}
/*后代迭代器*/
body p{
background: red;
}
/*子选择器*/
body>p {
background: black;
}
/*相邻兄弟选择器*/
.active+p{
background: yellow;
}
/*通用选择器*/
.active~p{
background: wheat;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
2.结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--避免使用.class和.id选择器-->
<style>
ul li:first-child{/*ul的第一个子元素*/
background: aqua;
}
ul li:last-child{/*ul的最后一个子元素*/
background: blue;
}
/*选中p1:定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效!*/
p:nth-child(1){
background: orange; /*由于第一个是h1标签,故不显示颜色*/
}
/*选中父元素下的,第1个p类型元素,精准定位*/
p:nth-of-type(1){
background: red;
}
a:hover{
color: green;
}
</style>
</head>
<body>
<a href="">123</a>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h3>h3</h3>
<ul>
<li>1li1</li>
<li>1li2</li>
<li>1li3</li>
</ul>
<ul>
<li>2li1</li>
<li>2li2</li>
<li>2li3</li>
</ul>
<a href="www.baidu.com">百度</a>
</body>
</html>
3.属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: aquamarine;
text-align: center;
color: gray;
text-decoration: none;
margin-right: 5px;
/*line-height:50px;*/
font: bold 20px/50px Arial;
}
/*属性名,属性名=属性值(正则)
= 表示绝对等于
*= 表示包含
^= 表示以...开头
$= 表示以...结尾
存在id属性的元素
a[]{}
*/
a[id]{
background: yellow;
}
a[id=first]{/*id=first的元素*/
background: green;
}
a[class*="links"]{/*class 中有links的元素*/
background: bisque;
}
a[href^=http]{/*选中href中以http开头的元素*/
background: aquamarine;
}
a[href$=pdf]{/*选中href中以http开头的元素*/
background: aquamarine;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank " title="test">2</a>
<a href="images/123.html" class="links item">3</a>
<a href="images/1.png" class="links item">4</a>
<a href="images/1.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>
4. 美化网页元素
4.1 为什么要美化网页
- 有效的传递页面信息
- 美化网页,页面漂亮才能吸引客户
- 凸显页面的主题
- 提高用户的体验
span标签: 重点要突出的字,使用span标签套起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size: 50px;
}
</style>
</head>
<body>
学习语言<span id="title1">JAVA</span>
</body>
</html>
4.2 字体样式
- font-family:字体
- font-size:字体大小
- font-weight:字体粗细
- color:字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font-family:"Arial Black",楷体;
color: red;
}
h1{
font-size: 50px;
}
.p1{
font-weight: 600;
color: gray;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>正文11111111</p>
<p class="p1">正文2222222</p>
</body>
</html>
4.3 文本样式
1.颜色——color:agb / rgba()
2.文本对齐方式——text-align:center
3.首行缩进——text-indent:2em
4.行高——line-height:300px;
5.装饰(下划线)——text-decoration
6.图片、文字水平对齐——img,span{vetical-align:middle}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: rgba(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p2{
background: black;
height: 300px;
line-height: 300px; /*行高和块高相同则居中*/
}
.l1{
text-decoration: line-through;/*中划线*/
}
.l2{
text-decoration: overline;/*上划线*/
}
.l3{
text-decoration: underline;/*下划线*/
}
a{
text-decoration: none;/*超链接去下划线*/
}
</style>
</head>
<body>
<a href="">123</a>
<p class="l1">123456789</p>
<p class="l2">123456789</p>
<p class="l3">123456789</p>
<h1>标题</h1>
<p>正文11111111111111</p>
<p class="p1">正文222222222222222</p>
<p class="p2">正文333333333333333</p>
</body>
</html>
4.4 超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{/*超链接有默认的颜色*/
text-decoration:none;
color:#000000;
}
a:hover{/*鼠标悬浮的状态*/
color:orange;
}
a:active{/*鼠标按住未释放的状态*/
color:green
}
a:visited{/*点击之后的状态*/
color:red
}
/*
第一个参数:表示水平偏移
第二个参数:表示垂直偏移
第三个参数:表示模糊半径
第四个参数:表示颜色
*/
#price{
text-shadow: 5px 5px 5px #3cc7f5;
}
</style>
</head>
<body>
<a href="#">
<img src="images/java学习.jpg" alt="">
</a>
<p>
<a href="#">java学习</a>
</p>
<p>
<a href="#">cherry</a>
</p>
<p id="price">
$99</a>
</p>
</body>
</html>
4.5 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="#">图书</a>
<a href="#">音像</a>
<a href="#">数字商品</a>
</li>
<li>
<a href="#">家用电器</a>
<a href="#">手机</a>
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a>
<a href="#">办公</a>
</li>
<li>
<a href="#">家居</a>
<a href="#">家装</a>
<a href="#">厨具</a>
</li>
<li>
<a href="#">服饰鞋帽</a>
<a href="#">个性化妆</a>
</li>
<li>
<a href="#">礼品箱包</a>
<a href="#">钟表</a>
<a href="#">珠宝</a>
</li>
<li>
<a href="#">食品饮料</a>
<a href="#">保健食品</a>
</li>
<li>
<a href="#">彩票</a>
<a href="#">旅行</a>
<a href="#">充值</a>
<a href="#">票务</a>
</li>
</ul>
</div>
</body>
</html>
#nav{
width: 300px;
background: antiquewhite;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;/*缩进*/
line-height: 35px;
background: red;
}
/*ul li*/
/*
list-style:
none 去掉实心圆
circle 空心圆
square 正方形
decimal 数字
*/
/*ul{!*nav替换效果*!
background: antiquewhite;
}*/
ul li{
height: 30px;
list-style: none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: burlywood;
text-decoration: underline;
}
4.6 背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
background-image: url("images/java学习.jpg");
/*默认是平铺的repeat*/
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
4.7 渐变
渐变配色方案网站:https://www.grabient.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--径向渐变、圆形渐变-->
<style>
body{
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
</style>
</head>
<body>
</body>
</html>
5. 盒子模型
5.1 什么是盒子模型
- margin:外边距
- padding:内边距
- border:边框
5.2 边框
border:粗细 样式 颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*body总有一个默认的外边距margin:0,常见初始化操作,开发规范*/
/*h1,ul,li,a,body{*/
/* margin: 0;*/
/* padding: 0;*/
/* text-decoration: none;*/
/*}*/
/*border:粗细、样式、颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: wheat;
line-height: 30px;
margin: 0;
}
form{
background: wheat;
}
div:nth-child(1) input{
border: 3px solid black;
}
div:nth-child(2) input{
border: 3px dashed orangered;
}
div:nth-child(3) input{
border: 3px solid gray;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名: </span>
<input type="text">
</div>
<div>
<span>密码: </span>
<input type="text">
</div>
<div>
<span>邮箱: </span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
5.3 外边距----妙用:居中
margin-left/right/top/bottom–>表示四边,可分别设置,也可以同时设置如下
margin:0 0 0 0/*分别表示上、右、下、左;从上开始顺时针*/
margin:0 auto /*auto表示左右自动,即居中*/
margin:4px/*表示上、右、下、左都为4px*/
margin:10px 20px 30px/*表示上为10px,左右为20px,下为30px*/
盒子的计算方式:
margin+border+padding+内容的大小
5.4 圆角边框
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
/*一个border-radius只管一个圆的1/4*/
border-radius: 50px 20px 20px 30px;/*左上 右上 右下 左下 ,顺时针方向*/
}
</style>
5.5 盒子阴影
box-shadow: 10px 10px 1px black;
6. 浮动
6.1 标准文档流
块级元素:独占一行 h1~h6 、p、div、 列表…
行内元素:不独占一行 span、a、img、strong
注: 行内元素可以包含在块级元素中,反之则不可以
6.2 display(重要)
- block:块元素
- inline:行内元素
- inline-block:是块元素,但是可以内联,在一行 。(这也是一种实现行内元素排列的方式,但是我们很多情况用float)
- none:消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--block 块元素
inline 行内元素
inline-block 是块元素,但是可以内联 ,在一行
-->
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
6.3 float
float:left //左浮动
float:right //右浮动
6.4 overflow及父级边框塌陷问题
clear:left //左侧不允许有浮动
clear:right //右侧不允许有浮动
clear:both //两侧不允许有浮动
解决塌陷问题方案:
方案一:增加父级元素的高度;
方案二:增加一个空的div标签,清除浮动
<div class = "clear"></div>
<style>
.clear{
clear:both;
margin:0;
padding:0;
}
</style>
方案三:在父级元素中增加overflow:hidden
overflow:hidden/*隐藏超出部分*/
overflow:scoll/*滚动*/
方案四:父类元素中添加一个伪类after
#father:after{
content:'';
display:block;
clear:both;
}
小结:
- 浮动元素增加空div----> 简单、代码尽量避免空div。
- 设置父元素的高度-----> 简单,但是元素假设有了固定的高度,可能就会超出范围。
- overflow----> 简单,下拉的一些场景避免使用。
- 父类添加一个伪类:after(推荐)----> 写法稍微复杂,但是没有副作用,推荐使用。
display与float对比
- display:方向不可以控制。
- float:浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题。
7. 定位
7.1 相对定位
相对定位:positon:relstive;
相对于原来的位置,进行指定的偏移,相对定位的话,它仍然在标准文档流中!原来的位置会被保留。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<!--相对定位
相对于自己原来的位置进行偏移
-->
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: #ffa538 1px solid;
padding: 0;
}
#first{
border: #b3ff38 1px solid;
background-color: #ffa538;
position: relative;/*相对定位:上下左右*/
top: -20px;/*向上偏移20px*/
left: 20px;/*向右偏移20px*/
}
#second{
border: #427b11 1px solid;
background-color: #66c77f;
}
#third{
background-color: #b3ff38;
border: #38d7ff 1px solid;
position: relative;
bottom: 10px;/*向上偏移10px*/
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
练习:
代码:
7.2 绝对定位和固定定位
定位:基于xxx定位,上下左右~
1、没有父级元素定位的前提下,相对于浏览器定位
2、假设父级元素存在定位,我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
总结:相对一父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height: 1000px;
}
div:nth-of-type(1){
width: 100px;
height: 100px;
background-color: red;
position: absolute;/*absolute 绝对定位*/
right: 0;
bottom: 0;
}
div:nth-of-type(2){
width: 50px;
height: 50px;
background-color: #b3ff38;
position: fixed;/*fixed 固定定位*/
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
7.3 z-index
图层-z-index:默认是0,最高无限~999
#content{
width: 380px;
padding: 0px;
margin: 0px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid yellow;
}
ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
/*父级元素相对定位*/
#content ul{
position: relative;
}
.tipText,.tipBg{
position: absolute;
width: 380px;
height: 25px;
top:216px
}
.tipText{
color: white;
z-index: 999;
}
.tipBg{
background: orange;
opacity: 0.5;/*背景透明度*/
filter: alpha(opacity=50);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<style></style>
</head>
<body>
<div id="content">
<ul>
<li><img src="images/img.png" alt=""/></li>
<li class="tipText">学习微服务,找狂神</li>
<li class="tipBg"></li>
<li>时间:2099-01-01</li>
<li>地点:月球一号基地</li>
</ul>
</div>
</body>
</html>
8. 总结
完结撒花!