基于HTML个人博客网站项目的设计与实现——个人博客作品展示6页 HTML+CSS

article/2025/11/10 16:48:31

Web前端开发技术
描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 个人博客网站 | 个人主页介绍 | 个人简介 | 个人博客设计制作 | 等网站的设计与制作 | 大学生个人HTML网页设计作品 | HTML期末大学生网页设计作业

  1. HTML:结构

  2. CSS:样式
    在操作方面上运用了html5和css3,
    采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识

  3. JavaScript:做与用户的交互行为

文章目录

  • 前端学习路线
  • 网页基本结构
  • 网页演示
    • HTML结构代码
  • 学的反而越迷茫
  • 学习更多


前端学习路线

(1)html文件:其中index.html是首页、其他html为二级页面;
(2)css文件:css全部页面样式,文字滚动, 图片放大等;
(3)js文件:js实现动态轮播特效, 表单提交, 点击事件等等(网页中运用到js代码)

网页基本结构

(1)首页:进入网页中看到的第一个页面(LOGO、公司名称、导航、banner、新闻、相关信息、底部信息、banner一般是5个  
(2)二级页面:从首页点击进入之后的页面叫做二级页面
(3)三级页面:从二级页面点击进入的页面

网页html:网页是构成网站的基本元素,是承载各种网站应用的平台。通俗地说,网站就是由网页组成的
首页网站:首页是一个网站的入口网页,故往往会被编辑得易于了解该网站多数作为首页的文件名是index加上扩展名
导航菜单:是指位于页面顶部或者侧边区域的,也称之为导航栏,它起着链接站点或者软件内的各个页面的作用.
网页页脚:是网页中每个页面的底部的区域。常用于显示附加信息。如作者、备案号等。


网页演示

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

HTML结构代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的博客</title><link rel="stylesheet" href="css/all.css">
</head>
<body><!--头部-->
<div id="header"><h1>我的博客</h1><ul class="nav"><li class="nav-item active"><a href="index.html">网站首页</a></li><li class="nav-item"><a href="album.html">我的相册</a></li><li class="nav-item"><a href="ques-answer.html">我的问答</a></li><li class="nav-item"><a href="jianjie.html">我的简介</a></li><li class="nav-item"><a href="article.html">文章欣赏</a></li><li class="nav-item"><a href="music.html">我的音乐</a></li></ul>
</div>
<!--头部结束--><!--内容-->
<div id="container"><div class="banner"><img src="images/banner@2x.png" alt=""></div><div class="section"><div class="part"><div class="anniu"><a href="">我的相册</a></div><img src="images/01.png" alt=""></div><div class="part"><div class="anniu"><a href="">我的简介</a></div><div class="desc">本人 勤奋好学、品学兼优、乐观向上、爱好广泛、尊敬师长、团结同学、做事执着、有毅力、是一个德、智、体、美、劳全面发展的好学生。我有一颗善良真诚的心灵。有人说,金子是最纯美的,但比金子更美的是人的心灵。</div><div class="more">查看更多</div></div><div class="part" style="margin-right: 0"><div class="anniu"><a href="">我的问答</a></div><div class="desc">你是谁你是谁你到底是谁?你是不是是那深夜路边偷井盖的贼。</div><div class="more">查看更多</div></div></div><div class="photo-box"><img src="images/p1.jpg" alt=""><img src="images/p2.jpg" alt=""><img src="images/p3.jpg" alt=""><img src="images/p4.jpg" alt=""></div><div class="foot">欢迎来到我的博客</div>
</div>
<!--内容结束--></body>
</html>

学的反而越迷茫

有这种感觉很正常,因为你还没有真正去公司里面待过,也不清楚自己到底要学多少东西才能胜任公司里面给你分配的活。我从你的表述来看,你的基础应该还是很扎实的。跟着网上那种全套的视频教程学肯定没有问题。

当你以后真正进入公司,发现工作的难度和量大约只有你学习时期的大约20%,你可能就会发出一声叹息:原来工作也不过如此嘛。

这是很正常的,因为大部分公司是招你进去去干活的,写业务的,不是让你一个新人去研发公司架构的。都是现成的东西,你要做的就是在别人的教导下,手把手的指挥下去添砖加瓦。到时候你恐怕要惊呼:就这?

所以,放松心态吧,好好享受大学时光
—————————————————


学习更多

关注我 | 点赞博文 | 每天带你涨知识
相关问题可以相互学习,可关注↓公Z号


在这里插入图片描述


http://chatgpt.dhexx.cn/article/GUVLpDda.shtml

相关文章

HTML制作个人网页制作(简单静态HTML个人博客网页作品)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

个人主页博客网页设计制作HTML5+CSS大作业——清新春暖花开个人博客网站(6页)

HTML5CSS大作业——清新春暖花开个人博客网站(6页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄…

如何使用HTML制作个人网站(如何搭建个人博客)

&#x1f4c2;文章目录 一、&#x1f468;‍&#x1f393;网站题目二、✍️网站描述三、&#x1f4da;网站介绍四、&#x1f310;网站演示五、⚙️ 网站代码&#x1f9f1;HTML结构代码&#x1f492;CSS样式代码 六、&#x1f947; 如何让学习不再盲目七、&#x1f381;更多干货…

10分钟搭建一个免费个人博客网站

一个程序员怎么能不拥有自己的博客&#xff0c;本文让10分钟快速搭建部署好自己的博客 准备工作 有Gitee账号有安装git会 markdown 编写文档Node.js 版本 > 8.6 博客采用VuePress搭建&#xff0c;Gitee部署&#xff0c;接下来&#xff0c;5步搞定。 1.创建项目 创建项目…

用html制作学生个人博客,网页制作论坛(学生个人网页制作代码)

许多开发人员认为擅长设计是一种天生的能力,而创造力是与生俱来的。但是设计是一项可以像其他任何东西一样学习的技能。你不必天生就可以创建一个漂亮的网站的艺术家,这需要实践。在身边的小伙伴的博客,自己的网站来看,很多人都是用了开源后台的网站模板,熟不知局限太大,…

个人网站、个人博客的设计案例,仅供参考

关于网站的内容&#xff0c;我也是纠结了好久&#xff0c;我这里说的是网站建设的内容。个人网站&#xff0c;大多数人还是做个博客&#xff0c;想着能平时写点内容&#xff0c;发点文章&#xff0c;图片&#xff0c;一些简短的分享什么的。 好&#xff0c;想到就做。 我做了…

如何用html制作博客页面,HTML个人博客页面

知识点总结&#xff1a;下面的是一个个人博客页面&#xff0c;歌词的段落用的时“p”标签&#xff0c;超链接为“a”标签。 包括鼠标经过的事件&#xff1a;颜色变换&#xff1b;去顶部去底部和指定位置&#xff1a;写入的锚点&#xff0c;点击后可以到制定位置。 刚开始学习ht…

手把手教你十五分钟搭建个人博客网站

文章目录 一、下载二、上传服务器与配置三、加备案号四、关闭所有评论五、删除自豪采用wordpress六、优雅主题配置七、安装md编译器八、自定义站点九、发一篇博客 一、下载 https://cn.wordpress.org/download/下载一个就行&#xff1a; 二、上传服务器与配置 解压&#xff…

HTML+CSS大作业: 个人介绍网页制作作业 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人博客网站制作成品下载

HTML5期末大作业&#xff1a;个人介绍网站设计——个人博客(6页) HTMLCSSJavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、…

个人博客网站建设详细版

前言&#xff1a;在讲个人博客&#xff0c;我要向机灵鹤大佬致以最高的敬意&#xff01;感谢他提出的技术指导&#xff0c;本章我将以我犯的错误一步步讲述。 1. 购买服务器 我是在阿里购买的服务器&#xff0c;因为我是一名学生的原因我通过认证学生身份参加了阿里云高校计划…

HTML5+CSS大作业——清新春暖花开个人博客网站(6页)

HTML5CSS大作业——清新春暖花开个人博客网站(6页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄…

大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

SpringBoot注解详解

一、简介 基于 SpringBoot 平台开发的项目数不胜数&#xff0c;与常规的基于Spring开发的项目最大的不同之处&#xff0c;SpringBoot 里面提供了大量的注解用于快速开发&#xff0c;而且非常简单&#xff0c;基本可以做到开箱即用! 那 SpringBoot 为开发者提供了多少注解呢?…

Spring常用注解详解大全(建议收藏)

SuppressWarnings(“deprecation”)**就表示我们忽略了deprecation这样的一个警告。 JDK注解作用总结&#xff1a; Override 表示当前方法覆盖了父类的方法 Deprecation 表示方法已经过时,方法上有横线&#xff0c;使用时会有警告。 SuppviseWarnings 表示关闭一些警告信息…

Spring注解开发详解

学习基于注解的 IOC 配置&#xff0c;大家脑海里首先得有一个认知&#xff0c;即注解配置和 xml 配置要实现的功能都是一样的&#xff0c;都是要降低程序间的耦合。只是配置的形式不一样。 关于实际的开发中到底使用xml还是注解&#xff0c;每家公司有着不同的使用习惯 , 所以这…

spring注解注入详解

1、Spring配置 <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xmlns:context"http://www.springframe…

Spring @Order注解详解

注解Order的作用是定义Spring容器加载Bean的顺序。 源码 Retention(RetentionPolicy.RUNTIME) Target({ElementType.TYPE, ElementType.METHOD, ElementType.FIELD}) Documented public interface Order {/*** The order value.* <p>Default is {link Ordered#LOWEST_PR…

Spring注解详解:@ComponentScan自动扫描组件使用

目录 无注解方式component-scan使用 注解方式ComponentScan使用 ComponentScan的扫描规则 无注解方式component-scan使用 之前&#xff0c;我们需要扫描工程下一些类上所标注的注解&#xff0c;这些常用注解有&#xff1a; Controller,Service,Component,Repository 通过在…

Spring注解详解

一、Spring注解驱动开发入门 spring在2.5版本引入了注解配置的支持&#xff0c;同时从Spring 3版本开始&#xff0c;Spring JavaConfig项目提供的许多特性成为核心Spring框架的一部分。因此&#xff0c;可以使用Java而不是XML文件来定义应用程序类外部的bean。在这里面官方文档…

Spring常用注解的详细介绍(包你学明白)

目录 1. 为什么要使用注解&#xff1f; 2. 什么是注解&#xff1f; 3. 在Spring中使用注解的前期准备 4. Component注解的详细介绍 5. Value注解的详解介绍 6. Autowired注解的详细介绍 7. Resource注解的详细介绍 8. 怎么选择基于xml还是基于注解的方式创建对象并赋值呢…