笔记及注意事项已经在代码片段中用注释已经标明
源代码github下载地址:https://github.com/godlikecheng/css_Learning/
01-CSS背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>背景</title>
<style>
div {
height: 400px;
width: 400px;
border: 1px solid saddlebrown;
}
.bg {
/* 设置背景色 */
background-color: #cda;
/* 设置背景图片,优先级要高于背景色 */
background-image: url(../img/a.png);
}
.bg2 {
background-image: url(../img/b.png);
/* background-repeat: repeat-x; 背景图片/横向平铺/ */
/* background-repeat: repeat-y; 背景图片纵向平铺 */
/* background-repeat: repeat; 背景图片横向纵向都平铺(默认值) */
/* background-repeat: no-repeat; 只显示一次,不进行平铺 */
background-repeat: inherit; /*规定从父元素继承background-repeat属性设置的值*/
padding-left: 30px;
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="bg2">新闻标题</div>
</body>
</html>02-新浪微博图标背景案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新浪背景图片案例</title>
<style>
a {
display: inline-block;
width: 200px;
height: 28px;
line-height: 28px;
background-image: url(../img/c.png);
background-repeat: no-repeat; /*设置不重复*/
padding-left:33px;
}
a:hover {
background-position: left bottom; /*设置图片左边和底部对齐*/
}
.bg {
background-image: url(../img/a.png);
width: 200px;
height: 200px;
/* background-position: left bottom; 显示图片的左下角 */
/* background-position: right bottom; 显示图片的右下角 */
/* background-position: center; 显示图片的右下角 */
background-position: 100% 100%; /*以xy轴的起始点为0%,来确定位置*/
/* background-position: -500px 0; 以xy轴坐标,以图片的左上角为点,-500px 0 就是左上角的坐标 */
}
</style>
</head>
<body>
<a href="#">
新浪微博
</a>
<div class="bg"></div>
</body>
</html>03-背景固定案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>背景固定案例</title>
<style>
div {
background-image: url(../img/a.png);
/* DIV的内容不管怎么滚动,背景图片相对于div容器不会发生滚动 */
/* background-attachment: fixed; fixed背景图固定 */
background-attachment: scroll; /*scroll随着文本内容滚动 默认值*/
}
</style>
</head>
<body>
<div>
<h1>我是花括号的内容1</h1>
<h1>我是花括号的内容2</h1>
<h1>我是花括号的内容3</h1>
<h1>我是花括号的内容4</h1>
<h1>我是花括号的内容5</h1>
<h1>我是花括号的内容6</h1>
<h1>我是花括号的内容7</h1>
<h1>我是花括号的内容8</h1>
<h1>我是花括号的内容9</h1>
<h1>我是花括号的内容10</h1>
<h1>我是花括号的内容1</h1>
<h1>我是花括号的内容2</h1>
<h1>我是花括号的内容3</h1>
<h1>我是花括号的内容4</h1>
<h1>我是花括号的内容5</h1>
<h1>我是花括号的内容6</h1>
<h1>我是花括号的内容7</h1>
<h1>我是花括号的内容8</h1>
<h1>我是花括号的内容9</h1>
<h1>我是花括号的内容10</h1>
</div>
</body>
</html>04-CSS精灵图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>精灵图案例</title>
<style>
.news {
list-style: none; /*去掉样式,即去掉li标签前面的小黑点*/
}
.news li a {
color: #333;
text-decoration: none;
}
.news li a:hover {
color: red;
}
.news li {
width: 300px;
height: 30px;
padding-left: 35px;
line-height: 30px; /*设置行高与高度一致,可以让字体居中显示*/
border: 1px solid rebeccapurple;
background-image: url(../img/c.png);
background-repeat: no-repeat;
background-position: 0 -25px; /*图片位置移动*/
}
</style>
</head>
<body>
<ul class="news">
<li><a href="#">新闻内容</a></li>
<li><a href="#">新闻内容</a></li>
<li><a href="#">新闻内容</a></li>
<li><a href="#">新闻内容</a></li>
<li><a href="#">新闻内容</a></li>
</ul>
</body>
</html>05-背景属性合写
<!DOCTYPE html>
<html lang="en">
<!-- 建议:背景都以和写的形式存在,CSS的字节更少 -->
<!-- backkgorund合写的顺序:背景颜色/背景图地址/平铺设置/背景图滚动/背景图位置 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>背景属性合写</title>
</head>
<body>
<style>
/* 背景以合写的形式 */
.note {
/* backkgorund合写的顺序:背景颜色/背景图地址/平铺设置/背景图滚动/背景图位置 */
background: #ccc url(../image/2.png) no-repeat scroll 0 -1709px;
}
</style>
</body>
</html>06-小图片对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小图片对齐三种方式</title>
<style>
body, ul, li {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.news li{
line-height: 30px;
}
.bg {
/* 第一种方式,通过bg-position的背景对齐方式 */
background: url('../img/c.png') no-repeat 0px 0px;
padding-left: 35px;
}
.ico {
background: url('../img/c.png') no-repeat 0px 0px;
width: 30px;
height: 30px;
/* 第二种对齐方式:使用display-inline-block进行对齐 */
display: inline-block; /*设置为块级元素*/
vertical-align: middle; /*设置行内块对齐方式*/
}
.fl .bg-img {
background: url('../img/c.png') no-repeat 0px 0px;
/* 第三中对齐方式:浮动,能不用则不用 */
float: left; /*只要浮动了,就成为了块级元素,都可以设置宽高了*/
width: 30px;
height: 30px;
margin-top: 2px;
margin-right: 8px;
}
.fl a {
float: left;
}
</style>
</head>
<body>
<ul class="news">
<!-- 第一种对齐方式:背景对齐方式 -->
<li class="bg"><a href="#">新闻标题1</a></li>
<!-- 第二种对齐方式:使用display-inline-block进行对齐 -->
<li class="i-tag"><i class="ico"></i><a href="#">新闻标题2</a></li>
<!-- 第三中对齐方式:浮动 -->
<li class="fl"><i class="bg-img"><a href="#">新闻标题3</a></li>
</ul>
</body>
</html>07-标签嵌套的常见规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标签嵌套的常见规则</title>
</head>
<body>
<!-- CSS标签包含 -->
<!-- 常见的标签嵌套
1.内联元素却不能包含块元素,它只能包含其他的内联元素
span > div
div > div > ul > div
2.有些块级元素不能放其他块级元素
标题标记的<h1> <h2> <h3> <h4> <h5> <h6> <caption>;
段落标记的<p>; p > div
分割线 <hr> 和 <dt>
3.a标签不能嵌套a和input标签,能嵌套的标签像,<b><strong>等等
-->
</body>
</html>08.网站logo的SEO处理及隐藏文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>...</title>
</head>
<body>
<!-- CSS内容移除某个区域 -->
<!-- 常用于logo优化 -->
<!-- 1.利用text-indent:-2000em -->
<!-- 2.利用padding挤开盒子,并且overflow切割 -->
<!-- 3.利用margin拉动盒子配合overflow切割 -->
</body>
</html>09-滑动门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>菜单滑动门</title>
<style>
body, ul, li, div {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.menu {
width: 700px;
margin: 0 auto;
}
.menu li {
float: left;
padding-left: 11px;
background: url(../img/1.jpg) no-repeat;
margin: 0 -8px;
}
.menu li a {
float: left;
height: 35px;
line-height: 35px;
text-decoration: none;
color: #333;
padding: 0 30px 0 10px;;
/* border: 1px solid red; */
background: url(../img/2.jpg) no-repeat right top;
}
.menu li a:hover {
color: green;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">超级菜单超级长</a></li>
<li><a href="#">单</a></li>
</ul>
</body>
</html>
扫描二维码关注公众号，回复：
2828104 查看本文章
10-CSS圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圆角</title>
<style>
body, div {
padding: 0;
margin: 0;
}
.box {
border: 1px solid salmon;
width: 200px;
height: 200px;
margin: 20px auto;
/* border-radius: 100px; */
border-radius: 50%; /*边框圆角设置*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<img src="../img/a.png" alt="">
</div>
</body>
</html>11-CSS三角练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三角</title>
<style>
body, div {
padding: 0;
margin: 0;
}
.bd {
margin: 100px auto;
width: 0px;
height: 0px;
border: 100px solid red;
border-color: transparent transparent transparent green;
border-style: dashed dashed dashed solid /*兼容ie6*/
}
.bd-up {
margin: 100px auto;
width: 0px;
height: 0px;
border: 100px solid red;
border-color: transparent transparent green;
border-style: dashed dashed solid /*兼容ie6*/
}
</style>
</head>
<body>
<div class="bd"></div>
<div class="bd-up"></div>
</body>
</html>12-三角形案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三角形案例</title>
<style>
body, div {
padding: 0;
margin: 0;
}
.main {
width: 600px;
margin: 100px auto;
}
.btn1, .btn2 {
position: relative;
width: 100px;
height: 36px;
line-height: 36px;
color: #eee;
text-align: center;
background-color: #90c;
border: 1px solid #aa33ff;
border-radius: 3px;
}
.btn1::before {
/* 伪元素必须要加content属性 */
content: "";
position: absolute;
left: 45%;
top: -12px;
display: block;
width: 0px;
height: 0px;
/* background-color: green; */
border: 6px solid #90c;
border-color: transparent transparent #90c;
border-style: dashed dashed solid;
}
.btn2::before {
content: "";
height: 0;
width: 0;
display: block;
position: absolute;
left: -12px;
top:30%;
border: 6px solid #90c;
border-color: transparent #90c transparent transparent;
border-style: dashed solid dashed dashed;
}
</style>
</head>
<body>
<div class="main">
<div class="btn1">
气泡按钮
</div>
<hr>
<div class="btn2">左侧气泡按钮</div>
</div>
</body>
</html>
13-三角形气泡2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>三角形案例2</title>
<style>
body, div, ul, li {
padding: 0;
margin: 0;
}
.btn {
width: 100px;
height: 40px;
border: 1px solid #ccc;
margin: 100px auto;
}
.bubble-s {
position: relative;
}
.bubble-s::before, .bubble-s::after {
content: "";
display: block;
position: absolute;
left: 40%;
top: -18px;
border: 9px solid #ccc;
border-color: transparent transparent #ccc;
border-style: dashed dashed solid;
}
.bubble-s::after {
top: -16px;
border: 9px solid #ccc;
border-color: transparent transparent #fff;
border-style: dashed dashed solid;
}
.ul {
list-style: none;
}
.menu {
margin: 0 auto;
width: 202px;
}
.menu li {
width: 200px;
border: 1px solid #ccc;
overflow: hidden;
}
.menu a {
width: 200px;
float: left;
height: 30px;
line-height: 30px;
color: #3e3e3e;
padding-left: 1em;
text-decoration: none;
}
.menu a:hover {
background-color: #cecece;
color: #fff;
}
</style>
</head>
<body>
<div class="btn bubble-s"></div>
<ul class="menu bubble-s">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
<li><a href="#">菜单4</a></li>
<li><a href="#">菜单5</a></li>
</ul>
</body>
</html>
常用代码:
Note {
background-color: #cda/transparent; /* 设置背景色/透明色 */
background-image: url(../img/a.png); /* 设置背景图片,优先级要高于背景色 */
background-repeat: repeat-x/repeat-y/repeat/no-repeat/inherit; /*设置背景图片是否重复/横向重复/纵向重复/横向纵向都重复/不重复/继承父类的方式*/
background-position: left/right/top/bottom/center; /*设置背景图像的开始位置*/
background-position: left bottom; /*设置图片左边和底部对齐*/
background-position: 60% 50%; /*以xy轴的起始点为0%,来确定位置*/
background-position: -500px 0; /*以xy轴坐标,以图片的左上角为点,-500px 0 就是左上角的坐标*/
background-attachment: scroll/fixed; /*设置背景图是否固定 fixed背景图固定/scroll随着文本内容滚动 默认值*/
background: #ccc url(../image/2.png) no-repeat scroll 0 -1709px; /* backkgorund合写的顺序:背景颜色/背景图地址/平铺设置/背景图滚动/背景图位置 */
/* vertical-align: middle; 设置行内块对齐方式(使用display-inline-block进行对齐小图标时使用) */
border-radius: 50%/100px; /*边框圆角设置 两种表现形式:百分比和像素*/
}上一篇: CSS的/盒模型/盒边框/内外边距/浮动/定位方式/层次划分/案例等 -03
下一篇: CSS之项目练习小案例-05