web结课作业壁纸社区

项目主题：壁纸社区网站

首页：

电脑壁纸页：

手机壁纸页：

标签选择页：

联系我们页：

设计思路：

1.用户体验： 设计简洁直观的用户界面，确保用户能够轻松地浏览和选择壁纸。

2.视觉吸引： 使用高清壁纸和动态效果吸引用户注意，提高用户停留时间。

3.功能性： 提供标签选择功能。

页面与样式设计

1. 首页

HTML结构： 包含头部（header）、导航栏（navbar）、轮播图（slider）和四个季节风格的壁纸展示区。

1) 头部（Header）与导航栏（Navbar）：

o 包含一个logo和一些社交媒体图标链接。

o 导航栏（Navbar），包含指向首页、电脑壁纸、手机壁纸和标签页的链接。

2) 轮播图（Banner）：

o 一个slider容器，包含多个slide元素，每个slide代表一个轮播项。

o 每个slide包含一个背景图片，左侧信息（left-info）和右侧信息（right-info）。

o 左侧信息包含一个模糊背景层（penetrte-blur）和内容（content），内容中包括标题、描述和一个“More Details”按钮。

o 右侧信息显示为大号文字，显示壁纸的季节名称。

3) 导航箭头（navigation）：

o 包含两个箭头按钮，用于控制轮播图的前后切换。

CSS样式： 使用.banner类设置全屏背景，.slide类控制每个轮播项的布局，.active类控制当前显示的轮播项。使用transition属性实现平滑的图片切换效果。

1) 布局：

o header使用flexbox实现图标和导航栏的布局。

o banner使用relative定位，内部的slide使用absolute定位覆盖在banner上。

2) 动画和过渡：

o slide的图片使用opacity和transition属性实现淡入效果。

o left-info和right-info使用transform属性实现水平移动的过渡效果。

3) 模糊背景和遮罩：

o left-info中的penetrte-blur使用backdrop-filter属性实现模糊效果。

o 使用mask和-webkit-mask-composite属性实现文字的遮罩效果。

2. 电脑壁纸页和手机壁纸页(电脑壁纸与手机壁纸页面相似，介绍以电脑壁纸为主)

HTML结构：包含头部（header）、导航栏（navbar）和手风琴式结构的壁纸展示区。

1) 头部（Header）与导航栏（Navbar）：与首页一致

2) 壁纸展示区（Wrapper）：

o 一个容器（wrapper），用于包裹所有的壁纸卡片。

o 一个容器（container），用于排列壁纸卡片。

o 壁纸卡片（card），每个卡片包含一个隐藏的单选按钮（input[type="radio"]），一个用于显示的标签（label），以及显示壁纸名称和序号的行（row）。

CSS样式： 使用. Wrapper与. Container包裹并排列壁纸，使用input来作为壁纸选项，用label标签接受壁纸图片

1) 全局样式（*）与背景样式（body）：

o 所有元素的默认外边距和内边距被设置为0，盒模型被设置为border-box。

o 页面字体设置为'Montserrat'， sans-serif。

o 页面背景图像设置为覆盖整个容器并居中显示。

2) 包装样式（Wrapper）与容器样式（Container）与卡片样式（Card）：

o 壁纸展示区的外层容器Wrapper，使用flex布局使其水平和垂直居中。

o 壁纸卡片的容器Container，设置为固定高度，使用flex布局使其子元素水平排列。

o 壁纸卡片Card的宽度、高度和圆角被定义，背景图像覆盖整个卡片区域。

o 卡片具有手型指针光标，用于显示可交互性。

o 卡片之间有间距，并且有阴影效果。

o 卡片的描述文本在未被选中时是透明的，选中后变为不透明。

3) 选中效果样式：

o 单选按钮被隐藏，通过标签（label）来控制显示。

o 当单选按钮被选中时，对应的标签（label）会变大，显示更多的壁纸预览。

o 被选中的壁纸名称会变得不透明。

3. 标签选择页

HTML结构： 包含头部（header）、导航栏（navbar）和选项卡列表。

1) 头部（Header）与导航栏（Navbar）：与首页一致

2) 选项卡区域（Group）：

o 一个标题（h1），写着“Choose your favorites”。

o 一个列表（list），包含多个复选框（checkbox）和对应的标签（label）。

o 每个标签（label）包含一个复选框的视觉表示（check），一个图标（icon），以及标签名称（h2）。

CSS样式： 使用.group和.list类进行布局，.item类控制每个选项卡的样式。使用checkbox和label实现选项卡的选中效果。

1) 自定义颜色变量与主体样式（body）、组样式（Group）：

o 选项卡未选中时使用color2，选中时使用color1

o 页面字体设置为'Montserrat'， sans-serif。

o 页面背景图像设置为覆盖整个容器并居中显示。

o 文本内容居中对齐。

2) 选项卡布局与选项卡样式：

o 选项卡使用网格布局（grid）设置为2行3列，每个项目之间有20px的间隔。

o 每个选项卡有边框、圆角和相对定位。

o 使用flex布局使内容居中。

o 过渡效果设置为0.5秒。

o 复选框绝对定位于选项卡的左上角。

o 颜色设置为变量--color2。

3) 选中时选项卡样式与复选框样式：

o 边框颜色变为变量--color1。

o 添加阴影效果，颜色为--color1。

o 当复选框被选中时，第一个图标（fa-regular fa-circle）隐藏，第二个图标（fa-solid fa-circle-check）显示

4. 联系我们页

HTML结构： 包含头部（header）、导航栏（navbar）和选项卡列表。

1) 头部（Header）与导航栏（Navbar）：与首页一致

2) 联系表单（Contact-Form）：

o 一个标题（h2），写着“联系我们”。

o 一个表单（form），包含姓名、电子邮件和消息的输入字段，每个字段都有required属性，确保必填。

o 一个提交按钮（button），用于提交表单。

CSS样式设计：使用.contact-form来包裹表单并设置h2、label、input、textarea

、button的样式

1) 全局样式与联系表单样式：

o 页面背景图像设置为覆盖整个容器并居中显示。

o 页面字体设置为'Montserrat'， sans-serif。

o 表单背景色改为透明，有内边距和边框圆角。

o 表单最大宽度为400px，居中显示，并有外边距。

2) 输入字段和文本区域样式：

o 输入字段和文本区域宽度为100%，有内边距和边框圆角。

o 边框为2px的白色（#ffffff），背景改为透明。

3) 提交按钮样式（Contact Form button）：

o 按钮背景色为绿色（#5cb85c），文本颜色为白色。

o 按钮有内边距和边框圆角，无边框。

o 鼠标悬停时背景色变深（#4cae4c）。

JavaScript实现

1. 首页轮播图的JavaScript实现

代码：

2. 联系我们页所填表单的验证的JavaScript实现

代码：