渝石网络站长个人网站设计总结
渝石网络主站：http://www.fishsting.com/
渝石网络分站：http://www.fishsting.cn/

渝石网络站长的个人网站（http://www.huangjianchun.cn/）自完成后在内网运行了将近2个月，今天终于正式在小木虫和水木清华中公开了，反应总体上还算不错，虽然有些小的瑕疵，但是总体上并不影响个人网站的完美，自认为是目前在国内网络中见到的最好的个人网站，所以本人自试运行开始到现在，心里一直都充满了满满的成就感，因为这段时间我一直在代码中寻求最简单而实用的技术来满足网站的可重用性和实用性，目前，就我所学到的一些技术做一个简单的总结，以备日后学习之用（该文已上传豆丁网，可直接查看下载）。
网站的整体框架在参考我幺儿网站的基础上，只花了一天的时间基本上就完成，所有的代码基本上是从零开始编写，比以前的代码更简洁、更易懂，反正完成之后，我觉得我的水平又进步了不少，之后，马上就转入了测试阶段，测试阶段主要完成了友情连接的代码的重组，为了乱码问题花费了差不多一上午的时间，再就是新闻分页的问题，在朋友的帮忙下很快就完成了，关于其中的主要细节问题，现总结如下：
  1. 对网页中乱码的产生的根源有了更深的了解，花费了不少的时间解决这个问题，最后终于解决了，就是在每页的开头加上如下一条指令： <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001" %> 其中65001为UTF-8的代码，注意一定要在开头设置该指令；
  2. 对分页代码有了很好的理解，并在首页实现了新闻分页显示，使得版面的排版更清晰；
  3. 对工作经历模块采用了JavaScript代码进行分块显示，显示代码由JS代码和CSS代码共同控制，这样对页面的控制更加合理；
  4. 在首页的新闻模块中，采用伪元素实现了首字符的显示和图片的显示，其代码如下：
    （1）伪元素实现首字符的显示
    .jiantou::before{
    content: "★";
    color:crimson;
    padding-right: 10px;
    }
    （2）伪元素实现了图片的显示
    .news .read::before{
    content: "";
    display: inline-block;
    width: 20px; /* 图片宽度 */
    height: 15px;
    background-image: url('../images/read.png');
    background-size: cover;
    margin-right: 3px;
    vertical-align: middle;
    }
    关于伪类和伪元素的知识可以参考我写的总结资料《CSS伪类和伪元素的区别》。
  5. 表格具有自动调整列宽的能力，它会根据内容的长度自动调整列的宽度，以确保内容不会被截断。因此，即使我们将CSS属性设置为overflow: hidden，表格仍然会根据内容调整列宽，导致溢出的内容无法被隐藏。表格中超长字符的处理方法，其方法如下：
    （1）首先将表格中的单元格长度固定：
    section .mynews table{
    table-layout: fixed;
    }
    （2）再对单元格中超长字符进行处理
    .news td{
    padding-right: 10px;
    white-space: nowrap; 不换行
    overflow: hidden; 超长就隐藏
    text-overflow: ellipsis; 用省略号代替超出的文本
    border-bottom: 1px solid #ccc;
    }
  6. 在网站的首页加入IP统计的代码，使得对网站的监管将变得更加方便。
  7. 在作品展示模块，采用JS和CSS的技术实现了照片墙的效果，注意理解相对定位和绝对定位的区别以及方法。
  8. 采用伪类获取表格的第一行，并对第一个单元格中的超链接的字体样式进行修改，其代码如下：
    .news tr: first-of-type .jiantou a{
    color: red;
    font-weight: bold;
    }
    关于nth-of-type和nth-child的区别如下：
    （1）nth-child(n) : 匹配父元素中的第 n 个子元素，元素类型没有限制。
    （2）nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。
  9. 表格实现代码可以参考test中的testtable.html文件，注意真正表格要加上caption主题标签、thead表头标签以及主体tbody标签，在CSS样式表中，cellspacing和cellpadding都已经淘汰，一般采用collapse替代cellspacing="0"，用th、td的属性pading：0替代cellpadding="0"；
  10. 实现代码段的整体缩进，只要设置margin-left属性为2em就行，注意与text-intent属性的区别；
  11. 实现了图片作为背景的效果，关于背景属性的使用方法可以参考我的写的《CSS背景属性总结》即可。
  12. 图片与图片之间的间隙可以在父标签中采用font-size=0的方法出去，对inline的标签（a和span）之间的空隙也如同图片一样处理，但是要注意在a和span中重新定义font-size，另外还得注意vertical-align属性对block标签无效。
  13. 时间的转换，将时间转换为年月日，代码如下：
    Dim currentDate
    currentDate = now() '获取当前日期和时间
    '格式化日期为年月日
    Dim formattedDate
    formattedDate = FormatDateTime(currentDate, 2)
  14. 表格居中的方法：在CSS中加入：margin:auto即可。
以上就是我对站长个人网站设计的一个简单的总结，虽不完美，但是我还是觉得很有必要，因为只有这样，才能使以后的工作奔上一个更高的台阶。最后希望大家为网站的建设和发展提出更多的建议，如果您见到网上有更好的个人网站，一定要来信或来电告诉我，在此，对您的支持和鼓励表示衷心的感谢！
学生：黄建春
2024年05月15日