搜索 收起
您的位置  > 互联网

HTML七夕情人节表白网页制作（110套）-程序员有趣的告白

chanong 发布于 2024-01-31 14:09:35 阅读()

作者主页：【主页-获取更多优质源码】

Web前端期末作业：【毕业设计精品实战案例（1000套）】

程序员有趣的告白方式：【HTML七夕情人节告白网页制作（110套）】

超酷大屏可视化源码：【大数据平台可视化大屏展示（150套）】

HTML+CSS+JS 示例代码：

免费实用的WEB前端学习指南：

作者简介： 曾任研发工程师、技术组长、教学总监； 2016年、2020年两次荣获CSDN年度十大博客之星。十年坚冰，难冷却热血； 很多年过去了，事变了，人也变了。 然而，对技术的探索和追求从未停止。 坚持原创，热衷分享，不忘初心，继往开来！

文章目录

1. 网站标题

校园网页设计、学校班级网页制作、学校官网、小说书籍等网站设计与制作。

2. ✍️网站说明

️HTML静态网页设计作品是使用DIV+CSS布局制作的。 有多个页面。 首页采用CSS进行更丰富的布局，色彩明亮鲜艳。顶部导航和底部区域的背景色为100%宽度，主要内容区域的宽度

一套高质量的网页设计应该包括（具体可以根据个人要求来确定）

页面分为四个部分：页眉、菜单导航栏（最好是下拉菜单）、中间内容部分和页脚。 所有页面都相互链接，通向第三级页面，由 5-10 页组成。 页面风格统一布局，显示正常，不杂乱，采用Div+Css技术。 菜单美观、醒目，二级菜单可以正常弹出和跳转。 需要JS特效，比如定时切换、手动切换图片轮播等。 页面中有多媒体元素，如gif、视频、音乐，以及表单技术的使用。 页面清新、美观、大方、与众不同。 。 不仅要能够呈现用户所需要的内容，还要满足布局良好、界面美观、色彩搭配优雅、表现形式多样等要求。 3． 网站介绍

网站布局：拟采用目前主流的浮动网页布局结构，兼容各大主流浏览器，显示效果稳定。

网站编程：拟采用最新的网页编程语言HTML5+CSS3+JS编程语言来完成网站的功能设计。 并保证网站代码兼容目前市面上所有主流浏览器，这样打开后就能立即看到网站。

网站素材方面：计划是从各大平台收集好看的图片素材，精心挑选适合网页风格的图片，然后用PS制作出适合网页尺寸的图片。

网站文件：网站系统文件类型包括：html网页结构文件、css网页样式文件、js网页特效文件、网页图片文件；

在网页编辑方面：网页作品代码简单，可以使用任何HTML编辑软件（如：、、、、、、、Text、++等HTML编辑软件）运行、修改和编辑。

在：

（1）html文件包含：index.html为首页，其他html为副页；

（2）css文件包含：css所有页面样式、文字滚动、图片放大等；

（3）js文件包括：实现动态轮播效果、表单提交、点击事件等的js（个别网页使用js代码）。

4. 网站演示

5. ⚙️网站代码HTML结构代码


DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的“书屋”title>
    <link rel="stylesheet" href="css/index.css" />
head>
<body>
    <img src="img/bgImg.jpg" class="bgImg" />
    <div class="content">
        <div class="bidTitle">我的“书屋”登录div>
        <div class="logCon">
            <div class="line"><span>账号:span>
                <input class="bt_input" type="text" />div>
            <div class="line"><span>密码:span>
                <input class="bt_input" type="text" />div>
            <button type="button" class="logingBut">登录button>
        div>
    div>
body>
html>

CSS样式代码


body {
    text-align: center;
    height: 100%;
}
.bgImg {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}
.logo {
    width: 800px;
}
.bidTitle {
    color: #e6e6e6;
    font-size: 34px;
    font-weight: 600;
}
.logCon {
    color: #FFFFFF;
    margin-top: 40px;
}
.line {}
body .content {
    width: 42%;
    position: fixed;
    background: #0f1a1494;
    left: 29%;
    padding: 5% 1%;
    margin-top: 12%;
    border-radius: 5px;
}
body .logingBut {
    background: #2d8c5fa6;
    border: none;
    padding: 12px 0px;
    color: #edefee;
    border-radius: 2px;
    width: 330px;
    margin-left: 30px;
    margin-top: 5px;
}
body .bt_input {
    border-radius: 2px;
    border: none;
    padding: 11px 5px;
    width: 330px;
    margin-right: 20px;
    color: #333;
    margin-left: 5px;
    margin-bottom: 18px;
    background: #ffffffd9;
}
body .logCon span {
    font-size: 18px;
    height: 40px;
    line-height: 40px;
}

6.如何让学习不再盲目

首先，有目标地学习，无论是看书、上课还是各种线下活动。

首先你要明确自己的学习目标是什么，要解决什么问题，要达到什么目标。

二、学习需要建立个人知识体系

有学不完的知识，有很多书。 当我们享受它的时候，我们不能淹没在海水中，迷失了自己。 在学习的过程中，我们会发现每个知识点都有它的边界和背景。 我们要善于总结和组织知识。

第三，运用所学知识

有时候，我们觉得一天下来自己学到了很多东西，所以我们要把这些知识点和实际的工作、生活联系起来。 知识与实践是密切相关的。 热爱学习是好事，但只有会学习的人才有价值。

标签:
打赏 点赞( )

相关文章