文章目录

  • 作品介绍
  • 一、作品展示
  • 二、代码实现
  • 预览地址
  • 总结

作品介绍

网页作品简介： 寒假期间学习HTML和CSS即部分Javascript后的第一个大作业，搭建一个个人静态博客，后面出于兴趣，将其部署到GitPage上并利用GitHub添加了留言功能。

一、作品展示




二、代码实现

代码如下（示例）：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Li Shu's site</title><link href="img/title.ico" rel="shortcut icon"/><style type="text/css">html{position: relative;}.top{background-color: #FFFFFF;height: 60px;width: 1900px;position: absolute;top: 0;left: 0;}.top h1{padding-left: 150px;font-family: "华文新魏";}.top-left{width: 250px;height: 50px;}.top-left span{position: absolute;top: 15px;left: 250px;font-family: "华文新魏";font-size: 28px;color: pink;float: left;display: none;}.top-left:hover span{display: block;}.top1{position: absolute;top: 0px;left: 600px;padding: 20px;font-family: "华文新魏";font-size: 30px;}.top2{position: absolute;top: 0px;left: 800px;padding: 20px;font-family: "华文新魏";font-size: 30px;}.top3{position: absolute;top: 0px;left: 1050px;padding: 20px;font-family: "华文新魏";font-size: 30px;}.top4{position: absolute;top: 0px;left: 1300px;padding: 20px;font-family: "华文新魏";font-size: 30px;}a{text-decoration: none;color: black;}a:hover{text-decoration: none;color:  orange;}a:active{text-decoration: line-through;color: cadetblue;}.top-right{position: absolute;top: 0px;right: 30px;padding: 20px;font-family: "华文新魏";font-size: 20px;}.top img{width: 40px;height: 40px;border-radius: 25px;position: absolute;top: 5px;right: 0px;}.top-right1{position: absolute;top: -4px;right: -150px;padding: 20px;}.top-right1 input{font-family: "华文新魏";font-size: 20px;border-radius: 8px;}.main{position: absolute;top: 60px;left: 0;background-image: url(img/人生背景.jpg);background-repeat: no-repeat;background-size: cover;background-attachment: fixed;width: 2133px;height: 1141px;}.main-left h1{position: absolute;left: 50px;top: 180px;color: #517693;font-size: 40px;font-weight: bold;font-family: "华文行楷";}.main-left h3{position: absolute;left: 50px;top: 280px;color: #517693;font-size: 28px;font-weight: bold;font-family: "华文行楷";}.center-left{position: absolute;top: 30px;left: 550px;width: 250px;height: 850px;border: 3px solid white;border-radius: 20px;background-color:white;opacity: 0.8;}.center-left img{width: 100px;height: 100px;border-radius: 100px;position: absolute;top: 5px;left: 75px;}.center-left #name{position: absolute;top: 110px;left: 75px;text-align: center;font-family: "华文新魏";font-size: 17px;}.span ul{position:absolute;top: 200px;left: 510px;width: 250px;height: 680px;}.span li{line-height: 111px;list-style-type: none;}.pane{width: 256px;text-align: center;font-family: "华文新魏";font-size: 20px;}.pane:hover{background-color: white;}.pane1{width: 256px;height: 114px;border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;text-align: center;font-family: "华文新魏";font-size: 20px;}.pane1:hover{background-color: white;}.center{position: absolute;top: 30px;left: 820px;width: 850px;height: 850px;border: 3px solid white;border-radius: 20px;background: rgba(250,250,250,0.8);}.center iframe{border-radius: 20px;}#showtime1{position: absolute;left: 30px;bottom: 20px;color: #517693;font-size: 28px;font-weight: bold;font-family: "华文新魏";}#showtime2{position: absolute;left:40px;bottom: -15px;color: #517693;font-size: 25px;font-weight: bold;font-family: "华文新魏";}.time{position: absolute;right: 30px;bottom: 5px;color: #517693;font-size: 28px;font-weight: bold;font-family: "华文新魏";}.bottom{position: absolute;top: 1110px;width: 2110px;height: 85px;}</style></head><body><div class="top"><div class="top-left"><h1>止于此</h1><span>风止于秋水，我止于你												


											

