【html网页制作003】html+css制作实现个人博客主题网页制作（4页面附完整效果图及源码）

发布时间：2024-12-25 12:42

学习HTML/CSS制作网页静态页面 #生活知识# #编程教程#

个人主题网页制作 1、写在前面2、涉及知识3、网页效果4、网页源码4.1 html4.2 CSS 5、作者寄语

1、写在前面

简单个人网站主题的网页一共4个页面

网页使用html+css制作页面可以相互跳转包含表单、留言页面网页可以使用vscode hbuilder dw等打开修改里面的图片和文字都可以替换为其他内容html静态网页没有复杂效果布局简单原创html网页设计适合当作业使用因为页面结构简单，适合新手，更适合去修改主题

静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计,常用的网页设计软件有Dreamwea ver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如家乡、美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

2、涉及知识

html+css个人网页制作，简单4页网页制作，静态页面html网页。个人主题网页，个人博客网页，博客主题网页html

3、网页效果

完整效果：
在这里插入图片描述
菜单切换效果

page1、首页
在这里插入图片描述

page2、兴趣爱好
在这里插入图片描述
page3、我的校园

page4、留言页
在这里插入图片描述

代码结构：
在这里插入图片描述

4、网页源码

4.1 html

123456789101112131415161718192021

4.2 CSS

* { padding: 0; margin: 0; } body, html { width: 100%; height: 100%; font-size: 14px; } .self { width: 1200px; height: auto; margin: 0 auto; } .menu { width: 100%; height: 50px; background-color: #7D9EC0; color: #eee; } ul { list-style: none; } a { color: #fff; }

1234567891011121314151617181920212223242526272829303132