仿写学校官网

仿写学校官网

整体介绍

官网大致可分为 顶部的logo搜索框、导航栏、轮播图、校园新闻、底部
除了样式外，主要是二级菜单和几个hover属性

  • 导航栏的二级菜单和hover


    鼠标悬浮显示二级菜单 和 背景色改变

  • 新闻标题的变色


    新闻标题的变色

  • 底部导航栏的透明度改变


    底部导航栏的透明度改变
  • 底部
鼠标悬浮出现二维码
鼠标悬浮出现选项
鼠标悬浮背景色改变

一些困难

  1. 二级菜单高度塌陷
  • 使用伪元素清浮动
  1. 二级菜单hover后会将下方的轮播图顶下去
  • 在第一层ul上加上 相对定位，第二层ul加 绝对定位 使其脱离文档流
  1. 子菜单与主菜单发生偏移，边框对不上
  • 给主菜单 li标签 设置宽度（给主菜单的 li 标签加padding是没用的，子菜单还是会跟着偏移）
  1. 微信图标和二维码写成了两个兄弟元素，用.Wechat:hover .QRcode{}无法控制
  • 用 + 层级选择器 可选择下一个兄弟元素（PS：但无法选择上面或不相邻的兄弟元素）
  • 也可以写成一个div内，因为二维码图片是不显示的，给div加hover

核心代码

主要就是导航栏的二级菜单

用伪元素清浮动
.nav_ul::after{
    content: "";
    width: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}
