技术博主的个人博客网站设计与制作，含作者简介及网站描述

️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主

作者主页: 【

web前端期末大作业： 【

程序员有趣的告白方式：【

超炫酷的Echarts大屏可视化源码：【

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

作者身份丰富，曾担任研发工程师、技术组长以及教学总监等职务；在2016年和2020年，两次荣膺CSDN年度十大博客之星的荣誉。十年的磨砺，寒冰虽冷，却未能冷却他的热情；岁月流转，世事变迁，人事已非。尽管如此，对技术的探索与追求始终未曾停歇。他坚持原创，乐于分享，初心依旧，继往开来！

@TOC

一、‍网站题目

个人博客平台、个人主页展示、个人简介撰写、个人博客的策划与制作，以及相关网站的设计与施工。

二、️网站描述

该大学生的HTML个人网页设计作品，运用了DIV与CSS布局技术，其主体内容区域的宽度设定为1200像素。整个网页的背景图片是通过CSS进行设置的。页面设计精美，包含了多种排版布局，展现了学生较高的网页制作水平。

一套优质的网页设计应该包含 (具体可根据个人要求而定)

页面结构包括页头、下拉式菜单导航栏、核心内容区域以及页脚四个主要部分。各页面之间均建立了超链接，能够访问至三级页面，通常由5至10个页面构成。页面设计风格一致，布局规范，显示效果良好，无杂乱之感，采用了Div与CSS技术进行制作。菜单设计既美观又显眼，二级菜单能够正常展开并实现页面跳转。此外，还需加入JavaScript特效，例如图片轮播的自动切换和手动切换功能。页面上融入了多种多媒体内容，包括GIF动画、视频和音乐，以及表单技术的应用。整体页面显得简洁、雅致且大气，独具特色。它不仅需展现用户所需信息，更需兼顾布局合理、界面美观、色彩搭配优雅以及展示形式多样化等方面的需求。三、网站介绍。

在网站布局设计上，我们计划采纳现下广泛流行的、兼容各大主流浏览器的、展现效果稳定的浮动网页布局方案。

在网站程序方面，我们计划运用先进的网页编程语言HTML5、CSS3以及JavaScript来设计网站功能。同时，我们将确保网站代码与市场上所有主流浏览器兼容，以便用户打开后能够立即直观地看到网站的实际效果。

在网站素材的选取上，我们计划搜集众多平台上的精美图片，再从中精心挑选出与网页风格相契合的图像，随后利用Photoshop软件将其调整至适合网页展示的尺寸。

网站文件方面，涉及多种系统文件，具体包括：构成网页结构的html文件、负责网页样式的css文件、实现网页特效的js文件，以及展示网页图片的images文件。

在网页编辑领域：所创作的网页代码结构清晰，能够兼容多种HTML编辑工具（诸如Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等众多HTML编辑器），支持运行和进行编辑修改等操作。

其中：

该html文件内容涵盖：index.html文件作为主页面，其余的html文件则构成了二级页面。

该CSS文件涵盖了：所有页面的样式设计、文字滚动效果、图片放大功能等。

该js文件涵盖了多个功能：如实现动态轮播效果、处理表单数据提交、响应点击事件等，这些功能在部分网页中被js代码所应用。

四、网站

在这里插入图片描述

在这里插入图片描述

五、️ 网站代码HTML结构代码CSS样式代码

body, div, ul, li {
	margin:0;
	padding:0;
}
ul {
	list-style-type:none;
}
body {
	background:#000;
	text-align:center;
	font:12px/20px Arial;
}
#box_autoplay {
	position:relative;
	width:900px;
	height:335px;
	background:#fff;
	border-radius:5px;
	border:8px solid #fff;
	margin:10px auto;
	cursor:pointer;
}
#box_autoplay .list {
	position:relative;
	width:900px;
	height:335px;
	overflow:hidden;
}
#box_autoplay .list ul {
	position:absolute;
	top:0;
	left:0;
}
#box_autoplay .list li {
	width:900px;
	height:335px;
	overflow:hidden;
}
#box_autoplay .count {
	position:absolute;
	right:0;
	bottom:5px;
}
#box_autoplay .count li {
	color:#fff;
	float:left;
	width:20px;
	height:20px;
	cursor:pointer;
	margin-right:5px;
	overflow:hidden;
	background:#F90;
	opacity:0.7;
	filter:alpha(opacity=70);
	border-radius:20px;
}
在#box_autoplay类选择器下，具有current类的li元素，其样式定义如下：{ }
	color:#fff;
	opacity:1;
	filter:alpha(opacity=100);
	font-weight:700;
	background:#f60;
}
#tmp {
	width:100px;
	height:100px;
	background:red;
	position:absolute;
}

六、 如何让学习不再盲目

初涉编程领域的初学者，虽然掌握了基础语法，但对于语法的实际应用却感到迷茫，不清楚如何加强记忆，也不明白如何提高自己的技能。在这种情形下，每日坚持练习题目变得尤为关键（通过不断练习达到精通），可以访问牛客网，参加专为编程新手设计的入门训练课程。本专题面向编程初学者，特别适合那些刚刚掌握语法知识的新手进行实践，其中题目涵盖了编程的基础语法和基本结构等内容。每道题目都配备了练习和考试两种模式，既可以模拟考试环境进行测试，也可以在练习模式下进行巩固和提升。

【获取方式】

继续浏览有关 技术博客个人网站设计 的文章