【静态网页制作大作业——个人博客搭建（HTML+CSS+Javascript）】相关推荐
	

    
						
  1. web前端网页制作课作业：甜甜圈蛋糕店(HTML+CSS+JavaScript)
		
    
		
    2. 
						
  2. 学生网页制作源代码下载HTML5+CSS大作业——个人博客(2页)HTML+CSS 本网页作业为一个展示产品类型的网页设计作业作品成品
		
    HTML5+CSS大作业--个人博客(2页)HTML+CSS 本网页作业为一个展示产品类型的网页设计作业作品成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...
    
		
    3. 
						
  3. HTML5期末大作业：博客网页设计——个人博客5页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
		
    HTML5期末大作业:博客网页设计--个人博客5页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有 个 ...
    
		
    4. 
						
  4. HTML5+CSS大作业——个人博客-功能齐全(48页) html大学生网站开发实践作业
		
    HTML5+CSS大作业--个人博客-功能齐全(48页) html大学生网站开发实践作业 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...
    
		
    5. 
						
  5. HTML5七夕情人节表白网页制作 (蓝色主题-樱花雨3D相册)HTML+CSS+JavaScript
		
    HTML5七夕情人节表白网页制作 ❤蓝色主题-樱花雨3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...
    
		
    6. 
						
  6. HTML5+CSS大作业——个人博客网站 (1页)
		
    HTML5+CSS大作业--兔小白个人博客网站 (1页) 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
    
		
    7. 
						
  7. html网页制作看板娘原理,博客网页上添加live2D看板娘
		
    一:前言 "看板娘",简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用类似品牌形象代言人的含义.所用的技术是live2D,live2d并不 ...
    
		
    8. 
						
  8. 密码学大作业总结博客
		
    密码学大作业总结 一.9.30 Question1 Many Time Pad(Coursera Week 1 Program Assignment) Question2 PA1 option Que ...
    
		
    9. 
						
  9. web网页设计实例作业 ——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作
		
    HTML5期末大作业:电影网站设计--电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作 文章 ...
    
		
    10. 
						
  10. html简单个人网页制作——我的家乡——四川文化(4页) HTML+CSS+JavaScript 家乡主题HTM5网页设计作业成品
		
    HTML5期末大作业:家乡网站设计--我的家乡--四川文化(4页) HTML+CSS+JavaScript 家乡主题HTM5网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅 ...
    
		
    11. 
		


					

最新文章
	

    
						
  1. 用美颜照当广告犯法！要么就标注“照骗”，挪威针对明星网红出手了
		
    2. 
						
  2. 机器学习(五)  关于散点图生成
		
    3. 
						
  3. java的常见异常与错误总结
		
    4. 
						
  4. 用一个demo理解一下Flutter动画内部的代码流程
		
    5. 
						
  5. boost::mp11::mp_if相关用法的测试程序
		
    6. 
						
  6. cmake使用示例与整理总结
		
    7. 
						
  7. POJ2406-Power Strings【KMP】
		
    8. 
						
  8. 产品经理应该掌握的3种金融思维
		
    9. 
						
  9. 架构设计中的方法学（七）
		
    10. 
						
  10. ci mysql 转义,CI（CodeIgniter）框架中URL特殊字符处理与SQL注入隐患分析
		
    11. 
						
  11. 作者：胡卫生（1964-），男，博士，上海交通大学教授、博士生导师，主要研究方向为下一代光接入网、光交换、光网络等。...
		
    12. 
						
  12. python基础之函数当中的装饰器
		
    13. 
						
  13. （93）异步FIFO结构，为什么用格雷码？ ，面试必问（十七）（第19天）
		
    14. 
						
  14. LeetCode（412）——Fizz Buzz（JavaScript）
		
    15. 
						
  15. mybaitis动态sql利用bind标签代替%拼接完成模糊查询
		
    16. 
						
  16. 光流（一）--综述概览
		
    17. 
						
  17. 【优化覆盖】基于matlab粒子群算法求解传感器覆盖优化问题【含Matlab源码 1493期】
		
    18. 
						
  18. 《Qt基础教程之Qt学习之路》
		
    19. 
						
  19. Matlab经纬度坐标转换xy坐标,经纬度坐标系转换为UTM坐标系（matlab）
		
    20. 
						
  20. 伊甸园日历游戏 c语言,HDU2149-Good Luck in CET-4 Everybody!(博弈，打表找规律)
		
    21. 
		

	


热门文章
	

    
									
  1. 抖音小店都有哪些类目
			
    2. 
						
  2. 数据库无限层级分类设计
			
    3. 
						
  3. 《代码整洁之道》读后感
			
    4. 
						
  4. linux 解压war到root_unzip命令解压war包方法
			
    5. 
						
  5. 我的世界服务器发消息有符号,我的世界彩色字体符号
			
    6. 
						
  6. Unity渲染性能优化总纲
			
    7. 
						
  7. 易基因｜ENCODE组蛋白ChIP-seq和转录因子ChIP-seq数据标准及处理流程
			
    8. 
						
  8. Word多级标题测试-去掉标题多级编号
			
    9. 
						
  9. Centos8下nginx源码编译安装
			
    10. 
						
  10. ubuntu oracle 工具,ubuntu上安装Oracle InstantClient
			
    11.