实现

HTML

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="static/css/reset.css" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3269118_mgnsjoz5gtp.css" />
    <link rel="stylesheet" href="static/css/header.css" />
    <link rel="stylesheet" href="static/css/main-nav.css" />
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3280782_t7zyuayyde.css" />
    <title>仿php.cn中文网首页差头部</title>
  </head>
  <body>
    <!-- 页眉 -->
    <header>
      <!-- 1 顶部 -->
      <div class="top">
        <div class="content">
          <div class="title">php中文网,程序员梦开始的地方!</div>
          <div class="right">
            <a href="" class="iconfont icon-tixing"></a>
            <a href=""><img src="static/images/user_avatar.jpg" alt="" /></a>
          </div>
        </div>
      </div>
      <!-- 2 导航 -->
      <div class="navs">
        <div class="content">
          <a href="" class="logo"><img src="static/images/logo.png" alt="" /></a>
          <nav>
            <a href="" class="active">首页</a>
            <a href="">视频教程</a>
            <a href="">学习路径</a>
            <a href="">php培训</a>
            <a href="">资源下载</a>
            <a href="">技术文章</a>
            <a href="">社区</a>
            <a href="" class="active">APP下载</a>
          </nav>
          <div class="search">
            <input type="search" placeholder="输入关键字搜索" />
            <span class="iconfont icon-fangdajing fdj"></span>
          </div>
        </div>
      </div>
    </header>
    <!-- 主体 -->
    <main>
      <div class="navs">
        <!-- 2行3列 -->
        <div class="left">
          <a href="">php开发</a>
          <a href="">大前端</a>
          <a href="">后端开发</a>
          <a href="">数据库</a>
          <a href="">移动端</a>
          <a href="">运维开发</a>
          <a href="">UI设计</a>
          <a href="">计算机基础</a>
        </div>
        <div class="slider">
          <a href="">
            <img src="static/images/slider.jpeg" alt="" />
          </a>
        </div>
        <div class="right">
          <ul class="shiyan">
            <li>
              <img src="static/images/user_avatar.jpg" alt="" />
            </li>
          </ul>
          <ul class="shiyan1">
            <li><a href="">新手1314</a></li>
          </ul>
          <ul class="shiyan2">
            <li>P豆：14</li>
          </ul>
          <ul class="shiyan3">
            <li><a href="">我的学习</a></li>
          </ul>
          <ul class="shiyan4">
            <li>问答社区</li>
          </ul>
          <ul class="shiyan5">
            <li><a href="">答疑</a></li>
          </ul>
          <ul class="shiyan6">
            <li>头条</li>
          </ul>
          <ul class="shiyan7">
            <li><a href="">“程序员做饭指南”</a></li>
          </ul>
          <ul class="shiyan6">
            <li>新课</li>
          </ul>
          <ul class="shiyan8">
            <li><a href="">3.9号公益直播课</a></li>
          </ul>
          <ul class="shiyan6">
            <li>新班</li>
          </ul>
          <ul class="shiyan8">
            <li><a href="">19期PHP直播班</a></li>
          </ul>
          <ul class="shiyan6">
            <li>招募</li>
          </ul>
          <ul class="shiyan8">
            <li><a href="">课程合作计划</a></li>
          </ul>
          <ul class="shiyan6">
            <li>公告</li>
          </ul>
          <ul class="shiyan8">
            <li><a href="">APP上线啦</a></li>
          </ul>
        </div>
        <div class="bottom-left">
          <!-- 学习路径  -->
          <div class="desc">
            <div class="title">学习路径</div>
            <span>全部7个&gt;</span>
          </div>
          <ul class="detail">
            <li onclick="">
              <img src="static/images//dgjj.png" alt="" />
              <a href="">独孤九贱</a>
              <span>9门课程</span>
            </li>
            <li onclick="">
              <img src="static/images//ynxj.png" alt="" />
              <a href="">玉女心经</a>
              <span>5门课程</span>
            </li>
            <li onclick="">
              <img src="static/images//tlbb.png" alt="" />
              <a href="">天龙八部</a>
              <span>3门课程</span>
            </li>
            <li onclick="">
              <img src="static/images//phpkjkf.png" alt="" />
              <a href="">自学指南</a>
              <span>19门课程</span>
            </li>
            <li onclick="">
              <img src="static/images//phpksrm.png" alt="" />
              <a href="">趣味闯关</a>
              <span>22门课程</span>
            </li>
          </ul>
        </div>
        <div class="bottom-right">
          <ul class="tubiao">
            <li>
              <a href=""><span class="iconfont icon-logo-wechat"></span></a>
            </li>
          </ul>
          <ul class="tubiao">
            <li>
              <a href=""><span class="iconfont icon-QQ-circle-fill"></span></a>
            </li>
          </ul>
          <ul class="font">
            <li><a href="">官方公众号</a></li>
          </ul>
          <ul class="font">
            <li><a href="">官方QQ群</a></li>
          </ul>
        </div>
      </div>
    </main>
  </body>
</html>

css

reset.css:
/* 页面元素样式初始化 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  /* color: #555; */
}
body {
  background-color: rgb(243, 245, 247);
}
li {
  list-style: none;
}

