Web网页布局示例：原神小设计

网站概况

针对最近网络火热的单机养成游戏《原神》进行的网页新版本设计，旨在展示前端开发页面设计的学习成果，以及展示了页面的部分内容。

目录

一、网站功能

二、网站架构

三、网站页面布局和样式设计

四、网站实现  

五、完整代码

---

一、网站功能

 1.搜索框

 2.导航书签目录

3.链接功能

4.轮播图运转

5焦点切换实现图片热点切换功能

6.无缝滚动实现图片滚动

7.单击页脚“后台登录”，转入二级页面。

二、网站架构

网站由主页和二级页面构成,页面设计采用CSS+DIV技术，实现内容和表现的分离。利用JavaScript实现网页动态交互功能。

主页包含logo（徽标）、nav（导航）、banner（横幅）、content（内容）和footer（页脚）区、漂浮元素等区域

三、网站页面布局和样式设计

主页包含logo（徽标）、nav（导航）、banner（横幅）、content（内容）和footer（页脚）区、漂浮元素等区域。

四、网站实现  

1.放置搜索框

通过div将搜索框右置，实现搜索框布局紧凑，格式搭配；

 <div class="search">
        <form>
          <input name="search" type="text" class="intxt">
          <input name="searchAction" type="button" class="