网页设计与网站建设有区别吗,物联网应用技术就业前景,兰州格罗互联网技术服务有限公司,网址域名ip解析CSS综合案例4
1. 综合案例
我们来做一个静态的轮播图。 2. 分析思路
首先需要加载一张背景图进去需要4个小圆点#xff0c;设置样式#xff0c;并用定位和平移调整位置添加两个箭头#xff0c;也是需要用定位和位移进行调整位置 3. 代码演示
html文件
!DOCTYPE htm…CSS综合案例4
1. 综合案例
我们来做一个静态的轮播图。 2. 分析思路
首先需要加载一张背景图进去需要4个小圆点设置样式并用定位和平移调整位置添加两个箭头也是需要用定位和位移进行调整位置 3. 代码演示
html文件
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title静态轮播图/titlelink relstylesheet href./style.css //headbodydiv classboximg src./R-C.jpg alt穿越火线 /div classarrow1p/p/divdiv classarrow2p/p/divdiv classCarousel/divdiv classwrapperdiv classpoint/divdiv classpoint/divdiv classpoint/divdiv classpoint/div/div/div/body
/html
css文件
* {box-sizing: border-box;
}
.box {width: 1024px;height: 729px;position: absolute;left: 50%;top: 50%;/*translateX x轴位移单位百分比或者px */transform: translate(-50%, -50%);
}.arrow1 {width: 30px;height: 40px;background-color: #3e3f43;border-radius: 0 70% 60% 0;position: absolute;top: 50%;transform: translateY(-50%);opacity: 0.5;cursor: pointer;
}
.arrow2 {width: 30px;height: 40px;background-color: #3e3f43;border-radius: 70% 0 0 60%;position: absolute;top: 50%;left: 994px;transform: translateY(-50%);opacity: 0.5;cursor: pointer;
}.arrow1 p {position: absolute;left: 6px;top: -13px;font-size: 20px;color: #fff;
}
.arrow2 p {position: absolute;left: 9px;top: -13px;font-size: 20px;color: #fff;
}
.Carousel {position: absolute;left: 50%;bottom: 20px;transform: translateX(-50%);width: 120px;height: 20px;border: 1px solid #ccc;background-color: #fff;border-radius: 20px;display: flex;align-items: center;justify-content: space-around;opacity: 0.1;
}.point {left: 50%;bottom: 20px;transform: translateX(-50%);width: 10px;height: 10px;background-color: #fafafa;border-radius: 50%;cursor: pointer;
}
.wrapper {position: absolute;left: 50%;bottom: 20px;transform: translateX(-50%);width: 120px;height: 20px;border-radius: 20px;display: flex;align-items: center;justify-content: space-around;
}.point:hover {background-color: #f55719;
}
