Web网页制作（静态网页）（设计自动滚播，以及填写信息地址和图片随意转换的形式）-CSDN博客

本文链接：https://blog.csdn.net/2301_80945113/article/details/146100584

一、“我和甜蜜有个约会”：主页面代码介绍：

1.格式选择

主页面的主代码使用了PyCharm里面的html格式的代码，js以及css是在新建的文件中书写的（我用的是汉化版）

eg：

2.html主页面代码以及详细介绍（具体的布局以及名字可以自行更改）

1. 页面结构

页面分为以下几个主要部分：

头部 (head)：包含品牌Logo和联系电话图片。
导航栏 (nav)：提供网站的主要导航链接，如首页、港式甜品、台式甜品等。
轮播图 (banner)：展示品牌宣传图片，支持自动轮播和手动切换。
品牌简介 (learn)：介绍“甜蜜约会”品牌的历史和发展。
特色美食推荐 (features)：展示品牌特色美食图片，支持切换查看。
表单 (form)：提供用户填写姓名、手机、邮箱等信息，用于加盟或联系。
页脚 (footer)：包含版权信息和备案号。


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>甜蜜约会</title>
  <link href="css/style08.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="js/js08.js"></script>
</head>
<body>
<!-- head begin-->
<div class="head">
  <div class="left"><img src="images/logo.png" /></div>
  <div class="right"><img src="images/phone.jpg" /></div>
</div>
<!-- head end-->
<!-- nav begin-->
<div id="nav">
  <ul class="nav">
    <li><a href="#" class="color_in">首页</a></li>
    <li><a href="#">港式甜品</a></li>
    <li><a href="#">台式甜品</a></li>
    <li><a href="#">植物甜品</a></li>
    <li><a href="#">广府糖水</a></li>
    <li><a href="#">加盟我们</a></li>
    <li><a href="#">分店地址</a></li>
  </ul>
</div>
<!-- nav end-->
<!-- banner begin-->
<div class="banner">
  <ul class="banner_pic" id="banner_pic">
    <li class="current"><img class="one" src="images/01.jpg"/></li>
    <li class="pic"><img class="one" src="images/02.jpg"/></li>
    <li class="pic"><img class="one" src="images/03.jpg"/></li>
  </ul>
  <ol id="button">
    <li class="current"></li>
    <li class="but"></li>
    <li class="but"></li>
  </ol>
</div>
<!-- banner end-->
<!-- learn begin-->
<div id="learn">
  <h2>甜蜜约会品牌简介</h2>
  <dl>
    <dt></dt>
    <dd class="txt1">想和甜蜜有个约会吗？</dd>
    <dd class="txt2">甜品不仅女孩子喜欢，很多男孩子也不例外，在人们越来越会享受生活的今天，甜品品牌发展的可谓风生水起，“甜蜜约会”就是其中一个。1995年，“甜蜜约会”的创始人在西贡区创办了首家港式甜品店，凭借着甜品细腻的口感和独特的风味，获得了很多消费者的青睐。以创新、品质、价格作为营销系理念，“甜蜜约会”很快“俘获”了一大批忠实粉丝，并在2002年于新港中心开设了分店。到2020年，“甜蜜约会”更是在北京、上海、杭州、苏州、珠海、湖南、广州等地区开设了60多家特许经营店，这样的成绩着实耀眼。</dd>
  </dl>
  <div class="imgbox" id="imgbox">
         <span>
             <a href="#"><img src="images/1.jpg" /></a>
             <a href="#"><img src="images/2.jpg" /></a>
             <a href="#"><img src="images/3.jpg" /></a>
             <a href="#"&