SONY官网简单模仿

Original 2019-04-02 15:27:02 190
abstract:<!DOCTYPE html > <html> <head>   <meta charset="utf-8">   <title>员工信息管理系统</title>   <link rel="s
<!DOCTYPE html >
<html>
<head>
  <meta charset="utf-8">
  <title>员工信息管理系统</title>
  <link rel="stylesheet" type="text/css" href="css/index.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="header_content">
    <div class="header_left">
      <a href="#" style="color:white">SONY</a><br>
      <a href="" class="header_list">SONY产品&nbsp;<i class=" fa fa-angle-down"></i></a>
      <a href="">服务与支持</a>
      <a href="">新闻中心</a>
      <a href="">关于SONY</a>
    </div>
    <div class="header_right">
      <br>
      <a href=""><span class="fa fa-user-circle"></span>员工中心</a>
      <a href="">联系维护</a>
    </div>
  </div>
  <div class="clear"></div>
</div>
</body>
</html>

CSS对应代码

*{margin:0px;padding:0px;}
a{text-decoration: none;color:#C0C0C0;font-size:13px;}
.clear{clear:both;}
.header{width:100%;background-color: #000;}
.header_content{width:1200px;margin:0px auto;line-height: 40px;}
.header_left{width:320px;height:80px;float:left;}
.header_left a{margin-right: 5px;}
.header_content a:hover {color:#FF5000;}
.header_right{width:200px;height:80px;float: right;}
.header_list{display:inline-block;height: 40px;width: 90px;text-align: center;}
.header_list:hover{background-color: #fff;}


Correcting teacher:查无此人Correction time:2019-04-03 13:29:40
Teacher's summary:完成的不错。可以把css样式写成固定的,下次就不需要重复写了。继续加油。

Release Notes

Popular Entries