设计网页的基本步骤
确定核心页面
确定每一行
确定每一行中的浮动情况
先写结构再写模式、先写html再写css
Html
超文本标记语言(超过文本,还有图片等格式)
标签:单标签、双标签、框架标签
注释
<!-- 代码千万行,注释第一行。 -->
特殊字符
代码 显示结果 描述
< < 小于号或显示标记(less than)
> > 大于号或显示标记(great than)
& & 可用于显示其它特殊字符
" “ 引号
® ® 已注册
© © 版权
™ ™ 商标
  半个空白位
  一个空白位
不断行的空白
路径
相对路径
相对当前文件的路径
/ | 进入下一级目录 |
---|---|
…/ | 进入上一级目录(两个点) |
./ | 本目录(一个点) |
绝对路径
文件在计算机上的完整路径(X盘等),更换电脑时,可能会出现问题(由于底层路径不一致)
框架标签
!DOCTYPE html> 声明为HTML5 文档(告诉计算机,这个文档是HTML5的小弟)
<html> 元素是HTML页面的根元素
<html lang="en"> 告诉浏览器这是是哪种语言的网站,不影响内容。 zh-CN 是中文网站
<head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
单标签
br标签(强制换行)
标签的特性:来自break的缩写,顾名思义,强制打断,跳入下一行。
<br/>
img标签(图片)
src | 图片的url(必须属性) |
---|---|
alt | 图片加载失败时展示的文字 |
title | 鼠标放在图片上展示的文字 |
height、width | 图片的高宽(两者只修改其一不会改变图片的高宽比) |
border | 图片的边框 |
<img src="img/qianFuXin6981t010a2b73d9705e036b.jpg" alt="加载失败" title="me" width="800" border="15" />
input标签(输入标签)
type | 介绍 |
---|---|
text | 文本 |
password | 密码 |
radio | 单选框(name需要相同,用value区分) |
checkbox | 多选框(name需要相同,用value区分) |
button | 按钮 |
file | 上传文件 |
submit | 提交 |
reset | 重制 |
<form action="" method="post">
userName:<input type="text" value="userName" name="userNameInput" maxlength="10">
<br>
password:<input type="password" name="passwordInput" />
<br>
<label for="man">男:</label><input type="radio" name="sexInput" id="man" value="男" />
<br>
女:<input type="radio" name="sexInput" id="" value="女" checked="checked"/>
<br />
吃饭:<input type="checkbox" name="hobbyInput" id="" value="吃饭" />
睡觉:<input type="checkbox" name="hobbyInput" id="" value="睡觉" />
打豆豆:<input type="checkbox" name="hobbyInput" id="" value="打豆豆" checked="checked" />
<br>
<input type="button" name="" id="" value="按钮" />
<br>
上传文件:<input type="file" name="" id="" value="" /><br>
<input type="submit" id="" name="" value="立即提交" />
<input type="reset" value="数据初始化" />
</form>
双标签
h系列标签(标题)
标签的特性:独占一行、文字大、字体粗
<h1>我是标题1</h1>
<h2>我是标题2</h2>
....
<h6>我是标题6</h6>
p标签(段落)
标签的特性:段落标签之后的文字另起一行,标签内的文字随着浏览器的宽度而自动换行
<p>我是段落</p>
文字修饰标签(加粗、斜体、下划线、删除线)
<strong>加粗</strong>
<del>删除线</del>
<em>倾斜</em>
<ins>下划线</ins>
div标签(盒子)
标签的特性:默认一个div占一行
<div>我是div</div>
span标签(盒子)
标签的特性:默认多个span占一行
<span>我是span</span>
a标签(超链接标签)
a 来自anchor的缩写
标签的特性:载体可以是文字、图片、表格等
href | 超链接的地址 |
---|---|
target | 打开方式(默认_self 可设为_blank) |
download | 点击链接下载URL的内容 |
- 如果href为#代表href为空
- 如果href为.zip等压缩文件结尾则等价于文件下载
- 如果href为#X(X为某个标签的id)则跳转到那个标签(例如返回首部、跳转到尾部)
table标签(表格标签)
PS:表格里放表单 可以布局
align | 表格的位置 |
---|---|
border | 边框 |
cellspacing | 单元格之间的距离 |
cellpadding | 文字与边框的距离 |
width | 宽度 |
height | 高度 |
子标签:
thead、tbody 表格的头和身体
th 表格数据的第一列(加粗 居中的效果)
tr 某一行表格
td 某个单元格
合并单元格(记得删除后者的单元格):
rowspan:上下拼接单元格
colspan:左右拼接单元格
<table align="center" border="1" cellspacing="0" cellpadding="10">
<thead>
<th></th>
<th></th>
<th></th>
</thead>
<tbody>
<tr>
<td rowspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
ul标签(无序列表标签)
ul 来自 unordered list缩写
ul内部只能存放li
li内部可以放任何东西
<h1>无序标签</h1>
<ul>
<li><img src="img/123.jpg" alt="加载失败" title="me" width="800" border="15" /></li>
<li>1</li>
<li>1</li>
</ul>
ol标签(有序列表标签)
ol 来自ordered list缩写
ol内部只能存放li
li内部可以放任何东西
<h1>有序标签</h1>
<ol>
<li>1</li>
<li>2</li>
</ol>
dl标签(自定义标签)
dl来自 define list的缩写
dl内部只能放dt、dd
dt是大哥、dd是小弟,两者都能放任何东西
<h1>自定义标签</h1>
<dl>
<dt>大哥</dt>
<dd>小弟</dd>
</dl>
form标签(表单标签)
表单控件:input、select、textarea、lable
<form action="" method="">
action:跳转地址
method:post方式还是get方式
表单内部存放表单控件
input在上面的单标签区域
selected、textarea、lable在下面双标签区域
</form>
select标签(下拉框标签)
性别:<select name="">
<option value="boy" selected="selected">男</option>
<option value="girl">女</option>`在这里插入代码片`
</select>
textarea标签(文本域标签)
input标签的text类型和textarea标签有什么区别?
textarea可以分行,输入空间更灵活。
label标签(辅助标签)
有些时候单选框太小,选择不太容易,所以用label去选择单选框等控件,点击label等价于点击单选框。
用id去确认控件的身份
<label for="man">男:</label><input type="radio" name="sexInput" id="man" value="男" />
区域标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<!-- 头部标签 -->
<header></header>
<!-- 导航标签 -->
<nav></nav>
<!-- 内容标签 -->
<article></article>
<!-- 定义文档某个区域 -->
<section></section>
<!-- 侧边栏标签 -->
<aside></aside>
<!-- 尾部标签 -->
<footer></footer>
</body>
</html>
视频标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<!-- autoplay="autoplay 自动播放
controls="controls" 播放控件
loop="loop" 循环播放
poster="img/123.png 加载视频等待的画面
muted="muted" 静音播放
-->
<video src="1.mp4" autoplay="autoplay" controls="controls" width="800px" height="800px" loop="loop" poster="img/123.png"
muted="muted"></video>
</body>
</html>
音频标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<audio src="1.mp3" autoplay="autoplay" controls="controls">
当前浏览器不支持audio
</audio>
</body>
</html>
input增强表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<!-- 点击提交表单后自动检查数据格式 -->
<form action="">
<!-- required="required" 不能为空 -->
<!-- placeholder="123" 提示信息 -->
<!-- autofocus="autofocus" 自动把鼠标光标放到该输入框 -->
<!-- autocomplete="off" 对于表单提交完成的值自动记录 -->
<input type="email" name="" id="" value="" required="required" placeholder="123" autofocus="autofocus" autocomplete="off" />
<input type="url" name="" id="" value="" />
<input type="number" name="" id="" value="" />
<input type="tel" name="" id="" value="" />
<input type="search" name="" id="" value="" />
<input type="color" name="" id="" value="" />
<input type="submit" value="提交" />
<!-- multiple="multiple" 上传多个文件 -->
<input type="file" name="" id="" value="" multiple="multiple" />
</form>
</body>
</html>
Emmet
输入代码的缩写即可生成完整代码,提高编写速度。
html输入标签名加对应操作
div
<div></div>
div*2
<div></div> <div></div>
ul>li
<ul>
<li></li>
</ul>
a+div
<a href=""></a>
<div></div>
.demo
<div class="demo"></div>
#demo
<div id="demo"></div>
a#demo
<a href="" id="demo"></a>
#demo$*5
<div id="demo1"></div>
<div id="demo2"></div>
<div id="demo3"></div>
<div id="demo4"></div>
<div id="demo5"></div>
#demo{i am demo}
<div id="demo">i am demo</div>
css输入缩写
h20
height: 20px;
w20
width: 20px;
tac
text-align: center;
}
Css
css又叫网页美容师,专注样式。
html专注结构、css专注样式,两者各谋其政、互不干扰。
CSS的三种引入方式
行内样式表
在某个标签上书写、控制一个标签
<a style="color: antiquewhite;">red40px</a>
内部样式表
在style标签内部书写、控制一个页面
<style type="text/css">
* {
/* 文本位置 */
text-align: left;
/* 上划线 */
text-decoration: overline;
/* 下划线 */
text-decoration: underline;
/* 删除线 */
text-decoration: line-through;
/* 缩进两个文字大小的距离 */
text-indent: 2em;
/* 行间距 */
line-height: 30px;
/* 文字颜色 */
color: #0000FF;
}
</style>
外部样式表
在后缀为css的文件内部书写、控制多个页面
引入代码
<link rel="stylesheet" type="text/css" href="mycss.css"/>
css的工作流程:找到选择器、然后对选择器做某些样式操作。
简单来说,找对人、做对事。
- 基础选择器
1、标签选择器
2、类选择器
3、id选择器
4、通用选择器 - 复合选择器
1、后代选择器
2、子选择器
3、并集选择器
4、伪类选择器
标签选择器
顾名思义,这个标签就是html中的基础标签。
优点:定义一个样式可以修改所有标签样式。
缺点:优点也是缺点,全部标签都要改,不能针对某个标签
比如:外国人吃西餐(外国人是标签、吃西餐是样式),使用了这句代码,所有外国人都要吃西餐,是不是太霸道了?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 顾名思义 是html基础标签 */
/* 类选择器 顾名思义 某类xx的集合 他们有什么共同的特种 他们都喜欢打篮球 他们都喜欢打羽毛球 当然了 一个标签可以使用多类 类之间用空格分离
类的定义 一定要功能单一 不要复杂 后期可以组合使用
id的定义 只为某个人使用 独一无二 只能给一个人使用 后者使用无效
统配选择器 全部标签都会应用该样式
*/
h1 {
color: green;
}
p {
color: red;
}
div {
color: purple;
}
</style>
</head>
<body>
<h1>原谅绿</h1>
<p>爆裂红</p>
<div >
基佬紫
</div>
</body>
</html>
类选择器
定义一个类(表示对现实生活中一类具有共同特征的事物的抽象)
爱打篮球的人是一类、爱打羽毛球的人是一类。一个人可以同时喜欢打篮球和打羽毛球。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 顾名思义 是html基础标签 */
/* 类选择器 顾名思义 某类xx的集合 他们有什么共同的特种 他们都喜欢打篮球 他们都喜欢打羽毛球 当然了 一个标签可以使用多类 类之间用空格分离
类的定义 一定要功能单一 不要复杂 后期可以组合使用
id的定义 只为某个人使用 独一无二 只能给一个人使用 后者使用无效
统配选择器 全部标签都会应用该样式
*/
.red {
color: red;
}
.size35 {
font-size: 35px;
}
</style>
</head>
<body>
<h1 class="red">爆裂红</h1>
<p class="red size35">爆裂红35</p>
</body>
</html>
id选择器
id是独一无二的,只能使用一次,类似人的身份证
class可以重复被使用,类似人的爱好。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 顾名思义 是html基础标签 */
/* 类选择器 顾名思义 某类xx的集合 他们有什么共同的特种 他们都喜欢打篮球 他们都喜欢打羽毛球 当然了 一个标签可以使用多类 类之间用空格分离
类的定义 一定要功能单一 不要复杂 后期可以组合使用
id的定义 只为某个人使用 独一无二 只能给一个人使用 后者使用无效
统配选择器 全部标签都会应用该样式
*/
#QFX {
color: blue;
font-size: 33px;
}
</style>
</head>
<body>
<p id="QFX">钱甫新的样式</p>
</body>
</html>
通配选择器
所有的标签都适用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 标签选择器 顾名思义 是html基础标签 */
/* 类选择器 顾名思义 某类xx的集合 他们有什么共同的特种 他们都喜欢打篮球 他们都喜欢打羽毛球 当然了 一个标签可以使用多类 类之间用空格分离
类的定义 一定要功能单一 不要复杂 后期可以组合使用
id的定义 只为某个人使用 独一无二 只能给一个人使用 后者使用无效
统配选择器 全部标签都会应用该样式
*/
* {
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>red40px</p>
<a >red40px</a>
</body>
</html>
后代选择器
例如一:我想让中国安徽合肥蜀山区的房子变成红色
改变的只是蜀山区房子的颜色,而中国安徽合肥只是位了定位蜀山区,不会发生任何改变。
例如二:我想让中国安徽的房子变成红色
只要是房子,无论是合肥、宿州、合肥蜀山区、都会变成红色(只要属于安徽),都会变成红色。
PS:语法注意
1、书写代码时"中国安徽合肥蜀山区"用空格隔开
2、这里的中国安徽合肥蜀山区可以是任意的基础选择器(可参考前面的基础选择器列表)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul li {
color: red;
}
ul li a {
color: yellow;
}
ol li {
color: blue;
}
ol li {
color: blue;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css"/>
</head>
<body>
<ol>
<li>ol下面的li是红色</li>
</ol>
<ul>
<li>ul下面的li是蓝色</li>
<li><a>ul下面的li下面的a是黄色</a></li>
</ul>
</body>
</html>
子选择器
例如一:我想让我的儿子做医生
你的儿子会做医生,但是你不能决定你的孙子、曾孙子。换句话说,你只能影响你儿子的选择,你儿子的后代你无法影响。
PS:语法注意
父亲和儿子之间应该用>隔开
例如 div>a
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div>a {
color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>
<a href="">我是div的的儿子</a>
<p>
<a href="">我是div的孙子 我不变色</a>
</p>
</div>
</body>
</html>
并集选择器
例如一:我想让我的裤子和衬衫都是红色
裤子和衬衫的需求一样,我就没必要写两遍,用并集选择器只需要写一遍就好了。
PS:语法注意
衬衫和裤子用英文逗号隔开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a,
div {
color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<a href="">我是红色的 a</a>
<div>我是红色的div</div>
</body>
</html>
伪类选择器
a标签的伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
应该按照LVHA的顺序(link visited hover active) 不要颠倒顺序
a:link{
/* 原本的颜色 */
color:red;
}
/* 鼠标点击后的颜色 */
a:visited{
color:blue;
}
/* 鼠标放上去的颜色 */
a:hover{
color:yellow;
}
/* 点击鼠标后没放开的颜色 */
a:active{
color:orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<a href="">我是a 我有四种形态</a>
</body>
</html>
input标签的伪类选择器
当鼠标点击input时 会产生一些操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input:focus{
/* 边框的颜色 字体的颜色*/
color: #0000FF;
/* 输入框的颜色 */
background: white;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<input type="" name="" id="" value="qwqw" />
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 是input标签且value值存在时 才能使用下方样式 */
input[value] {
color: red;
}
/* 是input标签且type等于password 才能使用下方样式 */
input[type="password"] {
color: green;
}
/* 是div标签且class的值是q开头的
^换成$就是结尾
^换成*就是包含
*/
div[class^="q"] {
color: aquamarine;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<input type="text" name="" id="" value="" />
<input type="password" name="" id="" />
<div class="q1">1</div>
<div class="q2">2</div>
<div class="q3">3</div>
<div class="q4">4</div>
<div class="q5">5</div>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 第一个孩子使用下面样式 */
ul li:first-child {
background-color: #0000FF;
}
/* 最后一个孩子使用下面样式 */
ul li:last-child {
background-color: #0000FF;
}
/* 第3(n)个孩子使用下面样式 */
ul li:nth-child(3) {
background-color: #0000FF;
}
/* 奇数孩子使用下面样式 */
ul li:nth-child(odd) {
background-color: red
}
/* 偶数孩子使用下面样式 */
ul li:nth-child(even) {
background-color: #0000FF;
}
/*
n从0开始(只能是n 不能是a等其他字母) 满足n公式的使用以下样式
2n 偶数
2n+1 奇数
5n 5 10 15...
n+5 从第五个开始
-n+5 前五个
*/
ul li:nth-child(2n) {
background-color: black;
}
/* first-of-type和first-child的区别 */
/* first-child把所有的元素一视同仁 从1从头开始编号 然后找到对应的元素和前面的类型相比,相同则改变,不同则不变
例如 这里的p编号是1 但是不满足前面的div条件 所以不改变
first-of-type先看前面类型 再进行编号 满足条件的才可以加入编号队列 然后再找对应的数字 改变其格式
*/
section div:first-child{
color: #0000FF;
}
/* 寻找标签为div 的第一个div */
section div:first-of-type{
color: #0000FF;
}
/* 寻找标签为div 的第三个div */
section div:first-of-type(:;){
color: #0000FF;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<section>
<p>p</p>
<div>div</div>
</section>
</body>
</html>
伪元素选择器
伪元素是行内元素,但文档中找不到,所以叫伪元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
background-color: gray;
color: white;
height: 200px;
width: 200px;
}
/* 在div的内部加入内容且在div内容前面加入你想要的内容
必须有content属性
*/
div::before{
content: '前面';
}
/* 在div的内部加入内容且在div内容后面加入你想要的内容
必须有content属性
*/
div::after{
content: '后面';
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div id="">
div
</div>
</body>
</html>
解决padding、border撑开父盒子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
.outside {
height: 200px;
width: 200px;
border: 10px solid red;
padding: 20px;
/* 如果父盒子有border、pading且存在子代,默认撑开(变大)父盒子的长度(再苦不能苦孩子)
如果设置box-sizing: border-box; 父盒子长度不变(严父) */
box-sizing: border-box;
}
.inside {
height: 100px;
width: 100px;
border: 10px solid blue;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div class="outside">
<div class="inside"></div>
</div>
</body>
</html>
图片模糊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
/* blur数值越大越模糊 */
filter: blur(3px);
}
/* 鼠标经过变清晰 移开变模糊 */
img:hover {
filter: blur(0);
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<img src="Screenshot_20200820-220348_TFT.jpg">
</body>
</html>
父盒子永远比子盒子大xxpx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.big {
height: 200px;
width: 200px;
border: 1px solid #0000FF;
}
/* 子盒子永远都比父盒子小30px 公式计算 */
.small {
height: calc(100% - 30px);
width: calc(100% - 30px);
border: 1px solid red;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
</body>
</html>
过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background-color: gray;
/* 四个参数:变化的属性(多个属性用逗号分割 多个用all也可以) 花费时间 运动曲线 何时开始 */
transition: width, height .5s ease .5s;
}
div:hover {
width: 400px;
height: 400px;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div></div>
</body>
</html>
进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.big {
width: 200px;
height: 50px;
border: 1px solid red;
/* 圆角边框 */
border-radius: 15px;
padding: 5px;
}
.small {
width: 100px;
height: 100%;
background-color: red;
/* 过渡效果 */
transition: width 1s ease .2s;
}
.big .small:hover {
width: 80%;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div class="big">
<div class="small"></div>
</div>
</body>
</html>
2D转换
盒子移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 200px;
width: 200px;
background-color: red;
/*
translate不会改变其他模块的位置(自身位置改变不会改变布局)
将位置向右200px 向下200px
百分号的参照物不是父盒子 而是自身
对行内元素无效
*/
transform: translate(200px, 200px);
transform: translate(50%, 50%);
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div></div>
</body>
</html>
小盒子在大盒子内部水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
/* 子绝父相 */
position: absolute;
height: 500px;
width: 500px;
background-color: red;
}
p {
/* 子绝父相 */
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 200px;
background-color: blue;
/* 左移上移自身的50% */
transform: translate(-50%, -50%);
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
盒子旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {
height: 200px;
width: 200px;
background-color: blue;
transition: all 1s;
}
p:hover {
transform: rotate(360deg);
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<p></p>
</body>
</html>
不按照中心轴旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {
height: 200px;
width: 200px;
background-color: blue;
/* 选择左下角作为旋转角 */
transform-origin: left bottom;
transition: all 1s;
}
p:hover {
transform: rotate(360deg);
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<p></p>
</body>
</html>
输入框的旋转小三角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid black;
}
div::after {
content: "";
position: absolute;
top: 10px;
right: 15px;
width: 10px;
height: 10px;
/* 正方形只留两条边并且旋转就可以出现三角 */
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
/* 过渡效果 节奏变慢 */
transition: all .7s;
}
/* 鼠标经过多旋转225度 */
div:hover::after {
transform: rotate(225deg);
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div></div>
</body>
</html>
盒子放大和缩小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {
height: 50px;
width: 50px;
background-color: blue;
}
p:hover {
[]
/* 宽度变为0.5倍 高度变为2倍 */
transform: scale(.5, 2);
/* 等比例缩放 宽高都增高2倍 */
/* scala不会影响其他盒子(不影响布局) transform: scale(2); */
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<p></p>
123
</body>
</html>
综合写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p {
height: 50px;
width: 50px;
background-color: blue;
transition: all .5s;
}
p:hover {
/* 这个顺序不建议改变,改变顺序可能会影响功能 */
transform: translate(100px, 100px) rotate(180deg) scale(2, 2);
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<p></p>
123
</body>
</html>
动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* move是动画名称 */
@keyframes move{
/* 0%是进度 以此类推 */
0%{
transform: translate(0px,0px);
}
25%{
transform: translate(1000px,0px);
}
50%{
transform: translate(1000px,500px);
}
75%{
transform: translate(0px,500px);
}
100%{
transform: translate(0px,0px);
}
}
div {
width: 200px;
height: 200px;
background-color: #0000FF;
/* 动画名称 */
animation-name: move;
/* 动画持续时间 */
animation-duration: .2s;
/* 运动曲线 */
animation-timing-function: ease;
/* 动画开始的延迟时间,默认为0 */
animation-delay: 1;
/* 动画的执行次数 如果为infinite 代表无限循环 */
animation-iteration-count: 10;
/* 如果为alternate结束后反方向播放 */
animation-direction: alternate;
/* 如果为forwards,动画结束后不回到起始位置 */
animation-fill-mode: backwards;
/* 如果为pased,动画暂停 */
animation-play-state: running;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>
</div>
</body>
</html>
3D转换
3D移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
/* 如果添加透视效果,那么透视属性写在对应的父盒子里 */
/* 透视越大 物体看起来越小 */
perspective: 1000px;
}
div {
width: 200px;
height: 200px;
background-color: black;
/* xyz的三个参数值 */
/* z的值越大 物体看起来越大 */
transform: translate3d(100px, 100px, 10px);
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div></div>
</body>
</html>
3D旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
/* 加入透视效果 */
perspective: 200px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 过渡效果 */
transition: all 1s;
}
div:hover {
/* 按照x轴旋转 值为正 向屏幕里旋转 值为负 向屏幕外旋转*/
/* transform: rotateX(180deg); */
/* 按照y轴旋转 值为正 从左向右翻 值为负 从右往左翻*/
transform: rotateY(180deg);
/* 按照z轴旋转 值为正 顺时针 值为负 逆时针*/
/* transform: rotateZ(180deg); */
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>旋转</div>
</body>
</html>
子元素开启三维立体环境
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
/* 透视的效果 */
perspective: 500px;
}
.box {
width: 500px;
height: 500px;
margin: 500px auto;
/* 子元素开启三维立体环境 */
transform-style: preserve-3d;
}
.box:hover {
/* 按照y轴旋转 */
transform: rotateY(60deg);
}
.box .one {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
.box .two {
width: 200px;
height: 200px;
background-color: red;
/* 按照x轴旋转 */
transform: rotateX(45deg);
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div class="box">
<div class="one">123</div>
<div class="two">123</div>
</div>
</body>
</html>
字体属性
font-size
字体大小
font-style
斜体与否
可以让em、i标签不斜体
font-weight
加粗与否
可以让标题不加粗
font-family
字体类型(微软雅黑等)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
/* 字体大小 标题字体大小需要单独指定*/
font-size: 40px;
/* 加粗与否 */
/* 400是normal 标题也可去除加粗
700是bold 让其他标签加粗 */
font-weight: 400;
/* 斜体与否 设置为normal的时候 可以让倾斜的字体不倾斜 例如em、i标签 */
font-style: italic;
/* 多种字体格式按以下格式添加 */
font-family: "microsoft yahei", "microsoft sans serif";
/* 字体复合属性 一行代码替换上述代码 必须保留font-size和font-family
font: font-style font-weight font-size/line-height font-family; */
}
</style>
</head>
<body>
<h1>我虽然是标题 但是我不加粗</h1>
<p>red40px</p>
<a>red40px</a>
</body>
</html>
文本属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
/* 文本位置 */
text-align: left;
/* 上划线 */
text-decoration: overline;
/* 下划线 */
text-decoration: underline;
/* 删除线 */
text-decoration: line-through;
/* 缩进两个文字大小的距离 */
text-indent: 2em;
/* 行间距 */
line-height: 30px;
/* 文字颜色 */
color: #0000FF;
}
</style>
</head>
<body>
<h1>我虽然是标题 但是我不加粗</h1>
<p>red40px</p>
<a>red40px</a>
</body>
</html>
背景
背景颜色
/* background-color: red; */
背景图片
/* background-image: url(img/123.jpg); */
背景平铺
background-repeat: no-repeat;
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
背景位置
/* 图片的位置 x y
可以是top、left位置名词
也可以是px 单位名词
也可以是top+px混合名词
*/
background-position: center top;
背景固定
/* 图片固定 */
background-attachment: fixed;
五合一综合写法
顺序不可改变
背景颜色、背景地址、背景平铺、背景固定、背景位置
背景透明
/* 四个参数 前三个是rgb 第四个是透明度 1为不透明 */
background: rgba(0,0,0,0.4);
css的块元素和行元素
块元素
- 自己独占一行
- 高度、宽度、内外边距皆可调
- 默认宽度是上级容器的百分百
- 里面可以放行内活着块级元素(h、p(文字类块级元素)不能放div(块级元素))
行内元素
- 一行可以显示多个
- 直接设置宽度、高度无效
- 默认宽度是本身内容宽度
- 只能放文本、行内元素(a里面不能放a,a里面可以放块级元素(div))
行内块元素
有行内元素的特征,也有块元素的特征。
- 一行可以放多个(行内元素特点)
- 默认宽度是本身的宽度(行内元素特点)
- 宽度、高度、内外边距都可以控制(块元素特点)
行内元素和块元素的转换
display:block 转换成块元素
display:inline 转换成行内元素
display:inline-block 转换成行内块元素
CSS三大特性
层叠性
同一选择器样式冲突:就近原则
同一选择器样式不冲突:重叠原则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
color: red;
font-size: 55px;
}
div {
color: gray;
font-weight: 800;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>猜猜我是什么颜色 我的字体大小呢? 我有没有加粗</div>
</body>
</html>
继承性
可以继承父亲的哪些样式:text-、line、color-(三个关键字开头都可以继承)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
color: #0000FF;
text-align: center;
/* 这里的2是指继承者文字大小的2倍 */
line-height: 2;
font-size: 20px;
}
p {
font-size: 30px;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>
<p>我是div的儿子 猜猜我是什么颜色</p>
</div>
</body>
</html>
优先级
数字越大、优先级越高。
- 继承、*
- 元素选择器
- 类选择器、伪类选择器
- ID选择器
- 行内style样式
- !import重要的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
color: #0000FF !important;
}
#red {
color: red;
}
.green {
color: green;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>
<div id="red" class="green" style="color: chartreuse;">
猜猜我的颜色 然后就知道优先级了
</div>
</div>
</body>
</html>
复合选择器 对应权重相加即可
盒子模型
border
添加边框会增大盒子的宽高
边框有四个(上下左右 不声明就默认对四个进行修改)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
/* 边框的颜色 */
border-color: red;
/* 边框的格式 solid 实线 dashed 虚线 dotted 点线*/
border-style: solid;
/* 边框的宽度 */
border-width: 20px;
}
#red {
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>
</div>
</body>
</html>
复合写法:border: 1px solid red;
margin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 清除所有元素的内外边距 */
* {
padding: 0;
margin: 0;
}
.bigDiv {
width: 200px;
height: 400px;
background-color: #0000FF;
/* 父亲容器设置边框可以分开父子容器 */
/* border: 1px solid transparent; */
/* 设置这个也可以把父子容器分开 */
overflow: hidden;
}
.smallDiv {
width: 100px;
height: 200px;
background-color: rosybrown;
margin-top: 20px;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div class="bigDiv">
<div class="smallDiv">
</div>
</div>
</body>
</html>
复合写法和padding一样
padding
添加内边距会增大盒子的宽高
如果没有指定宽度(默认与父亲的宽度一样),添加padding、盒子不会被撑开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
/* 内边距 */
padding-left: 20px;
background-color: pink;
}
#red {
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>
123
</div>
</body>
</html>
复合写法:
padding:5px 上下左右都是5px
padding:2px 10px 上下5px 左右10px
padding:5px 10px 20px 上5px 左右10px 下20px
padding:5px 10px 15px 20px 上5 右10 下15 左20
圆角边框
div盒子模型变成圆角
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 100px;
width: 100px;
/* 圆形矩形是height的50% */
/* 圆形是50% */
/* 复合写法和padding magin 一样 上右下左 */
border-radius:50%;
background: red;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div >
123
</div>
</body>
</html>
盒子阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
height: 100px;
width: 100px;
border-radius:50%;
background: red;
/* 水平阴影的位置
垂直阴影的位置
模糊距离(模糊程度,越大越模糊)
阴影尺寸
颜色
外部阴影还是内部阴影(默认外部阴影) 不可以写outset(写了就失效 外部阴影默认就好) */
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.3);
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div >
123
</div>
</body>
</html>
文字阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
/* 文字阴影 */
/* 水平阴影的位置
垂直阴影的位置
模糊距离(模糊程度,越大越模糊)
颜色 */
text-shadow: 10px 10px 10px red;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div >
123
</div>
</body>
</html>
布局的三种方式
三种布局方式
1、普通流
2、浮动流
3、定位流
多个块级元素纵向排列用标准流、多个块级元素横向排列用浮动流。
浮动
浮动的设计初衷是为了文字环绕(图片)
浮动的经典应用:让多个块级元素一行显示
特点:脱离普通流的控制、不再保留原先的位置(后者顶替原来的位置)。
加了浮动:相当于行内块属性,一行显示多个,可以设置高度。
float只能影响后面的标准流
清除浮动
为什么要清除浮动?
当父盒子的高度不确定时(子盒子数量是一个浮动值),就没法给父盒子一个准确的高度。
这时候就需要清除父盒子的高度。
1、额外标签法
最后一浮动元素的后面加一个空标签(style为clear:box)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father {
width: 1000px;
border: 1px solid blue;
}
.son {
float: left;
width: 200px;
height: 200px;
background-color: black;
}
.daughter {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.uncle {
width: 300px;
height: 200px;
background-color: red;
}
/* 清除浮动 */
.clear {
clear: both;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div class="father">
<div class="son">1123</div>
<div class="daughter">123</div>
<!-- 清除浮动的标签 -->
<div class="clear"></div>
</div>
<div class="uncle">456</div>
</body>
</html>
2、父亲添加overflow:hidden(子不教父之过)
缺点:无法显示溢出部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father{
<!-- 清除浮动的属性 -->
overflow: hidden;
width: 1000px;
border: 1px solid blue;
}
.son{
float: left;
width: 200px;
height: 200px;
background-color: black;
}
.daughter{
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.uncle{
width: 300px;
height: 200px;
background-color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div class="father">
<div class="son">1123</div>
<div class="daughter">123</div>
</div>
<div class="uncle">456</div>
</body>
</html>
3、after伪类是额外标签法的升级版(高级写法)
百度、淘宝、网易等公司使用该方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 清除盒子浮动 */
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* 兼容IE6 7 */
.clearfix {
*zoom: 1;
}
.father {
width: 1000px;
border: 1px solid blue;
}
.son {
float: left;
width: 200px;
height: 200px;
background-color: black;
}
.daughter {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.uncle {
width: 300px;
height: 200px;
background-color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div class="father clearfix">
<div class="son">1123</div>
<div class="daughter">123</div>
</div>
<div class="uncle">456</div>
</body>
</html>
4、双伪元素清除法(前后都加空标签)
腾讯小米等公司使用该方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 前后加表格 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
/* 后面的表格清除浮动 */
.clearfix::after {
clear: both;
}
/* 兼容IE6 7 */
.clearfix {
*zoom: 1;
}
.father {
width: 1000px;
border: 1px solid blue;
}
.son {
float: left;
width: 200px;
height: 200px;
background-color: black;
}
.daughter {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.uncle {
width: 300px;
height: 200px;
background-color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div class="father clearfix">
<div class="son">1123</div>
<div class="daughter">123</div>
</div>
<div class="uncle">456</div>
</body>
</html>
CSS代码的书写顺序
- 布局
float等属性 - 自身
width等属性 - 文本
text、font等属性 - 其他
阴影等属性
定位
一般的布局方法:子绝父相
应用场景:某些组件需要固定显示
定位=定位模式+边偏移
四种模式
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
边偏移:top、bottom、left、right
行内元素+绝对定位或固定定位,可以设置高度、宽度
块内元素+绝对定位或固定定位,不设置高度、宽度,内容大小就是行内元素的大小。
静态定位
position:static
和标准流的作用差不多
相对定位
position:relative
相对自己原来的位置的定位
不会被覆盖
绝对定位
position:absolute
相对于祖先元素位置的定位
如果没有祖先元素(或者祖先没有定位),那就认浏览器为父
如果有多个祖先,优先以最近一级且有定位的祖先的位置为准
比如:父亲没有定位,但是爷爷有定位。那就以爷爷为准。
会被覆盖
固定定位
position:fixed
会被覆盖
根据浏览器的可视区域定位
浏览器的可视区域随着浏览器的窗口大小而变化
粘性定位
固定位置,不会被覆盖,加了top、left等属性才可以使用。
top:0
position:sticky
z-index(盒子优先级)
z-index:10
数字越大,优先级越高,高优先级压住低优先级的盒子。
只有定位的盒子才有这个属性,浮动和标准流没有这个属性。
模块的显示和隐藏
display
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
/* 把div不显示(隐藏) 且不占有原来的位置 none换为block则显示*/
display: none;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>看不见我 看不见我</div>
<p>我上面的div不见了</p>
</body>
</html>
visibility
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
/* div不显示(隐藏) 但是保留自己的位置 hiden替换为visible可显示*/
visibility: hidden;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>看不见我 看不见我</div>
<p>我上面的div不见了</p>
</body>
</html>
overflow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 20px;
background-color: red;
/* 对于溢出的部分自动隐藏不显示
visible 正常显示
auto 如果溢出 添加滚动条 否则不做改变
scroll 溢出与否 都添加滚动条
定位的盒子慎用
*/
overflow: auto;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>我是一个钉子户我是一个钉子户我是一个钉子户</div>
</body>
</html>
精灵图
设计的初衷是为了减少服务器接受、发送请求的次数,提高页面加载速度。
许多张小图片拼装成一张大图片发送,本来是n次请求,现在是1次请求。
缺点:放大和缩小是图片失真、制作完毕更改比较复杂
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*这里的坐标和平常的坐标是相反的*/
div {
background: url(Screenshot_20200820-220348_TFT.jpg) no-repeat -400px -200px ;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>我是一个钉子户我是一个钉子户我是一个钉子户</div>
</body>
</html>
字体图标
解决了精灵图的缺点(图片放大缩小失真、更改麻烦)
字体图标虽然展示的是图标,本质是字体(字体更改就很容易)
字体图标来源:iconmoon、iconfont
三角形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
/* 高度 宽度设为0 */
height: 0;
width: 0;
/* 全部设为透明 */
border: 50px solid transparent;
/* 需要哪边 就把那边重新涂色 */
border-left: 50px solid pink;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div></div>
</body>
</html>
鼠标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
/* 鼠标的五中显示格式 */
cursor: pointer;
cursor: default;
cursor: move;
cursor: text;
cursor: not-allowed;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>123</div>
</body>
</html>
轮廓线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
input,textarea{
/* 点击输入框的时候 不会显示轮廓线的默认颜色 */
outline: none;
}
textarea {
/* 设置下面的属性后 textarea就不能随意拖拽 */
resize: none;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<input type="" name="" id="" value="" />
<textarea rows="" cols="">
</textarea>
</body>
</html>
vertical-alingn(文字和图片垂直居中)
行内块元素或者是块级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img {
/*
middle 让图片旁边的文字和图片中间对齐
baseline
top
bottom
*/
vertical-align: middle;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
123<img src="Screenshot_20200820-220348_TFT.jpg" >123
</body>
</html>
溢出文字用省略号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
height: 200px;
width: 200px;
background-color: red;
/* 不换行 */
white-space: nowrap;
/* 溢出文字隐藏 */
overflow: hidden;
/* 溢出文字用省略号 */
text-overflow: ellipsis;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div>1sdkfjlsdfjksdjfkjdsfkjfdskjdskfjdksjsakdjfsdfjksdkjsjdkfskdj</div>
</body>
</html>
页码制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 清除内外边距 */
*{
padding: 0;
margin: 0;
}
.box {
/* 父元素设置text-align: center; 父盒子里面的行内元素和行内块元素都会水平居中 */
text-align: center;
}
.box a {
/* 转换为行内块元素 */
display: inline-block;
/* 宽度 */
width: 36px;
/* 高度 */
height: 36px;
/* 背景颜色 */
background-color: #f7f7f7;
/* 边框 */
border: 1px solid #ccc;
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 36px;
/* 不加下划线 */
text-decoration: none;
/* 字体颜色 */
color: #333;
/* 文字大小 */
font-size: 14px;
}
/* 上一页 下一页重新设置宽度 */
.box .previousPage,
.box .nextPage {
width: 85px;
}
/* 当前页和省略页更改颜色 */
.box .currentPage,
.box .elp {
background-color: #fff;
border: none;
}
/* 输入框 */
.box input {
width: 36px;
height: 36px;
border: 1px solid #ccc;
outline: none;
}
/* 按钮 */
.box button {
width: 60px;
height: 36px;
/* 背景颜色 */
background-color: #f7f7f7;
/* 边框 */
border: 1px solid #ccc;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div class="box">
<a href="#" class="previousPage"><<上一页</a>
<a href="#">1</a>
<a href="#" class="currentPage">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#" class="elp">...</a>
<a href="#" class="nextPage">>>下一页</a>
到第
<input type="text" name="" id="" value="" />
页
<button type="button">确定</button>
</div>
</body>
</html>
直角三角形的制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box1{
width: 0;
height: 0;
/* 上端透明 */
border-top: 100px solid transparent;
border-right: 50px solid skyblue;
/* 下端和左端为0 */
border-left: 0 solid blue;
border-bottom: 0 solid green;
}
</style>
<link rel="stylesheet" type="text/css" href="mycss.css" />
</head>
<body>
<div class="box1">
</div>
</body>
</html>
css初始化
不同浏览器对有些标签值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容性,我们需要对css初始化。
个人见解:旅游自带保姆(不管住哪个酒店 我只用自己的保姆)