仿PHP中文网的一小部分 - 学习日记

首页 > 博客列表 > 仿PHP中文网的一小部分

博主信息

博文 29

粉丝 1

访问量 22625

专题推荐

更多>

效果图

代码

<!DOCTYPE html>
<html lang="en">
  <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" />
    <title>PHP.CN</title>
    <link rel="stylesheet" href="css/header.css" />
    <link rel="stylesheet" href="css/icon-font.css" />
  </head>
  <body>
    <header>
      <div>
        <div class="top">
          <p>php中文网-程序员梦开始的地方</p>
          <div class="right">
            <a href="" class="iconfont icon-tixingtianchong"></a>
            <a href=""><img src="user_avatar.jpg" alt="" /></a>
          </div>
        </div>
      </div>
      <main>
        <div class="nav">
          <a href=""><img src="logo-2x.png" alt="" /></a>
          <ul>
            <li><a href="">首页</a></li>
            <li><a href="">视频教程</a></li>
            <li><a href="">学习路径</a></li>
            <li><a href="">PHP培训</a></li>
            <li><a href="">资源下载</a></li>
            <li><a href="">技术文章</a></li>
            <li><a href="">社区</a></li>
          </ul>
          <div class="sreach">
            <input type="sreach" placeholder="输入关键词搜索" />
            <span class="iconfont icon-fangdajing1"></span>
          </div>
        </div>
      </main>
    </header>
    <main>
      <div class="top">
        <div class="left">
          <ul>
            <li><a href="">php开发</a></li>
            <li><a href="">大前端</a></li>
            <li><a href="">后端开发</a></li>
            <li><a href="">数据库</a></li>
            <li><a href="">移动端</a></li>
            <li><a href="">运维开发</a></li>
            <li><a href="">UI设计</a></li>
            <li><a href="">计算机基础</a></li>
          </ul>
        </div>
        <div class="middle">
          <img src="main.png" alt="" />
        </div>
        <div class="right">
          <div class="top">
            <div>
              <div class="img"><img src="user_avatar.jpg" alt="" /></div>
              <div class="user">
                <h2>Pharaoh</h2>
                <span>P豆 9999</span>
              </div>
            </div>
            <div><a href="">我要学习</a></div>
          </div>
          <div class="buttom">
            <div>
              <span>问答社区</span>
              <span>答疑</span>
            </div>
            <div>
              <span>头条</span>
              <span>66个面试问题</span>
            </div>
            <div>
              <span>福利</span>
              <span>限时折扣>></span>
            </div>
            <div>
              <span>新班</span>
              <span>20期PHP线上班</span>
            </div>
            <div>
              <span>招募</span>
              <span>课程合作计划</span>
            </div>
            <div>
              <span>公告</span>
              <span>APP上线啦</span>
            </div>
          </div>
        </div>
      </div>
      <div class="buttom">
        <div class="left"></div>
        <div class="right"></div>
      </div>
    </main>
    <div class="two">
      <div class="left">
        <div>
          <h2>学习路径</h2>
          <p>全部7个</p>
        </div>
        <div>
          <div><img src="dgjj.png" alt="" /></div>
          <div>
            <a href="">独孤九剑</a>
            <p>9门课程</p>
          </div>
        </div>
        <div>
          <div><img src="ynxj.png" alt="" /></div>
          <div>
            <a href="">玉女心经</a>
            <p>5门课程</p>
          </div>
        </div>
        <div>
          <div><img src="tlbb.png" alt="" /></div>
          <div>
            <a href="">天龙八部</a>
            <p>3门课程</p>
          </div>
        </div>
        <div>
          <div><img src="phpkjkf.png" alt="" /></div>
          <div>
            <a href="">自学指南</a>
            <p>19门课程</p>
          </div>
        </div>
        <div>
          <div><img src="phpksrm.png" alt="" /></div>
          <div>
            <a href="">趣味闯关</a>
            <p>22门课程</p>
          </div>
        </div>
      </div>
      <div class="right">
        <div>
          <div><img src="../默写/dy.png" alt="" /></div>
          <div>官方工众号</div>
        </div>
        <div>
          <div><img src="../默写/dy.png" alt="" /></div>
          <div>官方QQ群</div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS代码

