grid和flex布局结合vw-rem布局实际应用

布局实际应用

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">
    <title>vw-rem案例</title>
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <header>
        <div class="top">
            <div class="sky">
                <span>PHP中文网，程序员梦开始的地方!</span>
                <a href="" class="iconfont icon-tongzhi tongzhi"></a>
                <a href="" class="pic"><img src="./css/images/user-pic.jpeg" alt=""></a>
            </div>
            <civ class="navs">
                <a href=""><img src="./css/images/logo.png" alt=""></a>
                <a href="">首页</a>
                <a href="">视频教程</a>
                <a href="">学习路径</a>
                <a href="">php培训</a>
                <a href="">资源下载</a>
                <a href="">技术文章</a>
                <a href="">社区</a>
                <a href="">app下载</a>
                <div class="search">
                    <input type="search" class="sech" placeholder="输入关键字">
                    <label for="sech">搜索</label>
                </div>
        </div>
        </div>
    </header>
    <main class="main">
        <div class="content">
            <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="mid">
                <a href=""><img src="./css/images/slider.jpeg" alt=""></a>
            </div>
            <div class="right">
                <div class="userinfo">
                    <a href=""><img src="./css/images/user-pic.jpeg" alt=""></a>
                    <div class="name"><a href="">朱老师</a></div>
                    <div class="button"><a href="">我的学习</a></div>
                    <div class="info">p豆 2065.5</div>
                </div>
                <ul class="nav-right">
                    <li class="content1">问答社区</li>
                    <li class="content2">头条</li>
                    <li class="content3">福利</li>
                    <li class="content4">新班</li>
                    <li class="content5">招募</li>
                    <li class="content6">公告</li>
                    <li class="content7"><a href="">答疑</a></li>
                    <li class="content8"><a href="">【整理分享】2022年最流行的</a></li>
                    <li class="content9"><a href="">限时折扣>></a></li>
                    <li class="content10"><a href="">20期PHP线上班</a></li>
                    <li class="content11"><a href="">课程合作计划</a></li>
                    <li class="content12"><a href="">app上线啦</a></li>
                </ul>
            </div>
            <div class="buttom-left">
                <ul class="navbottom">
                    <li>
                        <span>学习路径</span>
                        <span>全部7个&gt;</span>
                    </li>
                    <li>
                        <img width="50px" src="./css/images/dgjj.png" alt="">
                        <a href="">独孤九剑</a>
                        <span>9门课程</span>
                    </li>
                    <li>
                        <img width="50px" src="./css/images/phpkjkf.png" alt="">
                        <a href="">独孤九剑</a>
                        <span>9门课程</span>
                    </li>
                    <li>
                        <img width="50px" src="./css/images/phpksrm.png" alt="">
                        <a href="">独孤九剑</a>
                        <span>9门课程</span>
                    </li>
                    <li>
                        <img width="50px" src="./css/images/tlbb.png" alt="">
                        <a href="">独孤九剑</a>
                        <span>9门课程</span>
                    </li>
                    <li><img width="50px" src="./css/images/ynxj.png" alt="">
                        <a href="">独孤九剑</a>
                        <span>9门课程</span>
                    </li>
                </ul>
            </div>
        </div>
    </main>
