本课：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. stl 中List vector deque区别
			
    stl提供了三个最基本的容器:vector,list,deque.         vector和built-in数组类似,它拥有一段连续的内存空间,并且起始地址不变,因此     它能非常好的支持随 ...
    
			
    2. 
						
  2. Numpy中的矩阵计算
			
    矩阵初始化 支持matlab语句初始化,支持narray和array初始化. >>> import numpy as np >>> M = np.matrix(&q ...
    
			
    3. 
						
  3. poj 3006 Dirichlet's Theorem on Arithmetic Progressions
			
    题目大意:a和d是两个互质的数,则序列a,a+d,a+2d,a+3d,a+4d ...... a+nd 中有无穷多个素数,给出a和d,找出序列中的第n个素数 #include <cstdio&g ...
    
			
    4. 
						
  4. HDU 1846 Brave Game（简单巴什博弈）
			
    Brave Game Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total  ...
    
			
    5. 
						
  5. 自己制作 SPx N合1 自动安装盘(x86)
			
    来处"xinso" 一.制作方法: 以技嘉和惠普为例作,其它的可以如法泡制及变通: 1.复制一份最常用的 OEM XP,例如技嘉,到D:\1TO2 2.在 D:\ 创造一个 HP  ...
    
			
    6. 
						
  6. How Tomcat Works（十二）
			
    tomcat容器通过一个称为Session管理器的组件来管理建立的Session对象,该组件由org.apache.catalina.Manager接口表示:Session管理器必须与一个Contex ...
    
			
    7. 
						
  7. Spring优势
			
    *  使用spring有什么好处? ◆Spring能有效地组织你的中间层对象,无论你是否选择使用了EJB.如果你仅仅使用了Struts或其他的包含了J2EE特有APIs的framework,你会发现S ...
    
			
    8. 
						
  8. iPhone中国移动收不到彩信，联通不用设置都可以，具体设置方法：
			
    打开“设置”. 打开“通用”. 打开“蜂窝移动网络”. 打开“蜂窝数据移动网络”. 在“蜂窝移动数据”一栏中的“APN”处填入“cmnet”. 在“彩信”一栏中的“APN”处填入“cmnet”,“MM ...
    
			
    9. 
						
  9. DOM-判断元素节点类型
			
    http://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-i ...
    
			
    10. 
						
  10. 转载:rebar和erlang
			
    使用rebar生成erlang release 并进行热代码升级 http://blog.sina.com.cn/s/blog_6530ad590100wmkn.html 使用rebar工具开发erl ...
    
			
    11.