简单的导航演示

原创 2018-12-13 17:42:33 216
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>赛门国际导航</title> <link rel="stylesheet" type="text/css" href="css/sm.c

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>赛门国际导航</title>

<link rel="stylesheet" type="text/css" href="css/sm.css">

<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">

</head>

<body>

<div class="header">

<div class="headermain">

  <div class="headermain_l">

  <a href="">你好,欢迎来到赛门</a>

  </div>

  <div  class="headermain_r">

  <a href="">登陆</a>

  <a href="">免费注册</a>

    <span class="mysaimmain">

  <a href="" >我的赛门 <i class="fa fa-arrow-down"></i></a>

                 </span>

  <a href="">我的收藏</a>

  <a href="">网站导航</a>

  </div>

</div>

</div>

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

</body>

</html>



*{margin: 0px; padding: 0px;}

.clear{clear: both;}

a{text-decoration: none; font-size: 15px; margin-left: 5px; color: #fff; line-height: 40px; display: inline-block; 

padding-left: 10px;padding-right: 10px;}

.header

{  background-color: #105599}

.headermain

{width: 1200px;margin: 0px auto; height: 40px;} 

.headermain_l

{ float: left;}

.headermain_r

{

width: 550px; 

float: right;

}

.headermain_r a:hover

{

background-color: #0A2743;

}


 


批改老师:天蓬老师批改时间:2018-12-13 17:30:23
老师总结:你的导 航,似乎 有点太简单了 吧

发布手记

热门词条