?????静态 站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计?????,常用的 页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本 页适合修改成为各种类型的产品展示 页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。
?? 精彩专栏推荐????????????
文章目录??
- 一、 站题目?????
- 二、 站描述??
- 三、 站介绍??
- 四、 站效果??
- 五、代码实现 ??
-
- HTML结构代码??
- CSS样式代码??
- 八、更多干货??
一、 站题目?????
?? 美食 页介绍、??甜品蛋糕、??地方美食小吃文化、??餐饮文化、等 站的设计与制作。
二、 站描述??
??美食主题 站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。
三、 站介绍??
?? 站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动 页布局结构。
?? 站程序方面：计划采用最新的 页编程语言HTML5+CSS3+JS程序语言完成 站的功能设计。并确保 站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到 站的效果。
?? 站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合 页风格的图片，然后使用PS做出适合 页尺寸的图片。
?? 站文件方面： 站系统文件种类包含：html 页结构文件、css 页样式文件、js 页特效文件、images 页图片文件；
四、 站效果??
五、代码实现 ??
HTML结构代码??
CSS样式代码??
*{ margin: 0; /* 外边距0*/ padding: 0; /* 外边距0*/}body{ overflow-x: hidden; /* 超出隐藏*/}a{ color: white; /* 颜色白色*/ text-decoration: none; /* 超出隐藏*/ }ul,li{ list-style: none; /* 超出隐藏*/}.min-width{ width: 1200px; margin: 0 auto;}header{ width:1600px; height: 450px; overflow: hidden;}/*轮播图start*/#benner { width:1600px; height:450px;}#benner .imga { display:none;}#benner .img { width: 100%; height: 100%}#benner .img .active { display:block;}#benner .title { width:101px; height:16px; background-color: black; /*background-color:rgba(226,226,226,0.6);*/ border-radius:30px; margin-top:-35px; float:left; margin-left:45%; margin-right:40%; padding:6px 0px 0px 10px; position:relative;}#benner .title .nr { list-style:none; width:10px; height:10px; background:#fff; border-radius:10px; float:left; margin-right:10px; margin-bottom:0px;}#benner .title .active { background:#db192a;}.nav .uu-lists{ position: absolute; top: 80px; z-index: 99; height: 400px !important; display: flex; flex-direction:column; justify-content: flex-start; align-items: center; background-color: rgba(255,87,34,.7); transition: .5s ease; opacity: 0;}.uu-lists>li{ float: none; display: block; border-bottom: 1px solid white; /*background-color: rgba(255,87,34,.7);*/}.uu-lists>li:last-child{ border-bottom: none;}/*轮播图end*/.nav{ position: relative; width: 100%; height: 80px; transition: .8s ease; background-color: rgba(255,87,34,.7); }.nav ul{ width: 100%; margin: 0 auto; height: 100%; }.nav ul li{ float: left; width: 140px声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！