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

Home > List of blog posts > 仿PHP中文网的一小部分

Blogger Information

Blog 29

fans 1

comment 0

visits 14973

Special Recommendation

More>

Related recommendations

效果图

代码

<!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;
}

感想

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

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

markdown基础语法和emmet基础语法

2022-07-05 06:03:09