老师，我的meny-list怎么没出来呀，好懵啊...

来源：4-3 首页.基本样式-模块-nav&header

李可意

2019-06-22 15:59:12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./frame.css">
    <link rel="stylesheet" href="./basic.css">
</head>
<body>
    <!-- top顶部区域 -->
    <div class="top" id="top">
        <div class="wrap">
            <p class="call">13997944044电话预约</p>
            <p class="land">
                欢迎来到城市预约挂号统一平台&nbsp;
                请&nbsp;&nbsp;
                <a href="#">登录</a>
                <a href="#">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#">帮助中心</a>
            </p>
        </div>
    </div>

    <!-- header的logo，搜索区域 -->
    <div class="header" id="header">
        <div class="wrap">
            <a href="#" class="logo"><img src="./images/logo.png" alt=""></a>           <!-- logo -->
            <div class="search"></div>                                                  <!-- 搜索栏 -->
        </div>
    </div>

    <!-- nav导航区域 -->
    <div class="nav" id="nav">
        <div class="wrap">
            <div class="link menu">全部科室
                <div class="menu-list"></div>
            </div>
            
            <a href="#" class="link">医院挂号</a>
            <a href="#" class="link">科室挂号</a>
            <a href="#" class="link">疾病挂号</a>
            <a href="#" class="link">最新公告</a>
            <a href="#" class="link right">社会知名医院</a>
        </div>
    </div>

    <!-- banner轮播图区域 -->
    <div class="banner" id="banner">

        <div class="banner-slider"></div>
        <div class="banner-search"></div>
        <div class="banner-help"></div>

    </div>

    <!-- 内容区域 -->
    <div class="content" id="content">
        <div class="wrap clearfix">                 <!-- class="clearfix" 清除浮动 -->
            <div class="content-tab"></div>
            <div class="content-news"></div>
            <div class="content-close"></div>
        </div>
    </div>

    <!-- 页脚区域 -->
    <div class="footer" id="footer">

    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}

/* 清除浮动 */
.clearfix:after{
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
    zoom: 1;
}

/* 通用样式类 */
.wrap{
    width: 1000px;          /* 通用宽度1000px */
    margin: 0 auto;         /* 水平居中 */
    position: relative;     /* 相对定位 */
}

/* top顶部区域 */
.top{
    height: 30px;           
    height: 30px;           /* div是块级元素，占一整行，没设置width */
    background: #f5f5f5;
}

/* header的logo，搜索区域 */
.header{
    height: 92px;
}

/* nav导航区域 */
.nav{
    height: 36px;
    background: #60bff2;
}

/* banner轮播图区域 */
.banner{
    width: 802px;
    height: 414px;
    margin: 0 auto;
    padding: 9px 0 0 198px;
}
/* 轮播图 */
.banner-slider{
    float: left;                /* 左浮动 */
    width: 544px;
    height: 414px;
    background: #8edff3;
}
/* 快速预约 */
.banner-search{
    float: right;               /* 右浮动 */
    width: 250px;
    height: 255px;
    background: #eee;
}
/* 帮助中心 */
.banner-help{
    float: right;
    width: 250px;
    height: 147px;
    background: #eee;
    margin-top: 12px;           /* 上外边距12px */
}

/* 内容区域 */
.content{
    padding: 10px 0 38px 0;     /* 内边距，上右下左 */
}
.content-tab{
    float: left;
    width: 742px;
    height: 490px;
    background: #eee;
}
/* 最新公告，停诊公告 */
.content-news,.content-close{
    float: right;
    width: 248px;
    height: 236px;
    border: 1px solid #ccc;
}
/* 停诊公告 */
.content-close{
    margin-top: 12px;           /* 上外边距12px */
    border: 1px solid pink;
}

/* 页脚区域 */
.footer{
    height: 132px;
    padding: 25px 0;            /* 内边距，上下25px */
    background: #eceef2;
}

p{
    margin: 0;
    padding: 0;
    display: inline-block;      /* 行内块元素 */
}

a{
    text-decoration: none;      /* 清除a标签下划线 */
}

/* top 模块内样式 */
.top{
    line-height: 30px;
    font-size: 13px;
    color: #868686;
}

/* 电话预约 */
.top .call{
    float: left;
    padding-left: 20px;         /* 左内边距20px */
    background: url("./images/icon-call.png") no-repeat center left;        /* 插入电话图片  不重复  靠左垂直居中 */
}

/* 登陆注册 */
.top .land{
    float: right;               /* 右浮动 */
}
.top a{
    color: #2da5e1;
    padding-left: 10px;         /* a标签左内边距 */
}

/* header 模块内样式 */
.header .logo{
    width: 402px;
    height: 74px;
    padding: 9px 0;             /* a标签内边距 */
    display: inline-block;      /* 行内块元素 */
}
.header .logo img{
    width: 100%;
    height: 100%;
}
.header .search{
    width: 326px;
    height: 38px;
    position: absolute;         /* 绝对定位 */
    top: 29px;
    right: 0;
    background: orange;
}

/* nav 模块内样式 */
.nav .link{
    display: inline-block;      /* 行内块元素 */
    float: left;                /* 每一个a标签设置左浮动 */
    padding-left: 30px;         /* 每个a标签左内边距30px */
    line-height: 36px;          /* 文字垂直居中 */
    color: #fff;
    font-size: 16px;
}
.nav a:hover{
    color: #d7f3ff;
}
.nav .menu{
    width: 130px;
    padding-right: 30px;        /* "全部科室"   标签右内边距30px    总width：160px */
    text-align: center;         /* 文字垂直水平居中 */
    background: #1fa4f0;
    position: relative;         /* 父元素相对定位 */
}
.nav .menu .meny-list{
    background: #1fa4f0;
    width: 100%;
    height: 422px;
    position: absolute;
    top: 36px;
    left: 0;
}

写回答

3回答