仿牌做外贸建网站快速刷排名seo软件
一.理论部分
1.为什么要清除浮动，清除浮动的方法有哪些？（至少两种）
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
清除浮动：clear:both;
清除浮动方法：
①额外标签法/隔墙法
在最后一个浮动的子元素后面添加一个额外标签, 添加清除浮动样式.例如<div style=”clear:both”></div>，或者其他标签（如<br/>等）
要求这个新的空标签必须是块级元素
②父级添加overflow属性
可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll
③父级添加after伪元素
.clearfix:after{content: "";//伪元素必须写的属性display: block;//插入的元素必须为块级元素height: 0;//不要看见这个元素 clear: both;//清除浮动代码visibility: hidden;//不要看见这个元素
}
.clearfix {*zoom: 1;/*IE6,7专有*/
}
④父级添加双伪元素
.clearfix:before,.clearfix:after{content: "";display: table;//转化为块级元素并且一行显示
}
.clearfix:after {clear:both;
}
.clearfix {*zoom: 1;
}2.怎么实现左边宽度固定右边宽度自适应的布局？
父盒子使用flex布局，左边的子盒子给一个固定的宽度，右边的盒子flex:1;
<!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>.container {display: flex;//切记width: 60%;height: 150px;background-color: pink;margin: 0 auto;}.left {width: 100px;height: 150px;background-color: purple;}.right {flex: 1;background-color: skyblue;}</style>
</head><body><div class="container"><div class="left"></div><div class="right"></div></div>
</body></html>3.讲讲flex:1;
flex:1表示子项目占剩余空间的1份，剩余空间就是看子盒子有没有给宽度
4.怎么实现移动端适配不同设备？
使用rem布局和响应式布局，rem布局和媒体查询结合使用，响应式布局和bootstrap一起使用
二.实操部分
音波
css代码
.dajianshi {margin: 100px auto;width: 200px;height: 120px;display: flex;}.dajianshi span {width: 10px;border-radius: 18px;margin-right: 10px;animation: bar 2s infinite linear;}.dajianshi span:nth-child(1) {animation-delay: 0.2s;}.dajianshi span:nth-child(2) {animation-delay: 0.4s;}.dajianshi span:nth-child(3) {animation-delay: 0.6s;}.dajianshi span:nth-child(4) {animation-delay: 0.8s;}.dajianshi span:nth-child(5) {animation-delay: 1.0s;}.dajianshi span:nth-child(6) {animation-delay: 1.2s;}.dajianshi span:nth-child(7) {animation-delay: 1.4s;}@keyframes bar {0% {background: red;margin-top: 25%;height: 10%;}50% {background: red;height: 100%;margin-top: 0%;}100% {background: red;height: 10%;margin-top: 25%;}}html代码
<div class="dajianshi"><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>爱心怦怦跳
css代码
* {margin: 0;padding: 0;}body {display: flex;justify-content: center;align-items: center;background-color: #000;}.heart-container {display: flex;justify-content: center;align-items: center;width: 231px;/* 9 * 15px width + 8 * 12px gap */height: 300px;gap: 12px;position: relative;}.bar {width: 15px;border-radius: 10px;height: 15px;position: absolute;top: 50%;transform: translateY(-50%);animation: 7.4s infinite;}.bar:nth-child(1) {background-color: #ff0000;left: 0px;animation-name: animate-bar-1;}.bar:nth-child(2) {background-color: #00e5ff;left: 27px;animation-name: animate-bar-2;animation-delay: 0.4s;}.bar:nth-child(3) {background-color: #ffb6af;left: 54px;animation-name: animate-bar-3;animation-delay: 0.8s;}.bar:nth-child(4) {background-color: #ff00c8;left: 81px;animation-name: animate-bar-4;animation-delay: 1.2s;}.bar:nth-child(5) {background-color: #ffff00;left: 108px;animation-name: animate-bar-5;animation-delay: 1.6s;}.bar:nth-child(6) {background-color: #ff00c8;left: 135px;animation-name: animate-bar-6;animation-delay: 1.8s;}.bar:nth-child(7) {background-color: #ffb6af;left: 162px;animation-name: animate-bar-7;animation-delay: 2.0s;}.bar:nth-child(8) {background-color: #00e5ff;left: 189px;animation-name: animate-bar-8;animation-delay: 2.2s;}.bar:nth-child(9) {background-color: #ff0000;left: 216px;animation-name: animate-bar-9;animation-delay: 2.4s;}@keyframes animate-bar-1 {0%,100% {height: 15px;transform: translateY(-50%);}60% {height: 40px;transform: translateY(calc(-50% + -5px));}}@keyframes animate-bar-2 {0%,100% {height: 15px;transform: translateY(-50%);}50% {height: 80px;transform: translateY(calc(-50% + -10px));}}@keyframes animate-bar-3 {0%,100% {height: 15px;transform: translateY(-50%);}50% {height: 110px;transform: translateY(calc(-50% + -10px));}}@keyframes animate-bar-4 {0%,100% {height: 15px;transform: translateY(-50%);}50% {height: 120px;transform: translateY(calc(-50% + 20px));}}@keyframes animate-bar-5 {0%,100% {height: 15px;transform: translateY(-50%);}50% {height: 140px;transform: translateY(calc(-50% + 40px));}}@keyframes animate-bar-6 {0%,100% {height: 15px;transform: translateY(-50%);}50% {height: 120px;transform: translateY(calc(-50% + 20px));}}@keyframes animate-bar-7 {0%,100% {height: 15px;transform: translateY(-50%);}50% {height: 110px;transform: translateY(calc(-50% + -10px));}}@keyframes animate-bar-8 {0%,100% {height: 15px;transform: translateY(-50%);}50% {height: 80px;transform: translateY(calc(-50% + -10px));}}@keyframes animate-bar-9 {0%,100% {height: 15px;transform: translateY(-50%);}50% {height: 40px;transform: translateY(calc(-50% + -5px));}}html代码
<div class="heart-container"><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div></div>数字日历
css代码
* {margin: 0;padding: 0;}div {margin: 10px 0 0 10px;width: 50px;height: 70px;background-color: greenyellow;overflow: hidden;font-weight: 600;border-radius: 5px;color: black;}ul {line-height: 70px;text-align: center;width: 50px;background-color: greenyellow;animation: move 6s infinite alternate;}ul li {list-style: none;}@keyframes move {0% {transform: translateY(0px);}11% {transform: translateY(-70px);}22% {transform: translateY(-140px);}33% {transform: translateY(-210px);}44% {transform: translateY(-280px);}55% {transform: translateY(-350px);}66% {transform: translateY(-420px);}77% {transform: translateY(-490px);}88% {transform: translateY(-560px);}100% {transform: translateY(-630px);}}html代码
<div><ul><li>0</li><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></ul></div>
css代码
* {margin: 0;padding: 0;box-sizing: border-box;}body {background-color: #f8f8f8;color: #333;line-height: 1.6;}/* 版心容器 */.container {width: 1200px;margin: 0 auto;padding: 0 32px;}/* 导航栏样式 */header {background-color: #333;border-radius: 5px;}.navbar {display: flex;justify-content: space-between;align-items: center;color: white;padding: 10px 32px;margin: 10px auto 0;border-radius: 10px;}.nav-links {display: flex;gap: 32px;}.nav-links span {color: white;font-size: 16px;}/* 卡片容器 */.card-container {display: flex;flex-wrap: wrap;justify-content: space-between;margin: 20px auto;gap: 24px;}/* 卡片样式 */.card {background-color: white;border-radius: 8px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);overflow: hidden;width: calc(33.333% - 16px);display: flex;flex-direction: column;}.card-image {margin: 15px 15px 0px;border-radius: 8px;height: 100px;background-color: #d9d9d9;}.card-title {font-size: 24px;margin: 10px 16px;font-weight: bold;}.card-description {padding: 0 16px;color: #666;flex: 1;}.card-meta {padding: 0 0 10px 16px;color: #999;font-size: 15px;margin-top: 8px;}/* 底部 */.footer-banner {background-color: #f0f0f0;text-align: center;padding: 10px;margin: 10px auto;border-radius: 4px;color: #666;}html代码
<div class="container"><header><nav class="navbar"><div class="logo">考核</div><div class="nav-links"><span>首页</span><span>文章</span><span>关于我们</span></div></nav></header><div class="card-container"><div class="card"><div class="card-image"></div><h2 class="card-title">标题1</h2><p class="card-description">这是一段摘要内容，描述当前文章的简要信息。这是一段摘要内容，描述当前文章的...</p><div class="card-meta">发布于 2025-06-01 · 阅读 123</div></div><div class="card"><div class="card-image"></div><h2 class="card-title">标题2</h2><p class="card-description">这是一段摘要内容，描述当前文章的简要信息。</p><div class="card-meta">发布于 2025-06-02 · 阅读 456</div></div><div class="card"><div class="card-image"></div><h2 class="card-title">标题3</h2><p class="card-description">这是一段摘要内容，描述当前文章的简要信息。</p><div class="card-meta">发布于 2025-06-03 · 阅读 789</div></div></div><div class="footer-banner">web第一次方向考核</div></div>