本课：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. 20151007kaggle Titanic心得
			
    Titanic是kaggle上一个练手的比赛,kaggle平台提供一部分人的特征,以及是否遇难,目的是预测另一部分人是否遇难.目前抽工作之余,断断续续弄了点,成绩为0.79426.在这个比赛过程中,接 ...
    
			
    2. 
						
  2. URAL-1997 Those are not the droids you're looking for 二分匹配
			
    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1997 题意:记录了n个人进出门的时间点,每个人在房子里面待的时间要么小于等于a,要么大于 ...
    
			
    3. 
						
  3. html5基础知识
			
    html5+css3 html5定义很多简便东西和宽松语法:     文档头:         <!doctype html>     文档编码:         <meta cha ...
    
			
    4. 
						
  4. 转载-SQL中的where条件，在数据库中提取与应用浅析
			
    1        问题描述 一条SQL,在数据库中是如何执行的呢?相信很多人都会对这个问题比较感兴趣.当然,要完整描述一条SQL在数据库中的生命周期,这是一个非常巨大的问题,涵盖了SQL的词法解析.语 ...
    
			
    5. 
						
  5. 全文索引之nutch与hadoop（转）
			
    原文:http://blog.csdn.net/chaofanwei/article/details/39476535 全文索引-lucene,solr,nutch,hadoop之lucene 全文索 ...
    
			
    6. 
						
  6. HDU2948Geometry Darts(简单计算几何)
			
    题目大意就是说两个人掷飞镖,飞镖在所给定的图形内就记一分,现在给定N个图形(圆.三角形和矩形),问每一次比赛(没人分别掷三次)谁赢. #include <map> #include < ...
    
			
    7. 
						
  7. C#中DllImport用法和路径问题
			
    DllImport是System.Runtime.InteropServices命名空间下的一个属性类,其功能是提供从非托管DLL导出的函数的必要调用信息.    DllImport属性应用于方法,要 ...
    
			
    8. 
						
  8. C#使用SMTP发送邮件
			
    需要用到的命名空间: using System.Net.Mail; using System.IO; using System.Text.RegularExpressions; using Syste ...
    
			
    9. 
						
  9. (《数论及应用1.3》NEFU 116 两仪剑法(最小公倍数&&最大公约数))
			
    #include <iostream> using namespace std; long long gcd(long long a, long long b){ if(b == 0){  ...
    
			
    10. 
						
  10. GET与POST提交
			
    get是从服务器上获取数据,post是向服务器传送数据. get 是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,[在URL中可以看到].post是通过HTT ...
    
			
    11.