《博客页面制作》教程

article/2025/10/14 17:51:28

《博客页面制作》教程

一、《博客页面制作》第一部分

  • 效果图：
    在这里插入图片描述
  • 参考代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>博客制作-第一部分</title><style type="text/css">/*清除浏览器默认的边距*/*{margin: 0px;padding: 0px;}/*设置整个页面的背景颜色*/body{background-color: gainsboro;}/*设置第一部分div盒子的样式*/#one{background-image: url(img/head.png);padding-top: 20px;padding-bottom: 20px;margin: 10px;border-radius: 15px;}/*设置第一部分图片的样式*/#one img{width: 70px;border: 5px solid white;/*当圆角边框与图片大小一致时，就生成一个圆环*/border-radius: 70px;/*设置图片居中*/display: block;margin: 0px auto;}/*设置第一部分p标签的样式*/#one p{margin-top: 10px;text-align: center;font: bold 25px "微软雅黑";color: white;}</style></head><body><!--第一部分--><div id="one"><img src="img/avatar.png" /><p>W3Cschool小师妹</p></div></body>
</html>

二、《博客页面制作》第二部分

  • 效果图：
    在这里插入图片描述
  • 参考代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>博客制作-第二部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*设置第二部分盒子样式*/#two{background-color: white;margin: 10px;padding: 35px 10px 15px 10px;border-radius: 15px;}/*设置第二部分标题样式*/#two h1{font-size: 25px;text-align: center;color: #d9534f;margin-bottom: 15px;}/*设置第二部分段落样式*/#two p{font-size: 14px;line-height: 25px;font-family: "微软雅黑";}/*设置段落对齐方式*/.english{text-align: right;}</style></head><body><!--第二部分--><div id="two"><h1>关于我</h1><p>嘿！我是<strong>W3Cschool小师妹</strong>。编码改变了我的世界。它不仅仅是应用程序。学习代码给了我解决问题的技能和在技术层面与他人沟通的途径。我也可以开发网站，并使用我的编程技术来获得更好的工作。我是在<strong>W3Cschool</strong>学到了所有这些，这让我也保持了对学习编程的积极性。加入我这个有益的学习旅程。沿途你会获得乐趣，得到帮助，学习更多知识！</p><p class="english">"I love coding, I love W3Cschool!"</p></div></body>
</html>

三、《博客页面制作》第三部分

  • 效果图：
    在这里插入图片描述
  • 参考代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>博客制作-第三部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*设置第三部分盒子样式*/#three{background-color: white;margin: 10px;padding: 35px 10px 20px 10px;border-radius: 15px;}/*设置第三部分标题样式*/#three h1{font-size: 25px;text-align: center;color: #d9534f;margin-bottom: 15px;}/*设置表格样式*/table{width: 100%;height: 180px;border-color: gainsboro;text-align: center;font-family: "微软雅黑";}/*设置表格列宽*/td{width: 16.66%;}/*设置表格的背景颜色*/.selected{background-color: orange;color: white;}</style></head><body><!--第三部分--><div id="three"><h1>我的时间表</h1><table border="1px" cellspacing="0px"><tr><th>Day</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th></tr><tr><td>8:00-8:30</td><td class="selected">Learn</td><td></td><td></td><td></td><td></td></tr><tr><td>9:00-10:00</td><td></td><td class="selected">Practice</td><td></td><td></td><td></td></tr><tr><td>10:00-13:30</td><td></td><td></td><td class="selected">Play</td><td></td><td></td></tr><tr><td>15:45-17:00</td><td></td><td></td><td></td><td class="selected">Code</td><td></td></tr><tr><td>18:00-18:15</td><td></td><td></td><td></td><td></td><td class="selected">Discuss</td></tr></table></div></body>
</html>

四、《博客页面制作》第四部分

  • 效果图：
    在这里插入图片描述
  • 参考代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>博客制作-第四部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*设置第四部分div盒子样式*/#four{background-color: white;margin: 10px;padding: 35px 10px 20px 10px;border-radius: 15px;}/*设置第四部分标题样式*/#four h1{font-size: 25px;text-align: center;color: #d9534f;margin-bottom: 15px;}/*设置第四部分列表样式*/ul{margin-left: 30px;line-height: 35px;font-weight: bold;}</style></head><body><!--第四部分--><div id="four"><h1>我的技能</h1><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></div></body>
