我的第一个粉丝产生了 “Z-路人”，本以为自己写的东西不会有人看的，因为你很开心。我会继续努力的，持之以恒，我得坚持住每天一篇博客，我的目标：一个礼拜至少写4篇。 ❤
经过第一天的学习，给读者们说说学习之后的小案例，今天就不写新知识了，有条件的朋友可以跟着我的代码一起写！或者有什么问题都可以在评论上问我的。
案例一
日历小案例
❤ 问题：大家平时都见过日历，但是用html和css做出来的时候还是挺麻烦的，不信你按照这个图片，自己做一个试试！
❤希望读者有时间的情况下能够先动手做一做，那样子会印象更深刻些，如果你有什么更简单的方法就教教我吧。
html 结构：html中 加了一个 ul 标签 和 35 个 li 标签。
<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>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>注意： css 代码 /* */ 代表解释，不属于代码的
<style>
ul {
padding: 0; /* 删除ul自带的内边距 */
list-style: none; /* 删除li标签自带的圆点 */
width: 420px;
margin: 100px auto; /* 使块级元素居中 */
}
li {
width: 60px;
height: 60px;
float: left;
/* 浮动时，会将元素转为行内块元素，并且一行显示 */
box-sizing: border-box;
/* 给盒子增加边距或者边框 都是往盒子的宽度和高度里面加 */
text-align: center;
line-height: 60px;
/* 文字居中效果 */
border-left: 1px solid black;
/* 给所有的li标签都加一个左边框 */
border-top: 1px solid black;
/* 给所有li标签都加一个上边框 */
}
li:nth-child(7n) {
/* 给7的倍数的盒子都加个背景色，并且加上右边框 */
background-color: orangered;
border-right: 1px solid black;
}
/* 29以后的li都加上下边框 */
li:nth-child(n+29) {
border-bottom: 1px solid black;
}
/*32以后的li取消下边框 */
li:nth-child(n+32) {
border-bottom: none;
}
/* 7的倍数减1 的数字都加一个背景色 */
li:nth-child(7n-1) {
background-color: orange;
}
/* 33以后的li 取消左边框和背景 */
li:nth-child(n+33) {
border-left: none;
background: none;
}
/* 最后一个li取消右边框 */
li:last-child {
border-right: none;
}
li:hover:not( :nth-child(n+32) ){
/* 过渡效果 和 盒子阴影为内聚 */
transition: all .5s;
box-shadow: 0px 0px 5px 5px hotpink inset;
}
</style>
案例二
利用文字阴影来做一个浮雕效果的案例
❤看到这个案例忽然感觉文字阴影还是有点用的吧！
<body>
<p>I ❤ U</p>
<!-- ❤只需要使用拼音输入法中打XIN的拼音就会出来哦！ -->
</body>css代码
<style>
body{
background-color: gray;
/* 设置背景色时，需要设置与字体一样的颜色哦！ */
}
p{
color:gray;
font-size: 200px;
text-align: center; /* 文字居中 */
transition: all 1s; /* 过渡（动画）效果 全部1秒完成 */
}
p:hover{
/* 当你鼠标移入时，阴影就出来了，感觉就是浮雕效果了 */
text-shadow: -1px -1px 2px white,1px 1px 2px black;
}
</style>
❤ 颜色可以自己调， 搞搞送给你爱人吧！
案例三
小狗相框
❤ 思维：一共有五张照片，四张图片分别是相框的四个角，加上一张小狗的图片，利用背景的属性 合起来，就可以了，先给大家素材，好让大家自己做做看。
❤ 合成图，很可爱的狗狗！
html 代码
<body>
<div class="box"></div>
</body>css代码
<style>
.box{
width: 623px;
height: 417px;
margin: 100px auto; /* 相册居中效果 */
background: url(img/bg1.png) no-repeat left top,
url(img/bg2.png) no-repeat right top,
url(img/bg3.png) no-repeat right bottom,
url(img/bg4.png) no-repeat left bottom,
url(img/dog3.jpg) no-repeat 43% 53%/366px 255px;
/* 背景图片不平铺，位置要调好哦！ */
}
</style>
案例四
线性渐变
html 代码
<body>
<div class="box"></div>
<input type="button" value="线性渐变">
</body>css代码
<!--
获得图片的路径有两种：
1.让美工帮你出张图
缺点：1.要请美工吃饭 2.图片会让浏览器访问的时候加载稍微慢一点，因为会发起一个图片的请求
2.不用图片，自己用CSS属性，做一个渐变颜色，所以这个时候要用线性渐变
-->
<style>
.box{
width: 300px;
height: 100px;
border: 1px solid #000;
/* 一定要设置给背景属性(严格来讲是给background-image)，因为它相当于是把渐变色当成背景图片 */
background-image:
linear-gradient(to right,orange,orangered,red);}
/* 线往右边的方向 */
input{
margin-top: 50px;
color:white;
width: 135px;
height: 35px;
background-image:
linear-gradient(to right top,orange,orangered);
border-radius: 10px;
border: none;
}
</style>
案例五
径向渐变
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid #000;
/*
参数1：确定圆心位置和大小
参数2：颜色1
参数3：颜色2
至少2个颜色
也能设置每个颜色所占的百分比
*/
background-image: radial-gradient(100px at center,red,blue,green);
}
</style>
</head>
<body>
<div class="box"></div>
</body>最后一个案例
火箭升天
❤这和案例截图截不出来，但是是一个很好玩的案例，我只能解释给大家听了，除非你们自己做一下才能看到了！
❤ 火箭的素材也给你们了，自己做做看吧。那个金黄的圆是火箭，不是煎蛋。
<style>
/* 给body设置跟屏幕一样大的高度 */
html,body{
height:100%;
}
body{
/* 天空设置为蓝色， 做出一个渐变色的太阳 */
background-image: radial-gradient(300px at right top,orangered 30%,orange,skyblue);
overflow: hidden;
}
img{
/* 火箭只有设置了定位才能移动位置 */
position: absolute;
bottom:-190px;
}
/* 当body被移入的时候修改它里面的img */
body:hover img{
transition: all 2.5s;
/* 火箭平移，同时旋转方向 */
transform: translate(1200px,-700px) rotate(90deg) scale(.1);
}
</style>
</head>
<body>
<img src="img/rocket.png" alt="">
</body>
明天写新内容了，一些小小的案例和大家分享一下，要不然会认为学的东西都没有什么用，学起来很没意思的！ ❤