本課：div+css實現首頁效果：
開發工具：xampp + phpstorm
筆記目的：僅做記錄使用，方便日后查看
代碼目錄結構：
index.php:
<?php define("ROOT_WEB",true); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style/1/basic.css"> <link rel="stylesheet" type="text/css" href="style/1/index.css"> <title>Title</title> </head> <body> <?php include dirname(__FILE__).'/includes/header.inc.php'?> <div id="list"> list </div> <div id="user"> user </div> <div id="pics"> pics </div> <?php include dirname(__FILE__).'/includes/footer.inc.php'?> </body> </html>
basic.css
@charset "UTF-8"; * { margin: 0; padding:0; } body { width:960px; height: auto; margin:0 auto; background: #fff; font-size: 14px; } ul { list-style-type: none;/* ul前的圓點 */ }
index.css
#header { width:auto; height:150px; border:2px solid #ccc; margin: 10px 0; } #header h1 { font-size:12px; width:210px; height:39px; background:url("../../images/logo1.jpg") no-repeat; margin:40px 0 0 50px; } #header h1 a { width:210px; height:39px; display:block; text-indent:-9999px; /* 縮進 */ /*border:2px solid #ccc;*/ } #header ul{ text-align: right; padding: 30px 50px 0 0; } #header ul li { display: inline;/* 在一行顯示 */ margin: 0 0 0 10px;/* li標簽之間的距離 分別是上 右 下 左； margin: 0 auto 表示的是上下，左右*/ } #header ul li a{ color: #333; text-decoration: none; /*a標簽去掉下划線*/ } #header ul li a:hover{ color: #f00;/*鼠標放上去變紅顏色*/ } #list { width:600px; height:514px; border:2px solid #ccc; float: right; } #user { width:340px; height:250px; border:2px solid #ccc; /*solid 實線; dashed 虛線*/ float: left; margin: 0 0 10px 0; } #pics { width: 340px; height:250px; border:2px solid #ccc; float: left; margin: 0 0 10px 0; } #footer { clear: both; width: auto; height:60px; /*border:2px solid #ccc;*/ text-align: center; } #footer p{ font-size:12px; letter-spacing: 1px; /*字體之間的間距*/ padding:10px 0 0 0; } #footer p span { color: blue; }
header.inc.php
<?php //防止外部惡意調用 在瀏覽器中直接輸入此PHP地址 if (!defined("ROOT_WEB")){ exit("access denied"); } ?> <div id="header"> <h1><a href="index.php">瓢城Web俱樂部多用戶留言系統</a></h1> <ul> <li><a href="index.php">首頁</a></li> <li><a href="register.php">注冊</a></li> <li>登錄</li> <li>個人中心</li> <li>風格</li> <li>管理</li> <li>退出</li> </ul> </div>
footer.inc.php
<?php if (!defined("ROOT_WEB")){ exit("access denied"); } ?> <div id="footer"> <p>版權所有 翻版必究</p> <p>本程序由<span>瓢城Web俱樂部</span>提供 源碼可任意修改和發布 ©2016-1019</p> </div>
logo1.jpg
重點：1、clear: both; 清除浮動
不加clear both 同時給<div id="footer">加上border，可以看到如下效果
2、text-decoration: none;a標簽去掉下划線
3、li display: inline; li標簽 在一行顯示
4、letter-spacing: 1px; 字體之間的間距
word-spacing:1px; 單詞之間的間距 中文無效
letter-spacing:1px; 字符之間的間距
5、加注釋的地方多注意