建立自己的导航网页

    动手在自己的笔记本上建立一个简单的导航网站。


    这个文件的生成过程:原本我的站点是没有导航思路的,只是在网页根目录下生成一些空文件名,通过这些文件名在配置文件中映射到别名空间。然后有选择的为别名空间设定访问权限(用户名・密码验证),以限制某些用户登录。然后在浏览器中测试验证,通过后在浏览器页面保存网页代码,然后把该网页代码保存为适当的文件名就有了导航页面的基本功能。然后添加可以链接到公网的项目就有了下面的代码。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<html>

 <head>

  <title>Sunny's Web/</title>

 </head>

 <body>

<h1>这是个人站点 </h1>

<li><a href="apache2.2"> apache 2.2帮助页</a></li>

<li><a href="apache2.2.13"> apache2.2.13 帮助页</a></li>

<li><a href="apache2.2.15"> apache2.2.15 帮助页</a></li>

<li><a href="datangkeji"> 大唐科技</a></li>

<li><a href="download"> 资料下载</a></li>

<li><a href="electric_books"> 电子书</a></li>

<li><a href="linux.x64_11gR2_client"> linux.x64_11gR2_client</a></li>

<li><a href="linux.x64_11gR2_database"> linux.x64_11gR2_database</a></li>

<li><a href="linux.x64_11gR2_examples"> linux.x64_11gR2_examples</a></li>

<li><a href="oracle"> oracle 学习</a></li>

<li><a href="oracle_client"> oracle_client 学习</a></li>

<li><a href="sandaxiangmu"> 燃料三大项目</a></li>

<li><a href="linux"> linux download</a></li>

<li><a href="http://sunnybay.blog.51cto.com/"> 小崔的实验笔记</a></li>

<li><a href="http://www.haosou.com/"> 好搜</a></li>

</body></html>


别名设置

alias /sandaxiangmu "d:/htdocs/Three"

<Directory "d:/htdocs/Three">

    Options Indexes FollowSymLinks

    AllowOverride None

    Order allow,deny

    Allow from all

</Directory>

alias /datangkeji "D:/datangkeji"

<Directory "D:/datangkeji">

    Options Indexes FollowSymLinks

    AllowOverride None

    Order allow,deny

    Allow from all

    AuthName "runndy authname"

    AuthType basic

    AuthUserFile "C:/Program Files (x86)/Apache Software Foundation/Apache2.2/conf/sunny"

    Require valid-user

</Directory>


别名目录

wKioL1T1pDLgxAY4AAFBQCaAebM348.jpg

wKiom1T1o0OSAsZGAACgzoSSTik191.jpg

* D:盘下有个隐藏目录用来让 apache 访问,快捷方式用来通过目录访问。


效果

wKiom1T1n9TQu7AFAAECx6eKwqA257.jpg


最后两项是链接到公网的站点地址,前面的都是本地的别名空间。


≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈

1 改进下:

    wKioL1XtogWjUEHEAAKft_tG5jg037.jpg


效果:

    wKiom1Xtn-uxBew5AAEXmDSiebQ061.jpg


≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈

2 改进下:

    wKioL1Xuy4mi1e7kAARQNGq-rrg664.jpg


效果:

感觉上,跟上边的效果有些差异;原因是上边是在360浏览器察看的效果,这次是IE浏览器察看的效果。


    wKiom1XuyV-DHBIoAAGnvXu2N5E561.jpg


≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈

改进下:


代码修改如下

    wKiom1XvyJTgG7KsAAI8OEQGsSY840.jpg


改进后的效果如下:

    wKioL1XvytfTxoL5AAItM9sISfg462.jpg


≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈

改进下:

设定字体颜色、加粗

    

    wKioL1Xv0nnzzSIdAAA61l-1dTc570.jpg


    wKioL1Xv1l_DzUh3AAgI1v-Dl2I880.jpg


效果如下:

    wKiom1Xv1IiiN90nAAJK8nJpjwM411.jpg


≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈

改进下:

wKiom1Xv8g_Cj5pfAADmFl0prew470.jpg



wKioL1XicGnS5aw6AABngpxKQnk234.jpg

本文出自 “小崔的实验笔记” 博客,谢绝转载!

你可能感兴趣的:(用户名,笔记本,用户登录,导航网站)