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

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

代码语言：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:452.........完整代码请登录后点击上方下载按钮下载查看