</body>
</html>

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;
}
body {
  background-color: #f3f5f7;
}
header .top {
  width: 100vw;
  height: 40px;
  background-color: #343434;
  color: #aaa;
}
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 img {
  width: 50%;
  border-radius: 50%;
}
header .top .content .right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
}
header .top .content .title {
  font-size: larger;
  /* 加粗 */
  font-weight: larger;
}
/* 导航 */
header .navs {
  width: 100vw;
  height: 90px;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
header .navs .content {
  /* 必须限定宽高,否则无法在父容器中居中 */
  width: 1200px;
  display: grid;
  grid-template-columns: 140px 1fr 200px;
  grid-auto-rows: 90px;
  margin: auto;
  gap: 10px;
  place-items: center start;
}
header .navs .content nav {
  display: flex;
}
header .navs .content nav a {
  padding: 0 10px;
}
header .navs .content nav a:hover,
header .navs .content nav a.active {
  font-weight: bold;
  color: red;
}
header .navs .content img {
  width: 100%;
}
header .navs .content .search {
  display: flex;
}
header .navs .content .search input[type='search'] {
  width: 200px;
  height: 36px;
  border: none;
  background-color: #eee;
  outline: none;
  border-radius: 20px;
  padding-left: 10px;
}
header .navs .content .search .icon-fangdajing1 {
  font-size: 22px;
  color: #ccc;
  position: relative;
  left: -40px;
  top: 5px;
}
header .navs .content .search .icon-fangdajing1:hover {
  color: red;
  /* 小手 */
  cursor: pointer;
}
/*header结束*/
body main {
    display: grid;
    place-content: center;
    padding-top: 2vh;
}
body main .content {
    display: grid;
    width: 70vw;
    height: 54vh;
    grid-template-columns: 8vw 42vw 14vw;
    grid-template-rows: 38vh 12vh;
    /* border: 1px solid black; */
    place-content: space-evenly;
}
body main .content .left {
    display: flex;
    flex-direction: column;
    place-content: space-around;
    place-items: center; 
    padding-top: 2vh;
    padding-bottom: 2vh;
    font-size: 0.11rem;
    background-color: white;
    border-radius: 20px;
}
body main .content .left a:hover {
    color: red;
}
body main .content .mid {
    display: grid;
    place-content: center;
}
body main .content .mid a img {
    width: 100%;
    border-radius: 0.2rem;
    padding: 0.1rem;
}
/* 右侧上头 */
body main .content .right {
    background-color: white;
    border-radius: 20px;
}
body main .content .right .userinfo {
    display: grid;
    grid-template-columns: 5vw 7vw;
    grid-template-rows: 4vh 4vh 4vh;
    place-content: center;
    place-items: center;
    border-bottom: 1px solid #bbb;
    padding-bottom: 1vh;
    padding-top: 1vh;
}
body main .content .right .userinfo a {
    grid-area: 1 / 1 / span 2 / span 1;
    place-self: center end;
}
/* 头像2 */
body main .content .right .userinfo a img {
    width: 4vw;
    border-radius: 20px;
}
body main .content .right .userinfo .name {
    width: 4vw;
    border-radius: 20px;
    font-size: 0.09rem;
    place-self: end center;
    font-weight: bold;
}
body main .content .right .userinfo .button {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    background-color: red;
    width: 10vw;
    border-radius: 20px;
    text-align: center;
}
body main .content .right .userinfo .button a {
    color: white;
    font-size: smaller;
}
body main .content .right .userinfo .info {
    font-size: 0.09rem;
    place-self: start center;
}
/* 头像部分结束 */
/* 右侧底部菜单栏 */
body main .content .right .nav-right {
    display: grid;
    grid-template-columns: 5vw 7vw;
    grid-template-rows: repeat(6,3.3vh);
    grid-auto-flow: column;
    place-content: center;
    place-items: center;
    font-size: 0.1rem;
    padding-top: 2vh;
}
body main .content .buttom-left {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}
body main .content .buttom-left .navbottom {   
    display: flex;
    place-items: center;
    place-content: space-around;
    font-size: 0.10rem;
    padding: 0.1rem;
}
body main .content .buttom-left .navbottom li:nth-of-type(n+2) {
    display: grid;
    grid-template-columns: 3vw 4vw;
    gap: 0 10px;
    place-items: center start;
    padding-left: 0.1rem;
}
body main .content .buttom-left .navbottom img {
    grid-row: span 2;
}
body main .content .buttom-left .navbottom li:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    place-content: center;
}
body main .content .buttom-left .navbottom li:nth-of-type(n+2) a {
    font-weight: bold;
    color: black;
}
body main .content .buttom-left .navbottom li:nth-of-type(n+2) a:hover {
    color: red;
}
body main .content .buttom-left .navbottom li:nth-of-type(n+2) span {
    color: #555;
}

实际效果：

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

markdown以及emmet语法

2022-07-03 15:55:17