目次
ここの CSS コード レイアウトは、CSS ファイル内の mycss.css 実装を呼び出します: " > ここの CSS コード レイアウトは、CSS ファイル内の mycss.css 実装を呼び出します:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>《分布式系统》精品课程学习</title><link href="css/mycss.css" type="text/css" rel="stylesheet"/><style type="text/css"> /* 这个链接改变颜色 */ a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00}</style></head><body> <!-- 布局顶部登录状态 --><div id="main"><TABLE cellSpacing=0 cellPadding=0 width="100%" background="images/header_bg.gif" border=0> <!--头部图片--> <TR height=80> <TD width=260> <IMG height=80 src="images/logo.png" width=260> </TD> <TD style="FONT-SIZE: 12px; FONT-WEIGHT: bold; COLOR: #000; PADDING-TOP: 20px; PADDING-RIGHT: 20px" align=right> 您还未登录! | <A class="one" href="login.php" >登录</A>| <A class="one" href="register_student.php" >学生注册</A>| <A class="one" href="register_teacher.php" >教师注册</A> </TD> </TR></TABLE><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TR bgColor=#1c5db6 height=4> <TD></TD></TR></TABLE><br /><!-- 布局中部 --><div id="middle"><!-- 布局中部右边 --> <div id="index_right"><iframe height="100%" width="100%" border="0" frameborder="0" src="main_right.php" name="rightFrame" id="rightFrame" title="rightFrame"></iframe></div><!-- 布局中部左边 --><div id="index_left"><?php include('main_left.php');?></div></div>ログイン後にコピー
PHP+HTML は BBS フォーラムと返信を実装するだけです
この記事では主に、PHP+HTML を使用して BBS フォーラムと投稿/返信機能を簡単に実装する方法について説明します。これは、PHP プロジェクトのコンテンツの一部を抽出するものです。主な内容は次のとおりです。
そのため、SAE を使用してオンラインのバックエンド データベースを構築し、他のものは Apache を使用してローカルで Web ページを設計し、データベースにアクセスしました。これは、単純な BS の 3 端末アクセスに相当します。
ソースコードのダウンロードアドレス:
http://localhost:8080/testphp/index.php にアクセスすると以下のようになります:
最初のステップはホームページのレイアウトを構築することです。メインのレイアウトは head、main_left、main_right に分かれています。右側の表示部分は iframe で実装された部分表示を使用しており、左側は JavaScript を使用してクリックによる非表示と表示の機能を実装しています。 Index.php ホームページのコードは次のとおりです:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>《分布式系统》精品课程学习</title><link href="css/mycss.css" type="text/css" rel="stylesheet"/><style type="text/css"> /* 这个链接改变颜色 */ a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00}</style></head><body> <!-- 布局顶部登录状态 --><div id="main"><TABLE cellSpacing=0 cellPadding=0 width="100%" background="images/header_bg.gif" border=0> <!--头部图片--> <TR height=80> <TD width=260> <IMG height=80 src="images/logo.png" width=260> </TD> <TD style="FONT-SIZE: 12px; FONT-WEIGHT: bold; COLOR: #000; PADDING-TOP: 20px; PADDING-RIGHT: 20px" align=right> 您还未登录! | <A class="one" href="login.php" >登录</A>| <A class="one" href="register_student.php" >学生注册</A>| <A class="one" href="register_teacher.php" >教师注册</A> </TD> </TR></TABLE><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TR bgColor=#1c5db6 height=4> <TD></TD></TR></TABLE><br /><!-- 布局中部 --><div id="middle"><!-- 布局中部右边 --> <div id="index_right"><iframe height="100%" width="100%" border="0" frameborder="0" src="main_right.php" name="rightFrame" id="rightFrame" title="rightFrame"></iframe></div><!-- 布局中部左边 --><div id="index_left"><?php include('main_left.php');?></div></div>ログイン後にコピー ここの CSS コード レイアウトは、CSS ファイル内の mycss.css 実装を呼び出します:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>《分布式系统》精品课程学习</title><link href="css/mycss.css" type="text/css" rel="stylesheet"/><style type="text/css"> /* 这个链接改变颜色 */ a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00}</style></head><body> <!-- 布局顶部登录状态 --><div id="main"><TABLE cellSpacing=0 cellPadding=0 width="100%" background="images/header_bg.gif" border=0> <!--头部图片--> <TR height=80> <TD width=260> <IMG height=80 src="images/logo.png" width=260> </TD> <TD style="FONT-SIZE: 12px; FONT-WEIGHT: bold; COLOR: #000; PADDING-TOP: 20px; PADDING-RIGHT: 20px" align=right> 您还未登录! | <A class="one" href="login.php" >登录</A>| <A class="one" href="register_student.php" >学生注册</A>| <A class="one" href="register_teacher.php" >教师注册</A> </TD> </TR></TABLE><TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TR bgColor=#1c5db6 height=4> <TD></TD></TR></TABLE><br /><!-- 布局中部 --><div id="middle"><!-- 布局中部右边 --> <div id="index_right"><iframe height="100%" width="100%" border="0" frameborder="0" src="main_right.php" name="rightFrame" id="rightFrame" title="rightFrame"></iframe></div><!-- 布局中部左边 --><div id="index_left"><?php include('main_left.php');?></div></div>ログイン後にコピー
html, body { height: '100%'; width: '100%';}/*头部布局*/#main{ margin-left:200px; width:950px;}/*中部布局*/#middle{ width:950px; height:500px; background-color:#b6effa;}/*中部左边*/#index_left{ float:left; margin-top:10px; margin-left:10px; width:180px; height:480px;}/*中部右边*/#index_right{ float:right; margin-top:10px; margin-right:20px; width:720px; height:480px; border-style:double;}/*中部右边*/#logout_middle{ float:right; margin-top:100px; margin-right:220px; width:500px; height:300px; border-style:double; background-color:#ffffff;}ログイン後にコピー