Step-by-Step learning PHP notes (Li Tinghui Web Club-Multi-user message system) 01

This lesson: Div+css to achieve the first page effect:

Development tools: Xampp + phpstorm

Notes purpose: Only record use, easy to view later

Code directory Structure:

index.php:

<?PHPDefine("Root_web",true);? ><! DOCTYPE html Public"-//w3c//dtd XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >include dirname(__file__).‘ /includes/header.inc.php '? ><div id= "List" >List</div><div id= "User" >User</div><div id= "Pics" >Pics</div><?phpinclude dirname(__file__).‘ /includes/footer.inc.php '?></body>
Basic.css
@charset "UTF-8"; *{margin:0;padding:0;}Body{width:960px;Height:Auto;margin:0 Auto;background:#fff;font-size:14px;}ul{List-style-type:None;/*the DOT before 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;/*Indent in*/    /*border:2px solid #ccc;*/}#header ul{text-align: Right;padding:30px 50px 0 0;}#header ul Li{Display:inline;/*display on one line*/margin:0 0 0 10px;/*the distance between the LI tags is upper right and bottom left; margin:0 auto means up and down, around*/}#header ul Li a{Color:#333;text-decoration:None;/*a label minus underline*/}#header ul li A:hover{Color:#f00;/*turn the mouse on to red color*/}#list{width:600px;Height:514px;Border:2px solid #ccc;float: Right;}#user{width:340px;Height:250px;Border:2px solid #ccc;/*solid solid line; dashed Dash*/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;/*the spacing between fonts*/padding:10px 0 0 0;}#footer P span{Color:Blue;}
header.inc.php
<?php    //Prevent external malicious calls from entering this PHP address directly in the browser (    !defined ("Root_web")){        exit ("Access Denied");    } ? ><div id= "header" >    
footer.inc.php
<?php    if (!defined ("Root_web")){        exit ("Access Denied");    } ><div id= "Footer" >    <p> Copyright Piracy </p>    <p> This program by <span> Dipper City Web Club </span > provide source code can be arbitrarily modified and published &copy;2016-1019</p></div>
Logo1.jpg
Key points:  1, clear:both; Clear Floating
　　without clear both at the same time give <div id= "footer" > plus border, you can see the following effect

2. text-decoration:none;a label minus underline

3, Li Display:inline;The LI tag is displayed on one line

4. letter-spacing:1px;   the spacing between fonts
　　word-spacing:1px; Spacing between words Chinese is invalid
　　letter-spacing:1px; spacing between characters  
5, annotate the place more attention


 Stepping through PHP notes (Li Tinghui Web Club-Multi-user message system)