首页 > 网页设计 > 网页设计与制作模板个人网站-创建一个简单的HTML静态网页(HTML+CSS)
2023
12-24

网页设计与制作模板个人网站-创建一个简单的HTML静态网页(HTML+CSS)

✍️作者简介:一位热爱将逻辑思维转化为代码的技术博主

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

Web前端期末作业:【毕业设计精品实战案例(1000套)】

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

超酷的Echarts大屏可视化源码:【Echarts大屏展示大数据平台可视化(150套)】

HTML+CSS+JS 示例代码:

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

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

文章目录

1. 网站标题

茶文化网站、️‍中国传统文化题材、京剧文化水墨风书画、中国民间年画文化艺术网站等设计制作。

2. ✍️网站说明

️ 本首页代码使用了DIV盒子的用法,比如盒子嵌套、浮动、边距、边框、背景等属性的使用。 外部大盒设置为中心,内部左、中、右布局横向排列,底部横向排列。 大学学习前端知识点、布局方法都用到了。 CSS代码量也非常详细和详细。 Hover用于完成转场效果、鼠标滑行效果等。表格、表单补充模块用于方便新手学习。 单独的源码页面如果没有使用js,需要的话可以自己添加。

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

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

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

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

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

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

网页编辑:网页工作的代码简单,可以使用任何HTML编辑软件(如Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等HTML编辑软件)运行、修改和编辑。

在:

(1)html文件包含:index.html为首页卡通形象,其他html为副页;

(2)css文件包含:css所有页面样式、文字滚动、图片放大等;

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

4. 网站演示

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>实验3</title>
</head>
<body>
    <div class="bigbox">
        <div class="imglogo">
            <img src="picture/logo.jpg" alt="">
        </div>
        <div class="banner">
            <div class="heard">
                <a href="">首页</a>
                <a href="">新闻中心</a>
                <a href="">精彩图片</a>
                <a href="">联系我们</a>
            </div>
            <div class="xinwenlist">
                <div class="xinwen_list">
                    <h1>新闻公告</h1>
                    <ul>
                        <li>吉狄马加专访:“我不会停止深情地呼唤”</li>
                        <li>第37届青春诗会诗丛上市丨诗人诗作选</li>
                        

最后编辑:
作者:nuanquewen
吉祥物设计/卡通ip设计/卡通人物设计/卡通形象设计/表情包设计