导航布局css样式以及Font Awesome利用。

Original 2019-03-18 16:53:24 286
abstract:导航只是个简单的样式没有利用font awesome   就算利用也这里卡不到效果,但是明白了其使用的原理。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>导航制作</title>&l

导航只是个简单的样式没有利用font awesome   就算利用也这里卡不到效果,但是明白了其使用的原理。


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>导航制作</title>

<style>

*{padding: 0; margin: 0};

.clear{clear:both;}

a{text-decoration: none; color:#fff;padding-right:15px;}

.header{height:80px ; width:100%; background:#333;}

.nav{width:1600px; height:80px; margin:0 auto;  font-size:25px;padding-right:15px;}

.left{ line-height:80px; float: left; }

.right{float: right;  line-height:80px;}

.nav a:hover{background:#fff; color: darkorange;}

</style>


<body>

<div class="header">

<div class="nav">

<div class="left">

<a href="">第一个菜单</a>

<a href="">2个菜单</a>

<a href="">第三个</a>

<a href="">四个菜单</a>

<a href="">五个</a>

</div>

<div class="right">

<a href="">第er个菜单</a>

<a href="">2个菜单</a>

<a href="">第三个</a>

<a href="">四个菜单</a>

<a href="">五个</a>

</div>

<div class="clear"></div>

</div>

</div>

</body>

</html>


Correcting teacher:灭绝师太Correction time:2019-03-19 09:05:28
Teacher's summary:完成的不错!知道原理后面会使用就可以啦!

Release Notes

Popular Entries