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

网友评论0