论坛 › php › 学习PHP课程的第三天

cheun 发表于 2018-12-15 09:26:03

学习PHP课程的第三天

　　2016年11月9日，星期三
　　一、首次利用(无序列表)，(有序列表)制作网页筛选栏：
　　

　　演示图，（无序列表）效果：

http://s5.运维网.com/wyfs02/M00/89/FB/wKioL1gjIfmzucQjAADJKSWB3VI699.png-wh_500x0-wm_3-wmp_4-s_3379592295.png
　　

　　演示图，(有序列表）效果：

http://s1.运维网.com/wyfs02/M01/89/FF/wKiom1gjInnBswB7AADJ1yq2wp0218.png-wh_500x0-wm_3-wmp_4-s_4206726641.png
　　

　　二、利用了line-height(行间距)，text-align（文本的水平对齐方式）等功能制作出完成图，
　　编码如下：
　　
　　
　　
　　
　　

　　
　　
　　
　　
　　body,ul{
　　margin: 0px;
　　padding: 0px;
　　}
　　

　　#baohan{
　　width: 100%
　　height:60px;
　　background-color: red;
　　}
　　

　　

　　

　　#zhiye{
　　height: 50px;
　　width: 1500px;
　　margin: 0 auto;
　　background-color: red;}
　　

　　li{
　　width: 70px;
　　height: 50px;
　　background-color: red;
　　float: left;
　　list-style: none;
　　text-align: center;
　　line-height: 50px;
　　margin-right: 2px;}
　　

　　li:hover{background-color: orange;}
　　

　　
　　

　　

　　

　　

　　
　　
　　
　　战士
　　圣骑士
　　法师
　　猎人
　　牧师
　　萨满
　　死亡骑士
　　德鲁伊
　　恶魔猎手
　　术士
　　武僧
　　
　　
　　

　　

　　

　　

　　
　　
　　

　　最后的完成图，如下：
　　

http://s2.运维网.com/wyfs02/M01/89/FB/wKioL1gjJE7wWkAGAAJYmov8Bng872.png-wh_500x0-wm_3-wmp_4-s_2357066140.png
　　

查看完整版本: 学习PHP课程的第三天