今天了解了写代码的基本格式,列表,编写了一个导航栏。

笔记:

    格式很重要,备份很重要。

    css注释为/*注释*/


    列表:有序列表,用<ol></ol>表示

     无序列表,用<ul></ul>表示

     自定义列表


    list-style:none   用来去出列表前面的符号

    text-align    用来居中文本


    marg不能居中的时候,注意width的设置宽度


    编写导航条步骤:

    1.设置一个通长的div作为底

      设置一个列表(<ul>)作为第二层

      第三层为<li>

    2.通长的body和ul需要去掉外边框和内边框:div,ul{

                                               padding:0px;

                                               margin-right:0px;  

                                               }

      设置div的宽度,高度,背景色

      设置ul的宽度,高度,背景色,居中

      设置li的宽度,高度,背景色,字的颜色,去除字前面的符号,文字居中(text-align),


    行高(line-height),浮动,外边框距离         

    3.设置鼠标变色

         li:hover{  background-color:red(想要的颜色) }

实现:

1.

<!DOCTYPE html>

<html>

<title></title>

<style>

#chuan{

height: 50px;

width: 100%;

background-color: blue;

}

#er{

height: 50px;

width: 500px;

/*background-color: black;*/

margin: 0 auto;

}

li{

width: 30px;

height: 50px;

/*background-color: red;*/

list-style: none;/*去除前面的小标志*/

float: left;

color: white;

margin-right: 3px;/*设置外边框*/

text-align: center;/*设置文本居中*/

line-height: 50px;/*设置行高*/


}

body,ul{/*去除外边框和内边框*/

margin: 0px;

padding: 0px;

}

li:hover{

background-color: red;/*设置鼠标变换颜色*/

}

</style>

</head>

<body>

<div id="chuan">

<ul id="er">

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

</div>


</body>

</html>