定位，脱离文档流，使其在下面的元素上显示，而不是顶开下面的元素
    <style>
        .nav_ul{
            /* 父元素 相对定位 但不改变自身位置 */
            position: relative;
        }
        .hidden{
            /* 子元素 绝对定位 使其脱离文档流 浮在下方元素之上 */
            position: absolute;
        }
        .hidden li{
            /* 隐藏子菜单 */
            display: none;
        }
        .item:hover li{
            /* 鼠标悬浮显示子菜单 */
            display: block;
        }
        /* 鼠标悬浮改变字体、背景颜色 */
        .item:hover{
            background-color: #70A1E1;
        }
        .item:hover .hidden{
            background-color: white;
        }
        .hidden li:hover{
            background-color: #0573b8;
            color: white;
        }
        /* 样式设置 */
        .nav_background{
            height: 42px;
            background-color: #0573b8;
        }
        .nav{
            height: 42px;
            width: 1200px;
            margin: 0 auto;
        }
        .nav_ul{
            margin: 0 auto;
            color: white;
        }
        .nav_ul::after{
            content: "";
            width: 0;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .item{
            list-style: none;
            float: left;
            line-height: 42px;
            height: 42px;
            width: 108px;
            margin: 0 15px;
            text-align: center;
        }
        .hidden{
            list-style: none;
            color: black;
            font-size: 14px;
        }
        .hidden li{
            border-bottom:1px solid #CDCDCD;
            height: 42px;
            width: 108px;
        }


    </style>
<body>
    <div class="nav_background">
        <div class="nav">
            <ul class="nav_ul">
                <li class="item">首页</li>
                <li class="item">学校概况
                    <ul class="hidden">
                        <li>学校简介</li>
                        <li>理事会</li>
                        <li>监视会</li>
                        <li>院长书记寄语</li>
                        <li>学院领导及分工</li>
                        <li>校园风光</li>
                    </ul>
                </li>
                <li class="item">部门设置
                    <ul class="hidden">
                        <li>党政群部门</li>
                        <li>教学科研单位</li>
                        <li>直属单位</li>
                    </ul>
                </li>
                <li class="item">招生就业
                    <ul class="hidden">
                        <li>招生之窗</li>
                        <li>就业指导</li>
                    </ul>
                </li>
                <li class="item">综合服务
                    <ul class="hidden">
                        <li>学校校历</li>
                        <li>作息时间</li>
                        <li>班车信息</li>
                        <li>地理交通</li>
                    </ul>
                </li>
                <li class="item">信息公开
                    <ul class="hidden">
                        <li>会议信息</li>
                        <li>专业综合评估</li>
                    </ul>
                </li>
                <li class="item">主题教育网</li>
                <li class="item">统一认证平台</li>            
            </ul>   
        </div>
    </div>
</body>

一些经验和心得

调整元素位置

调整元素位置时可以使用margin padding，定位，flex布局等方法
如 校园新闻、底部导航栏等部分都可以用flex布局 快速调整盒子的位置

校园新闻

底部导航栏

边距

  • 在设置盒子宽高后，再加边距则会加大盒子大小，可以用 怪异盒 使盒子边距加宽高的总和 为所设置的大小
    box-sizing: border-box;
  • 注意有些标签不能设置margin 如 span 标签

flex布局

特点：

  1. 子元素默认横向排列
  2. 行内元素会变为块级元素
  3. 只有一个元素时，margin:0 auto会自动居中

部分常用属性：

  1. flex-direction：用于设置主轴的方向
row column row-reverse column-reverse
默认值
主轴为水平方向		 主轴为垂直方向 主轴为水平方向
但是从右向左排列		 主轴为垂直方向
但是从下往上排列
  1. flex-wrap：用于定义弹性盒里的盒子是否换行
nowrap wrap wrap-reverse
默认值，子盒子不换行 子盒子自动换行 子盒子自动换行，但是倒序排列
  1. justify-content：定义在主轴上子盒子的对齐方式
flex-start flex-end center space-between space-around
默认值，子盒子在主轴上从左到右排列 子盒子在主轴上从右至左排列 子盒子在主轴上居中排列 子盒子在主轴上平均分布排列，左右两端没有空隙 子盒子在主轴上平均分布排列，各自之间有空隙
  1. align-content
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

项目属性

  1. align-self：设置子盒子对齐方式
flex-start flex-end center baseline stretch
子盒子在交叉轴上从上至下排列 子盒子在交叉轴上从下至上排列 子盒子在交叉轴上居中排列 每个子盒子都根据其文本基线进行对齐 默认值，子盒子在交叉轴上被拉伸填满弹性容器
（如果不设置宽或高则会在宽或高上拉满）

底部导航栏的flex布局
因为flex布局默认主轴是横向的，所以底部导航栏只需将外面的盒子设为flex即可
而校园新闻部分则需要 设置折行,并设置 主轴上的对齐方式 和 折行的间距

        .contianer{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

    <style>
        .contianer{
            width: 1000px;
            height: 900px;
            margin: 0 auto;
            background-color: black;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }
        div{
            width: 480px;
            height: 430px;
            background-color: yellow;
            float: left;
        }
    </style>

<body>
    <div class="contianer">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

权重

用选择器写样式属性时，发现样式没生效，可以在浏览器的审查元素中查看样式是否正确添加到目标上，若已经添加上但有横线划掉，则可能权重不够，导致属性值被覆盖

二级菜单

写二级菜单时 注意别把子菜单写到主菜单上【写到li标签内】 （改了好久才发现的）

错误示范
            <ul class="nav_ul">
                <li class="item">首页</li>
                <li class="item">学校概况</li>
                    <ul class="hidden">
                        <li>学校简介</li>
                        <li>理事会</li>
                        <li>监视会</li>
                        <li>院长书记寄语</li>
                        <li>学院领导及分工</li>
                        <li>校园风光</li>
                   </ul>                
                <li class="item">部门设置</li>
                    <ul class="hidden">
                        <li>党政群部门</li>
                        <li>教学科研单位</li>
                        <li>直属单位</li>
                    </ul>
            </ul>
正确示范
            <ul class="nav_ul">
                <li class="item">首页</li>
                <li class="item">学校概况
                    <ul class="hidden">
                        <li>学校简介</li>
                        <li>理事会</li>
                        <li>监视会</li>
                        <li>院长书记寄语</li>
                        <li>学院领导及分工</li>
                        <li>校园风光</li>
                    </ul>
                </li>
                <li class="item">部门设置
                    <ul class="hidden">
                        <li>党政群部门</li>
                        <li>教学科研单位</li>
                        <li>直属单位</li>
                    </ul>
                </li>
            </ul>

选择器

nth-child()

这个结构性伪类选择器用时注意直接写div:nth-child()没用，需要 在冒号前加空格 或这加空格和目标标签才行（试了好久 误打误撞试出来的）
但是选择 加空格和目标标签 的方法需要 加的目标标签与目标在子元素中顺序对的上
所以现在我认为空格应该是代表后代

错误示范
    <style>
        .box:nth-child(1){
            background-color: red;
        }
    </style>

<body>
    <div class="box">
        <p>p-1111</p>
        <div>div-2222</div>
        <p>p-3333</p>
    </div>
</body>
不加任何字符的显示结果
正确示范
    <style>
        /* .box后加空格 */
        .box :nth-child(1){
            background-color: red;
        }
    </style>

<body>
    <div class="box">
        <p>p-1111</p>
        <div>div-2222</div>
        <p>p-3333</p>
    </div>
</body>
加空格的显示结果
    <style>
        /* .box后加空格p标签 */
        .box p:nth-child(1){
            background-color: red;
        }
    </style>

<body>
    <div class="box">
        <p>p-1111</p>
        <div>div-2222</div>
        <p>p-3333</p>
    </div>
加空格p标签的显示结果
    <style>
        /* 索引与目标元素在子元素中的顺序不符 */
        .box p:nth-child(2){
            background-color: red;
        }
    </style>

<body>
    <div class="box">
        <p>p-1111</p>
        <div>div-2222</div>
        <p>p-3333</p>
    </div>
</body>
索引与目标元素在子元素中的顺序不符 的显示结果
    <style>
        /* 索引与目标元素在子元素中的顺序相符 */
        .box div:nth-child(2){
            background-color: red;
        }
    </style>

<body>
    <div class="box">
        <p>p-1111</p>
        <div>div-2222</div>
        <p>p-3333</p>
    </div>
</body>
索引与目标元素在子元素中的顺序相符 的显示结果

层级选择器之 +与~

+ 可选择该元素下一个的兄弟元素
例如仿写中的微信图标与二维码为兄弟元素 而需要hover微信图标后再显示二维码

    <style>
        .wechat:hover +.QRcode{
            display: inline-block;
        }
    </style>

<body>
    <img src="static/wechat.png" alt="" class="wechat">
    <img src="static/QRcode.jpg" alt="" class="QRcode">
</body>

~ 可选择该元素下面的所有兄弟元素

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 仿写学校官网
    仿写学校官网 整体介绍 官网大致可分为 顶部的logo搜索框、导航栏、轮播图、校园新闻、底部除了样式外，主要是二级...
    凌云_阅读 210评论 0赞 0
  • CSS
    常用 注意区分大小写 带空格的字体记得加引号 使用背景图的时候最好指定背景色，这样至少能保证背景图加载出现问题时文...
    涛涛抄书阅读 433评论 0赞 0
  • CSS
    CSS：全称Cascading Style Sheets（层叠样式表） CSS 规则由两个主要部分构成,选择器(给...
    张_何阅读 203评论 0赞 0
  • CSS
    一、CSS中的属性和取值 1.文本类属性： text-align属性：此标签内容的水平对齐方式，内容须为具体文字/...
    刘远舟阅读 532评论 0赞 1
  • CSS
    简介 CSS （cascading style sheet）层叠样式表 CSS书写方式 内嵌式：在head标签中书...
    Zindex阅读 598评论 0赞 2