PHP로 개발된 게시판 페이지 레이아웃

이전 장에서 메시지 게시와 메시지 표시가 한 페이지를 사용한다고 이미 언급했으므로, 여기서 배운 HTML 및 CSS 지식을 활용하여 간단한 페이지 레이아웃을 만들 수 있습니다. 튜토리얼은 다음과 같습니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
<body>
<div id="left">
    <img src="images/reg.jpg">
</div>
<div id="center">
    <h1>留言内容</h1>
</div>
<div id="right" >
    <h2>留言板</h2>
    <div > <a href="">首页</a> | <button>留言</button> <a href="" class="right">管理员登录</a>
        <form method="post" action="ressage_post.php" style="display:none;" onsubmit="return foo();" name="myform" ">
        <div class="form">
            <p>
                姓名：<input type="text" name="name">
            </p>
            <p>
                邮箱：<input type="email" name="email">
            </p>
            <p>
                留言内容：<br/>
                <textarea cols="30" rows="7" name="content"></textarea>
            </p>
            <p>
                验证码：<input type="text" name="vcode"><img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand">
            </p>
            <p>
                <button class="button">提交留言</button>
            </p>
        </div>
        </form>
    </div>
</body>
</html>

위 코드에서는 페이지를 세 부분으로 나누었습니다. 첫 번째 <div id="left">에 이미지가 배치됩니다. 사진은 다음과 같습니다

두 번째 <div id="center">에는 우리가 게시하고 표시한 메시지가 포함되어 있습니다.

세 번째 <div id="right" > 메시지를 제출하는 데 사용되는 양식

위 코드에서는 CSS 스타일을 사용하지 않았으므로 페이지가 매우 보기 흉해 보입니다. 다음 장에서는 페이지 레이아웃 스타일을 사용한 것을 보여 드리겠습니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言板</title> <body> <div id="left"> <img src="https://img.php.cn//upload/image/460/147/285/1477727203382106.jpg"> </div> <div id="center"> <h1>留言内容</h1> </div> <div id="right" > <h2>留言板</h2> <div > <a href="">首页</a> | <button>留言</button> <a href="" class="right">管理员登录</a> <form method="post" action="ressage_post.php" style="display:none;" onsubmit="return foo();" name="myform" "> <div class="form"> <p> 姓名：<input type="text" name="name"> </p> <p> 邮箱：<input type="email" name="email"> </p> <p> 留言内容：<br/> <textarea cols="30" rows="7" name="content"></textarea> </p> <p> 验证码：<input type="text" name="vcode"><img src="yanzhengma.php" onClick="this.src='yanzhengma.php?nocache='+Math.random()" style="cursor:hand"> </p> <p> <button class="button">提交留言</button> </p> </div> </form> </div> </body> </html>

제출하다 코드 재설정

자동운전