</html>

五、《博客页面制作》第五部分

  • 效果图：
    在这里插入图片描述
  • 参考代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>博客制作-第五部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*设置第五部分盒子样式*/#five{background-color: white;margin: 10px;padding: 35px 10px 20px 10px;border-radius: 15px;}/*设置第五部分标题样式*/#five h1{font-size: 25px;text-align: center;color: #d9534f;margin-bottom: 15px;}/*设置第五部分视频样式*/video{display: block;margin: auto;}</style></head><body><!--第五部分--><div id="five"><h1>我的媒体</h1><video src="img/movie.mp4" controls="controls"></video></div></body>
</html>

六、《博客页面制作》第六部分

  • 效果图：
    在这里插入图片描述
  • 参考代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>博客制作-第六部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*设置第六部分div盒子样式*/#six{background-color: white;margin: 10px;padding: 35px 10px 20px 10px;border-radius: 15px;}/*设置第六部分标题样式*/#six h1{font-size: 25px;text-align: center;color: #d9534f;margin-bottom: 15px;}/*设置第六部分文本框及提交按钮的样式*/input{height: 50px;width: 60%;display: block;margin: auto;background-color: gainsboro;border: 1px solid gray;border-radius: 5px;padding-left: 10px;}/*设置第六部分文本域样式*/textarea{height: 100px;width: 60%;display: block;margin: auto;margin-bottom: 15px;background-color: gainsboro;padding-left: 10px;}/*设置第六部分提交按钮样式*/#submit{background-color: #d9534f;color: white;font-size: 20px;}</style></head><body><!--第六部分--><div id="six"><h1>联系我</h1><form action="#" method="post"><input type="text" id="name" placeholder="Name"/><br /><input type="text" id="email" placeholder="Email"/><br /><textarea placeholder="Message"></textarea><input type="submit" id="submit" value="提交" /></form></div></body>
</html>

七、《博客页面制作》第七部分

  • 效果图：
    在这里插入图片描述
  • 参考代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>博客制作-第七部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*设置第七部分盒子样式*/#seven{background-color: white;margin: 10px;padding: 35px 10px 20px 10px;border-radius: 15px;}/*设置第七部分标题样式*/#seven h1{font-size: 25px;text-align: center;color: #d9534f;margin-bottom: 15px;}/*设置第七部分装图片的div盒子的对齐方式*/#way{width: 100%;text-align: center;}/*设置第七部分图片样式*/#way img{width: 40px;margin-left: 10px;margin-right: 10px;}</style></head><body><!--第七部分--><div id="seven"><h1>关注我</h1><div id="way"><a href="#"><img src="img/qq.png"/></a><a href="#"><img src="img/weixin.png"/></a><a href="#"><img src="img/weibo.png"/></a></div></div></body>
</html>

八、《博客页面制作》第八部分

  • 效果图：
    在这里插入图片描述
  • 参考代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>博客制作-第八部分</title><style type="text/css">*{margin: 0px;padding: 0px;}body{background-color: gainsboro;}/*设置第八部分边距、文字样式*/#eight{padding: 15px 10px 20px 10px;text-align: center;font-family: "微软雅黑";color: gray;}</style></head><body><!--第八部分--><div id="eight">&copy;2019 My Blog. All rights reserved.</div></body>
</html>

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

相关文章

Perfetto —— 靠谱的trace利器

Perfetto —— 靠谱的trace利器

最近踩到的坑&#xff0c;报了一个cst的测试项fail&#xff0c;帧率不符合预期&#xff0c;对应的测项进程是android.view.cts 肯定是要抓sytrace看看了 但是&#xff0c;试了systrace和atrace去抓&#xff0c;只抓了launcher的绘制&#xff0c;并没有android.view.cts的绘制…
阅读更多...
perfetto使用简介

perfetto使用简介

