当前位置:网站首页 > HTML与CSS基础 > 正文

HTML+CSS个人静态网页设计


一、👨‍🎓网站题目

🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。


二、✍️网站描述

⭐个人网页设计网站模板采用DIV CSS布局制作,网页作品有多个页面,如 :个人介绍(文字页面)、我的作品(图片列表)、个人技能(图文页面)、在线留言(表单页面)CSS样式方面网页整体采用左右布局结构,制作了网页背景图片,导航区域每个导航背景色不同,导航背景色与页面背景呼应。

🏅 一套A+的网页应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接,可到三级页面,有5-10个页面组成。
  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。
  4. 菜单美观、醒目,二级菜单可正常弹出与跳转。
  5. 要有JS特效,如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。。
  7. 页面清爽、美观、大方,不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面:计划采用最新的网页编程语言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代码)。


四、🌐网站演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


五、🔧 网站代码

🧱HTML结构代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>我的博客</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <div class="page"> <div class="nav"> <a href="index.html" class="logo fl">首页</a> <ul class="fr"> <a href="index.html"><li>网站首页</li></a> <a href="sw.html"><li>我的散文</li></a> <a href="jn.html"><li>我的技能</li></a> <a href="zp.html"><li>我的作品</li></a> <a href="ms.html"><li>喜爱美食</li></a> <a href="ly.html"><li>留言交流</li></a> </ul> </div> <d
到此这篇HTML+CSS个人静态网页设计的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • 前端基础之CSS扫盲2024-10-31 00:03:26
  • web前端基础(一)——HTML+CSS2024-10-31 00:03:26
  • web前端html期末大作业实例 (1500套)_web前端大作业实验报告2024-10-31 00:03:26
  • CSS基础(超详解)2024-10-31 00:03:26
  • HTML与CSS详细介绍2024-10-31 00:03:26
  • 网页制作基础学习——HTML+CSS常用代码_html+css网页制作案例教程2024-10-31 00:03:26
  • HTML星空特效2024-10-31 00:03:26
  • CSS从入门到精通2024-10-31 00:03:26
  • CSS入门学习笔记+案例2024-10-31 00:03:26
  • 网页设计与制作(HTML+CSS)(一)2024-10-31 00:03:26
  • 全屏图片