搜索 登录
初学第十一章：用grid和flex布局完成php中文网首页上半部分

初学第十一章：用grid和flex布局完成php中文网首页上半部分

huixiang / / 0 评论 / 431 阅读 /0 赞
钱才是硬道理
本文阅读 3 分钟
首页 › 前端,CSS3 › 正文

思路分享

代码下载
效果图：
l5m29h2r.png

  1. 先从顶部开始一部分一部分往下写
  2. 布局方式：分析这一部分可以拆分成几部分 进行构思 用网格来表示看下可以生成几行几列的网格 例如：l5m1lqgj.png
  3. 先写一个大盒子包住 然后在盒子内进行布局 把每块想象成一个盒子左中右三部分

  4. 细致划分里面的区域左边的盒子可以用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;
}
/*主体部分结束*/
本文来自投稿，不代表本站立场，如若转载，请注明出处：https://www.hui-xiang.cn/archives/96.html
-- 展开阅读全文 --
初学第十章：grid常用属性与实例演示
« 上一篇 07-14
初学第十二章：移动端布局详解/实例演示
下一篇 » 07-16

随机推荐

初学第七章：字体图标的引用和自定义样式/媒体查询的使用

初学第三十三章：PHP类的继承/抽象类的实现/命名空间

初学第二十一章：js轮播图/选项卡/数组API使用

初学第十八章：js类数组/DOM操作/操作form表单/遍历DOM树

作者信息
huixiang
钱才是硬道理
发表文章 46 篇
最新文章

动态快讯

热门文章

搭建本站同款Typecho博客+Joe模板从基础开始到完美运行
998 阅读 ，
VUE安装/VUE基础指令
901 阅读 ，
学习环境安装与配置/必知术语介绍
831 阅读 ，
最近在使用npm安装Vue脚手架遇到的报错问题解决方案
819 阅读 ，

标签TAG