本课：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. 答 “SOA会不会造成IT黑洞？”
			
    [文/ 任英杰] 随意间看到支点网的“SOA会不会造成IT黑洞”一文,作者对SOA的认识颇有以偏概全之嫌,写点自己的感想,作为应和吧. 作者的二个对SOA的观点有些偏颇:“SOA就是一种系统集成,它是 ...
    
			
    2. 
						
  2. bzoj 1806 [Ioi2007]Miners 矿工配餐（DP）
			
    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1806 [题意] 给定一个权在1..3内的序列,在保持相对位置不变的情况下拆分成两个序列 ...
    
			
    3. 
						
  3. TopFreeTheme精选免费模板【20130619】
			
    今天给大家推荐7款最新精选的WordPress主题和一个WooCommerce订单跟踪插件,如果你有更换自己博客主题的想法或者正要做自己的博客,不妨试试.一些是WordPress商业模板,但都可以免费 ...
    
			
    4. 
						
  4. debian7下部署nginx服务器
			
    笔者是在vmware中的Debian7下部署nginx服务器,采用离线部署方式.过程如下: 1.准备好需要的离线安装包 nginx-1.6.2.tar.gz,pcre-8.34.tar.gz,open ...
    
			
    5. 
						
  5. js运动 淡入淡出
			
    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
    
			
    6. 
						
  6. java进程状态
			
    A thread state. A thread can be in one of the following states: NEWA thread that has not yet started ...
    
			
    7. 
						
  7. Twin Prime Conjecture(浙大计算机研究生保研复试上机考试-2011年)
			
    Twin Prime Conjecture                                            Time Limit: 2000/1000 MS (Java/Othe ...
    
			
    8. 
						
  8. hdoj 5288  OO’s Sequence
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5288 //*************头文件区************* #include<ios ...
    
			
    9. 
						
  9. Unity3d：The requested item has been unloaded
			
    问题描述:System.Xml类库下实例化的对象所有枚举类的值都显示如标题错误解决方案1:查看所在类是否:MonoBehaviour,如果没继承,添加即可.<ignore_js_op> 
    
			
    10. 
						
  10. Android vector标签 PathData 画图超详解
			
    SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写.在xml文件中的标签是<vector>,画出的图形可以像一般的图片资源使用,例子如下: &l ...
    
			
    11.