个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！
⭐作业
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="三角形" content="三角形"> <meta description="三角形" content="三角形"> <title>三角形</title> <style> .btn { position: relative; width: 100px; height: 50px; background-color: black; color: white; margin: 30px auto 0; line-height: 50px; text-align: center; } .tips { position: absolute; width: 300px; height: 50px; left: 50%; background-color: blue; margin-left: -150px; top: 60px; color: white } .tips::after { content:''; position: absolute; width: 0; height: 0; line-height: 0; font-size: 0; border: 10px solid transparent; border-bottom-color: red; left: 50%; margin-left: -10px; bottom: 50.5px; } .btn:hover .tips { display: block; } .btn .tips { display: none; } </style> </head> <body> <div class="btn"> 查看 <div class="tips">我想学习前端知识</div> </div> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="图片" content="图片"> <meta description="图片" content="图片"> <title>图片</title> <style> * { margin: 0; padding: 0; } div { width: 300px; margin: 30px auto 0; background-color: blue; } .method1 { display: block; } .method2 { /* vertical-align: top; vertical-align: middle; */ vertical-align: bottom; } </style> </head> <body> <div> <img src="./images/1.jpg" height="50px"> </div> <div> <img class="method1 " src="./images/1.jpg" height="50px"> </div> <div> <img class="method2 " src="./images/1.jpg" height="50px"> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="计数器" content="计数器"> <meta description="计数器" content="计数器"> <title>计数器</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } body { counter-reset: month; } .box { counter-reset: day; width: 300px; margin: 30px auto 0; } .month { text-align: center; } .month::after { counter-increment: month; content: '第 'counter(month)'月'; } .day>li { float: left; width: 50px; height: 50px; text-align: center; line-height: 50px; } .day>li::after { counter-increment: day; content: counter(day); } .clearfix::after { content: ''; display: block; clear: both; } </style> </head> <body> <div class="box"> <h3 class="month"></h3> <ul class="day clearfix"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="box"> <h3 class="month"></h3> <ul class="day clearfix"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="字体图标" content="字体图标"> <meta description="字体图标" content="字体图标"> <title>字体图标</title> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> * { padding: 0; margin: 0; } .fotter { position: fixed; bottom: 0; left: 0; right: 0; height: 50px; } </style> </head> <body> <div class="fotter"> <span class="iconfont" style="color:blue;"></span> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont"></span> <span class="iconfont icon-gouwuche" style="color:blue;"></span> <span class="iconfont icon-wode"></span> <span class="iconfont icon-fenlei"></span> <span class="iconfont icon-shouye"></span> <span class="iconfont icon-shezhi"></span> </div> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="字体图标" content="字体图标"> <meta description="字体图标" content="字体图标"> <title>字体图标</title> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> * { padding: 0; margin: 0; } a { text-decoration: none; color: black; } a:hover { color: red; } .fotter { position: fixed; bottom: 0; left: 0; right: 0; height: 100px; font-size: 0; box-shadow: 0 0 10px #ccc; } .fotter .item { width: 25%; display: inline-block; font-size: 18px; text-align: center; cursor: pointer; margin-top: 15px; } .iconfont { font-size: 50px; } </style> </head> <body> <div class="fotter"> <a class="item"> <div class="iconfont icon-shouye"></div> <div>首页</div> </a> <a class="item"> <div class="iconfont icon-fenlei"></div> <div>分类</div> </a> <a class="item"> <div class="iconfont icon-gouwuche"></div> <div>购物车</div> </a> <a class="item"> <div class="iconfont icon-wode"></div> <div>我的</div> </a> </div> </body> </html>
