个人网页摄影街拍单页-html+css+javaScript网页设计与制作

最新推荐文章于 2024-08-17 19:20:47 发布

Web_MengFE

最新推荐文章于 2024-08-17 19:20:47 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：课设项目 HTML期末大作业资源分享文章标签： html javascript css 课程设计 dreamweaver

木番薯科技

本文链接：https://blog.youkuaiyun.com/Web_MengFE/article/details/129835691

本文介绍如何使用html+css+javaScript设计与制作个人摄影街拍网页，涵盖网页布局、样式设计和交互实现，适合初学者学习。网页采用浮动布局，兼容主流浏览器，包含头部元素解析、首屏、图文模块、新闻列表、轮播图和网页底部的详细设计过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人网页摄影街拍单页-html+css+javaScript网页设计与制作

使用网页三剑客html+css+javaScript实现网页设计与制作，页面排版布局高端大气。使用HTML+CSS页面布局设计，web大学生网页设计作业源码，这是一个优质的个人网页制作。凭借简约的设计风格、精湛的制作工艺，突破与创新的理念。这个实例比较全面，非常适合初学者学习使用，有助于大家的学习。本文将介绍如何从0到1设计个人网站并用代码实现排版布局以及界面交互的过程。

个人网页摄影街拍单页-演示

一、网站题目

个人介绍、摄影作品、图片画廊展示等个人网站的设计与制作。

二、网站介绍

1、网站布局：主要采用浮动布局。兼容各大主流浏览器、显示效果稳定。

2、网站程序：主要使用网页三剑客html+css+javaScript实现网页设计与制作，完成网站的功能设计。制作适用于任何浏览器或设备的精美网站。

3、网站素材：搜集或制作适合网页风格和尺寸的图片，追求优质视觉体验。

4、网站文件：网站系统文件种类包含html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件等；

5、网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Sublime 、Vscode 、Notepad++ 、Webstorm、Text 等任意编辑软件进行编辑修改等操作）。

6、网页效果预览：双击html文件或者拖拽html文件到浏览器打开，即可预览当前网页效果。

三、网站亮点

1、视觉设计：排版布局极简设计，优质的视觉体验等。

2、动效交互：幻灯效果、入场动画、按钮点击、视差功能、锚点功能、图片画廊功能、英文断行等。

四、网站文件目录

（1）index.html：首页html；

（2）style：静态资源目录，存放css网页样式文件、js网页特效文件、images网页图片文件等；

其中：

（1）css文件夹：存放网页所有css样式表文件文件；

（2）images文件夹：存放网页所有图片资源文件；

（3）js文件夹：存放网页所有网页特效文件；

五、基础知识储备

HTML 定义网页的内容；CSS 规定网页的布局；JavaScript 对网页行为进行编程。

即：HTML——结构；CSS——样式；JS——行为。

1、HTML

HTML 是用来描述网页的一种语言。HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 文档 = 网页：

    HTML 文档描述网页；
    HTML 文档包含 HTML 标签和纯文本；
    HTML 文档也被称为网页；

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

下面是一个可视化的HTML页面结构：

2、CSS

CSS 指的是层叠样式表* (Cascading Style Sheets)。CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。

CSS 可以通过以下方式添加到HTML中:

（1）内联样式- 在HTML元素中使用"style" 属性；

（2）内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS；

（3）外部引用 - 使用外部 CSS 文件；

注：最好的方式是通过外部引用CSS文件。

3、JavaScript

JavaScript 是 web 开发者必学的三种语言之一。

JavaScript 能够改变 HTML 内容、

JavaScript 能够改变 HTML 属性、

JavaScript 能够改变 HTML 样式 (CSS)、

JavaScript 能够隐藏 HTML 元素、

JavaScript 能够显示 HTML 元素、

......

六、网站效果

1、HTML 头部元素解读：

（1）<head> 元素是所有头部元素的容器。

（2）<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

（3）<title> 标题定义文档的标题。

（4）<link> 标签定义文档与外部资源之间的关系。

