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