mdui实现简洁的问答平台首页效果代码-html代码-BFW代码库

代码语言：html

代码描述：mdui实现简洁的问答平台首页效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mdui.min.css">
    <style>
        .mdui-list-item{
          border-radius: 0 24px 24px 0;
        }
        .mdui-list-item:hover{
          background-color: rgb(233, 239, 253);
        }
        .mdui-list-item-active{
          background-color: rgb(233, 239, 253);
          font-weight: 400;
          color: #1A73E9;
        }
        .mdui-list-item-active>.mdui-list-item-icon{
          color: #1A73E9;
        }
        #questions{
          max-width: 770px;
          margin-top: 24px;
          margin-bottom: 62px;
        }
        .question:first-child{
          border-radius: 8px 8px 0 0;
        }
        .question:last-child{
          border-radius: 0 0 8px 8px;
        }
        .question:only-child{
          border-radius: 8px;
        }
        .question{
          position: relative;
          display: flex;
          padding: 16px 22px;
          border-bottom: 1px solid rgba(0, 0, 0, .08);
          background: white;
          box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
          transition: background .3s cubic-bezier(.4,0,.2,1);
          text-decoration: none;
          overflow: hidden;
        }
        .question:active{
          background: #eee;
        }
        .question.visited::before{
          /*莫问我何不用:visited*/
          content: ' ';
          width: 2px;
          height: 100%;
          position:absolute;
          left: 0;
          top: 0;
          background: #1A73E9;
        }
        .question>.avatar{
          width: 20px; /*像素测量并除以1.25*/
          height: 20px;
          border-radius: 50%;
          margin-right: 22px;
        }
        .question>.info{
          flex-grow: 1;
        }
        .question>.info>header{
          color: rgba(0,0,0,.87);
          font-size: 16px;
          height: 24px; /*肉眼猜测*/
          overflow:hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .question>.info>footer{
          line-height: 16px;
          font-size: 14px;
          color: rgba(0,0,0,.45);
        }
        .question>.info>footer>.answers{
          float: right;
          font-size: 13px;
        }
        :target+.mdui-fab{
          transform: scale(0) translateZ(0);
        }
        .bottom-dialog{
        	transition:all .325s ease-in-out;
        	position:fixed;
        	right: 72px;
        	top:100%;
        	transform:translateY(0);
        	width:100%;
        	max-width:452px;
        	background:white;
        	z-index:3;
          box-shadow: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);
          border-radius: 8px 8px 0 0;
          overflow: hidden;
          /* user agent stylesheet应该当场** */
        	border: none;
          padding: 0;
          margin: 0;
          left: auto;
        }
        .bottom-dialog:target{
        	transform:translateY(-100%);
        }
        .bottom-dialog:target.collapsed{
        	transform:translateY(-40px);
        }
        .bottom-dialog>header{
          height: 40px;
          padding: 0 20px;
          box-sizing: border-box;
          background: #404040;
          display: flex;
          color: white;
          align-items: center;
        }
        .bottom-dialog>header>:first-child{
          flex-grow: 1;
          font-size: 16px;
        }
        .bottom-dialog>header>.mdui-btn-icon{
          color: rgba(255, 255, 255, .54);
          transform: scale(66%);
        }
        .bottom-dialog>input{
          position: relative;
          height: 62px;
          line-height: 34px;
          border: none;
          outline: none;
          padding: 14px 0;
          border-bottom: 1px solid rgba(0, 0, 0, .08);
          margin: 0 20px;
          width: calc( 100% - 40px );
          font-size: 16px;
          box-sizing: border-box;
          display:block;
        }
        .bottom-dialog>[contenteditable]{
          padding: 14px 20px;
          height: 200px;
          overflow-y: auto;
          outline: none;
          box-sizing: border-box;
          position: relative;
        }
        .bottom-dialog>[contenteditable]:empty::before{
          content: attr(placeholder);
          color: rgba(0,0,0,.42);
          cursor: text;
        }
        .bottom-dialog>[contenteditable]::after{
          position:absolute;
          bottom: 0;
          left: 20px;
          right: 20px;
          height: 1px;
          content: ' ';
          background: rgba(0, 0, 0, .08);
        }
        .bottom-dialog>footer{
          display: flex;
          align-items: center;
          padding: 14px 20px;
        }
        .bottom-dialog>footer>.menu{
          padding: 0;
          width: 28px;
          min-width: 28px; /*MDUI按钮自带min-width为88px*/
          height: 28px;
          line-height: 28px;
          border-radius: 3px;
          box-shadow: inset 0 0 0 1px transparent;
          opacity: .6;
          color: #212121;
        }
        .bottom-dialog>footer>.submit-text{
          min-width: 58px;
          margin-right: 12px;
        }
        @media (max-width: 600px){
          .bottom-dialog{
            right: 0;
            max-width: 600px;
          }
        }
    </style>



</head>

<body>
    <header class="mdui-appbar mdui-appbar-fixed mdui-appbar-fixed mdui-color-white">
        <nav class="mdui-toolbar">
            <button class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '.mdui-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></button>
            <div role="site-name" class="mdui-typo-headline">MDUI</div>
            <div role="title" class="mdui-typo-title">问答</div>
        </nav>
        <nav class="mdui-tab mdui-tab-centered" mdui-tab>
            <a href="#" class="mdui-ripple">最新</a>
            <a href="#" class="mdui-ripple unsupported">近期热门</a>
            <a href="#" class="mdui-ripple unsupported">已关注</a>
        </nav>
    </header>
    <aside class="mdui-drawer">
        <ul class="mdui-list mdui-ripple-blue">
            <li class="mdui-list-item mdui-ripple unsupported">
                <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
                <div class="mdui-list-item-content">首页</div>
            </li>
            <li class="mdui-list-item mdui-ripple unsupported">
                <i class="mdui-list-item-icon mdui-icon material-icons">book</i>
                <div class="mdui-list-item-content">话题</div>
            </li>
            <li class="mdui-list-item mdui-ripple mdui-list-item-active">
                <i class="mdui-list-item-icon mdui-icon material-icons">question_answer</i>
                <div class="mdui-list-item-content">问答</div>
            </li>
            <li class="mdui-list-item mdui-ripple unsupported">
                <i class="mdui-list-item-icon mdui-icon material-icons">description</i>
                <div class="mdui-list-item-content">文章</div>
            </li>
            <li class="mdui-divider"></li>
            <li class="mdui-list-item mdui-ripple unsupported">
                <i class="mdui-list-item-icon mdui-icon material-icons">account_circle</i>
                <div class="mdui-list-item-content">个人资料</div>
            </li>
            <li class="mdui-list-item mdui-ripple unsupported">
                <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
                <div class="mdui-list-item-content".........完整代码请登录后点击上方下载按钮下载查看