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

代码语言：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: #171717;
}

.creators-more-info .certification {
	padding: 10px 0
}

.side-acrions {
	position: fixed;
	margin-left: -85px;
	top: 80px;
}

.side-acrions .creative-annotation {
	text-align: center;
}

.give-like,
.forwarding,
.collection {
	margin-bottom: 15px;
}

.give-like .svg,
.forwarding .svg,
.collection .svg {
	background: #fff;
	height: 48px;
	width: 48px;
	border-radius: 50%;
	box-shadow: 0 4px 16px 0 #e3e3e375;
	justify-content: center;
	align-items: center;
	display: flex;
}

.avatar img {
	border-radius: 50px;
}

.give-count {
	height: 17px;
	font-size: 14px;
	font-weight: 700;
	color: #797c7e;
	line-height: 17px;
	text-align: center;
	margin: 8px 0;
}
</style>

</head>

<body>

<div class="content-wrap-style"> 
   <div class="box-left"> 
    <div class="side-acrions"> 
     <div class="creative-annotation"> 
      <div class="is-original" v-if="info.details.is_original"> 
       <svg t="1621580269459" class="icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8562" width="48" height="48"> 
        <path d="M617.4 422.9c-13.2 21.7-29.2 41.8-47.1 59h94.5c-12.6-17.9-30.5-39.9-47.4-59zM328.2 512.6h108V533h-108zM328.2 466.5h108v20.1h-108z" fill="#ea5514" p-id="8563"></path> 
        <path d="M878.7 258.5H146.4c-46.7 0-84.9 38.2-84.9 84.9v342.3c0 46.7 38.2 84.9 84.9 84.9h732.3c46.7 0 84.9-38.2 84.9-84.9V343.4c-0.1-46.7-38.3-84.9-84.9-84.9zM206.1 636c26.1-46.8 28.3-114.9 28.3-163.3V382h261.8v33.9H271.1v56.8c0 52.4-4.4 131.2-32 181.8-7.2-5.9-23.6-15-33-18.5z m55.6-6.3c17.9-15.4 37.4-38.9 49.3-59.3l35.5 11.3c-15.1 23.9-36.7 51.5-53.4 68.1-7.6-5.6-22.3-15.3-31.4-20.1z m139.4-5c0 17-3.1 26.1-15.1 31.1-11.6 5.3-27.9 5.3-50.2 5.3-1.3-10-6-23.5-10.4-33 13.8 0.3 29.2 0.3 33.3 0.3 4.7 0 6-0.9 6-4.7V561h-72.8V438.6h55.6c4.1-7.8 7.5-15.7 9.7-22.3l44.9 5.3c-3.8 5.7-7.5 11.6-11.3 17h84.1V561h-73.8v63.7z m65.9 26.4c-11-16.6-34.2-44.9-51.2-65.6l29.8-15.4c16.6 18.8 41.1 45.8 53.4 62.8l-32 18.2z m124.3-137.2v95.8c0 12.9 2.5 14.8 16.6 14.8h42.7c12.6 0 14.8-6.3 16.6-39.2 7.8 6 22.6 11.6 32.3 13.5-4.1 44.3-13.8 57.5-45.8 57.5h-50.2c-36.7 0-48.3-10-48.3-46.2V495.4c-3.1 2.5-6.6 5-9.7 7.5-6-7.8-18.5-21.3-26.7-27.6 38-25.7 71-67.8 87.3-107.4l34.2 10.4c-1.9 4.4-4.1 9.1-6 13.5 24.2 25.4 53.4 57.8 67.2 78.8l-23.9 22.6v1.3c-2.5 52.1-5.7 75-12.9 83.5-5.7 6.9-12.6 9.4-21 10.7-7.5 0.9-19.8 1.3-33.6 0.9-0.3-9.7-4.1-22.9-8.8-31.4 10 1.3 19.5 1.3 24.2 1.3 4.1 0 6.6-0.6 8.8-3.5 2.8-3.5 5-15.1 6.9-42.1h-49.9zM705.9 404h35.8v177.4h-35.8V404z m97 213.5c0 21.3-4.4 30.8-17.6 36.4-12.9 6-33 6.9-62.5 6.9-1.6-10.4-7.2-26.1-12.6-36.1 19.8 0.9 40.8 0.9 47.1 0.9 6-0.3 8.5-2.2 8.5-8.2V374.2h37v243.3z" fill="#ea5514" p-id="8564"></path> 
       </svg> 
      </div> 
     </div> 
     <div class="give-like"> 
      <div class="svg pointer"> 
       <svg v-if="info.details.is_give_like" t="1616663301991" class="icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19965" width="25" height="25"> 
        <path d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 0 0-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4-20.5-21.5-48.1-33.4-77.9-33.4-52 0-98 35-111.8 85.1l-85.9 311h-0.3v428h472.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-0.2-12.6-2-25.1-5.6-37.1zM112 5.........完整代码请登录后点击上方下载按钮下载查看