本课：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. lua Date和Time
			
    time和date两个函数在Lua中实现所有的时钟查询功能.函数time在没有参数时返回当前时钟的数值.(在许多系统中该数值是当前距离某个特定时间的秒数.)当为函数调用附加一个特殊的时间表时,该函数就 ...
    
			
    2. 
						
  2. sql server 2008 r2  出问题
			
    1.想利用sql2008的数据挖掘功能,以为是没有安装全,所以就卸载了. (1)利用Windows Installer Clean UP将以前的卸载干净 (2)出现了Could not open ke ...
    
			
    3. 
						
  3. MS-queue算法相关
			
    简介: 多核多线程已经成为当下一个时髦的话题,而无锁编程更是这个时髦话题中的热点话题.Linux 内核可能是当今最大最复杂的并行程序之一,为我们分析多核多线程提供了绝佳的范例.内核设计者已经将最新的无 ...
    
			
    4. 
						
  4. 由于SSH配置文件的不匹配，导致的Permission denied (publickey)及其解决方法。
			
    读者如要转载,请标明出处和作者名,谢谢.地址01:http://space.itpub.net/25851087地址02:http://www.cnblogs.com/zjrodger/作者名:zjr ...
    
			
    5. 
						
  5. does not support ASP.NET compatibility 错误
			
    The service cannot be activated because it does not support ASP.NET compatibility. ASP.NET compatibi ...
    
			
    6. 
						
  6. C++视频课程小结（1）
			
    C++远征之起航篇 章节介绍: 每章小结: 第一章:C++诞生于贝尔实验室,C++包含C语言. 第二章:介绍了IDE环境(虽然没怎么懂),还推荐使用visual stdio 2010 旗舰版(姑且下了 ...
    
			
    7. 
						
  7. MyEclipse中无法将SVN检出来的项目部署到tomcat中
			
    自己遇到的小问题  : 要以web项目方式从svn上倒下来才可以部署到tomcat下检出步骤: myEclipse -->File-->new-->other-->svn--& ...
    
			
    8. 
						
  8. ssh 框架整合试例 （spring+struts2+hibernate）
			
    1.首先用Eclipse创建一个web项目(Eclipse EE 版) new->Other-> 输入web 然后选择Dynamic Web Project->next-> 输 ...
    
			
    9. 
						
  9. android 拨打电话小功能
			
    1.其实就是对Intent 的ACTION进行参数设置. 在manifest中药设置打电话的权限: <uses-permission android:name="android.per ...
    
			
    10. 
						
  10. android  Scroller类的理解
			
    Scroller 一个特例: **点击Button后可能View没有移动,要关闭硬件加速,这段代码中int detalX = (int) (event.getX() - downX)要更正. demo ...
    
			
    11.