asp.net ajax 怎么获取前端ul li_web前端-蓝莓派项目（上）-CSDN博客

本文链接：https://blog.csdn.net/weixin_42611177/article/details/112128437

对于一个web前端学习者来说一定要多做项目多动手，以下这个项目适合系统学过当然对于小白来说有一点难度，一定要仔细跟着我们做不要放弃。

第一节项目准备

http://iwenwiki.com/api /blueberrypai/

我们制作蓝莓派项目

项目制作流程
项目资料查看
项目文件大体搭建

1.1文件介绍

1.项目文件目录

2.初始化测css文件

1.2 标注切图

打开psd文件

项目制作流程：

需求文档---产品经理—ui设计---前端开发—后台开发—测试--上线—运维

1.3 首页顶部制作

首页导航制作：

思路布局：

一个最大盒子 100%
居中的盒子 width:1200px;margin:0 auto;
内容分左中右 ---

代码：如下

Css样式：

顶部导航代码：

Css样式：

顶部右侧布局

1.4 swiper轮播

轮播图思路分析：

1.轮播图---使用swiper实现

2.引入swiper资源 Swiper.css Swiper.js

swiper的使用

<link rel="stylesheet" href="dist/css/swiper.min.css">

</head>

<body>

...

<script src="dist/js/swiper.min.js"></script>

swiper的模板

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
 
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
3.初始化Swiper：最好是挨着</body>标签
<script>        
 var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
 
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
 
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
 
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
</script>