CSS静态轮播图制作

最新推荐文章于 2022-04-25 09:04:41 发布

python_UTF_8

最新推荐文章于 2022-04-25 09:04:41 发布

阅读量900

点赞数 1

分类专栏： web前端核心技术文章标签： python css html

本文链接：https://blog.csdn.net/python_UTF_8/article/details/118920021

版权

本文介绍了如何使用CSS和HTML制作静态轮播图，包括环境配置、步骤解析和关键代码展示。首先通过PyCharm创建项目和HTML文件，然后进行页面布局，设置图片、箭头和圆点的CSS样式。最后提供了CSS重置样式代码链接。

摘要由CSDN通过智能技术生成

用到的环境：pycharm2021、python3.6

小编给大家带来CSS静态轮播图的制作

先看一下效果图:

第一步：打开pycharm 建一个新的项目，创建一个HTML5的文件找几张自己觉得不错的图片

整体思路：先进行排版布局，我们要清楚轮播图最基本的元素（箭头、图片、圆圈）、可以参考一下购物网页上的轮播图

第二步：1.首先引入重置样式，因为网页本身会自带样式，可能会影响我们代码的效果。

引入CSS重置样式：

<link rel="stylesheet" href="reset.css">

在body中写出基本的结构

<div class="slide">
<!--轮播图片 -->
    <ul class="pic">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
    <ul class="sign">
        <li></li>
        <li></li>
    </ul>
    
    <ul class="circle">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>