码迷,mamicode.com
首页 > Web开发 > 详细

php课程的第三天

时间:2016-11-09 23:26:01      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:center   标签   课程   知识.ol.ul   

   今天是学习php课程的第三天,今天主要是学习列表有关的知识。

   首先是定义。有序列表ol,无序列表ul。有序列表会出现如1. 2.之类的标题,无序列表则不会。

   下面用代码来表示。


   

<html>

<head>

<title></title>


</head>

<body>


<ul>

<li>滚动</li>

<li>直播</li>

</ul>

<ol>


<li>调查</li>

<li>排行</li>

<li>国际</li>

</ol>

</body>

</html>



   然后我们可以给他加些效果,做成一个横着的小标签栏。其中会用到颜色格式等指令。

   代码如下。



<html>

<head>

<title></title>


<style>

li{

float: left;list-style: none;background-color: red;font-


size:50px;margin: 2px;height: 50px;line-height: 50px

}

ul{

margin: 0 auto;text-align: center;

}

</style>

</head>

<body>


<ul>

<li>滚动</li>

<li>直播</li>

<li>调查</li>

<li>排行</li>

<li>国际</li>

</ul>

</body>

</html>



   这样就会出来一个小的红色导航栏。接下来我们做一个完整的导航栏。

   代码如下。



<html>

<head>

<title></title>


<style>

div{height: 50px;width: 100%;background-color: blue;

}

li{

float: left;list-style: none;margin: 2px;height: 50px;line-


height: 50px;

text-align: center; 


}

ul{background-color: blue;

margin: 0 auto;text-align: center;height: 50px;width: 800px;

}

li:hover{

background-color: green;

}


</style>

</head>

<body>

<div>

<ul>

<li>滚动</li>

<li>直播</li>

<li>调查</li>

<li>排行</li>

<li>国际</li>

</ul>

</div>

</body>

</html>

   


   这就是我今天所学的内容,继续加油!


php课程的第三天

标签:center   标签   课程   知识.ol.ul   

原文地址:http://12254268.blog.51cto.com/12244268/1871149

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!