ishowshao/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=0.5">
    <title>initial scale 0.5</title>
    <style>
        body {
            margin: 0;
        }

        h1 {
            height: 88px;
            margin: 0;
            background-color: #c2a067;
            text-align: center;
            color: #fff;
            line-height: 88px;
            font-weight: normal;
            border-bottom: 1px solid #d6d6d6;
            font-size: 40px;
        }

        .tab {
            display: flex;
            height: 88px;
            line-height: 88px;
            font-size: 32px;
            text-align: center;
            color: #333;
            border-bottom: 1px solid #d6d6d6;
        }

        .tab-item {
            flex: 1;
        }

        .tab-item.active {
            position: relative;
            color: #c2a076;
        }

        .tab-item.active:after {
            position: absolute;
            content: ' ';
            font-size: 0;
            height: 4px;
            width: 104px;
            left: 50%;
            bottom: 0;
            margin-left: -52px;
            background-color: #c2a076;
        }

        h2 {
            position: relative;
            box-sizing: border-box;
            height: 104px;
            line-height: 68px;
            padding: 18px 29px 18px 51px;
            margin: 0;
            font-weight: normal;
            color: #333;
            font-size: 30px;
            border-bottom: 1px solid #d6d6d6;
        }

        h2:before {
            position: absolute;
            content: ' ';
            height: 32px;
            width: 6px;
            background-color: #ecd19d;
            top: 36px;
            left: 29px;
        }

        .content > div {
            box-sizing: border-box;
            height: 88px;
            border-right: 1px solid #d6d6d6;
            border-bottom: 1px solid #d6d6d6;
            font-size: 28px;
            float: left;
            width: 33.3%;
            color: #666;
            line-height: 88px;
            text-align: center;
        }

        .content > div:nth-of-type(3n) {
            border-right: 0;
        }
    </style>
</head>
<body>
<h1>百度畅听</h1>
<div class="tab">
    <div class="tab-item">推荐</div>
    <div class="tab-item active">分类</div>
    <div class="tab-item">榜单</div>
</div>
<h2>Ag有声小说</h2>
<div class="content">
    <div>言情</div>
    <div>悬疑</div>
    <div>言情</div>
    <div>悬疑</div>
    <div>言情</div>
    <div>悬疑</div>
    <div>言情</div>
    <div>悬疑</div>
    <div>言情</div>
    <div>悬疑</div>
    <div>言情</div>
    <div>悬疑</div>
    <div>言情</div>
    <div>悬疑</div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=0.5">
	<title>initial scale 0.5</title>
	<style>
	body {
	margin: 0;
	}

	h1 {
	height: 88px;
	margin: 0;
	background-color: #c2a067;
	text-align: center;
	color: #fff;
	line-height: 88px;
	font-weight: normal;
	border-bottom: 1px solid #d6d6d6;
	font-size: 40px;
	}

	.tab {
	display: flex;
	height: 88px;
	line-height: 88px;
	font-size: 32px;
	text-align: center;
	color: #333;
	border-bottom: 1px solid #d6d6d6;
	}

	.tab-item {
	flex: 1;
	}

	.tab-item.active {
	position: relative;
	color: #c2a076;
	}

	.tab-item.active:after {
	position: absolute;
	content: ' ';
	font-size: 0;
	height: 4px;
	width: 104px;
	left: 50%;
	bottom: 0;
	margin-left: -52px;
	background-color: #c2a076;
	}

	h2 {
	position: relative;
	box-sizing: border-box;
	height: 104px;
	line-height: 68px;
	padding: 18px 29px 18px 51px;
	margin: 0;
	font-weight: normal;
	color: #333;
	font-size: 30px;
	border-bottom: 1px solid #d6d6d6;
	}

	h2:before {
	position: absolute;
	content: ' ';
	height: 32px;
	width: 6px;
	background-color: #ecd19d;
	top: 36px;
	left: 29px;
	}

	.content > div {
	box-sizing: border-box;
	height: 88px;
	border-right: 1px solid #d6d6d6;
	border-bottom: 1px solid #d6d6d6;
	font-size: 28px;
	float: left;
	width: 33.3%;
	color: #666;
	line-height: 88px;
	text-align: center;
	}

	.content > div:nth-of-type(3n) {
	border-right: 0;
	}
	</style>
	</head>
	<body>
	<h1>百度畅听</h1>
	<div class="tab">
	<div class="tab-item">推荐</div>
	<div class="tab-item active">分类</div>
	<div class="tab-item">榜单</div>
	</div>
	<h2>Ag有声小说</h2>
	<div class="content">
	<div>言情</div>
	<div>悬疑</div>
	<div>言情</div>
	<div>悬疑</div>
	<div>言情</div>
	<div>悬疑</div>
	<div>言情</div>
	<div>悬疑</div>
	<div>言情</div>
	<div>悬疑</div>
	<div>言情</div>
	<div>悬疑</div>
	<div>言情</div>
	<div>悬疑</div>
	</div>
	</body>
	</html>