perfetto使用简介 文章目录 perfetto使用简介一、使用方法1.1 打开perfetto的设置界面1.1.1 adb指令1.1.2 系统设置 1.2 打开录制跟踪记录功能1.3 打开跟踪记录功能后&#xff0c;运行需要调试的APP1.4 运行完操作之后点击,可点击下拉菜单停止跟踪记录1.5 导出trace文件 二、打…
阅读更多...
Android性能优化之Perfetto

Android性能优化之Perfetto

Perfetto 一. 通过System Tracing抓取 1. System Tracing Overview System Tracing即系统跟踪界面&#xff0c;用户可以通过如下两种方式进入系统跟踪界面&#xff1a; &#xff08;1&#xff09;设置 – 其他设置 – 开发者选项 – 系统跟踪&#xff08;Realme GT Neo 闪速…
阅读更多...
[ES6] 01. Intro to ES6 and traceur compiler

[ES6] 01. Intro to ES6 and traceur compiler

---恢复内容开始--- ES6 is ECMAScript version 6, which JavaScript is based on. The next version of JavaScript is going to be based on version 6 of ECMAScript. Tracer is a way to compile that next version of JavaScript back into JavaScript of today, meaning …
阅读更多...
Android性能优化工具

Android性能优化工具

一、性能优化工具基础 1.1 概述 在Android开发中&#xff0c;开发者可通过"系统跟踪"观察Android设备的运行情况并生成跟踪报告&#xff0c;在此基础上进行分析优化。Android 平台提供了多种获取跟踪信息的工具&#xff1a; Android Studio CPU 性能剖析器Systrace…
阅读更多...
搭建Babel运行环境，Traceur ES6模板，块级作用域，let和const命令

搭建Babel运行环境，Traceur ES6模板，块级作用域，let和const命令

搭建Babel运行环境 Babel&#xff08;http://babeljs.io/&#xff09;可用于将使用ES6语法的脚本转化为ES5语法的脚本&#xff0c;基本功能的安装步骤如下&#xff1a; 1、安装node解释器和npm包管理工具 2、安装babel解释器 npm install -g babel &#xff08;建议这个过程完…
阅读更多...
ES6转ES5，Traceur使用方式

ES6转ES5，Traceur使用方式

ES6于2015年6月正式发布&#xff0c;各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。 目前各大浏览器和开发环境对支持ES6的支持情况参差不齐&#xff0c;在实际项目开发中&#xff0c;我们仍旧不得不降级使用ES5语法以兼容各平台。幸…
阅读更多...
Traceur 使用方式

Traceur 使用方式

ES6于2015年6月正式发布&#xff0c;各大浏览器的最新版本对 ES6 的支持可以查看https://kangax.github.io/compat-table/es6/。 目前各大浏览器和开发环境对支持ES6的支持情况参差不齐&#xff0c;在实际项目开发中&#xff0c;我们仍旧不得不降级使用ES5语法以兼容各平台。幸…
阅读更多...
Rxjava：interval的使用

Rxjava：interval的使用

以固定的时间间隔不断发射数据。 测试&#xff1a; Test public void testSimple(){Observable.interval(1, TimeUnit.SECONDS).subscribe(new Action1<Long>() {Overridepublic void call(Long aLong) {System.out.println("aLong " aLong);}});for (;;){…
阅读更多...
FlinkSql系列6之 Interval Join

FlinkSql系列6之 Interval Join

FlinkSql系列6之 Interval Join 前言 本次我们来学习flinksql的Interval Join,这个方式主要是针对两个流在一定时间区间内的join,支持事件时间和处理时间&#xff0c;而且这个流每次只会产生一条数据&#xff0c;是一个完全的追加流。 一、Interval Join是什么&#xff1f; I…
阅读更多...
Flink Interval Join使用以及源码解析

Flink Interval Join使用以及源码解析

1、Interval Join 概述 在之前的Join算子中&#xff0c;一般使用的是coGroup算子&#xff0c;因为一个算子可以提供多种语义&#xff0c;但是也是有一些弊端的。因为coGroup只能实现在同一个窗口的两个数据流之间进行join&#xff0c;在实际的计算过程中&#xff0c;往往会遇到…
阅读更多...
mysql datesub interval_Mysql之INTERVAL与DATE_SUB与EXTRACT函数的使用

