外贸做网站公司哪家好,python 做网站 数据库,dw网页设计与制作,深圳模板建站代理一.理论部分
1.为什么要清除浮动#xff0c;清除浮动的方法有哪些#xff1f;#xff08;至少两种#xff09;
由于父级盒子很多情况下#xff0c;不方便给高度#xff0c;但是子盒子浮动又不占有位置#xff0c;最后父级盒子高度为0时#xff0c;就会影响下面的标准…一.理论部分
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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.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
/headbodydiv classcontainerdiv classleft/divdiv classright/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 classdajianshispan/spanspan/spanspan/spanspan/spanspan/spanspan/spanspan/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 classheart-containerdiv classbar/divdiv classbar/divdiv classbar/divdiv classbar/divdiv classbar/divdiv classbar/divdiv classbar/divdiv classbar/divdiv classbar/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代码 divulli0/lili1/lili2/lili3/lili4/lili5/lili6/lili7/lili8/lili9/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 classcontainerheadernav classnavbardiv classlogo考核/divdiv classnav-linksspan首页/spanspan文章/spanspan关于我们/span/div/nav/headerdiv classcard-containerdiv classcarddiv classcard-image/divh2 classcard-title标题1/h2p classcard-description这是一段摘要内容描述当前文章的简要信息。这是一段摘要内容描述当前文章的.../pdiv classcard-meta发布于 2025-06-01 · 阅读 123/div/divdiv classcarddiv classcard-image/divh2 classcard-title标题2/h2p classcard-description这是一段摘要内容描述当前文章的简要信息。/pdiv classcard-meta发布于 2025-06-02 · 阅读 456/div/divdiv classcarddiv classcard-image/divh2 classcard-title标题3/h2p classcard-description这是一段摘要内容描述当前文章的简要信息。/pdiv classcard-meta发布于 2025-06-03 · 阅读 789/div/div/divdiv classfooter-bannerweb第一次方向考核/div/div
