HTML+JS 写一个个人博客（初学版）

自己琢磨了两三天，算是把HTML入门了吧，然后就想着用这点知识写一个个人主页，然后一下午的时间写完了。

先不看代码，说说思路：
第一步：就是构思，一个网页的展示怎么才好看？！！站在一个老男人的角度，那远远是不能的，，，
1、标题 2、菜单栏（加个超链接） 3、展示页面（图片轮播）

第二步：小标题展示页面。

第三步：代码实现。（说了一堆废话）

代码

Jscript实现图片轮播。（很简单，一看就懂）

    <script>function init(){//书写轮播图片的定时功能setInterval("changeImg()",3000);}//书写函数var i=0;function changeImg(){i++;//获取图片位置并设置src属性值document.getElementById("img1").src=i+".jpg";if(i==5){i=0;}}</script>

接下来写其他的构图，由于只用了HTML，所以用table来控制大小，让格式统一起来。（so，很简单了吧）

标题栏

    <table width="1200px" align="center"  cellpadding="2px" cellspacing="2px"><tr height="35" ><td width="100%" align="center" ><a href="#"><font face="comic sans ms" face="4">Home</font></a><a href="#"><font face="comic sans ms" face="4">About Me</font></a><a href="#"><font face="comic sans ms" face="4">My Life</font></a><a href="#"><font face="comic sans ms" face="4">My Hobby</font></a><a href="#"><font face="comic sans ms" face="4">My work</font></a></td></tr><!--轮播图--><tr><td><img src="1.jpg" width="100%"  id="img1"/></td></tr></table><br /><br /><!--home段--><table width="1400px" cellspacing="2px" cellpadding="2px" align="center"><tr><th><font face="comic sans ms" size="6"><strong>HOME</strong></font></th></tr><br /><br /><tr><td align="center"><p align="center" ><font size="3" face="楷体">“小小的举动，会带来远大的效应”是林俊杰藏在心中多年的一个概念，但也因着还不能完美地呈现而一直搁置。过去的这些日子，林俊杰在体会了来自他身旁人生的体悟与深刻情感后，思想在他的内心渐渐地产生了变化，他深刻地以珍贵的情感与瞬间融入到创作的生命力，也以“真实”为驱动写下了这首歌曲，记录着他内心赤裸的撼动，也献给每一个身边重视的人们。</font></p><br /><br /><img src="C.png"/><br /><br /></td></tr></table>

附完整版代码：

个人主页

<!--定时器--><script>function init(){//书写轮播图片的定时功能setInterval("changeImg()",3000);}//书写函数var i=0;function changeImg(){i++;//获取图片位置并设置src属性值document.getElementById("img1").src=i+".jpg";if(i==5){i=0;}}</script></head><!--标题栏-->
<body onload="init()"><table width="1200px" align="center" cellpadding="0px" cellspacing="0px"><tr><td><table border="0px" width="1400px"><tr height="50px"><td width="100%" align="center"><a href="#" > <font color="black" size="7" face="comic sans ms" ><strong>BLUEHEART</strong></font></a></td></tr></table></td></tr></table><table width="1200px" align="center"  cellpadding="2px" cellspacing="2px"><tr height="35" ><td width="100%" align="center" ><a href="#"><font face="comic sans ms" face="4">Home</font></a><a href="#"><font face="comic sans ms" face="4">About Me</font></a><a href="#"><font face="comic sans ms" face="4">My Life</font></a><a href="#"><font face="comic sans ms" face="4">My Hobby</font></a><a href="#"><font face="comic sans ms" face="4">My work</font></a></td></tr><!--轮播图--><tr><td><img src="1.jpg" width="100%"  id="img1"/></td></tr></table><br /><br /><!--home段--><table width="1400px" cellspacing="2px" cellpadding="2px" align="center"><tr><th><font face="comic sans ms" size="6"><strong>HOME</strong></font></th></tr><br /><br /><tr><td align="center"><p align="center" ><font size="3" face="楷体">“小小的举动，会带来远大的效应”是林俊杰藏在心中多年的一个概念，但也因着还不能完美地呈现而一直搁置。过去的这些日子，林俊杰在体会了来自他身旁人生的体悟与深刻情感后，思想在他的内心渐渐地产生了变化，他深刻地以珍贵的情感与瞬间融入到创作的生命力，也以“真实”为驱动写下了这首歌曲，记录着他内心赤裸的撼动，也献给每一个身边重视的人们。</font></p><br /><br /><img src="C.png"/><br /><br /></td></tr></table><!--做一个两行三列的表格--><table width="1400px" cellpadding="2px" cellspacing="2px" align="center"><tr align="center"><td width="450px" height="500px"><img src="4.png" /><font size="3" face="微软雅黑" ><strong>伟大的渺小</strong></font><br /><font size="2" color="gray">一朵玫瑰被刺围绕，也许它也渴望拥抱</font></td><td><img src="5.png" /><font size="3" face="微软雅黑" ><strong>伟大的渺小</strong></font><br /><font size="2" color="gray">一朵玫瑰被刺围绕，也许它也渴望拥抱</font></td><td><img src="6.png" /><font size="3" face="微软雅黑" ><strong>伟大的渺小</strong></font><br /><font size="2" color="gray">一朵玫瑰被刺围绕，也许它也渴望拥抱</font></td></tr><tr align="center"><td><img src="1.png" /><font size="3" face="微软雅黑" ><strong>伟大的渺小</strong></font><br /><font size="2" color="gray">一朵玫瑰被刺围绕，也许它也渴望拥抱</font></td><td><img src="2.png" /><font size="3" face="微软雅黑" ><strong>伟大的渺小</strong></font><br /><font size="2" color="gray">一朵玫瑰被刺围绕，也许它也渴望拥抱</font></td><td><img src="3.png" /><font size="3" face="微软雅黑" ><strong>伟大的渺小</strong></font><br /><font size="2" color="gray">一朵玫瑰被刺围绕，也许它也渴望拥抱</font></td></tr></table><br /><br /><!--About Me段--><table width="1400px" cellspacing="2px" cellpadding="2px" align="center"><tr align="center"><td><font face="comic sans ms" size="6"><strong>About Me</strong></font><br /></td></tr></table><table width="1400px" cellspacing="2px" cellpadding="6px" align="center"><tr><td align="center"><p align="center" ><font size="3" face="楷体">这首歌也与新加坡作词人小寒首度合作，在没有给予任何想法下，小寒一听到这首旋律，自然而然产生强烈的共鸣与感动，来自对生命与灵魂的感受，赋予了这首歌珍贵呼应的歌词。[4]  而这首歌更与知名配唱制作人马毓芬老师一同录制，她与林俊杰针对这首歌所想表达的情绪深入畅聊，如何随着这首歌的旋律铺陈，以及在录制的情感表现，例如试着让林俊杰在第一次副歌用假音表现他原本可以轻松用真音唱上去的旋律，在听觉上让前半部听起来较为柔和，并针对最后一次副歌特别编写和声，传达一种磅礴而震撼的感觉，让后半部更显张力与希望。</font></p></td><td align="center"><p align="center" ><font size="3" face="楷体">这首歌也与新加坡作词人小寒首度合作，在没有给予任何想法下，小寒一听到这首旋律，自然而然产生强烈的共鸣与感动，来自对生命与灵魂的感受，赋予了这首歌珍贵呼应的歌词。[4]  而这首歌更与知名配唱制作人马毓芬老师一同录制，她与林俊杰针对这首歌所想表达的情绪深入畅聊，如何随着这首歌的旋律铺陈，以及在录制的情感表现，例如试着让林俊杰在第一次副歌用假音表现他原本可以轻松用真音唱上去的旋律，在听觉上让前半部听起来较为柔和，并针对最后一次副歌特别编写和声，传达一种磅礴而震撼的感觉，让后半部更显张力与希望。</font></p></td></tr></table><table width="1000px" cellpadding="2px" cellspacing="2px" align="center"><tr><td><p align="center" ><font size="5" face="楷体"><strong>试着让林俊杰在第一次副歌用假音表现他原本可以轻松用真音唱上去的旋律，在听觉上让前半部听起来较为柔和，并针对最后一次副歌特别编写和声，传达一种磅礴而震撼的感觉，让后半部更显张力与希望。</strong></font></p></td></tr></table><br /><table width="1400px" cellpadding="0px" cellspacing="0px" align="center"><tr><td><img src="121.jpg" width="700px" height="700px" align="center"/></td><td></td></tr><tr><td><!--等着，我回来再写--></td><td><img src="9.jpg" width="700px" height="700px" align="center"/></td>               </tr>       </table><br /><br /><!--My life段--><table width="1400px" cellspacing="2px" cellpadding="2px" align="center"><tr align="center"><td><font face="comic sans ms" size="6"><strong>My life</strong></font><br /></td></tr></table><table width="1400px" cellspacing="2px" cellpadding="2px" align="center"><tr><td align="center"><p align="center" ><font size="3" face="楷体">这首歌也与新加坡作词人小寒首度合作，在没有给予任何想法下，小寒一听到这首旋律，自然而然产生强烈的共鸣与感动，来自对生命与灵魂的感受，赋予了这首歌珍贵呼应的歌词。[4]  而这首歌更与知名配唱制作人马毓芬老师一同录制，她与林俊杰针对这首歌所想表达的情绪深入畅聊，如何随着这首歌的旋律铺陈，以及在录制的情感表现，例如试着让林俊杰在第一次副歌用假音表现他原本可以轻松用真音唱上去的旋律，在听觉上让前半部听起来较为柔和，并针对最后一次副歌特别编写和声，传达一种磅礴而震撼的感觉，让后半部更显张力与希望。</font></p></td></tr></table><table width="700px" cellspacing="2px" cellpadding="2px" align="center"><tr><td align="center"></td></tr></table><table width="1400px"  height="300px" bgcolor="black" cellpadding="6px" align="center"><tr><td align="center"><p align="center" ><font size="7" face="comic sans ms" color="white">BLUEHEART</font></p><br /><br /><br /><p align="center" ><font size="4" face="comic sans ms" color="white">Hope my CET4 能过！！</font></p><p align="center" ><font color="white">Copyright © 2017 个人网站. All rights reserved.</font></p></td></tr></table>
</body>

等学习一下css之后再更新。

HTML+JS 写一个个人博客（初学版）相关推荐

【搬家】写一个技术博客
写一个技术博客 ByNightmare 2011-07-16 @Xinxiang 这是一个大四的暑假--其实已经不是大四了,也谈不上暑假,不过离公司报道还有半个月时间,暂时在家休息--忽然想写一个技术 ...
做一个好父亲，做一个好丈夫，做一个好女婿，做一个好学生，写一个好博客
人活着会有很多标准在进行评价,为了这些评价,就需要作出时间上和精力上的取舍. 为了做一个好学生,我需要花很多时间在专业上,在论文阅读上,在各种实验上. 为了做一个好丈夫,我需要花很多时间照顾我怀孕8个 ...
switchyomega规则列表备份_求人不如求己，自己动手写一个CSDN博客备份小工具？...
前提概要背景因为笔者在上个月的时候,突然想扩展一下技术栈,不能仅仅局限于Java,还是得掌握一门工具语言,不然显得太low.所以也就对Python和Golang类的语言有了一些兴趣.也就在上个月简 ...
一行代码都不写！Github 博客小白版入门教程
赖可发自凹非寺量子位报道 | 公众号 QbitAI GitHub不仅可以传代码,还可以建博客.利用GitHub Pages平台,就可以搭建非常好用的个人博客. 但是难点在于,你在要敲很多代码才 ...
一行代码都不写！Github博客小白版入门教程
赖可发自凹非寺量子位报道 | 公众号 QbitAI GitHub不仅可以传代码,还可以建博客.利用GitHub Pages平台,就可以搭建非常好用的个人博客. 但是难点在于,你在要敲很多代码才 ...
nuxt express mysql_用Express+Nuxt从零开始写一个SSR博客
项目说明 1项目使用Express+mysql+nuxt+nginx写的一个项目.nuxt用于实现服务端渲染.nginx做代理服务器对静态资源代理 2项目环境是node的8.5. 3详情页使用mark ...
用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
【Part2】用JS写一个Blog （node + vue + mongoDB）
[Part1]用JS写一个Blog (node + vue + mongoDB) 上一节前后端项目分别初始化完成,这一小节我就从后端项目开始写.实现mongoDB数据库的连接. 整理后端目录下面是通 ...
用 Flask 来写个轻博客 (37) — 在 Github 上为第一阶段的版本打 Tag
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表第一阶段结语打 Tag 前文列表用 Flask 来写个轻博客 (1 ...
用 Flask 来写个轻博客 (31) — 使用 Flask-Admin 实现 FileSystem 管理
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表扩展阅读编写 FileSystem Admin 页面 Flask-A ...

HTML+JS 写一个个人博客（初学版）

HTML+JS 写一个个人博客（初学版）

自己琢磨了两三天，算是把HTML入门了吧，然后就想着用这点知识写一个个人主页，然后一下午的时间写完了。

代码

Jscript实现图片轮播。（很简单，一看就懂）

接下来写其他的构图，由于只用了HTML，所以用table来控制大小，让格式统一起来。（so，很简单了吧）

标题栏

附完整版代码：

等学习一下css之后再更新。

HTML+JS 写一个个人博客（初学版）相关推荐

最新文章

热门文章

HTML+JS 写一个 个人博客（初学版）

HTML+JS 写一个 个人博客（初学版）

自己琢磨了两三天，算是把HTML入门了吧，然后就想着用这点知识写一个个人主页，然后一下午的时间写完了。

代码

Jscript实现图片轮播。（很简单，一看就懂）

接下来写其他的构图，由于只用了HTML，所以用table来控制大小，让格式统一起来。（so，很简单了吧）

标题栏

附完整版代码：

等学习一下css之后再更新。

HTML+JS 写一个 个人博客（初学版）相关推荐

最新文章

热门文章

HTML+JS 写一个个人博客（初学版）

HTML+JS 写一个个人博客（初学版）

HTML+JS 写一个个人博客（初学版）相关推荐