mysql datesub interval_Mysql之INTERVAL与DATE_SUB与EXTRACT函数的使用

1. INTERVAL INTERVAL代表的是时间间隔 MySQL中的时间间隔类型有如下几种: 1.1 利用INTERVAL做时间的加减法 示例： 加法:SQL>SELECT DATE 2018-11-01 + INTERVAL 10 11 DAY_HOUR; 结果:2018-11-11 11:00:00 减法：SQL> select date 2018-11-11 11:00:00 -INTERVAL 10 11…
阅读更多...
ORACLE中的INTERVAL

ORACLE中的INTERVAL

ORACLE中的INTERVAL 关于INTERVALINTERVAL类型INTERVAL YEAR TO MONTHINTERVAL DAY TO SECOND 关于INTERVAL oracle中提供了两种日期时间类型&#xff0c;分别是DATE和TIMESTAMP用来存储时间点的数据&#xff0c;同时还提供了INTERVAL来存储一段时间的数据。例如你2022年11月1…
阅读更多...
Flink SQL之Interval Joins

Flink SQL之Interval Joins

1.Interval Joins&#xff08;区间Join&#xff09; 区间是双流join的优化&#xff0c;基于处理时间或事件时间&#xff0c;在一定时间区间内数据&#xff0c;相同的key进行join&#xff08;支持 Batch\Streaming&#xff09;。Interval Join 可以让一条流去 Join 另一条流中前…
阅读更多...
MySQL INTERVAL 关键字指南

MySQL INTERVAL 关键字指南

在本教程中&#xff0c;我们将了解 MySQL INTERVAL 关键字及其值以对日期和时间算术执行操作。那么&#xff0c;让我们开始吧&#xff01; 另请阅读&#xff1a;MySQL 中的 While 循环 – 完整参考 MySQL INTERVAL 简介 在 MySQL 中&#xff0c;INTERVAL 关键字用于添加或减…
阅读更多...
Flink之IntervalJoin介绍

Flink之IntervalJoin介绍

InterValJoin算子 间隔流&#xff0c;一条流去join另一条流去过去一段时间内的数据&#xff0c;该算子将keyedStream与keyedStream转化为DataStream&#xff1b;再给定的时间边界内&#xff08;默认包含边界&#xff09;&#xff0c;相当于一个窗口&#xff0c;按指定的key对俩…
阅读更多...
Mysql的INTERVAL()函数和INTERVAL关键字

Mysql的INTERVAL()函数和INTERVAL关键字

一&#xff0c;INTERVAL()函数 INTERVAL()函数可以返回分段后的结果&#xff0c;语法如下&#xff1a; INTERVAL(N,N1,N2,N3,..........) 其中&#xff0c;N是要判断的数值&#xff0c;N1,N2,N3,...是分段的间隔。 这个函数的返回值是段的位置&#xff1a; 如果N<N1&am…
阅读更多...
Mysql_interval函数与关键字

Mysql_interval函数与关键字

目录 一、统计不同区间的数量&#xff1a;INTERVAL()函数 二、时间间隔&#xff1a;INTERVAL关键字 一、统计不同区间的数量&#xff1a;INTERVAL()函数 INTERVAL()函数可以返回分段后的结果&#xff0c;语法如下&#xff1a; INTERVAL(N,N1,N2,N3,......,Nn) 其中&#x…
阅读更多...
INTERVAL记录

INTERVAL记录

INTERVAL作为sql中关键字 interval在sql中一般表示为时间间隔的意思 常用在date_add()、**date_sub()**函数中&#xff0c;常用于时间的加减法 上述sql表示为当前时间一年后的时间。 interval后可选择的时间粒度&#xff1a; MICROSECOND&#xff0c; SECOND&#xff0c; MIN…
阅读更多...
万能的Attention及其代码实现

万能的Attention及其代码实现

最近看到以前的代码&#xff0c;想到了attention&#xff0c;趁着代码还在就来整理一下。 文章目录 [Squeeze-and-Excitation Networks](https://arxiv.org/abs/1709.01507)[Concurrent Spatial and Channel ‘Squeeze &Excitation’ in Fully Convolutional Networks](ht…
阅读更多...
推荐文章

Copyright @ 2022~2023