总结：
插入图片：margin padding float postion width height
背景图片 background控制 background-size 大小 background-position 位置
鼠标样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ui>
<li style="cursor: default;">小白[默认]</li>
<li style="cursor: pointer;">小手</li>
<li style="cursor: text;">文本</li>
<li style="cursor: move;">移动</li>
</ui>
</body>
</html>outline轮廓线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ui>
<li style="cursor: default;">小白[默认]</li>
<li style="cursor: pointer;">小手</li>
<li style="cursor: text;">文本</li>
<li style="cursor: move;">移动</li>
</ui>
</body>
</html>resize 防止文本域拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
textarea{
resize: none; /*防止文本域拖拽变形*/
outline: none; /*取消轮廓线*/
width: 400px;
height: 120px;
border: 12px dashed green;
background-color: #6e6e6e;
color: hotpink;
}
input{
display: block;
height: 120px;
width:400px;
outline: 12px double hotpink;
border: 5px solid green;
background-color: #AAA;
margin: 12px;
}
</style>
</head>
<body>
<textarea cols="30" rows="70">正文内容</textarea>
<input placeholder="今天有什么新鲜的事？说说吧">
</body>
</html>图片与文字居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
margin-left: auto;
margin-right: auto; /*左右自动auto 盒子就可以水平居中对齐*/
text-align: center;
}
/*vertical-align:middle; 对于块级元素无效*/
img{ /*行内块元素*/
/*vertical-align: baseline;*/ /*默认对准基线*/
/*vertical-align: middle;*/ /*文字与图片中线对齐*/
/*vertical-align: top;*/ /*文字与图片的顶部对齐*/
vertical-align: bottom; /*文字与图片的底线对齐*/
}
textarea{
height: 60px;
width: 900px;
vertical-align: middle;
resize: none; /*禁止文本域拖拽*/
}
</style>
</head>
<body>
<div>文字居中</div><hr/>
<img src="images/2.jpg">我不尴尬，尴尬的就是别人<hr>
用户留言<textarea></textarea>
</body>
</html>解决块级元素底部间隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 222px;
height: 220px;
background: green;
}
/* 解决方案
1转换为块级元素
2 vertical-align:top */
img{
/*display: block;*/
/*vertical-align: baseline;*/
vertical-align: top;
}
</style>
</head>
<body>
<div>
<img src="images/3.jpg">
</div>
</body>
</html>word-break 自动换行 主要处理英文单词
normal 默认
break-all 允许单词内换行
keep-all 只能在半角空格或者连字符处换行 z-index
white-space 设置检索对象内文本显示方式 通常是强制一行显示
normal 默认处理
nowrap 强制在同一行内显示所有文本，直到文本遇到br或者才能换行
text-overflow 文字溢出
clip 直接裁剪
ellipsis 超出部分 省略号代替
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 120px;
height: 20px;
border: 1px solid green;
/*word-break: break-all;*/ /*允许单词拆开显示*/
word-break: keep-all; /*不允许拆开字符 除非连字符 - Z-index*/
}
</style>
</head>
<body>
<div>Day is My Brothday happy me to</div>
</body>
</html>white-space
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*默认的自动换行 nowrap会强制显示在一行*/
div{
width: 120px;
height: 20px;
border: 1px solid green;
white-space: nowrap; /*强制一行显示*/
}
</style>
</head>
<body>
<div>
你好，我的名叫叫安娜，我是安迪的好朋友
</div>
</body>
</html>text-overflow 超出文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 120px;
height: 20px;
border: 1px solid green;
white-space: nowrap; /*将文字强制一行*/
overflow: hidden; /*超出部分隐藏*/
/*text-overflow: clip;*/ /*直接裁剪*/
text-overflow: ellipsis; /*超出部分省略号代替*/
}
</style>
</head>
<body>
<div>我是安迪，我是安南的好朋友皮特。</div>
</body>
</html>CSS精灵技术 裁剪图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*原理就是有一张图片，通过设置backgroiund-position:-100px -200px来截取图片*/
div:first-child{
width: 12px;
height: 20px;
background: url(images/jd.png) -2px -101px no-repeat; /*图片时网上移动。所以是负值*/
margin: 100px auto;
}
div:nth-child(2){
width: 218px;
height: 50px;
background: url(images/jd.png) no-repeat -2px -324px;
margin: 0 auto;
}
div:nth-child(3){
width: 19px;
height: 19px;
background: url(images/jd.png) -1px -411px no-repeat;
margin: 0 auto;
}
p{
width: 54px;
height: 49px;
background: url(images/jd.png) no-repeat 0 -438px;
margin: 0 auto;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<p></p>
</body>
</html>作业 使用精灵拼出好看的图片文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 1027px;
margin: 150px auto;
height: 117px;
/*background-color: green;*/
padding-top: 10px;
}
span{
background: url(images/abcd.jpg) no-repeat;
float: left;
margin-right: 5px;
}
span:first-child{
width: 101px;
height: 117px;
background-position: -368px -411px;
}
span:nth-child(2){
width: 114px;
height: 110px;
background-position: -369px -277px;
}
span:nth-child(3){
width: 144px;
height: 111px;
background-position: -104px -277px;
}
span:nth-child(4){
width: 106px;
height: 115px;
background-position: 0 -5px;
}
span:nth-child(5){
width: 112px;
height: 113px;
background-position: -256px -275px;
}
span:nth-child(6){
width: 98px;
height: 106px;
background-position: -362px -8px;
}
span:nth-child(7){
width: 103px;
height: 106px;
background-position: -389px -143px;
}
span:nth-child(8){
width: 106px;
height: 115px;
background-position: 0 -5px;
}
span:nth-child(9){
width: 103px;
height: 110px;
background-position: -239px -8px;
}
span:last-child{
width: 106px;
height: 109px;
background-position: -494px -143px;
}
span:nth-child(5n){
margin-right: 0;
}
.clearfix{
clear: both; /*清除浮动*/
display: none; /*空盒子隐藏起来*/
}
.box{
/*width: 100px;*/
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<div class="clearfix"></div><!-- 添加空盒子 清除浮动 -->
</div>
<div class="box"></div>
</body>
</html>王者荣耀导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>王者荣耀</title>
<style type="text/css">
/*清除浮动的两中方式
1 在浮动对象标签后添加空标签 clear:both 清除浮动
2 在父元素标签内添加 overflow:hidden 出发BFC清除浮动*/
body{
background-color: #009;
}
nav{
background-color: #000;
overflow: hidden; /*出发BFC可以清除浮动*/
border-radius: 10px;
}
a{
float: left;
width: 196px;
height: 53px;
text-align: center;
line-height: 53px;
color: #FFF;
font-weight: bold;
text-decoration: none; /*取消下划线*/
background: url(images/sp.png) no-repeat -389px -303px;
margin: 1px 5px;
font-size: 25px;
}
a:hover{
/*text-decoration:underline;*/
color: white;
background-position: -170px -300px;
}
</style>
</head>
<body>
<nav>
<a href="#">游戏首页</a>
<a href="#">英雄介绍</a>
<a href="#">充值专区</a>
<a href="#">兑换奖励</a>
<a href="#">帮助</a>
<a href="#">客户服务</a>
</nav>
</body>
</html>icofont 可以在网站上搜索下载
网站：https://fontello.com/
https://icomoon.io/app
https://fontawesome.dashgame.com/#basic
https://www.iamxk.com/icons8-website
https://icons8.com/?ref=iamxk
https://icomoon.io/
inconfont 注意：一定要生成incon fot文件才可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>https://icomoon.io/</title>
<!-- <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> -->
<style type="text/css">
@font-face { /*电脑中没有的字体，需要在这里声明*/
font-family: 'icomoon';
src: url('fonts/icomoon.eot?r2bhug');
src: url('fonts/icomoon.eot?r2bhug#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?r2bhug') format('truetype'),
url('fonts/icomoon.woff?r2bhug') format('woff'),
url('fonts/icomoon.svg?r2bhug#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span{
font-family: "icomoon"; /*一定要和声明的font-family: "incomoon"相同 否则没有效果;*/
font-size: 100px;
color: hotpink;
}
div{
height: 2px;
background-color: deeppink;
}
div::after{ /*伪元素选择器*/
font-family: "icomoon";/*一定要和声明的font-family: "incomoon"相同 否则没有效果;*/
content: "\e9e0";
font-size: 100px;
color: yellow;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
<span></span>
<div></div>
</body>
</html>阿里巴巴iconfont图标文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>https://www.iconfont.cn/</title>
<!-- 需要在此网站上https://www.iconfont.cn/下载iconfont包 -->
<style type="text/css">
@font-face { /*拷贝项目下面生成的 @font-face*/
font-family: 'iconfont';
src:
url('阿里巴巴/alibaba/iconfont.woff2?t=1642771478703') format('woff2'),
url('阿里巴巴/alibaba/iconfont.woff?t=1642771478703') format('woff'),
url('阿里巴巴/alibaba/iconfont.ttf?t=1642771478703') format('truetype');
}
.iconfont { /*定义使用 iconfont 的样式*/
font-family: "iconfont" !important;
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body{
background-color: AAA;
}
div{
height: 10px;
background-color: red;
}
.clearfix{
clear: both; /*清除浮动*/
/*display: none;*/ /*空盒子隐藏起来*/
}
.box{
border: 1px dashed green;
width: 180px;
height: 220px;
background-color: #80acd8;
/*padding: 5px;*/
}
.box span{
display: block; /*需要转换为块级元素*/
margin: 10px;
height: 160px;
width: 160px;
background-color: #d7f7a7;
}
h4{
text-align: center; /*文字居中*/
color: #FFF;
}
</style>
</head>
<body>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<span class="iconfont"></span>
<div></div>
<div class="box">
<span class="iconfont"></span>
<h4>雾炮车</h4>
</div>
</body>
</html>css实现图片左右拉开适配内容文字[推拉门效果]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{ /*实现推拉门效果是不可以给宽值的，要拉伸图片实现宽度**/
margin: 100px;
display: inline-block; /*转换为行块内元素*/
height: 33px;
background: url(images/ao.png) no-repeat;
padding-left: 15px; /*左边撑开15px*/
color: #FFF;
text-decoration: none; /*取消下划线*/
line-height: 33px;
}
a span{
display: inline-block;
height: 33px;
background: url(images/ao.png) no-repeat right; /*图片右边*/
padding-right: 15px; /*右边撑开15px*/
}
</style>
</head>
<body>
<a href="#"><span>首页</span></a>
<a href="#"><span>中国人民*银行行长</span></a>
<a href="#"><span>二维码支付</span></a>
</body>
</html>微信导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>微信</title>
<style type="text/css">
/*公共部分模块*/
*{
margin: 0;
padding: 0;
}
body{
background: url(images/wx.jpg) repeat-x;/* body背景图片 沿x轴平铺*/
}
a{ /*a标签*/
text-decoration: none; /*取消下划线*/
}
ul{
list-style: none; /*取消样式*/
}
nav{
height: 75px;
}
li{
float: left; /*浮动*/
margin: 0 10px; /*上下 左右*/
padding-top: 21px;
}
li a{
display: block;
background: url(images/to.png) no-repeat;
color: #FFF;
font-size: 14px;
line-height: 33px;
padding-left: 15px; /*左偏移15px*/
}
li a span{
display: block;
line-height: 33px;
background: url(images/to.png) no-repeat right center;
padding-right: 15px; /*右偏移15px*/
}
/*鼠标经过时更换背景图片*/
li a:hover{
background: url(images/ao.png) no-repeat;
}
li a span:hover{
background: url(images/ao.png) no-repeat right center;
padding-right: 15px; /*右偏移15px*/
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>帮助与反馈</span></a></li>
<li><a href="#"><span>公众号平台</span></a></li>
<li><a href="#"><span>开发者文档</span></a></li>
<li><a href="#"><span>招商投资入口</span></a></li>
</ul>
</nav>
</body>
</html>伪元素选择器after和before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*.box 类选择器 :hover伪元素选择器 ::after伪元素选择器[该元素不存在]*/
div::before{
content: "欢庆探家";
background-color: deeppink;
border: 1px solid green;
display: block;
height: 100px;
width: 100px;
}
/*区别
类选择器 伪类选择器 就是选取对象
伪元素选择器 本质上就是一个元素[标签 盒子]是行内元素 没有宽高*/
div::after{
content: "小蝴蝶";
display: block;
height: 200px;
width: 200px;
border: 1px solid orange;
}
</style>
</head>
<body>
<div></div>
<div>是</div>
<p></p>
<div></div>
</body>
</html>鼠标经过图像时显示图片边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 296px;
height: 180px;
margin: 20px auto;
position: relative; /*相对定位 子绝父相*/
}
/*鼠标经过的时候插入一个伪元素*/
div:hover::after{
content: "";
width: 100%;
height: 100%;
border: 10px solid rgba(255, 0, 0,.3);
position: absolute; /*绝对定位*/
display: block;
top: 0;
left: 0;
box-sizing: border-box; /*padding 和margin都算入width中*/
}
</style>
</head>
<body>
<div><img src="images/mi.jpg" ></div>
<div><img src="images/mi.jpg" ></div>
<div><img src="images/mi.jpg" ></div>
<div><img src="images/mi.jpg" ></div>
</body>
</html>鼠标经过时过渡动画显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 100px;
background-color: deeppink;
/*transition 要过渡的属性 花费的时间 运动的曲线 何时开始*/
/*transition: width 0.6s ease 0s , height 0.3s ease-in 1s;*/
/*过渡需要写在div里，不是hover里 所有属性都在变化用all 后边可以省略*/
/*transition: all 0.6s;*/
transition: width 1s,height 3s; /*默认是ease先块后慢*/
}
div:hover{ /*鼠标经过时宽度变为800px*/
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>