搭建一个简单的博客界面（前端HTML+CSS+JS）
一、页面效果展示
关于
首页
博客
留言板
文章合集
帮助
二、相关代码
主要对HTML、CSS、JS的基础语法的熟悉，掌握一个界面即可，后面界面逻辑相似。
首页：有轮播图效果
<!DOCTYPE html>
<html>
<head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta charset="utf-8"/><title>明月星河</title><link rel="stylesheet" type="text/css" media="screen" href="css/main.css" /><script src="http//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script><script>window.jQuery || document.write('<script src="js/jquery-1.6.1.min.js"><\/script>')</script><script src="js/scrollToTop.js"></script>
</head><body id="top">
<div id="header-wrap"><header><hgroup><h1><a href="index.html">明月星河</a></h1><h3>醉后不知天在水，满船清梦压星河</h3></hgroup><nav><ul><li id="current"><a href="index.html">首页</a><span></span></li><li><a href="blog.html">博客</a><span></span></li><li><a href="reply.html">留言板</a><span></span></li><li><a href="archive.html">文章合集</a><span></span></li><li><a href="index.html">帮助</a><span></span></li><li><a href="index.html">关于</a><span></span></li></ul></nav><div class="subscribe"><span>订阅：</span> <a href="#">电子邮箱</a> | <a href="#">RSS</a></div><form id="quick-search" method="get" action="index.html"><fieldset class="search"><label for="qsearch">搜索：</label><input class="tbox" id="qsearch" type="text" name="qsearch" value="搜索..." title="开始输入并按回车键" /><button class="btn" title="提交搜索">搜索</button></fieldset></form>
</header></div>
<div id="content-wrap"><div id="content" class="clearfix"><div id="main">
<div id="auto-carousel" class="carousel"><img src="images/img1.png" alt="Image 1" class="carousel-image" /><img src="images/img2.jpg" alt="Image 2" class="carousel-image" /><img src="images/img3.jpg" alt="Image 3" class="carousel-image" /><!-- 更多图片 -->
</div>
<p><article class="post"><div class="primary"><h2><a href="index.html">面向对象程序三大特性之一( 封装）</a></h2><p class="post-info"><span>分类于</span> <a href="index.html">Java</a>, <a href="index.html">基础知识</a></p><div class="image-section"><img src="images/img-post.jpg" alt="image post" height="206" width="498"/></div><p> <strong>面向对象程序三大特性:封装、继承、多态。</strong>而类和对象阶段,主要研究的就是封装特性。何为封装呢?简单来说就是<strong>套壳屏蔽细节。</strong>
比如:对于电脑这样一个复杂的设备,提供给用户的就只是:开关机、通过键盘输入、显示器、 USB 插孔等，让用户来和计算机进行交互,完成日常事务。但实际上:电脑真正工作的却是CPU 、显卡、内存等一些硬件元件。
对于计算机使用者而言,不用关心内部核心部件,比如主板上线路是如何布局的,CPU 内部是如何设计的等,用户只需要知道,怎么开机、怎么通过键盘和鼠标与计算机进行交互即可。<strong>因此计算机厂商在出厂时，
在外部套上壳 子,将内部实现细节隐藏起来,仅仅对外提供开关机、鼠标以及键盘插孔等,让用户可以与计算机进行交互即可。
封装：将数据和操作数据的方法进行有机结合，隐藏对象的属性和实现细节，仅对外公开接口来和对象进行交互</strong><a href="index.html">更多...</a></p><p><a class="more" href="index.html">继续阅读 »</a></p></div><aside><p class="dateinfo">JAN<span>21</span></p><div class="post-meta"><h4>发布详情</h4><ul><li class="user"><a href="#">明月</a></li><li class="time"><a href="#">11:30 AM</a></li><li class="comment"><a href="#">4条评论</a></li><li class="permalink"><a href="#">其他相关文章链接</a></li></ul></div></aside></article>
</p><article class="post"><div class="primary"><h2><a href="index.html">AIGC定义未来内容创作的新纪元</a></h2><p class="post-info"><span>分类于</span> <a href="index.html">人工智能</a>, <a href="index.html">内容创作</a></p><p><a href="https://aigc.izzi.cn/">AIGC</a>,全称为Artificial Intelligence Generated Content,即人工智能生成内容。它是指利用人工智能技术,如深度学习、自然语言处理(NLP)和计算机视觉等,自动生成各类文本、图像、音频和视频等多模态内容的过程,是继用户生产内容(UGC)、专业生产内容(PGC)之后新型利用AI技术自动生成内容的生产方式。AIGC的兴起，<strong>标志着人工智能技术在内容创作领域的广泛应用和深度融合。</strong>
</p><p><b>AIGC的核心技术原理</b>是基于大量的数据训练和复杂的算法模型。它通过对大量文本、图像、音频和视频数据的分析，学习其中的模式和规律,然后通过构建神经网络模型,AIGC能够从大量数据中学习并生成新的内容。随着计算能力的提升和数据资源的日益丰富,AIGC技术得以快速发展。从最初的简单文本生成,到如今的图像、音频和视频等多模态内容创作,AIGC不断刷新着内容生成的边界。AIGC的特点包括<strong>高效性、创新性、多样性和个性化</strong>，可以快速地生成大量内容,同时保持一定的创意和独特性<a href="index.html">更多...</a></p><p><a class="more" href="index.html">继续阅读 »</a></p></div><aside><p class="dateinfo">JAN<span>29</span></p><div class="post-meta"><h4>发布详情</h4><ul><li class="user"><a href="#">星河</a></li><li class="time"><a href="#">10:30 PM</a></li><li class="comment"><a href="#">5条评论</a></li><li class="permalink"><a href="#">其他相关文章链接</a></li></ul></div></aside></article><article class="post"><div class="primary"><h2><a href="index.html">信号量之消费者生产者模型</a></h2><p class="post-info"><span>分类于</span> <a href="index.html">操作系统</a>, <a href="index.html">基础知识</a></p><p></p><p>引入：前面我们讲到了，对临界资源进行访问时，为了保证数据的一致性，我们需要对临界资源进行加锁保护。当我们用一个互斥锁对临界资源进行保护时，相当于我们将这块临界资源看作一个整体，同一时刻只允许一个执行流对这块临界资源进行访问。这样做非常合理，但是效率太低了。但是，我们最理想的方案，其实是：如果在同一时刻，不同的执行流要访问的是临界资源的不同区域，那么我们是允许它们同时进行临界资源的访问，这样就大大提高了效率。比如，如果一个临界资源是一个大小为10数组，我们可以对其加锁保护。可是，现在来看，如果有10个线程同时访问这个数组，可以吗？当然可以，只要这10个线程在同一时刻访问的是数组的不同位置，即10个位置一个线程访问一个。这样我们就可以让多个执行流同时访问临界资源了。这时，我们就使用了<strong>信号量</strong>来帮助我们实现这个方案<a href="index.html">更多...</a></p><p><a class="more" href="index.html">继续阅读 »</a></p></div><aside><p class="dateinfo">JAN<span>31</span></p><div class="post-meta"><h4>发布详情</h4><ul><li class="user"><a href="#">明月</a></li><li class="time"><a href="#">9:30 AM</a></li><li class="comment"><a href="#">7条评论</a></li><li class="permalink"><a href="#">其他相关文章链接</a></li></ul></div></aside></article></div>
<div id="sidebar"><div class="about-me"><h3>关于我们</h3><p><a href="index.html"><img src="images/gravatar.jpg" width="42" height="42" alt="firefox" class="align-left" /></a>虽然我们是计算机专业,一听到计算机就会觉得工科是偏理性的,难免会有点枯燥,但有时计算机的学习也是很有趣的,本网站不仅会分享一些技术上的知识,还会将中国传统文化与计算机知识相结合,因此明月星河不仅是对科技的畅想,更是告诉我们在学习的过程中不要忘记仰望星空 <a href="index.html">更多...</a></p></div><div class="sidemenu"><h3>边栏菜单</h3><ul><li><a href="index.html">首页</a></li><li><a href="index.html">博客</a></li><li><a href="style.html">留言板</a></li><li><a href="blog.html">资源合集</a></li><li><a href="archives.html">帮助</a></li><li><a href="http//themeforest.net?ref=ealigam" title="Web Templates">关于</a></li></ul></div><div class="sidemenu"><h3>入门须知</h3><ul><li><a href="#" title="Site Templates">如何使用本网站？<span>新手知识 & 教程.</span></a></li><li><a href="#" title="Website Templates">计算机专业电脑选购指南<span>避坑指南</span></a></li><li><a href="#" title="Web Templates">学习计算机不可不读的那些书籍<span>新手知识</span></a></li><li><a href="#" title="Stock Graphics">如何安排自己的自学时间？<span>新手必知</span></a></li><li><a href="#" title="Webhosting">如何提高自己编程能力？<span>实践指南|<strong>知行合一</strong></span></a></li><li><a href="index.html">更多...</a></li></ul></div><div class="sidemenu"><h3>其他分类</h3><ul><li><a href="#" title="Site Templates">人工智能</a></li><li><a href="#" title="Website Templates">数据结构</a></li><li><a href="#" title="Web Templates">编程语言</a></li><li><a href="#" title="Stock Graphics">编程软件</a></li><li><a href="#" title="Webhosting">算法设计与分析</a></li><li><a href="index.html">更多...</a></li></ul></div><div class="sidemenu popular"><h3>最热文章</h3><ul><li><a href="index.html">C++和Java应该怎么选择？<span>发布于2024.1.31</span></a></li><li><a href="index.html">看得懂代码，写不出，怎么破<span>发布于2024.3.3</span></a></li><li><a href="index.html">Python在机器学习中的运用<span>发布于2024.4.3</span></a></li><li><a href="index.html">C语言必刷题合集<span>发布于2024.4.21</span></a></li><li><a href="index.html">算法初阶指南<span>发布于2024.4.2</span></a></li><li><a href="index.html">如何学习数据结构？<span>发布于2024.4.23</span></a></li><li><a href="index.html">MySQL安装教程<span>发布于2024.3.25</span></a></li><li><a href="index.html">VS2023使用文档<span>发布于2024.3.27</span></a></li><li><a href="index.html">更多...</a></li></ul></div></div></div></div>
<div id="extra-wrap"><div id="extra" class="clearfix"><p><div class="col first"><h3>联系方式</h3><p><strong>电话： </strong>+1234567<br/><strong>微信： </strong>+123456789</p><p><strong>地址: </strong>XX大学</p><p><strong>电子邮箱: </strong>1234567@BrightMoonAndGalaxy.com</p><p>更多信息 <a href="#">请点击</a></p><h3>订阅方式</h3><ul class="subscribe-stuff"><li><a title="RSS" href="index.html" rel="nofollow"><img alt="RSS" title="RSS" src="images/social_rss.png" /></a></li><li><a title="Facebook" href="index.html" rel="nofollow"><img alt="Facebook" title="Facebook" src="images/social_facebook.png" /></a></li><li><a title="Twitter" href="index.html" rel="nofollow"><img alt="Twitter" title="Twitter" src="images/social_twitter.png" /></a></li><li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow"><img alt="E-mail this story to a friend!" title="E-mail this story to a friend!" src="images/social_email.png" /></a></li></ul><p><a href="index">RSS</a>, <a href="index">脸书</a>,<a href="index">推特</a> 或者 <a href="index">电子邮箱</a></p></div><div class="col"><h3>计算机优质学习网站推荐</h3><div class="footer-list"><ul><li><a href="index.html">GitHub</a></li><li><a href="index.html">菜鸟教程</a></li><li><a href="index.html">CSDN社区</a></li><li><a href="index.html">更多...</a></li></ul></div><h3>入门视频推荐</h3><div class="footer-list"><ul><li><a href="index.html">计算机专业的就业方向介绍</a></li><li><a href="index.html">计算机专业如何做自己的职业规划？</a></li><li><a href="index.html">更多...</a></li></ul></div></div><div class="col"><h3>大家还在搜</h3><div class="footer-list"><ul><li><a href="#">Leetcode热题合集</a></li><li><a href="#">面试官最喜欢问的那些问题</a></li><li><a href="#">408计算机组成原理知识点</a></li><li><a href="#">更多...</a></li></ul></div><h3>最近留言</h3><div class="recent-comments"><ul><li><a href="index.html" title="Comment on title">哇塞，你们的想法很棒...</a><br /> - <cite>小C</cite></li><li><a href="index.html" title="Comment on title">数据结构的文章很有收获！</a><br /> - <cite>大提琴</cite></li></li><li><a href="index.html">更多...</a></li></ul></div></div><div class="col"><h3>文章合集</h3><div class="footer-list"><ul><li><a href="index.html">2024年4月合集</a></li><li><a href="index.html">2024年3月合集</a></li><li><a href="index.html">2024年2月合集</a></li> <li><a href="index.html">更多...</a></li></ul></div><h3>专业经典书籍</h3><div class="footer-list"><ul><li><a href="index.html">《深度理解计算机系统》</a></li><li><a href="index.html">《程序员的自我修养》</a></li><li><a href="index.html">《C语言程序设计》</a></li><li><a href="index.html">更多...</a></li></ul></div></div></div>
</div>
<footer><p class="footer-left">© 2024 Copyright Design by <a href="#">BrightMoonAndGalaxy</a></p><p class="footer-right"><a href="index.html">首页</a> |<a href="index.html">帮助</a> |<a href="#top" class="back-to-top">返回顶部</a></p></p>
</footer>
<script>document.addEventListener('DOMContentLoaded', function() {var images = document.querySelectorAll('.carousel-image');var currentIndex = 0;function showImage(index) {images.forEach(function(image) {image.style.display = 'none';});images[index].style.display = 'block';}function nextImage() {currentIndex = (currentIndex + 1) % images.length;showImage(currentIndex);}// 设置自动轮播setInterval(nextImage, 3000); // 每3000毫秒（3秒）切换到下一张图片});
</script>
</body>
</html>博客：
<!DOCTYPE html>
<html>
<head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta charset="utf-8"/><title>明月星河</title><link rel="stylesheet" type="text/css" media="screen" href="css/main.css" /><script src="http//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script><script>window.jQuery || document.write('<script src="js/jquery-1.6.1.min.js"><\/script>')</script><script src="js/scrollToTop.js"></script></head><body id="top">
<div id="header-wrap"><header><hgroup><h1><a href="index.html">明月星河</a></h1><h3>醉后不知天在水，满船清梦压星河</h3></hgroup><nav><ul><li><a href="index.html">首页</a><span></span></li><li id="current" ><a href="blog.html">博客</a><span></span></li><li><a href="reply.html">留言板</a><span></span></li><li><a href="archive.html">文章合集</a><span></span></li><li><a href="help.html">帮助</a><span></span></li><li><a href="about.html">关于</a><span></span></li></ul></nav><div class="subscribe"><span>订阅：</span> <a href="#">电子邮箱</a> | <a href="#">RSS</a></div><form id="quick-search" method="get" action="index.html"><fieldset class="search"><label for="qsearch">搜索：</label><input class="tbox" id="qsearch" type="text" name="qsearch" value="搜索..." title="开始输入并按回车键" /><button class="btn" title="提交搜索">搜索</button></fieldset></form></header></div>
<div id="content-wrap"><div id="content" class="clearfix"><div id="main"><article class="post"><div class="primary"><h2><a href="index.html">0基础Java自学之路</a></h2><p class="post-info"><span>分类于</span> <a href="index.html">Java</a>, <a href="index.html">基础知识</a></p><div class="image-section"><img src="images/img-post.jpg" alt="image post" height="206" width="498"/></div><p><b>Java 现状</b>
最近几年,Go、Python等语言快速崛起,大有挑战 Java 地位的趋势,但是 Java 毋庸置疑仍是当前互联网行业里招聘需求量最大的。
众多大厂:阿里、美团、快手、拼多多、滴滴、网易等，都是以 Java 为公司的主语言,部分大厂:腾讯、百度、字节等，虽然以其他语言为主语言，
但是多多少少也会有一些 Java 岗。
所以,Java 的现状及未来,我觉得都是比较不错的。岗位多也代表着机会多,对于新人来说比较友好,所以我个人是比较推荐新人学 Java 的。
<b>自学前你应该知道</b>
自学前请做好心理准备,自学是一个既寂寞又漫长的过程,如果想踏进来,请做好放弃几乎所有娱乐生活的准备,包括过年的时候。如果只是抱着三天打鱼两天晒网的态度，那我建议还是放弃吧。
但是如果你能坚持下来,我相信一定能有所回报,我自己就是个例子,我走了那么多弯路,跟着本文走,你们没理由比我当时更差。</p><p>
<b>自学预估周期</b>
自学的周期我给大家定了一个参考时间:6个月,平均每天6-8小时,共1200个小时左右,大致安排:
3个月基础知识学习和强化。
2个月 SSM 项目实战反复练习,项目实战同时也在复习和巩固之前的基础知识。
1个月面试高频题准备,看面试题其实也会增加自己的专业知识,而且可能比你想象的要多,
不夸张的说,前几年我从面试题里学到的知识可能比工作里获得的还多<a href="index.html">更多...</a></p><p><a class="more" href="index.html">继续阅读»</a></p></div><aside><p class="dateinfo">APR<span>23</span></p><div class="post-meta"><h4>发布详情</h4><ul><li class="user"><a href="#">星河</a></li><li class="time"><a href="#">8:30 PM</a></li><li class="comment"><a href="#">20条评论</a></li><li class="permalink"><a href="#">其他相关文章链接</a></li></ul></div></aside></article><div class="main-content"><h2><a href="index.html">Java冒泡排序</a></h2><h3>算法初阶</h3><p><a href="#"><img src="images/sample-image.jpg" width="280" height="178" alt="sample-image" class="align-left" /></a><mark>冒泡排序(Bubble Sorting)</mark>的基本思想是:通过对待排序序列从前向后(从下标较小的元素开始),依次比较相邻元素的值,
若发现逆序则交换,使值较大的元素逐渐从前移向后部,就象水底下的气泡一样逐渐向上冒。
优化:
因为排序的过程中,各元素不断接近自己的位置,如果一趟比较下来没有进行过交换,就说明序列有序。因此要在
排序过程中设置一个标志 flag 判断元素是否进行过交换。从而减少不必要的比较。(这里说的优化，可以在冒泡排
序写好后，在进行)</p><p><strong>其他语言版本<a href="#">点击</a></strong ></p><h3>代码块</h3><pre><code>
import java.util.Arrays;public class BubbleSort {public static void main(String[] args) {int arr[] = { 3, 9, -1, 10, -2 };// 为了容量理解，我们把冒泡排序的演变过程，给大家展示// 第一趟排序，就是将最大的数排在最后int temp = 0; // 临时变量for (int j = 0; j < arr.length - 1; j++) {// 如果前面的数比后面的数大，则交换if (arr[j] > arr[j + 1]) {temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}System.out.println("第一趟排序后的数组");System.out.println(Arrays.toString(arr));// 第二趟排序，就是将第二大的数排在倒数第二位for (int j = 0; j < arr.length - 1 - 1; j++) {// 如果前面的数比后面的数大，则交换if (arr[j] > arr[j + 1]) {temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}System.out.println("第二趟排序后的数组");System.out.println(Arrays.toString(arr));// 第三趟排序，就是将第三大的数排在倒数第三位for (int j = 0; j < arr.length - 1 - 2; j++) {// 如果前面的数比后面的数大，则交换if (arr[j] > arr[j + 1]) {temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}System.out.println("第三趟排序后的数组");System.out.println(Arrays.toString(arr));// 第四趟排序，就是将第 4 大的数排在倒数第 4 位for (int j = 0; j < arr.length - 1 - 3; j++) {// 如果前面的数比后面的数大，则交换if (arr[j] > arr[j + 1]) {temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}System.out.println("第四趟排序后的数组");System.out.println(Arrays.toString(arr));}}</code></pre><h3>填写信息</h3><form action="index.html" method="get" id="contactform"><div><p>联系我们</p></div><div><label for="subject">联系缘由</label><select id="subject" name="subject" tabindex="1"><option value="1">商务合作</option><option value="2">技术疑问</option><option value="3">相互交流</option></select></div><div><label>姓名 <span class="required">*</span></label><input name="name" type="text" id="name" value="" /></div><div><label>电子邮箱<span class="required">*</span></label><input name="email" type="text" id="email" value="" /></div><div><label>微信</label><input name="website" type="text" id="website" value="" /></div><div><label>正文<span class="required">*</span></label><textarea name="message" rows="20" cols="50" id="message" ></textarea><br /></div><div class="no-border"><input type="submit" value="提交" class="button"><input type="reset" value="重置" class="button"></div></form></div></div><div id="sidebar"><div class="about-me"><h3>关于我们</h3><p><a href="index.html"><img src="images/gravatar.jpg" width="42" height="42" alt="firefox" class="align-left" /></a>虽然我们是计算机专业,一听到计算机就会觉得工科是偏理性的,难免会有点枯燥,但有时计算机的学习也是很有趣的,本网站不仅会分享一些技术上的知识,还会将中国传统文化与计算机知识相结合,因此明月星河不仅是对科技的畅想,更是告诉我们在学习的过程中不要忘记仰望星空 <a href="index.html">更多...</a></p></div><div class="sidemenu"><h3>边栏菜单</h3><ul><li><a href="index.html">首页</a></li><li><a href="reply.html">留言板</a></li><li><a href="archive.html">文章合集</a></li><li><a href="help.html">帮助</a></li><li><a href="about.html">关于</a></li></ul></div><div class="sidemenu"><h3>入门须知</h3><ul><li><a href="#" title="Site Templates">如何使用本网站？<span>新手知识 & 教程.</span></a></li><li><a href="#" title="Website Templates">计算机专业电脑选购指南<span>避坑指南</span></a></li><li><a href="#" title="Web Templates">学习计算机不可不读的那些书籍<span>新手知识</span></a></li><li><a href="#" title="Stock Graphics">如何安排自己的自学时间？<span>新手必知</span></a></li><li><a href="#" title="Webhosting">如何提高自己编程能力？<span>实践指南|<strong>知行合一</strong></span></a></li><li><a href="index.html">更多...</a></li></ul></div><div class="sidemenu"><h3>其他分类</h3><ul><li><a href="#" title="Site Templates">人工智能</a></li><li><a href="#" title="Website Templates">数据结构</a></li><li><a href="#" title="Web Templates">编程语言</a></li><li><a href="#" title="Stock Graphics">编程软件</a></li><li><a href="#" title="Webhosting">算法设计与分析</a></li><li><a href="index.html">更多...</a></li></ul></div><div class="sidemenu popular"><h3>最热文章</h3><ul><li><a href="index.html">C++和Java应该怎么选择？<span>发布于2024.1.31</span></a></li><li><a href="index.html">看得懂代码，写不出，怎么破<span>发布于2024.3.3</span></a></li><li><a href="index.html">Python在机器学习中的运用<span>发布于2024.4.3</span></a></li><li><a href="index.html">C语言必刷题合集<span>发布于2024.4.21</span></a></li><li><a href="index.html">算法初阶指南<span>发布于2024.4.2</span></a></li><li><a href="index.html">如何学习数据结构？<span>发布于2024.4.23</span></a></li><li><a href="index.html">MySQL安装教程<span>发布于2024.3.25</span></a></li><li><a href="index.html">VS2023使用文档<span>发布于2024.3.27</span></a></li><li><a href="index.html">更多...</a></li></ul></div></div></div></div>
<p>
<div id="extra-wrap"><div id="extra" class="clearfix"><div class="col first"><h3>联系方式</h3><p><strong>电话： </strong>+1234567<br/><strong>微信： </strong>+123456789</p><p><strong>地址: </strong>XX大学</p><p><strong>电子邮箱: </strong>1234567@BrightMoonAndGalaxy.com</p><p>更多信息 <a href="#">请点击</a></p><h3>订阅方式</h3><ul class="subscribe-stuff"><li><a title="RSS" href="index.html" rel="nofollow"><img alt="RSS" title="RSS" src="images/social_rss.png" /></a></li><li><a title="Facebook" href="index.html" rel="nofollow"><img alt="Facebook" title="Facebook" src="images/social_facebook.png" /></a></li><li><a title="Twitter" href="index.html" rel="nofollow"><img alt="Twitter" title="Twitter" src="images/social_twitter.png" /></a></li><li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow"><img alt="E-mail this story to a friend!" title="E-mail this story to a friend!" src="images/social_email.png" /></a></li></ul><p><a href="index">RSS</a>, <a href="index">脸书</a>,<a href="index">推特</a> 或者 <a href="index">电子邮箱</a></p></div><div class="col"><h3>计算机优质学习网站推荐</h3><div class="footer-list"><ul><li><a href="index.html">GitHub</a></li><li><a href="index.html">菜鸟教程</a></li><li><a href="index.html">CSDN社区</a></li><li><a href="index.html">更多...</a></li></ul></div><h3>入门视频推荐</h3><div class="footer-list"><ul><li><a href="index.html">计算机专业的就业方向介绍</a></li><li><a href="index.html">计算机专业如何做自己的职业规划？</a></li><li><a href="index.html">更多...</a></li></ul></div></div><div class="col"><h3>大家还在搜</h3><div class="footer-list"><ul><li><a href="#">Leetcode热题合集</a></li><li><a href="#">面试官最喜欢问的那些问题</a></li><li><a href="#">408计算机组成原理知识点</a></li><li><a href="#">更多...</a></li></ul></div><h3>最近留言</h3><div class="recent-comments"><ul><li><a href="index.html" title="Comment on title">哇塞，你们的想法很棒...</a><br /> - <cite>小C</cite></li><li><a href="index.html" title="Comment on title">数据结构的文章很有收获！</a><br /> - <cite>大提琴</cite></li></li><li><a href="index.html">更多...</a></li></ul></div></div><div class="col"><h3>文章合集</h3><div class="footer-list"><ul><li><a href="index.html">2024年4月合集</a></li><li><a href="index.html">2024年3月合集</a></li><li><a href="index.html">2024年2月合集</a></li> <li><a href="index.html">更多...</a></li></ul></div><h3>专业经典书籍</h3><div class="footer-list"><ul><li><a href="index.html">《深度理解计算机系统》</a></li><li><a href="index.html">《程序员的自我修养》</a></li><li><a href="index.html">《C语言程序设计》</a></li><li><a href="index.html">更多...</a></li></ul></div></div></div>
</div>
<footer><p class="footer-left">© 2024 Copyright Design by <a href="#">BrightMoonAndGalaxy</a></p><p class="footer-right"><a href="index.html">首页</a> |<a href="index.html">帮助</a> |<a href="#top" class="back-to-top">返回顶部</a></p></P>
</footer>
</body>
</html>
文章合集：
<!DOCTYPE html><html>
<head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta charset="utf-8"/><title>明月星河</title><link rel="stylesheet" type="text/css" media="screen" href="css/main.css" /><script src="http//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script><script>window.jQuery || document.write('<script src="js/jquery-1.6.1.min.js"><\/script>')</script><script src="js/scrollToTop.js"></script></head><body id="top"><div id="header-wrap"><header><hgroup><h1><a href="index.html">明月星河</a></h1><h3>醉后不知天在水，满船清梦压星河</h3></hgroup><nav><ul><li><a href="index.html">首页</a><span></span></li><li><a href="blog.html">博客</a><span></span></li><li><a href="reply.html">留言板</a><span></span></li><li id="current"><a href="archive.html">文章合集</a><span></span></li><li><a href="help.html">帮助</a><span></span></li><li><a href="about.html">关于</a><span></span></li></ul></nav><div class="subscribe"><span>订阅：</span> <a href="#">电子邮箱</a> | <a href="#">RSS</a></div><form id="quick-search" method="get" action="index.html"><fieldset class="search"><label for="qsearch">搜索：</label><input class="tbox" id="qsearch" type="text" name="qsearch" value="搜索..." title="开始输入并按回车键" /><button class="btn" title="提交搜索">搜索</button></fieldset></form></header>
</div><div id="content-wrap"><div id="content" class="clearfix"><div id="main"><div class="main-content"><h2><a href="index.html">2024年4月文章合集</a></h2><div class="navigation clearfix"><div><a href="#" >« 更早</a></div><div><a href="#" >最新 » </a></div></div><ul class="archive"><li><div class="post-title"><a href="index.html">如何入门计算机领域？</a></div><div class="post-details">发布于 <a href="index.html">2024.4.10</a> <span>|</span> 分类于 <a href="index.html">新手知识</a>, <a href="index.html">经验</a></div></li><li><div class="post-title"><a href="index.html">【数据结构】队列的使用方法</a></div><div class="post-details">发布于 <a href="index.html">2024.4.11</a> <span>|</span> 分类于 <a href="index.html">数据结构</a></div></li><li><div class="post-title"><a href="index.html">C语言指针进阶:各类型指针变量详解</a></div><div class="post-details">发布于<a href="index.html"></a> 2024.4.12<span>|</span> 分类于 <a href="index.html">C语言</a>, <a href="index.html">进阶</a></div></li><li><div class="post-title"><a href="index.html">【数据结构】红黑树</a></div><div class="post-details">发布于<a href="index.html"></a> 2024.3.11<span>|</span> 分类于<a href="index.html">数据结构</a>, <a href="index.html">进阶</a></div></li><li><div class="post-title"><a href="index.html">面试手撕代码经验</a></div><div class="post-details">发布于<a href="index.html">2024.2.11</a> <span>|</span> 分类于 <a href="index.html">面试</a>, <a href="index.html">经验</a></div></li><li><div class="post-title"><a href="index.html">Mybatis实现手动分页</a></div><div class="post-details">发布于 <a href="index.html">2024.4.14</a> <span>|</span> 分类于 <a href="index.html">技术</a></div></li><li><div class="post-title"><a href="index.html">用栈实现队列</a></div><div class="post-details">发布于 <a href="index.html">2024.4.17.</a> <span>|</span> 分类于 <a href="index.html">数据结构</a>, <a href="index.html">基础知识</a></div></li><li><div class="post-title"><a href="index.html">计算机专业如何如果大学四年？</a></div><div class="post-details">发布于<a href="index.html">2024.4.11</a> <span>|</span> 分类于 <a href="index.html">新手知识</a>, <a href="index.html">经验</a></div></li><li><div class="post-title"><a href="index.html">【C语言】每日一题，快速提升！</a></div><div class="post-details">发布于<a href="index.html">2024.3.21</a> <span>|</span> 分类于 <a href="index.html">C语言</a>, <a href="index.html">基础知识</a></div></li><li><div class="post-title"><a href="index.html">单调递增的数字+监控二叉树</a></div><div class="post-details">发布于<a href="index.html">2024.2.13</a> <span>|</span> 分类于 <a href="index.html">数据结构</a>, <a href="index.html">高阶</a></div></li><li><div class="post-title"><a href="index.html">C++之string类 详细讲解</a></div><div class="post-details">发布于<a href="index.html">2024.3.25</a> <span>|</span> 分类于 <a href="index.html">C++</a>, <a href="index.html">基础知识</a></div></li><li><div class="post-title"><a href="index.html">计算机专业如何如果大学四年？</a></div><div class="post-details">发布于<a href="index.html">2024.4.11</a> <span>|</span> 分类于 <a href="index.html">新手知识</a>, <a href="index.html">经验</a></div></li><li><div class="post-title"><a href="index.html">【MySQL】MySQL操作库</a></div><div class="post-details">发布于<a href="index.html">2024.4.19</a> <span>|</span> 分类于 <a href="index.html">MySQL</a>, <a href="index.html">基础知识</a></div></li><li><div class="post-title"><a href="index.html">【数据结构】图基本概念</a></div><div class="post-details">发布于<a href="index.html">2024.4.20</a> <span>|</span> 分类于 <a href="index.html">数据结构</a>, <a href="index.html">基础知识</a></div></li><li><div class="post-title"><a href="index.html">Java中的Object类</a></div><div class="post-details">发布于<a href="index.html">2024.4.21</a> <span>|</span> 分类于 <a href="index.html">Java</a>, <a href="index.html">基础知识</a></div></li><li><div class="post-title"><a href="index.html">Java基础教程（8）-Java中的面向对象和类（一）</a></div><div class="post-details">发布于<a href="index.html">2024.4.17</a> <span>|</span> 分类于 <a href="index.html">Java</a>, <a href="index.html">基础知识</a></div></li><li><div class="post-title"><a href="index.html">时间，空间复杂度讲解</a></div><div class="post-details">发布于<a href="index.html">2024.4.21</a> <span>|</span> 分类于 <a href="index.html">新手知识</a>, <a href="index.html">基础知识</a></div></li></ul><div class="navigation clear"><div><a href="#" >« 更早</a></div><div><a href="#" >最新 » </a></div></div></div></div><div id="sidebar"><div class="about-me"><h3>关于我们</h3><p><a href="index.html"><img src="images/gravatar.jpg" width="42" height="42" alt="firefox" class="align-left" /></a>虽然我们是计算机专业,一听到计算机就会觉得工科是偏理性的,难免会有点枯燥,但有时计算机的学习也是很有趣的,本网站不仅会分享一些技术上的知识,还会将中国传统文化与计算机知识相结合,因此明月星河不仅是对科技的畅想,更是告诉我们在学习的过程中不要忘记仰望星空 <a href="index.html">更多...</a></p></div><div class="sidemenu"><h3>边栏菜单</h3><ul><li><a href="index.html">主页</a></li><li><a href="blog.html">博客</a></li><li><a href="reply.html">留言板</a></li><li><a href="help.html">帮助</a></li><li><a href="about.html">关于</a></li></ul></div><div class="sidemenu"><h3>入门须知</h3><ul><li><a href="#" title="Site Templates">如何使用本网站？<span>新手知识 & 教程.</span></a></li><li><a href="#" title="Website Templates">计算机专业电脑选购指南<span>避坑指南</span></a></li><li><a href="#" title="Web Templates">学习计算机不可不读的那些书籍<span>新手知识</span></a></li><li><a href="#" title="Stock Graphics">如何安排自己的自学时间？<span>新手必知</span></a></li><li><a href="#" title="Webhosting">如何提高自己编程能力？<span>实践指南|<strong>知行合一</strong></span></a></li><li><a href="index.html">更多...</a></li></ul></div><div class="sidemenu popular"><h3>最热文章</h3><ul><li><a href="index.html">C++和Java应该怎么选择？<span>发布于2024.1.31</span></a></li><li><a href="index.html">看得懂代码，写不出，怎么破<span>发布于2024.3.3</span></a></li><li><a href="index.html">Python在机器学习中的运用<span>发布于2024.4.3</span></a></li><li><a href="index.html">C语言必刷题合集<span>发布于2024.4.21</span></a></li><li><a href="index.html">算法初阶指南<span>发布于2024.4.2</span></a></li><li><a href="index.html">如何学习数据结构？<span>发布于2024.4.23</span></a></li><li><a href="index.html">MySQL安装教程<span>发布于2024.3.25</span></a></li><li><a href="index.html">VS2023使用文档<span>发布于2024.3.27</span></a></li></li></ul></div></div></div>
</div>
<div id="extra-wrap"><div id="extra" class="clearfix">
<p><div class="col first"><h3>联系方式</h3><p><strong>电话： </strong>+1234567<br/><strong>微信： </strong>+123456789</p><p><strong>地址: </strong>XX大学</p><p><strong>电子邮箱: </strong>1234567@BrightMoonAndGalaxy.com</p><p>更多信息 <a href="#">请点击</a></p><h3>订阅方式</h3><ul class="subscribe-stuff"><li><a title="RSS" href="index.html" rel="nofollow"><img alt="RSS" title="RSS" src="images/social_rss.png" /></a></li><li><a title="Facebook" href="index.html" rel="nofollow"><img alt="Facebook" title="Facebook" src="images/social_facebook.png" /></a></li><li><a title="Twitter" href="index.html" rel="nofollow"><img alt="Twitter" title="Twitter" src="images/social_twitter.png" /></a></li><li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow"><img alt="E-mail this story to a friend!" title="E-mail this story to a friend!" src="images/social_email.png" /></a></li></ul><p><a href="index">RSS</a>, <a href="index">脸书</a>,<a href="index">推特</a> 或者 <a href="index">电子邮箱</a></p></div><div class="col"><h3>计算机优质学习网站推荐</h3><div class="footer-list"><ul><li><a href="index.html">GitHub</a></li><li><a href="index.html">菜鸟教程</a></li><li><a href="index.html">CSDN社区</a></li><li><a href="index.html">更多...</a></li></ul></div><h3>入门视频推荐</h3><div class="footer-list"><ul><li><a href="index.html">计算机专业的就业方向介绍</a></li><li><a href="index.html">计算机专业如何做自己的职业规划？</a></li><li><a href="index.html">更多...</a></li></ul></div></div><div class="col"><h3>大家还在搜</h3><div class="footer-list"><ul><li><a href="#">Leetcode热题合集</a></li><li><a href="#">面试官最喜欢问的那些问题</a></li><li><a href="#">408计算机组成原理知识点</a></li><li><a href="#">更多...</a></li></ul></div><h3>最近留言</h3><div class="recent-comments"><ul><li><a href="index.html" title="Comment on title">哇塞，你们的想法很棒...</a><br /> - <cite>小C</cite></li><li><a href="index.html" title="Comment on title">数据结构的文章很有收获！</a><br /> - <cite>大提琴</cite></li></li><li><a href="index.html">更多...</a></li></ul></div></div><div class="col"><h3>文章合集</h3><div class="footer-list"><ul><li><a href="index.html">2024年4月合集</a></li><li><a href="index.html">2024年3月合集</a></li><li><a href="index.html">2024年2月合集</a></li> <li><a href="index.html">更多...</a></li></ul></div><h3>专业经典书籍</h3><div class="footer-list"><ul><li><a href="index.html">《深度理解计算机系统》</a></li><li><a href="index.html">《程序员的自我修养》</a></li><li><a href="index.html">《C语言程序设计》</a></li><li><a href="index.html">更多...</a></li></ul></div></div></div>
</div>
<footer><p class="footer-left">© 2024 Copyright Design by <a href="#">BrightMoonAndGalaxy</a></p><p class="footer-right"><a href="index.html">首页</a> |<a href="index.html">帮助</a> |<a href="#top" class="back-to-top">返回顶部</a></p>
</p>
</footer>
</body>
</html>
帮助:
<!DOCTYPE html><html>
<head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta charset="utf-8"/><title>明月星河</title><link rel="stylesheet" type="text/css" media="screen" href="css/main.css" /><script src="http//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script><script>window.jQuery || document.write('<script src="js/jquery-1.6.1.min.js"><\/script>')</script><script src="js/scrollToTop.js"></script></head><body id="top">
<div id="header-wrap"><header><hgroup><h1><a href="index.html">明月星河</a></h1><h3>醉后不知天在水，满船清梦压星河</h3></hgroup><nav><ul><li><a href="index.html">首页</a><span></span></li><li><a href="blog.html">博客</a><span></span></li><li><a href="reply.html">留言板</a><span></span></li><li><a href="archive.html">文章合集</a><span></span></li><li id="current"><a href="help.html">帮助</a><span></span></li><li><a href="about.html">关于</a><span></span></li></ul></nav><div class="subscribe"><span>订阅：</span> <a href="#">电子邮箱</a> | <a href="#">RSS</a></div><form id="quick-search" method="get" action="index.html"><fieldset class="search"><label for="qsearch">搜索：</label><input class="tbox" id="qsearch" type="text" name="qsearch" value="搜索..." title="开始输入并按回车键" /><button class="btn" title="提交搜索">搜索</button></fieldset></form></header>
</div><div id="content-wrap"><div id="content" class="clearfix"><div id="main"><div class="main-content"><h2><a href="index.html">帮助文档</a></h2><div class="navigation clearfix"><div><a href="#" >« 返回</a></div><div><a href="#" >前进 » </a></div></div><ul class="archive"><li><div class="post-title"><a href="#">如何使用本网站？</a></div><div class="post-details">发布于 <a href="index.html">2024.4.10</a> <span>|</span> 分类于 <a href="index.html">帮助文档</a>, <a href="index.html">教程</a></div></li><li><div class="post-title"><a href="#">本网站的那些你不知道的隐藏功能</a></div><div class="post-details">发布于 <a href="index.html">2024.4.11</a> <span>|</span> 分类于 <a href="index.html">帮助文档</a></div></li><li><div class="post-title"><a href="#">入门程序员如何使用本博客</a></div><div class="post-details">发布于<a href="index.html"></a> 2024.4.12<span>|</span> 分类于 <a href="index.html">帮助文档</a>, <a href="index.html">教程</a></div></li><li><div class="post-title"><a href="#">中级程序员如何使用本博客</a></div><div class="post-details">发布于<a href="index.html"></a> 2024.3.11<span>|</span> 分类于<a href="index.html">帮助文档</a>, <a href="index.html">教程</a></div></li><li><div class="post-title"><a href="#">高级程序员如何使用本博客</a></div><div class="post-details">发布于<a href="index.html">2024.2.11</a> <span>|</span> 分类于 <a href="index.html">帮助文档</a>, <a href="index.html">教程</a></div></li><li><div class="post-title"><a href="#">各个界面详细操作教程</a></div><div class="post-details">发布于 <a href="index.html">2024.4.14</a> <span>|</span> 分类于 <a href="index.html">帮助文档</a></div></li></ul><div class="navigation clear"><div><a href="#" >« 返回顶部</a></div><div><a href="#" >关于 » </a></div></div></div></div><div id="sidebar"><div class="about-me"><h3>关于我们</h3><p><a href="index.html"><img src="images/gravatar.jpg" width="42" height="42" alt="firefox" class="align-left" /></a>虽然我们是计算机专业,一听到计算机就会觉得工科是偏理性的,难免会有点枯燥,但有时计算机的学习也是很有趣的,本网站不仅会分享一些技术上的知识,还会将中国传统文化与计算机知识相结合,因此明月星河不仅是对科技的畅想,更是告诉我们在学习的过程中不要忘记仰望星空 <a href="index.html">更多...</a></p></div><div class="sidemenu"><h3>边栏菜单</h3><ul><li><a href="index.html">主页</a></li><li><a href="blog.html">博客</a></li><li><a href="reply.html">留言板</a></li><li><a href="help.html">文章合集</a></li><li><a href="about.html">关于</a></li></ul></div></div></div>
</div>
<p>
<div id="extra-wrap"><div id="extra" class="clearfix"><div class="col first"><h3>联系方式</h3><p><strong>电话： </strong>+1234567<br/><strong>微信： </strong>+123456789</p><p><strong>地址: </strong>XX大学</p><p><strong>电子邮箱: </strong>1234567@BrightMoonAndGalaxy.com</p><p>更多信息 <a href="#">请点击</a></p><h3>订阅方式</h3><ul class="subscribe-stuff"><li><a title="RSS" href="index.html" rel="nofollow"><img alt="RSS" title="RSS" src="images/social_rss.png" /></a></li><li><a title="Facebook" href="index.html" rel="nofollow"><img alt="Facebook" title="Facebook" src="images/social_facebook.png" /></a></li><li><a title="Twitter" href="index.html" rel="nofollow"><img alt="Twitter" title="Twitter" src="images/social_twitter.png" /></a></li><li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow"><img alt="E-mail this story to a friend!" title="E-mail this story to a friend!" src="images/social_email.png" /></a></li></ul><p><a href="index">RSS</a>, <a href="index">脸书</a>,<a href="index">推特</a> 或者 <a href="index">电子邮箱</a></p></div><div class="col"><h3>计算机优质学习网站推荐</h3><div class="footer-list"><ul><li><a href="index.html">GitHub</a></li><li><a href="index.html">菜鸟教程</a></li><li><a href="index.html">CSDN社区</a></li><li><a href="index.html">更多...</a></li></ul></div><h3>入门视频推荐</h3><div class="footer-list"><ul><li><a href="index.html">计算机专业的就业方向介绍</a></li><li><a href="index.html">计算机专业如何做自己的职业规划？</a></li><li><a href="index.html">更多...</a></li></ul></div></div><div class="col"><h3>大家还在搜</h3><div class="footer-list"><ul><li><a href="#">Leetcode热题合集</a></li><li><a href="#">面试官最喜欢问的那些问题</a></li><li><a href="#">408计算机组成原理知识点</a></li><li><a href="#">更多...</a></li></ul></div><h3>最近留言</h3><div class="recent-comments"><ul><li><a href="index.html" title="Comment on title">哇塞，你们的想法很棒...</a><br /> - <cite>小C</cite></li><li><a href="index.html" title="Comment on title">数据结构的文章很有收获！</a><br /> - <cite>大提琴</cite></li></li><li><a href="index.html">更多...</a></li></ul></div></div><div class="col"><h3>文章合集</h3><div class="footer-list"><ul><li><a href="index.html">2024年4月合集</a></li><li><a href="index.html">2024年3月合集</a></li><li><a href="index.html">2024年2月合集</a></li> <li><a href="index.html">更多...</a></li></ul></div><h3>专业经典书籍</h3><div class="footer-list"><ul><li><a href="index.html">《深度理解计算机系统》</a></li><li><a href="index.html">《程序员的自我修养》</a></li><li><a href="index.html">《C语言程序设计》</a></li><li><a href="index.html">更多...</a></li></ul></div></div></div>
</div>
<footer><p class="footer-left">© 2024 Copyright Design by <a href="#">BrightMoonAndGalaxy</a></p><p class="footer-right"><a href="index.html">首页</a> |<a href="index.html">帮助</a> |<a href="#top" class="back-to-top">返回顶部</a></p>
</p>
</footer>
</body>
</html>
关于:
<!DOCTYPE html><html>
<head><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta charset="utf-8"/><title>明月星河</title><link rel="stylesheet" type="text/css" media="screen" href="css/main.css" /><script src="http//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script><script>window.jQuery || document.write('<script src="js/jquery-1.6.1.min.js"><\/script>')</script><script src="js/scrollToTop.js"></script></head><body id="top">
<div id="header-wrap"><header><hgroup><h1><a href="index.html">明月星河</a></h1><h3>醉后不知天在水，满船清梦压星河</h3></hgroup><nav><ul><li><a href="index.html">首页</a><span></span></li><li><a href="blog.html">博客</a><span></span></li><li><a href="reply.html">留言板</a><span></span></li><li><a href="archive.html">文章合集</a><span></span></li><li><a href="help.html">帮助</a><span></span></li><li id="current" ><a href="about.html">关于</a><span></span></li></ul></nav><div class="subscribe"><span>订阅：</span> <a href="#">电子邮箱</a> | <a href="#">RSS</a></div><form id="quick-search" method="get" action="index.html"><fieldset class="search"><label for="qsearch">搜索：</label><input class="tbox" id="qsearch" type="text" name="qsearch" value="搜索..." title="开始输入并按回车键" /><button class="btn" title="提交搜索">搜索</button></fieldset></form>
</header></div>
<div id="content-wrap"><div id="content" class="clearfix"><div id="main"><article><div><h2><a href="index.html">关于我们</a></h2><p><br>在深邃的夜空下，星辰闪烁，银河如织，我们的心灵被浩瀚的宇宙所吸引。在这样一个充满神秘与魅力的背景下，我们迎来了“明月星河”——一个融合了科技智慧与传统文化精髓的博客空间。这里，不仅是知识的海洋，更是诗意的栖居地。</br>
</p><p><strong>明月星河 —— 科技与诗意的交响</strong></p>
<strong>一、科技的畅想</strong>
<br>在“明月星河”中，我们将探索计算机科学的奥秘，从基础的算法逻辑到前沿的人工智能，每一篇技术文章都是对理性思维的一次锻炼，也是对知识边界的一次拓展。我们相信，即便是最枯燥的代码，也能编织出理性之美的图案。</br><p><mark ><b>探索计算机科学的奥秘</b></mark>
<br>- **基础算法**：逻辑的舞蹈，理性的火花。</br>
<br>- **数据结构**：构建知识的砖石，筑起智慧的高塔。</br>
<br>- **人工智能**：未来的镜像，理性与创造力的融合。</br>
</p>
<strong>二、文化的融合</strong>
<br>我们深知，技术的力量源于文化的深厚土壤。在“明月星河”，我们将中国传统文化的精髓与计算机知识相结合，让古代的智慧在现代科技的光辉下焕发新生。从诗词歌赋到哲学思想，从历史故事到民间传说，每一篇文化文章都是一次穿越时空的对话。</br>
<p><mark ><b>传统文化与计算机知识的交响</b></mark>
<br>- **诗词歌赋**：在代码的韵律中，寻找诗意的共鸣。</br>
<br>- **哲学思想**：以东方智慧，启迪技术之道。</br>
<br>- **历史故事**：在技术的长河中，回望历史的波澜。</br>
<br>- **民间传说**：让古老的故事，在数字世界里流传。</br>
</p>
<strong>三、仰望星空</strong>
<br>“醉后不知天在水，满船星河压星河”，这句诗不仅描绘了一幅美丽的夜景，也寓意着我们对未知的向往和探索。在“明月星河”中，我们鼓励每一位读者在学习技术的同时，不忘抬头仰望星空，让心灵在科技与诗意的交融中得到升华。</br>
<p><mark ><b>探索计算机科学的奥秘</b></mark>
<br>- **仰望星空**：在知识的海洋中，寻找心灵的归宿。</br>
<br>- **诗意栖居**：在理性的世界里，保持一份诗意的情怀。</br>
<br>- **探索未知**：在技术的边界，勇敢地迈出探索的脚步。</br>
</p>
<p>“明月星河”是一个桥梁，连接着科技与文化，理性与诗意。在这里，每一次点击都是一次发现之旅，每一次阅读都是一次心灵的洗礼。加入我们，一起在科技的海洋中航行，在传统文化的星空下，寻找属于自己的那颗最亮的星。</p>
</p></div></article></div><div id="sidebar"><div class="about-me"><h3>关于我们</h3><p><a href="index.html"><img src="images/gravatar.jpg" width="42" height="42" alt="firefox" class="align-left" /></a>虽然我们是计算机专业,一听到计算机就会觉得工科是偏理性的,难免会有点枯燥,但有时计算机的学习也是很有趣的,本网站不仅会分享一些技术上的知识,还会将中国传统文化与计算机知识相结合,因此明月星河不仅是对科技的畅想,更是告诉我们在学习的过程中不要忘记仰望星空 <a href="index.html">更多...</a></p></div><div class="sidemenu"><h3>边栏菜单</h3><ul><li><a href="index.html">首页</a></li><li><a href="blog.html">博客</a></li><li><a href="about.html">留言板</a></li><li><a href="archive.html">文章合集</a></li><li><a href="help.html">帮助</a></li></ul></div></div></div></div><p>
<div id="extra-wrap"><div id="extra" class="clearfix"><div class="col first"><h3>联系方式</h3><p><strong>电话： </strong>+1234567<br/><strong>微信： </strong>+123456789</p><p><strong>地址: </strong>XX大学</p><p><strong>电子邮箱: </strong>1234567@BrightMoonAndGalaxy.com</p><p>更多信息 <a href="#">请点击</a></p><h3>订阅方式</h3><ul class="subscribe-stuff"><li><a title="RSS" href="index.html" rel="nofollow"><img alt="RSS" title="RSS" src="images/social_rss.png" /></a></li><li><a title="Facebook" href="index.html" rel="nofollow"><img alt="Facebook" title="Facebook" src="images/social_facebook.png" /></a></li><li><a title="Twitter" href="index.html" rel="nofollow"><img alt="Twitter" title="Twitter" src="images/social_twitter.png" /></a></li><li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow"><img alt="E-mail this story to a friend!" title="E-mail this story to a friend!" src="images/social_email.png" /></a></li></ul><p><a href="index">RSS</a>, <a href="index">脸书</a>,<a href="index">推特</a> 或者 <a href="index">电子邮箱</a></p></div><div class="col"><h3>计算机优质学习网站推荐</h3><div class="footer-list"><ul><li><a href="index.html">GitHub</a></li><li><a href="index.html">菜鸟教程</a></li><li><a href="index.html">CSDN社区</a></li><li><a href="index.html">更多...</a></li></ul></div><h3>入门视频推荐</h3><div class="footer-list"><ul><li><a href="index.html">计算机专业的就业方向介绍</a></li><li><a href="index.html">计算机专业如何做自己的职业规划？</a></li><li><a href="index.html">更多...</a></li></ul></div></div><div class="col"><h3>大家还在搜</h3><div class="footer-list"><ul><li><a href="#">Leetcode热题合集</a></li><li><a href="#">面试官最喜欢问的那些问题</a></li><li><a href="#">408计算机组成原理知识点</a></li><li><a href="#">更多...</a></li></ul></div><h3>最近留言</h3><div class="recent-comments"><ul><li><a href="index.html" title="Comment on title">哇塞，你们的想法很棒...</a><br /> - <cite>小C</cite></li><li><a href="index.html" title="Comment on title">数据结构的文章很有收获！</a><br /> - <cite>大提琴</cite></li></li><li><a href="index.html">更多...</a></li></ul></div></div><div class="col"><h3>文章合集</h3><div class="footer-list"><ul><li><a href="index.html">2024年4月合集</a></li><li><a href="index.html">2024年3月合集</a></li><li><a href="index.html">2024年2月合集</a></li> <li><a href="index.html">更多...</a></li></ul></div><h3>专业经典书籍</h3><div class="footer-list"><ul><li><a href="index.html">《深度理解计算机系统》</a></li><li><a href="index.html">《程序员的自我修养》</a></li><li><a href="index.html">《C语言程序设计》</a></li><li><a href="index.html">更多...</a></li></ul></div></div></div>
</div>
<footer><p class="footer-left">© 2024 Copyright Design by <a href="#">BrightMoonAndGalaxy</a></p><p class="footer-right"><a href="index.html">首页</a> |<a href="index.html">帮助</a> |<a href="#top" class="back-to-top">返回顶部</a></p>
</p>
</footer>
</body>
</html>
CSS:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}
html {overflow-y: scroll;
}
body {font: 15px/24px Georgia, Serif;color: #454545;background: url(../images/bg.png);
}
a:link, a:visited {text-decoration: none;color: #147DB6;outline: 0;
}
a:hover, a:focus, a:active {color: #CC3300;
}
a:link.more, a:visited.more {font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-serif;float: left;margin-top: 10px;margin-right: 5px;padding: 6px 10px;border: 1px solid #2177A5;background-color: #227bad;color: #fff;font-size: 13px;text-shadow: 0 -1px 0 rgba(0,0,0,0.5);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;
}
a:hover.more {border: 1px solid #B32D00;background-color: #CC3300;box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #FF7242;-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #FF7242;-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #FF7242;
}
h1, h2, h3, h4 {font: bold 1em/1.5em Arial, Helvetica, Sans-Serif;margin-bottom: 24px;color: #353535;
}
h1 {font-size: 38px;line-height: 42px;margin-top: 2px;margin-bottom: 4px;letter-spacing: -2px;
}
h2 {font-size: 30px;line-height: 38px;margin-top: 5px;margin-bottom: 5px;
}
h3 {font-size: 20px;line-height: 24px;letter-spacing: 0.2px;margin-top: 12px;margin-bottom: 12px;
}
h4 { font-size: 18px; }/* Lists */
ul, ol {margin: 0 0 24px 0;padding: 0 20px;
}
ul { list-style: disc; }
ol { list-style: decimal; }dt {font-weight: bold;color: #1980AF;
}
dd {padding-left: 20px;
}p, dl { margin: 0 0 24px 0; }blockquote {margin: 12px 0;padding: 40px 30px 20px 70px;border: 1px solid #E4E6E9;background: #F3F4F5 url(../images/quote.png) no-repeat 20px 32px;font-size: 18px;line-height: 28px;font-style: italic;font-family: Georgia, 'Times New Roman', Times, Serif;color: #555;overflow: hidden;
}
blockquote .author {text-transform: uppercase;font-style: normal;letter-spacing: 1.5px;text-align: right;font-size: 12px;
}
code {font-family: Consolas, 'Lucida Console', Monaco, Monospace;font-size: 14px;line-height: 1.5em;
}
pre {white-space: pre;white-space: pre-wrap;word-wrap: break-word;margin: 0 0 24px 0;padding: 0 25px;display: block;clear: both;border: 1px solid #E4E6E9;background: #F3F4F5;
}
abbr[title], dfn[title] {border-bottom: 1px dotted;cursor: help;
}
mark {background-color: #FDD2B3;
}
strong, b {font-weight: bold;
}
.no-border {border: none;
}/* Images */
img {background: #F3F4F5;border: 1px solid #DEDFE0;padding: 15px;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;box-shadow: 0 0 5px rgba(0,0,0,0.1);-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
img.align-right { margin: 6px 0px 6px 15px; }
img.align-left { margin: 6px 15px 6px 0px; }/* Table */
table {border-collapse: collapse;margin: 12px 0 24px 0;
}
tr { background: #FFF; }
th, td {text-align: left; border-width: 1px;border-style: solid;
}
th {padding: .8em 1em;background: #2C76A6;border-color: #308ABA #308ABA #246F97 #308ABA;color: #fff;font-family: Arial, Helvetica, Sans-serif;font-size: 16px;font-weight: bold;
}
td {border-color: #E9E9E9;padding: .7em 1em;
}/* Form */
form {width: 500px;margin: 24px 0 24px 0;padding: 32px 40px;background: #E9EAEB;border: 1px solid #DFE1E6;}
input, select {vertical-align: middle;
}
form div {border-bottom: 1px solid #D8DAE0;padding: 12px 0 5px 0; margin: 0;color: #2C76A6;
}
form p {color: #1980AF;
}
form label {display: block;font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-Serif;font-weight: bold;line-height: 24px;font-size: 13px;margin: 0 0 5px 0;text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);color:#666666;
}
form label span {color: #1980AF;
}
form input,
form select,
form textarea {margin-bottom: 24px;padding: 9px 10px;color: #999;background: #fff;border-width: 1px;border-style: solid;border-color: #DCDEE2 #E9EBED #E9EBED #DCDEE2;font: 13px 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-serif;
}
form textarea {height: 325px;
}
form input:focus,
form select:focus,
form textarea:focus {background: #EEF5F9;color: #666666;
}
form input.button {height: 36px;font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-serif;margin-top: 10px;margin-right: 3px;padding: 6px 10px;border: 1px solid #2177A5;background-color: #227bad;color: #fff;cursor: pointer;text-shadow: 0 -1px 0 rgba(0,0,0,0.5);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;
}
.ie7 form input.button {padding: 0 2px;
}
#name, #email, #message, #website {width: 475px;
}/* Clearing and Alignment */
.align-left {float: left;
}
.align-right {float: right;
}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;
}
.ie7 .clearfix { zoom: 1; } /* IE7 */
#header-wrap {float: left;height: 200px;width: 100%;background: url(../images/header-bg.png) repeat-x;
}
header {position: relative;margin: 0 auto;width: 978px;
}
#content-wrap {margin: 0;padding: 0;background: url(../images/content.png);width: 100%;
}
#content {width: 978px;margin: 0 auto;padding: 0 0 24px 0;background: url(../images/content-bg.png) repeat-y left top;
}
#main {float: left;margin: 40px 0 0 0;padding: 0;width: 725px;
}
#main .main-content {padding-right: 30px;padding-left: 5px;
}#sidebar {float: right;margin: 45px 0 24px 0;padding: 0;width: 222px;
}
#extra-wrap {width: 100%;color: #C2DBE7;padding-bottom: 24px;border-top: #164F74;
}
#extra {width: 978px;margin: 0 auto;font-size: 12px;line-height: 20px;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
#extra .col {float: left;margin-left: 30px;width: 222px;
}
#extra .first {margin-left: 0;
}
footer {clear: both;width: 978px;margin: 0 auto;padding-top: 12px;font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-Serif;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);font-size: 11px;color: #C2DBE7;overflow: hidden;background: url(../images/footer-line.png) repeat-x left top;
}
header hgroup {position: absolute;background: url(../images/logo.png) no-repeat;height: 62px;width: 215px;display: block;top: 100px;left: 10px;
}
header hgroup h1 {margin: 0;padding: 0;
}
header hgroup h1 a {text-indent: -9999em;display: block;height: 48px;width: 215px;
}
header hgroup h3 {text-indent: -9999em;height: 0;
}/* Main Navigation */
header nav {position: absolute;left: 0;top: 0;width: 650px;height: 60px;
}
header nav ul {list-style: none;margin: 0;padding: 0;height: 60px;
}
header nav ul li {position: relative;float: left;
}
header nav ul a:link, header nav ul a:visited {font-family: Arial, Helvetica, Sans-Serif;font-size: 12px;font-weight: bold;display: block;margin: 0;padding: 0 11px;height: 60px;color: #BEBEBE;text-shadow: 0 -1px 0 rgba(10, 10, 10, 1);line-height: 68px;
}
header nav ul li a:hover,
header nav ul li a:active {border: none;color: #D67630;
}
header nav ul li#current a {color: #D67630;
}
header nav ul li#current span {position: absolute;display: block;background: url(../images/selected.png) no-repeat 50% 0;bottom: -9px;height: 10px;width: 100%;
}/* Subscribe */
header div.subscribe {position: absolute;font-family: Arial, Helvetica, Sans-Serif;font-size: 12px;font-weight: bold;line-height: 30px;width: 150px;height: 30px;color: #BEBEBE;text-shadow: 0 -1px 0 rgba(10, 10, 10, 1);background: url(../images/rss32.png) no-repeat 0 center;padding-left: 28px;right: 68px;top: 18px;
}
header div.subscribe a {padding-right: 3px;padding-left: 3px;color: #fff;
}
header div.subscribe a:hover,
header div.subscribe a:active {color: #D67630;
}/* Quick Search */
header form#quick-search {position: absolute;background: transparent;border: none;margin: 0;padding: 0;width: 250px;top: 110px;right: 0;
}
header fieldset.search {border: none;width: 250px;height: 38px;padding: 0;margin: 0;background: #fff;border: 1px solid #d2e2e8;
}
header .search input {border: none;float: left;padding: 0;margin: 0;
}
header .search button {border: none;float: right;padding: 0; margin: 0;
}
header .search label { display: none; }
header .search input.tbox {font-weight: normal;margin: 12px 0 10px 10px;background: transparent;width: 200px;
}
header .search button.btn {width: 38px;height: 38px;cursor: pointer;text-indent: -9999px;background: url(../images/search.png) no-repeat center center;
}
#main h2 {font-size: 34px;letter-spacing: -0.5px;
}
#main h2 a { color: #353535; }
#sidebar h3 {letter-spacing: 0.2px;margin-top: 10px;margin-bottom: 14px;
}
#sidebar .about-me img {margin: 0 15px 5px 0;padding: 10px;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;
}/* Sidemenu */
.sidemenu ul {margin: 5px 0 24px 0;padding: 0;border-top: 1px solid #E5E5E5;color: #959595
}
.sidemenu ul li {list-style: none;margin: 0;padding: 7px 5px;border-bottom: 1px solid #E5E5E5;
}
.sidemenu ul li a:link,
.sidemenu ul li a:visited {color: #33799B;padding: 0;font-weight: bold;text-transform: uppercase;font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Verdana, Sans-Serif;font-size: 12px;
}
.sidemenu ul li a span {display: block;color: #858585;font-family: Verdana, Sans-Serif;font-style: normal;font-weight: normal;font-size: 11px;line-height: 16px;text-transform: none;
}
.sidemenu ul li a:hover { color: #CC3300; }
.sidemenu ul ul { margin: 0 0 0 5px; padding: 0; }
.sidemenu ul ul li { border: none; }/* Popular */
.popular ul li {line-height: 18px;
}
.popular ul li a:link,
.popular ul li a:visited {text-transform: none;
}
.popular ul li a span {line-height: 16px;margin-top: 6px;
}
#extra p {font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-serif;
}
#extra strong, #extra em, #extra b, #extra i {font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Verdana, sans-serif;
}#extra a:link,
#extra a:visited { color: #fff; }
#extra a:hover { color: #99CCFF; }#extra h3 {font: bold 18px 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Verdana, Sans-Serif;margin-bottom: 15px;color: #fff;
}/* Gallery */
#extra #gallery {padding: 0 0 15px 0;margin: 0 0 36px 0;width: 100%;background: url(../images/footer-line.png) repeat-x left bottom;
}
#extra #gallery h3 {float: left;width: 222px;margin: 30px 0 0 0;padding: 0;
}
#extra #gallery p.thumbs {float: right;width: 750px;margin: 20px 0 0 0;padding: 0;
}
#extra #gallery p.thumbs img {position: relative;padding: 9px;margin: 10px 0 10px 12px;background: #FAFAFA;border: 1px solid #EDEDED;float: right;-moz-box-shadow: 1px 1px 3px #184569 ;-webkit-box-shadow: 1px 1px 3px #184569;box-shadow: 1px 1px 3px #184569;
}/* Recent Comments */
.recent-comments ul {margin-left: 0;padding: 0;background: url(../images/footer-line.png) repeat-x left top;font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, sans-serif;
}
.recent-comments ul li {list-style: none;font-size: 12px;line-height: 1.5em;padding: 7px 5px 7px 22px;background: url(../images/speech-bubble.png) no-repeat 2px 12px;/* border-bottom: 1px solid #326B8D; */
}
.recent-comments ul li a:link,
.recent-comments ul li a:visited {padding-left: 0;
}
.recent-comments ul li cite {font-size: .9em;font-style: normal;
}/* footer-list */
.footer-list ul {background: url(../images/footer-line.png) repeat-x left top;list-style: none;padding: 0;margin-left: 0;
}
.footer-list ul li {border-bottom: 1px solid #326B8D;
}
.footer-list ul li a:link,
.footer-list ul li a:visited {font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-Serif;display: block;padding: 7px 0 7px 5px;margin-left: 0;color: #fff;
}
.footer-list ul li a:hover { color: #99CCFF; }/* Subscribe Stuff */
ul.subscribe-stuff {list-style: none;margin: 0;padding: 0;
}
ul.subscribe-stuff li {float: left;margin: 0 3px 12px 0;padding: 0;
}
ul.subscribe-stuff li img {padding: 0;margin: 0;border: none;background: none;
}/* ----------------------------------------------------------------------------F O O T E R
----------------------------------------------------------------------------- */
footer a:link,
footer a:visited {color: #fff;
}
footer a:hover {color: #99CCFF;
}
footer a.back-to-top {background: url(../images/back-to-top.png) no-repeat right 2px;font-weight: bold;padding-right: 16px;
}
footer p.footer-left {float: left;margin: 0 0 30px 0;padding: 0;width: 600px;text-align: left;
}
footer p.footer-right {float: right;margin: 0 0 30px 0;padding: 0;width: 320px;text-align: right;
}
.post {margin: 0 0 60px 0;padding: 0 0 48px 0;width: 726px;overflow: hidden;border-bottom: 1px solid #E5E5E5;
}
.post.single {margin-bottom: 20px;
}
.primary {width: 533px;float: right;padding-right: 25px;
}
.primary .image-section {clear: both;display: block;margin: 15px 0 10px 0;padding: 0;
}aside {position: relative;width: 135px;float: left;
}
aside p.dateinfo {background: url(../images/date-bg.png) no-repeat;height: 70px;width: 60px;margin: 10px 0 0 78px;padding: 7px 0 0 0;font: bold 15px Arial, Helvetica, sans-serif;text-transform: uppercase;text-align: center;letter-spacing: 2px;color: #fff;text-shadow: 0 -1px 0 rgba(10, 10, 10, 1);
}
aside p.dateinfo span {font: bold 26px 'Lucida Grande','Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-Serif;display: block;color: #444;margin: 5px 0 0 0;padding: 0;letter-spacing: 0;text-shadow: none;
}
aside .post-meta {width: 138px;font-size: .9em;margin: 20px 0;padding: 0;
}
aside .post-meta h4 {text-align: right;margin: 0 0 12px 0;padding: 0;font-size: 18px;font-weight: bold;letter-spacing: 0;
}
aside .post-meta ul {list-style: none;margin: 0;padding: 0;border-top: 1px solid #E5E5E5;
}
aside .post-meta ul li {padding: 4px 0;margin: 0;text-align: right;border-bottom: 1px solid #E5E5E5;
}aside .post-meta ul.tags li { background: url(../images/tag.png) no-repeat 2px center; }
aside .post-meta ul li.user { background: url(../images/user.png) no-repeat 2px center; }
aside .post-meta ul li.time { background: url(../images/clock.png) no-repeat 2px center; }
aside .post-meta ul li.comment { background: url(../images/comment.png) no-repeat 2px center; }
aside .post-meta ul li.permalink { background: url(../images/permalink.png) no-repeat 2px center; }aside .post-meta ul li a {font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-Serif;font-size: 12px;
}
aside .post-meta ul li a { color: #666666; }
aside .post-meta ul li a:hover { color: #CC3300; }
.post-bottom-section {position: relative;margin: 10px 0 20px 0;padding: 0 0 20px 0;width: 726px;overflow: hidden;border-bottom: 1px solid #E5E5E5;
}
.post-bottom-section h4 {position: absolute;left: 0px; top: 5px;text-align: right;width: 135px;font-size: 18px;font-weight: bold;letter-spacing: 0;margin: 0;padding: 0;
}
.post-bottom-section .primary form {position: relative;top: 15px; left: 0;margin: 0 0 20px 0;width: 447px;
}.post-bottom-section .primary form #name,
.post-bottom-section .primary form #email,
.post-bottom-section .primary form #message,
.post-bottom-section .primary form #website {width: 425px;
}
.post-info {margin-left: 3px;font-size: 14px;line-height: 18px;
}
.post-info span {font-style: italic;margin-right: 3px;
}.post .post-info a:link,
.post .post-info a:visited {color: #1372a8;border: none;font-size: .9em;
}
.post .post-info a:hover {color: #CC3300;
}/* Comments List */
ol.commentlist {margin: 12px 5px 12px 0;padding: 0;background: #FAFAFA;border-top: 1px solid #E3E6E8;
}
.commentlist li {list-style: none;margin: 0;padding: 12px 0 0 0;border: 1px solid #E3E6E8;border-width: 0 1px 1px 1px;overflow: hidden;
}
.commentlist li a:link,
.commentlist li a:visited {color: #227bad;
}
.commentlist li a:hover {color: #CC3300;
}
.commentlist li .comment-info {width: 99%;margin: 5px 0 0 0; padding: 0;overflow: hidden;
}
.commentlist li .comment-info img {float: right;margin: 3px 20px 0 0;padding: 10px;background: #fff;border: 1px solid #DBDBDB;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;
}
.commentlist li .comment-info cite {display: block;margin: 0; padding: 5px 65px 5px 25px;font-style: normal;
}
.commentlist li .comment-info cite .comment-data {font-size: .8em;font-weight: normal;
}
.commentlist li .comment-text {clear: both;margin: 10px 0 0 0; padding: 0 25px 25px 25px;
}
.commentlist li .comment-text p {margin: 5px 0 20px 0;padding: 0;
}
.commentlist li .comment-text .reply a {padding: 6px 7px;border: 1px solid #2177A5;background-color: #227bad;font-family: 'Lucida Grande', 'Lucida Sans', 'Lucida Sans Unicode', Verdana, Sans-Serif;font-size: 11px;font-weight: bold;color: #fff;text-shadow: 0 -1px 0 rgba(0,0,0,0.5);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;
}
.commentlist li ul.children { margin:0; padding: 0; }
.commentlist li ul.children li.depth-2,
.commentlist li ul.children li.depth-3 {margin-left: 40px;border-style: solid;border-color: #DEE2E4;border-width: 1px 0 0 1px;
}
.commentlist li.thread-alt {background: #F3F4F5;border-color: #DDDFE3;
}/* ------------------------------------------------------------------------------A R C H I V E S
--------------------------------------------------------------------------------- */
ul.archive {margin: 10px 0 10px 0;padding: 0;border-top: 1px solid #E5E5E5;
}
ul.archive li {margin: 0;padding: 14px 5px;border-bottom: 1px solid #E5E5E5;list-style: none;
}
ul.archive li .post-title {margin: 0; padding: 0;font-family: Arial, Helvetica, Sans-Serif;font-weight: bold;font-size: 18px;
}
ul.archive li .post-title a:link,
ul.archive li .post-title a:visited {color: #444;
}
ul.archive li .post-title a:hover {border: none;color: #CC3300;
}
ul.archive li .post-details {margin-left: 0;margin-top: 0;font-size: .9em;color: #777;
}
ul.archive li .post-details span {padding-left: 5px;padding-right: 5px;color: #999;
}
ul.archive li .post-details a:link,
ul.archive li .post-details a:visited {color: #1372a8;
}
ul.archive li .post-details a:hover {color: #CC3300;
}/* Page Navigation */
.navigation {margin: 20px 0 20px 5px; padding: 0;
}
.navigation a:link,
.navigation a:visited {font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, Sans-serif;float: left;display: block;margin: 10px 10px 0 0;padding: 5px 7px;text-transform: lowercase;text-decoration: none;border: 1px solid #2177A5;background: #227bad;color: #fff;font-size: 13px;text-shadow: 0 -1px 0 rgba(0,0,0,0.5);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #3CA5D2;
}
.navigation a:hover {border: 1px solid #B32D00;background: #CC3300;box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #FF7242;-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #FF7242;-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3), inset 0 1px 0 #FF7242;
}.carousel {position: relative;width: 80%; margin: auto;}.carousel-image {width: 100%;display: none;animation: fade 1.5s ease-in-out infinite;}@keyframes fade {from {opacity: .4}50% {opacity: 1}to {opacity: .4}}/* 初始时只显示第一张图片 */.carousel-image:first-child {display: block;}JS:
scrollToTop.js
$(document).ready(function() {$("a.back-to-top").click(function() {$("html, body").animate({scrollTop: $($(this).attr("href")).offset().top + "px"}, {duration: 400,easing: "swing"});return false;});});