1225work.html

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/font/iconfont.css">
    <link rel="stylesheet" href="public/public-header/public-header.css">
    <link rel="stylesheet" href="public/public-headline/public-headline.css">
    <title>头部导航</title>
</head>
<body>
      <div class="public-header">
          <a href="">网站首页</a>
          <a href="">专题</a>
          <a href="">网站导航</a>
          <a href="">二手商品</a>
          <a href="">讨论区</a>
          <span>
              <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
              <a href="">免费注册</a>
          </span>
      </div>
      <!--大标题-->
      <div class="public-headline">
          <span>二手交易</span>
      </div>
</body>
</html>
```html

public-header.css

@import url(../public-reset.css);
.public-header{
    height: 44px;
    background-color: black;
    padding: 0 20px;
    display: flex;
    flex-flow: row nowrap;
}
.public-header  a{
    line-height: 44px;
    color: #cccccc;
    padding: 0 10px;
}
.public-header > a:hover{
    background: white;
    color: black;
}
.public-header > span{
    margin-left: auto;
}
.public-header > span i{
   font-size: 16px;
   color: #cccccc;
   padding-right: 10px;
}
```css

public-headline

css
@import “../public-reset.css”;

.public-headline{
padding: 30px;
text-align: center;
}
.public-headline > span{
font-size: 30px;
font-weight: bolder;
padding-bottom: 7px;
border-bottom: 3px solid red;
}

1225work

1225work.html

public-header.css

public-headline

相关文章