利用浮动实现导航布局

Original 2019-03-23 15:01:41 265
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>首页</title><style>html{background:white;color:black;}*{margin:0;padding:0;}.clear{clear:both;

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>首页</title>

<style>

html{

background:white;

color:black;

}

*{

margin:0;

padding:0;

}

.clear{

clear:both;

display:block;

overflow:hidden;

}

ol,ul{

list-style:none;

}

a{

text-decoration:none;

}

.center{

margin:0 auto;

}


nav{

width:100%;

height:36px;

background:#01559A;

line-height:36px;

font-size:14px;

}

nav ul{

width:1000px;

height:36px;

margin:0 auto;

}

nav a{

color:#fff;

}

nav ul li{

float:left;

height:36px;


}

nav ul li:hover{

background:#229EDA;

}

nav ul li a{

padding:0 36px;

}

</style>

</head>

<body>

<div>


<!-- 导航栏 -->

<nav>

<ul>

<li><a href="">首页</a></li>

<li><a href="">公司简介</a></li>

<li><a href="">新闻中心</a></li>

<li><a href="">通知公告</a></li>

<li><a href="">产品介绍</a></li>

<li><a href="">关于我们</a></li>

<li><a href="">招聘英才</a></li>

<li><a href="">联系我们</a></li>


</ul>

</nav>

</body>

</html>

在导航布局中可以利用ul li实现导航列,然后通过浮动实现导航成横排布局。

Correcting teacher:查无此人Correction time:2019-03-23 15:16:16
Teacher's summary:完成的不错,下次把代码缩进,让代码整齐。继续加油。

Release Notes

Popular Entries