@import url(reset.css);
body {
  background-color: rgb(212, 212, 212);
}
header > div:first-child {
  background-color: rgb(61, 60, 60);
  width: 100vw;
}
header .top {
  width: 1200px;
  height: 50px;
  margin: auto;
  display: grid;
  grid-template-columns: 400px 100px;
  grid-auto-rows: 50px;
  place-content: center space-between;
  place-items: center start;
}
header .top p {
  color: rgb(235, 235, 235);
}
header div:first-child .right {
  display: grid;
  grid-template-columns: 50px 30px;
  place-items: center;
}
header div:first-child .right a:first-child {
  color: white;
}
header div:first-child .top .right a img {
  width: 100%;
  border-radius: 20px;
}
body header main {
  width: 100vw;
  background-color: white;
  box-shadow: 0px 6px 8px rgb(7, 17, 27, 0.1);
}
.nav {
  width: 1200px;
  height: 80px;
  display: flex;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}
header main .nav ul {
  width: 800px;
  display: flex;
}
header main .nav ul li {
  margin-left: 15px;
}
header main .nav ul li a:hover,
header main .nav ul li:first-child a {
  color: red;
}
header main .nav a:first-child img {
  width: 150px;
}
header main .nav div input {
  border-radius: 20px;
  height: 35px;
  background-color: rgb(211, 211, 211);
  border: none;
  outline: none;
  padding-left: 9px;
}
body header main .nav .sreach span {
  position: relative;
  left: -30px;
}
body > main {
  width: 1200px;
  margin: 30px auto;
}
body > main > .top {
  display: grid;
  grid-template-columns: 160px 810px 190px;
  gap: 10px;
  font-size: 14px;
}
body > main > .top > * {
  background-color: white;
  border-radius: 25px;
}
body main .top .left ul {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  place-content: center;
  place-items: center;
  padding-top: 10px;
}
body main .top .left ul li {
  padding: 15px 25px;
  border-radius: 25px;
}
body main .top .left ul li:hover {
  background-color: crimson;
}
body main .top .middle img {
  border-radius: 25px;
}
body main .top .right {
  display: grid;
  grid-template-rows: 140px 240px;
  place-content: center;
  place-items: center;
}
body main .right .top > div:first-child {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
body > main .right .top > div:first-child .img {
  width: 40px;
}
body main .right .top > div:first-child img {
  width: 100%;
  border-radius: 50px;
}
body > main .right .top {
  height: 100%;
  width: 100%;
  padding: 10px 25px;
  border-bottom: 1px solid rgb(212, 212, 212);
  overflow: hidden;
}
body > main .right .top > div:first-child .user h2 {
  font-size: 0.9rem;
}
body > main .right .top > div:first-child .user span {
  font-size: 0.6rem;
  color: rgb(141, 141, 141);
}
body > main .right .top > div:first-child .user {
  padding: 0 10px;
}
body > main .right .top > div:last-child {
  width: 150px;
  height: 34px;
  margin: auto;
  background-color: #f11717;
  text-align: center;
  border-radius: 20px;
  margin-top: 30px;
}
body > main .right .top > div:last-child a {
  display: block;
  line-height: 34px;
  color: white;
}
body > main .right .buttom {
  padding: 0 20px;
  margin-top: 30px;
  display: grid;
  grid-template-rows: repeat(6, 40px);
  place-items: auto center;
  place-content: space-between center;
}
body > main .right .buttom div span:last-child {
  color: rgb(180, 180, 180);
}
body > main .right .buttom div:first-child span:last-child {
  display: inline-block;
  background-color: orangered;
  color: white;
  border-radius: 5px;
  width: 35px;
  text-align: center;
}
body .two {
  width: 1200px;
  height: 80px;
  display: grid;
  grid-template-columns: 980px 190px;
  margin: auto;
}
body .two .left {
  display: flex;
  background-color: white;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
}
body .two > .left > div:first-child {
  width: 79px;
}
body .two > .left > div:not(div:first-child) {
  display: flex;
}
body .two > .left > div:not(div:first-child) > div {
  width: 130px;
  height: 40px;
}
body .two > .left > div:not(div:first-child) > div:first-child {
  width: 40px;
  height: 40px;
  padding: 0 5px;
  font-size: 20px;
}
body .two > .left > div:not(div:first-child) > div > p {
  color: darkgrey;
  font-size: 0.5rem;
}
body .two > .left > div:not(div:first-child) > div img {
  width: 90%;
}
body .two > .left div:first-child {
  font-size: 5px;
  margin: 0 0px;
}
body .two .right {
  margin-left: 12px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  width: 190px;
}
body .two .right div div:last-child {
  font-weight: bold;
  font-size: x-small;
}
body .two .right div img {
  width: 30%;
  border-radius: 50px;
}
body .two .right div {
  text-align: center;
}

感想

其实有很多种办法实现：浮动，弹性布局，盒子布局，甚至可以互相嵌套，还需要多多练习

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

markdown基础语法和emmet基础语法

2022-07-05 06:03:09