思路分享

效果图：

先从顶部开始一部分一部分往下写
布局方式：分析这一部分可以拆分成几部分进行构思用网格来表示看下可以生成几行几列的网格例如：
先写一个大盒子包住然后在盒子内进行布局把每块想象成一个盒子左中右三部分
细致划分里面的区域左边的盒子可以用flex也可以用grid进行划分用flex的话可以将排列方式改为列column然后在给里面的每个标签设置一些边距撑开

代码下载

html代码部分

<!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>仿phpcn首页</title>
    <link rel="stylesheet" href="static/css/font.css" />
    <link rel="stylesheet" href="static/css/header.css" />
  </head>
  <body>
    <!-- 顶部 -->
    <header>
      <div class="content">
        <div class="top_content">
          <div class="title">
            <span>php中文网，程序员梦开始的地方</span>
          </div>
          <div class="right">
            <a href="" class="iconfont icon-tixing"></a>
            <a href=""><img src="static/images/tx.jpg" alt="" /></a>
          </div>
        </div>
      </div>
    </header>
    <!-- 导航栏 -->
    <nav>
      <div class="nav_content">
        <div class="logo">
          <a href=""><img src="static/images/logo.png" alt="" /></a>
        </div>
        <div class="navs">
          <a href="" class="active">首页</a>
          <a href="">视频教程</a>
          <a href="">学习路径</a>
          <a href="">PHP培训</a>
          <a href="">资源下载 </a>
          <a href="">技术文章</a>
          <a href="">社区</a>
        </div>
        <div class="nav_right">
          <input type="search" name="" id="" placeholder="输入关键字搜索" />
          <span class="iconfont icon-sousuo"></span>
        </div>
      </div>
    </nav>
    <!-- 主体 -->
    <main>
      <div class="main_content">
        <div class="left">
          <a href="">视频教程</a>
          <a href="">学习路径</a>
          <a href="">PHP培训</a>
          <a href="">资源下载 </a>
          <a href="">技术文章</a>
          <a href="">资源下载 </a>
          <a href="">技术文章</a>
          <a href="">资源下载 </a>
        </div>
        <div class="lb">
          <a href="">
            <img src="static/images/lb.png" alt="" />
          </a>
        </div>
        <div class="right">
          <div class="right_top">
            <div class="tx">
              <span>
                <a href="">
                  <img src="static/images/tx.jpg" alt="" />
                </a>
              </span>
              <dl>
                <dt>
                  <a href="">汇享科技</a>
                  <span class="iconfont icon-tipvip vip"></span>
                </dt>
                <dd>P豆 12.00</dd>
              </dl>
            </div>
            <div class="anniu">
              <button>我的学习</button>
            </div>
          </div>
          <div class="right_bottom">
            <div class="top">
              <p class="cont1">
                <span>问答社区</span>
                <a>答疑</a>
              </p>
            </div>
            <div class="bottom">
              <p class="cont2">
                <span>头条</span>
                <a href="">20期PHP线上班</a>
              </p>
              <p class="cont3">
                <span>福利</span>
                <a href="">20期PHP线上班</a>
              </p>
              <p class="cont3">
                <span>新班</span>
                <a href="">20期PHP线上班</a>
              </p>
              <p class="cont3">
                <span>招募</span>
                <a href="">20期PHP线上班</a>
              </p>
              <p class="cont3">
                <span>公告</span>
                <a href="">20期PHP线上班</a>
              </p>
            </div>
          </div>
        </div>
        <div class="main_bottom">
          <div class="bottom_left">
            <div class="left_xxlj">
              <span>学习路径</span>
              <span>全部7个></span>
            </div>
            <a href="">
              <img src="static/images/dgjj.png" alt="" />
              <dl>
                <dt>独孤九贱</dt>
                <dd>9门课程</dd>
              </dl>
            </a>
            <a href="">
              <img src="static/images/ynxj.png" alt="" />
              <dl>
                <dt>玉女心经</dt>
                <dd>5门课程</dd>
              </dl>
            </a>
            <a href="">
              <img src="static/images/tlbb.png" alt="" />
              <dl>
                <dt>天龙八部</dt>
                <dd>3门课程</dd>
              </dl>
            </a>
            <a href="">
              <img src="static/images/phpkjkf.png" alt="" />
              <dl>
                <dt>自学指南</dt>
                <dd>19门课程</dd>
              </dl>
            </a>
            <a href="">
              <img src="static/images/phpksrm.png" alt="" />
              <dl>
                <dt>趣味闯关</dt>
                <dd>22门课程</dd>
              </dl>
            </a>
          </div>
        </div>
        <div class="bottom_right">
          <a href="">
            <span class="iconfont icon-weixin"></span>
            <h2>微信公众号</h2>
          </a>
          <a href="">
            <span class="iconfont icon-QQ-circle-fill"></span>
            <h2>官方QQ群</h2>
          </a>
        </div>
      </div>
    </main>
  </body>
