使用HTML+CSS+JS网页设计与制作,酷炫动效科技农业网页

2023-12-13 03:58:15

使用HTML+CSS+JS网页设计与制作,酷炫动效科技农业网页。

可以用于家乡介绍、科技农业、图片画廊展示等个人网站的设计与制作。农业网站、家乡网站、农产品网站、旅游网站。

网站亮点

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

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

使用HTML+CSS+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="木番薯科技(公众号)极速建站">
    <!--    <link href="style/css/reset.css" rel="stylesheet"/>-->
    <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" />
</head>
<div id="NIgxbiwL" data-key="" data-window_width="true" data-window_height="true" data-module_center="true" data-stick-parent="" class="layout_group window_height" style="background-color: rgba(255, 255, 255, 0);">
                            <!---->
                            <div>
                                <section data-effect="normal" data-size="normal" data-pos="tl" class="layout_bg layout_bg_pc" style="background-image: url(style/images/fa4dd99775a48c71a0649f72a013e4bd.jpg);">
                                    <img src="style/images/fa4dd99775a48c71a0649f72a013e4bd.jpg" style="opacity: 0;">
                                    <div class="layout_bg-mask" style="background-color: rgba(255, 255, 255, 0);"></div>
                                </section>
                                <section data-effect="normal" data-size="contain" data-pos="tl" class="layout_bg layout_bg_mo" style="background-image: url(style/images/7fa6ffc19bec543fa747e471cf4718d4.jpg);">
                                    <img src="style/images/7fa6ffc19bec543fa747e471cf4718d4.jpg" 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="rhBlBWWx" data-type-detail="custom" data-justify_center="center" data-mo_justify_center="center" data-align_center="bottom" class="layout">
                                            <div class="layout-margin_placeholder_top"></div>
                                            <section data-animate="1" data-key="" data-col="50_50" data-mo-col="1|1" data-stick-parent="" class="row">
                                                <section id="KNNTgajD" class="col editor_wrapper col-50" 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(13,202,89);line-height:1;font-family:MontDemo-Heavy;">?</span><span class="text-128 font-family" style="font-size:128px;color:rgb(13,202,89);line-height:1;font-family:MontDemo-Heavy;">AG</span><span class="text-128 font-family" style="font-size:128px;color:rgb(255,255,255);line-height:1;font-family:MontDemo-Heavy;">RO</span>
                                                        </p>
                                                        <p><span class="text-94 font-family" style="font-size:94px;color:rgb(255,255,255);line-height:1;font-family:MontDemo-Heavy;">agri-cul-ture.</span>
                                                        </p>
                                                        <p>&nbsp;</p>
                                                        <p>&nbsp;</p>
                                                        <p>&nbsp;</p>
                                                        <p><span class="text-32 font-family" style="font-size:32px;color:rgb(255,255,255);line-height:2;font-family:思源黑体-ExtraLight;">生态鲜米,石斗留香。</span>
                                                        </p>
                                                        <p><span class="text-24" style="font-size:24px;color:rgb(255,255,255);">?—</span>
                                                        </p>
                                                        <p><span class="text-18 font-family" style="font-size:18px;color:rgb(255,255,255);font-family:Poppins-SemiBold;">Eco-log-i-cal
                                                                fresh rice,&nbsp;</span><br><span class="text-18 font-family" style="font-size:18px;color:rgb(255,255,255);font-family:Poppins-SemiBold;">Stone
                                                                bucket left in-cense.</span></p>
                                                    </section>
                                                    <!---->
                                                    <!---->
                                                    <!---->
                                                </section><span class="col_space"></span>
                                                <section id="MczEYZQv" class="col editor_wrapper col-50" style="border-radius: 0px; background-color: rgba(255, 255, 255, 0); visibility: visible;">
                                                    <!---->
                                                    <section class="editor ck-content">
                                                        <figure class="image ue-image" data-image-ratio="1-1" data-align="right"><a class="image-link ue-image-link" href="style/images/qrcode_for_gh.jpg" target="_blank">
                                                                <div class="ue-image-shadow" style="background-image:url(style/images/img/1fc4578b9aea412c3acc0dd147770811.png);width:110px;">
                                                                    <img src="style/images/img/1fc4578b9aea412c3acc0dd147770811.png">
                                                                    <div class="ue-image-mask"></div>
                                                                </div>
                                                            </a></figure>
                                                    </section>
                                                    <!---->
                                                    <!---->
                                                    <!---->
                                                </section>
                                                <!---->
                                                <!---->
                                            </section>
                                            <div class="layout-margin_placeholder_bottom"></div>
                                        </section>
                                        <section id="VPzYNJDV" 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 full-w-row">
                                                <section id="DYjraaMa" 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 placehold"></section>
                                                    <!---->
                                                    <!---->
                                                    <!---->
                                                </section>
                                                <!---->
                                                <!---->
                                            </section>
                                            <div class="layout-margin_placeholder_bottom"></div>
                                        </section>
                                    </section>
                                </section>
                            </section>
                            <!---->
                        </div>

文章来源:https://blog.csdn.net/qq_29528701/article/details/134630048
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。