做的好看的外国网站,企业应用软件开发,网站分享正能量,模板设计图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;
}