</html>

css部分

/*这一部分是初始化样式*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
}
/*初始化结束*/
/*css代码*/
@import url(init.css);
@import url(font_icon/iconfont.css);
body {
  background-color: #f3f5f7;
}
/*顶部布局开始*/
header .content {
  width: 100vw;
  height: 40px;
  background-color: #343434;
}
header .content .top_content {
  width: 1200px;
  display: grid;
  grid-template-columns: 400px 100px;
  grid-template-rows: 40px;
  margin: auto;
  place-content: space-between;
  place-items: center start;
}
header .content .top_content .title span {
  color: #ccc;
  font-weight: 550;
  font-family: "微软雅黑";
  font-size: 14px;
}
header .content .top_content .right {
  display: flex;
  place-items: center;
}
header .content .top_content .right img {
  border-radius: 30px;
  width: 25px;
  height: 25px;
  margin-left: 22px;
}
header .content .top_content .right .icon-tixing {
  font-size: 20px;
  color: #fff;
}
/*顶部布局结束*/
/*顶部导航开始*/
nav {
  width: 100vw;
  height: 90px;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
nav .nav_content {
  width: 1200px;
  display: grid;
  margin: auto;
  gap: 0 10px;
  grid-template-columns: 200px 1fr 200px;
  grid-auto-rows: 90px;
  place-items: center start;
}
nav .nav_content .navs a {
  color: #333333;
  padding: 0 10px;
  font-weight: bold;
}
nav .nav_content .navs .active,
nav .nav_content .navs a:hover {
  color: red;
  font-size: 18px;
}
nav .nav_right {
  display: flex;
}
nav .nav_right input[type="search"] {
  width: 200px;
  height: 36px;
  border: none;
  outline: none;
  background-color: rgba(219, 211, 211, 0.938);
  border-radius: 20px;
  padding: 15px;
}
nav .nav_right .icon-sousuo {
  position: relative;
  left: -30px;
  top: 8px;
}
nav .nav_right .icon-sousuo:hover {
  color: red;
}
/*导航结束*/
/*主体区开始*/
main {
  width: 100%;
  margin-top: 30px;
}
main .main_content {
  width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 166px 810px 190px;
  grid-template-rows: 400px 80px;
  gap: 15px;
}
main .main_content .main_bottom {
  grid-area: 2 / 1 / span 2 / span 2;
}
main .main_content .left {
  border-radius: 20px;
  background-color: #fff;
  display: flex;
  flex-flow: column;
  place-items: center;
}
main .main_content .left a {
  color: #333333;
  width: 126px;
  height: 40px;
  margin-top: 8px;
  padding: 10px 0;
  text-align: center;
  border-radius: 20px;
}
main .main_content .left a:hover {
  background-color: lightsalmon;
}
main .main_content .lb a img {
  border-radius: 20px;
  width: 100%;
}
main .main_content .right {
  /* height: 400px; */
  display: grid;
  background-color: #fff;
  border-radius: 20px;
  grid-template-rows: 141px 1fr;
}
main .main_content .right .right_top {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
main .main_content .right .right_top .tx {
  padding: 18px 0;
  width: 155px;
  display: grid;
  margin: auto;
  place-items: center start;
  gap: 0 10px;
  grid-template-columns: 40px 105px;
}
main .main_content .right .right_top .tx a img {
  border-radius: 30px;
  width: 100%;
}
main .main_content .right .right_top .tx dl dt > a {
  color: #333333;
  font-size: 14px;
  font-weight: bold;
}
main .main_content .right .right_top .tx dl dt > .vip {
  position: relative;
  font-size: 20px;
  top: 2px;
}
main .main_content .right .right_top .tx dl dd {
  color: #999999;
  padding: 10px 0;
  font-size: 12px;
}
main .main_content .right .right_top .anniu button {
  display: block;
  border: none;
  outline: none;
  background-color: #f11717;
  width: 150px;
  height: 34px;
  border-radius: 20px;
  margin: auto;
  color: #fff;
  font-weight: bold;
}
main .main_content .right .right_top .anniu button:hover {
  cursor: pointer;
  width: 151px;
  height: 35px;
}
main .main_content .right .right_bottom .top {
  display: flex;
  place-content: center;
}
main .main_content .right .right_bottom {
  display: grid;
  grid-template-rows: 18px 1fr;
  margin-top: 10px;
}
main .main_content .right .right_bottom .bottom {
  margin-top: 10px;
  place-items: center;
  /* margin: 10px; */
  display: grid;
  gap: 25px;
  grid-template-rows: repeat(5, 18px);
}
main .main_content .right .right_bottom p span {
  font-size: 14px;
  margin: 0 10px;
}
main .main_content .right .right_bottom .top p:first-of-type a {
  background-color: #f11717;
  color: #fff;
  font-size: 12px;
  padding: 1px;
}
main .main_content .right .right_bottom .bottom p a {
  color: #b6b6b6;
  font-size: 14px;
}
main .main_content .right .right_bottom .bottom p a:hover {
  color: red;
}
/*主题内容完结*/
main .main_content .main_bottom .bottom_left {
  background-color: #fff;
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 80px;
}
main .main_content .main_bottom .bottom_left a img {
  width: 100%;
}
main .main_content .main_bottom .bottom_left .left_xxlj {
  display: flex;
  flex-flow: column;
  place-items: center;
  place-content: center;
}
main .main_content .main_bottom .bottom_left .left_xxlj span:first-of-type {
  color: #333333;
}
main .main_content .main_bottom .bottom_left .left_xxlj span:nth-of-type(2) {
  color: #999999;
  font-size: 12px;
}
main .main_content .main_bottom .bottom_left a:nth-of-type(1) {
  display: grid;
  width: 130px;
  grid-template-columns: 40px 1fr;
  place-content: center;
  gap: 10px;
}
main .main_content .main_bottom .bottom_left a dt {
  color: #333333;
  font-size: 12px;
}
main .main_content .main_bottom .bottom_left a dd {
  padding: 8px 0;
  font-size: 12px;
  color: #999999;
}
main .main_content .main_bottom .bottom_left a dt:hover {
  color: red;
}
main .main_content .main_bottom .bottom_left a:nth-of-type(2) {
  display: grid;
  width: 130px;
  grid-template-columns: 40px 1fr;
  place-content: center;
  gap: 10px;
}
main .main_content .main_bottom .bottom_left a:nth-of-type(3) {
  display: grid;
  width: 130px;
  grid-template-columns: 40px 1fr;
  place-content: center;
  gap: 10px;
}
main .main_content .main_bottom .bottom_left a:nth-of-type(4) {
  display: grid;
  width: 130px;
  grid-template-columns: 40px 1fr;
  place-content: center;
  gap: 10px;
}
main .main_content .main_bottom .bottom_left a:nth-of-type(5) {
  display: grid;
  width: 130px;
  grid-template-columns: 40px 1fr;
  place-content: center;
  gap: 10px;
}
main .main_content .bottom_right {
  background-color: #fff;
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
main .main_content .bottom_right a:first-of-type {
  display: flex;
  flex-flow: column;
  place-content: center;
  place-items: center;
}
main .main_content .bottom_right a:first-of-type + a {
  display: flex;
  flex-flow: column;
  place-content: center;
  place-items: center;
}
main .main_content .bottom_right a h2 {
  height: 16px;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  color: #333333;
}
main .main_content .bottom_right a span {
  color: #777;
  font-size: 32px;
  padding-bottom: 5px;
}
main .main_content .bottom_right a:hover h2 {
  color: red;
}
/*主体部分结束*/

批改老师：

PHPz

批改状态：合格

老师批语：写的不错

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

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

0条评论

作者最新博文

HTML文档解析/markdown语法介绍/emmet语法介绍

2022-07-02 13:57:06