css布局实现博客详情页内容页效果代码-html代码-BFW代码库

css布局实现博客详情页内容页效果代码

代码语言：html

代码描述：css布局实现博客详情页内容页效果代码

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

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>博客内容页</title>
<meta data-react-helmet="true" name="description" content="" />
<meta data-react-helmet="true" name="keywords" content="" />
<style>
    @charset "utf-8";
body {
	background-color: #f7f9fa;
}

.content-wrap-style {
	width: 1350px;
	margin: 60px auto;
	display: flex;
}

.title {
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	color: #222;
}

.box-left {
	width: 1000px;
	background-color: #fff;
	margin-right: 10px;
	padding: 20px;
	border-radius: 4px;
}

.entry-right {
	width: 340px;
}

.content-info img {
	max-width: 100%;
}

.entry-right-info {
	margin: 0 auto;
	z-index: 10;
	padding: 35px 20px;
	border-radius: 4px;
	background-color: #fff;
}

.head-wrap {
	border-bottom: 1px solid #f5f6f7;
}

.head-title h1 {
	font-size: 28px;
	font-weight: 600;
}

.head-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 0
}

.head-bar .left {
	display: flex;
}

.head-bar .left span {
	margin-right: 15px;
}

.head-bar .time {
	color: #797c80;
	line-height: 25px;
	font-weight: 400;
	font-size: 13px;
	margin-right: 24px;
}

.head-bar .right {
	display: flex;
}

.head-bar .count {
	display: flex;
	color: #aaaeb3;
	font-size: 13px;
}

.head-bar .view {
	margin-right: 20px;
}

.creators-entry-info .top-info {
	text-align: center;
}

.creators-entry-info .info .nickname {
	font-weight: 500;
	font-size: 21px;
	color: #000;
	opacity: 0.9;
	margin-top: 5px;
}

.pointer {
	cursor: pointer;
}

.creators-more-info {
	text-align: center;
	color.........完整代码请登录后点击上方下载按钮下载查看