2024.4.6-day11-CSS 背景和精灵图

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

文章目录

作业
2024.4.6学习笔记
- 1 背景
- 2 背景图片
- 3 CSS 精灵图

作业

在这里插入图片描述

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>背景</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}ul {list-style: none;}body {font: bolder 25px "Microsoft YaHei","Heiti SC",tahoma,arial,"Hiragino Sans GB","\5B8B\4F53",sans-serif;color: white;}.auto-center {width: 1000px;margin-left: auto;margin-right: auto;}.full-center {min-width: 1000px;}.text-center {text-align: center;}.clearfix::after {content: '';display: block;clear: both;}.top {background: #000079 url("https://img2.baidu.com/it/u=1403977252,4044276651&fm=253&fmt=auto&app=138&f=JPEG?w=679&h=500")left top /cover no-repeat;}.top>.auto-center {line-height: 100px;background-color: rgba(0,0,0,.5);}.banner {background: #003E3E url("https://img0.baidu.com/it/u=1811701003,4165153230&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800") center /cover no-repeat;line-height: 300px;}.main {margin-top: 20px;background: #467500 url("./images/1.png");}/*基于浮动实现两栏布局，左边200px，右侧自动填充剩余空间*/.content-one {position: relative;height: 500px;}.content-one>.left {width: 200px;background-color: #613030;line-height: 500px;/* float: left; */position: absolute;}.content-one>.right {/* 思考，right为绝对定位是否可以实现两栏布局？ */margin-left: 200px;background-color: #336666;line-height: 300px;}/*基于浮动实现栏栅布局*/.content-tow {margin-top: 10px;}.content-tow>.list-item {float: left;width: 250px;height: 150px;box-sizing: border-box;background-color: #CAFFFF;background-size: contain;background-position: center;background-repeat: no-repeat;text-align: center;line-height: 150px;color: black;border: 1px dashed #ccc;}/* 基于浮动实现三栏布局，左固定200px，右固定250px，中间自适应宽度（填充剩余空间） 注意：中间一栏必须放到最后*/.content-three {margin-top: 20px;position: relative;height: 300px;}.content-three>.left {position: absolute;width: 200px;left: 0;top: 0;/* float: left; */line-height: 300px;background-color: #F9F900;}.content-three>.right {position: absolute;width: 250px;right: 0;top: 0;/* float: right; */line-height: 300px;background-color: #A5A552;}.content-three>.middle {background-color: #5CADAD;margin-left: 200px;margin-right: 250px;}/* 基于浮动实现三栏布局，左固定200px，右固定250px，中间自适应宽度（填充剩余空间） 使用父级外边距实现*/.content-four {margin-top: 20px;padding-left: 200px;padding-right: 250px;}.content-four>.left {width: 200px;float: left;line-height: 300px;background-color: #F9F900;margin-left: -200px;}.content-four>.right {width: 250px;float: right;line-height: 300px;background-color: #A5A552;margin-right: -250px;}.content-four>.middle {background-color: #5CADAD;}.footer {margin-top: 20px;background-color: #642100;line-height: 200px;}.fixed-ad {position: fixed;width: 100px;height: 300px;right: 20px;top: 50%;margin-top: -150px;background: #4D0000 url("https://tpc.googlesyndication.com/simgad/17371016686948028154?sqp=4sqPyQQ7QjkqNxABHQAAtEIgASgBMAk4A0DwkwlYAWBfcAKAAQGIAQGdAQAAgD-oAQGwAYCt4gS4AV_FAS2ynT4&rs=AOga4qnNb_psIDjzxDXDvxySskllK06_2Q") center/cover no-repeat;}.other {margin-top: 30px;background-color: #FF60AF;border: 1px dashed #ccc;position: relative;}.other .bottom {position: absolute;bottom: -10px;left: 20px;right: 20px;background-color: #B15BFF;}</style>
</head>
<body><div class="top full-center"><div class="auto-center text-center">top</div></div><div class="banner text-center full-center">banner</div><div class="main auto-center"><div class="content-one"><div class="left text-center">left</div><div class="right text-center">right</div></div><ul class="content-tow clearfix"><li class="list-item" style="background-image: url(https://tse4-mm.cn.bing.net/th/id/OIP-C.1MOvhYr7-PNCCFY1w5yIzAHaEo?rs=1&pid=ImgDetMain)">list-item1</li><li class="list-item" style="background-image: url(https://pic4.zhimg.com/v2-5290caf1f5c8c270e6da56b0361c9e1b_r.jpg)">list-item2</li><li class="list-item" style="background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.neU_lyZXZpazGKjZXAlGywHaEK?rs=1&pid=ImgDetMain)">list-item3</li><li class="list-item" style="background-image: url(./images/2.png)">list-item4</li><li class="list-item" style="background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.31df3a5a2d8462228734f95d459883e2?rik=7EE6TeWDk%2f%2bctQ&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140303%2f1-140303214331.jpg&ehk=SpI7mz%2byLqOkT8BL79jcd3iCtQYNFlBHQzbtF1p0vuQ%3d&risl=&pid=ImgRaw&r=0)">list-item5</li><li class="list-item" style="background-image: url(https://img1.pconline.com.cn/piclib/200807/22/batch/1/5836/1216741512734nnouustae4.jpg)">list-item6</li><li class="list-item" style="background-image: url(https://www.euweb.cn/wp-content/uploads/2016/12/302636-106.jpg)">list-item7</li><li class="list-item" style="background-image: url(https://n.sinaimg.cn/sinacn10116/600/w1920h1080/20190326/2c30-hutwezf6832339.jpg)">list-item8</li></ul><div class="content-three clearfix"><div class="left text-center">left</div><div class="right text-center">right</div><div class="middle text-center">middle</div></div><div class="content-four clearfix"><div class="left text-center">left</div><div class="right text-center">right</div><div class="middle text-center">middle</div></div></div><div class="other auto-center"><div>content</div><div>content</div><div>content</div><div>content</div><div>content</div><div class="bottom text-center">title</div></div><div class="footer text-center full-center">footer</div><div class="fixed-ad text-center">ad</div><div style="position: fixed;top: 200px;left: 50%;margin-left: 500px;width: 50px;height: 150px;background-color: #ccc;">版心固定</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="shouye" content="shouye"><meta description="shouye" content="shouye"><title>首页</title><style>* {padding: 0;margin: 0;}ol {width: 600px;font-size: 0;margin: 30px auto;}ol>li {width: 300px;font-size: 14px;padding: 10px 0;}ol>li,span {display: inline-block;}span,a {text-align: center;}a {color: black;text-decoration: none;}a:hover {color: blue;}.sprites {background-image: url("./images/3.png");background-repeat: no-repeat;}.one1,.two2,.three3,.qita {width: 20px;height: 20px;}.xin,.re {width: 16px;height: 16px;}.one1 {background-position-x: -10px;background-position-y: -10px;}.qita {background-position-x: -50px;background-position-y: -50px;}.xin {background-position-x: -90px;background-position-y: -46px;}.three3 {background-position-x: -10px;background-position-y: -50px;}.two2 {background-position-x: -50px;background-position-y: -10px;}.re {background-position-x: -90px;background-position-y: -10px;}</style></head><body><ol><li><span class="sprites one1">1</span><a href="#">高福称北京疫情可能要前推一个月</a><span class="sprites re"></span></li><li><span class="sprites qita">4</span><a href="#">白百何方否认新恋情</a></li><li><span class="sprites two2">2</span><a href="#">北京新发地市场商户回浙江后确诊</a><span class="sprites xin"></span></li><li><span class="sprites qita">5</span><a href="#">男童在确诊患者被子上玩感染</a></li><li><span class="sprites three3">3</span><a href="#">涉事教师承认曾掌掴坠楼小学生</a></li><li><span class="sprites qita">6</span><a href="#">110万买奔驰越野车高速熄火5次</a></li></ul></body>
</html>