而这里，我们在HTML文档头部 <head> 区域使用<link> 元素来通过外部引用CSS文件。

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>木番薯科技极速建站-企业快速建站-个人自助模板建站-高端网站定制设计</title>
    <meta name="keywords" content="木番薯科技,公众号,极速建站,木番薯科技(公众号)极速建站,企业快速建站,个人自助模板建站,高端网站定制设计,建站,网站模板,快速建站,网页模板,自助建站,智能建站,企业网站制作,企业网站建设,个人网站,极速建站,网站设计,网站改版,设计网站">
    <meta name="description" content="木番薯科技(公众号)极速建站，拥有10年中外知名企业建站经验。是设计交互领先的网站模板产品，便于SEO优化，操作简单，原创设计使用稳定，适合个人、企业网站建设，网站改版，可免费试用">
    <link type="text/css" href="style/css/vender.css" rel="stylesheet"/>
    <link type="text/css" href="style/css/app.css" rel="stylesheet"/>
    <link type="text/css" href="style/css/others.css" rel="stylesheet"/>
    <link href="style/css/font-awesome.min.css" rel="stylesheet" />
    <link href="style/css/editorPageStyle.css" rel="stylesheet" />
</head>

2、网页首屏

HTML结构代码：

<div id="aEUOSHbQ" data-key="" data-window_width="true" data-limit_width="true" data-stick-parent="" class="layout_group" style="background-color: rgb(158, 215, 255);">
                        <!---->
                        <div>
                            <section data-effect="fixed" data-size="contain" data-pos="cl" class="layout_bg layout_bg_pc" style="background-image: url(style/images/1660620034353.png);">
                                <img src="style/images/1660620034353.png" style="opacity: 0;">
                                <div class="layout_bg-mask" style="background-color: rgba(255, 255, 255, 0);"></div>
                            </section>
                            <section data-effect="fixed" data-size="contain" data-pos="tl" class="layout_bg layout_bg_mo" style="background-image: url(style/images/1660631523882.png);">
                                <img src="style/images/1660631523882.png" style="opacity: 0;">
                                <div class="layout_bg-mask" style="background-color: rgba(255, 255, 255, 0);"></div>
                            </section>
                        </div>
                        <section class="layout_limit_wrapper">
                            <section class="layout_container">
                                <section class="layout_body">
                                    <section id="PMvyFKDU" data-type-detail="custom" data-justify_center="left" data-mo_justify_center="center" data-align_center="top" class="layout">
                                        <div class="layout-margin_placeholder_top"></div>
                                        <section data-animate="0" data-key="" data-col="100" data-stick-parent="" class="row">
                                            <section id="PWAtJZgj" class="col editor_wrapper col-100 animated" style="border-radius: 0px; background-color: rgba(255, 255, 255, 0); visibility: visible;">
                                                <!---->
                                                <section class="editor ck-content">
                                                    <p><span class="text-84 font-family" style="font-size:84px;color:rgb(255,255,255);font-family:Poppins-Bold;">Fash&shy;ion</span>
                                                    </p>
                                                    <p><span class="text-20 font-family" style="font-size:20px;color:rgb(255,255,255);font-family:Poppins-Bold;">时尚街拍</span>
                                                    </p>
                                                </section>
                                                <!---->
                                                <!---->
                                                <!---->
                                            </section>
                                            <!---->
                                            <!---->
                                        </section>
                                        <div class="layout-margin_placeholder_bottom"></div>
                                    </section>
                                    <section id="ewHRQytA" data-type-detail="custom" data-justify_center="right" data-mo_justify_center="center" data-align_center="top" class="layout">
                                        <div class="layout-margin_placeholder_top"></div>
                                        <section data-animate="0" data-key="" data-col="100" data-stick-parent="" class="row">
                                            <section id="ptOYCsKM" class="col editor_wrapper col-100 animated" style="border-radius: 0px; background-color: rgba(255, 255, 255, 0); visibility: visible;">
                                                <!---->
                                                <section class="editor ck-content">
                                                    <p><span class="font-family" style="color:rgb(255,255,255);font-family:Poppins-Regular;">Lorem
                                                            ip&shy;sum do&shy;lor sit amet, con&shy;secte&shy;tur adip&shy;isc&shy;ing elit. Et
                                                            mo&shy;lestie habi&shy;tant enim, dig&shy;nis&shy;sim et, con&shy;secte&shy;tur eges&shy;tas
                                                            in. Dig&shy;nis&shy;sim viverra lec&shy;tus cras el&shy;e&shy;men&shy;tum.</span></p>