本课：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:;

    padding:;

}

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>提供 源码可任意修改和发布 &copy;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、加注释的地方多注意 


												


											
一步步学习PHP笔记(李炎恢瓢城web俱乐部-多用户留言系统)01的更多相关文章
	

    
								
  1. 深度学习课程笔记（十一）初探 Capsule Network
		
    深度学习课程笔记(十一)初探 Capsule Network  2018-02-01  15:58:52 一.先列出几个不错的 reference: 1. https://medium.com/ai% ...
    
		
    2. 
						
  2. WCF入门教程（四）通过Host代码方式来承载服务  一个WCF使用TCP协议进行通协的例子  jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding   System.ServiceModel.WSHttpBinding协议  学习WCF笔记之二   无废话WCF入门教程一[什么是WCF]
		
    WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...
    
		
    3. 
						
  3. 一步步学习javascript基础篇（0）:开篇索引
		
    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
    
		
    4. 
						
  4. 一步步学习javascript基础篇（8）：细说事件
		
    终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...
    
		
    5. 
						
  5. 一步步学习javascript基础篇（7）：BOM和DOM
		
    一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...
    
		
    6. 
						
  6. 每天成长一点---WEB前端学习入门笔记
		
    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
    
		
    7. 
						
  7. 一步步学习javascript基础篇（6）：函数表达式之【闭包】
		
    回顾前面介绍过的三种定义函数方式 1. function sum (num1, num2) { return num1 + num2; }  //函数声明语法定义 2. var sum = funct ...
    
		
    8. 
						
  8. 一步步学习javascript基础篇（5）：面向对象设计之对象继承（原型链继承）
		
    上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 ...
    
		
    9. 
						
  9. 一步步学习javascript基础篇（4）：面向对象设计之创建对象（工厂、原型和构造函数等模式）
		
    前面我们介绍了可以通过Object构造函数或对象字面量都可以用来创建单个对象,但是如果需要创建多个对象的话,显然很多冗余代码. 接下来介绍几种模式来创建对象.不过在此之前,我们还是先来了解下 type ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. WCF_Config頁面常用配置
			
    右键点击App.config文件,选中Edit WCF Configuration进行编辑,我们添加2个baseAddress,一个是基于HTTP协议的:一个是基于TCP协议的.同时添加2个bindi ...
    
			
    2. 
						
  2. Python cookbook-读书笔记01
			
    1 数据结构和算法 1.1 Unpacking a sequence into separate variable(解包,赋值) >>> data = [ 'ACME', 50, 9 ...
    
			
    3. 
						
  3. Scrum流程
			
    敏捷Scrum流程图: Sprint Planing Meeting: 1.Next Spring Goal; 2.Sprint Backlog; 3.Updated Product Backlog; ...
    
			
    4. 
						
  4. RFID之UID
			
    1 Unique identifier (UID) The VICCs are uniquely identified by a 64 bits unique identifier (UID). Th ...
    
			
    5. 
						
  5. linux进程控制命令
			
    & 加在一个命令的最后,可以把这个命令放到后台执行 ,如gftp &. ctrl + z 可以将一个正在前台执行的命令放到后台,并且处于暂停状态,不可执行. jobs 查看当前有多少在 ...
    
			
    6. 
						
  6. css font-face自定义字体
			
    font-face:自定义字体 1.找到一个字体文件 2.放入新建的的font的文件夹内: 3.在样式里面以下内容 注释:aa是字体名 <style> @font-face{     fo ...
    
			
    7. 
						
  7. cocos2d-x 知识小结（1）zorder和tag
			
    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
    
			
    8. 
						
  8. Java沙箱技术
			
    自从Java技术出现以来,有关Java平台的安全性及由Java技术发展所引发的新的安全性问题,引起了越来越多的关注.目前,Java已经大量应用在各个领域,研究Java的安全 性对于更好地使用Java具 ...
    
			
    9. 
						
  9. Ubuntu之系统交换分区Swap增加与优化
			
    http://os.51cto.com/art/201212/372860.htm   http://blog.csdn.net/xingyu15/article/details/5570225    ...
    
			
    10. 
						
  10. 安装CiscoWorks LMS
			
    安装CiscoWorks LMS,需要安装5张光盘,CiscoWorks LMS的安装步骤比较简单,在这里只介绍需要的重要步骤. 1．安装CD One 将CiscoWorks 2000 LMS CD  ...
    
			
    11.