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