header.css:
header .top {
  width: 100vw;
  height: 40px;
  background-color: rgb(52, 52, 52);
  color: #aaa;
}
header .top .content img {
  width: 50%;
  border-radius: 50%;
}
header .top .content {
  width: 1200px;
  display: grid;
  grid-template-columns: 400px 100px;
  grid-auto-rows: 40px;
  place-content: space-between;
  place-items: center start;
  margin: auto;
}
header .top .content .right .iconfont {
  color: #eee;
  font-size: larger;
}
header .top .content .right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
}
/* 导航 */
header .navs {
  width: 100vw;
  height: 90px;
  background-color: #fff;
}
header .navs .content {
  width: 1200px;
  /* border: 1px solid #000; */
  display: grid;
  grid-template-columns: 140px 1fr 200px;
  grid-auto-rows: 90px;
  gap: 10px;
  margin: auto;
  place-items: center start;
}
header .navs .content img {
  width: 100%;
}
header .navs .content nav a.active,
header .navs .content nav a:hover {
  color: red;
  font-weight: bold;
}
header .navs .content nav a {
  color: #555;
}
header .navs .content .search {
  display: flex;
}
header .navs .content nav {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;
  place-items: center center;
}
header .navs .content nav a {
  padding: 0 10px;
}
header .navs .content .search input[type="search"] {
  width: 200px;
  height: 36px;
  border: none;
  outline: none;
  background-color: #f7f8fa;
  border-radius: 20px;
  padding-left: 10px;
}
header .navs .content .search .fdj {
  font-size: 22px;
  color: #ccc;
  position: relative;
  left: -40px;
  top: 5px;
}

main-nav.css:
main {
  font-size: 14px;
}
main .navs {
  /* 2行3列 */
  display: grid;
  grid-template-columns: 160px 810px 190px;
  grid-template-rows: 400px 80px;
  gap: 20px;
  place-content: center;
  margin: 30px 0;
}
main .navs > * {
  background-color: #fff;
  border-radius: 20px;
  /* outline: 1px solid red; */
}
/* 底部左侧占2列 */
main .navs .bottom-left {
  grid-column: span 2;
}
main .navs .slider img {
  width: 100%;
  border-radius: 20px;
}
/* 左侧导航 */
main .navs .left {
  display: grid;
  place-items: center;
  padding: 20px 0;
}
main .navs .left a:hover {
  color: red;
  background-color: rgb(250, 223, 227);
}
main .navs .left a {
  border-radius: 20px;
  padding: 10px 20px;
  color: #555;
}
/* 底部左侧 */
main .navs .bottom-left {
  display: grid;
  grid-template-columns: 100px 1fr;
}
main .navs .bottom-left .desc {
  display: grid;
  place-items: center;
  padding: 16px;
}
main .navs .bottom-left .detail img {
  width: 100%;
  grid-row: span 2;
}
main .navs .bottom-left .detail {
  display: flex;
  place-items: center;
  place-content: space-between;
}
main .navs .bottom-left .detail li {
  display: grid;
  grid-template-columns: 36px 85px;
  gap: 0 10px;
  place-items: center start;
}
main .navs .bottom-left .detail li a {
  font-size: 14px;
}
main .navs .bottom-left .detail li a:hover {
  color: red;
}
main .navs .bottom-left .detail li span,
main .navs .bottom-left .desc span {
  font-size: 12px;
  color: #999;
}
main .navs .right {
  display: grid;
  grid-template-columns: 70px 100px;
  grid-template-rows: 40px 40px 80px 40px 40px 40px 40px 40px 40px;
  gap: 0 20px;
}
main .navs .right .shiyan img {
  width: 100%;
  border-radius: 30px;
  margin-left: 30px;
  margin-top: 20px;
}
main .navs .right .shiyan {
  display: grid;
  grid-template-columns: 50px;
  grid-template-rows: 80px;
  grid-row: span 2;
  place-items: center center;
}
main .navs .right .shiyan1 {
  display: grid;
  place-items: end start;
}
main .navs .right .shiyan2 {
  display: grid;
  place-items: center start;
}
main .navs .right .shiyan3 {
  display: grid;
  grid-column: span 2;
  place-items: center center;
  border-bottom: 1px solid rgb(207, 204, 204);
}
main .navs .right .shiyan3 li {
  height: 40px;
  width: 150px;
  border: 0;
  background-color: red;
  border-radius: 20px;
  line-height: 3;
  margin-top: -20px;
}
main .navs .right .shiyan3 li a {
  margin-left: 50px;
  color: #fff;
}
main .navs .right .shiyan4 {
  display: grid;
  place-items: center end;
  font-weight: bolder;
}
main .navs .right .shiyan5 {
  display: grid;
  place-items: center start;
}
main .navs .right .shiyan5 li a {
  color: #fff;
  margin-left: 5px;
}
main .navs .right .shiyan5 li {
  border: 0;
  background-color: red;
  font-size: 14px;
  width: 40px;
}
main .navs .right .shiyan6 {
  display: grid;
  place-items: center center;
  font-weight: bolder;
}
main .navs .right .shiyan7 {
  margin-left: -30px;
  color: #999;
  margin-top: 10px;
}
main .navs .right .shiyan7 li a:hover,
main .navs .right .shiyan8 li a:hover {
  color: red;
}
main .navs .right .shiyan7 li a,
main .navs .right .shiyan8 li a {
  color: #999;
}
main .navs .right .shiyan8 {
  display: grid;
  place-items: center center;
  margin-left: -30px;
  color: #999;
}
main .navs .bottom-right {
  display: grid;
  grid-template-columns: 95px 95px;
  grid-template-rows: 50px 30px;
}
main .navs .bottom-right .icon-logo-wechat,
main .navs .bottom-right .icon-QQ-circle-fill {
  font-size: 40px;
  color: #999;
}
main .navs .bottom-right .tubiao {
  display: grid;
  place-items: center center;
}
main .navs .bottom-right .font {
  display: grid;
  place-items: center center;
  font-size: 10px;
  margin-top: -10px;
  color: #999;
}
main .navs .bottom-right .font li a {
  color: #000;
}
main .navs .bottom-right .font li a:hover {
  color: red;
}

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

WIN7实现安装node14版本

2022-05-14 15:04:42