下午没事干，写了个仿CSDN的静态博客页面

最新推荐文章于 2023-11-04 15:55:24 发布
最新推荐文章于 2023-11-04 15:55:24 发布
阅读量302 收藏 2
点赞数 3
分类专栏： 其他 页面 文章标签： html css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44659458/article/details/117908948
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="bootstap/css/bootstrap.min.css" />
		<title>csdn</title>
		<style type="text/css">
			body {
				padding-top: 12px;
				background-image: linear-gradient(to bottom,
						rgba(9, 37, 72, 0.5),
						rgba(62, 102, 136, 0.3),
						rgba(255, 255, 255, 0.1),
						rgba(114, 170, 195, 0.3),
						rgba(13, 37, 77, 0.5)),
					url('./imgs/bg.png');
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				height: 100vh;
			}

			ul,
			li {
				padding: 0;
				margin: 0;
				list-style: none
			}

			.icon_1 {
				display: inline-block;
				background: url("./imgs/nocErtification.png") no-repeat center left;
				background-size: 10px;
				padding-left: 10px;
			}

			.icon_2 {
				display: inline-block;
				background: url("./imgs/blog4.png") no-repeat center;
				background-size: 20px;
				width: 20px;
				height: 23px;
			}

			.about {
				border: 1px solid #bebebe;
				padding: 10px 15px;
				margin-bottom: 4px;
			}

			.article {
				border: 1px solid #bebebe;
			}

			.article h4 {
				text-align: center;
				color: #fff;
				margin-top: 0px;
				border-bottom: 2px solid #bebebe;
				font-size: 24px;
				padding: 6px 0px;
			}

			.article ul li {
				padding-bottom: 12px;

			}

			.article ul li img {
				width: 36px;
				height: 36px;
				display: inline-block;
				vertical-align: bottom;
			}

			.article ul li .miao {
				overflow: hidden;
				display: inline-block;
				width: 213px;
				padding-right: 12px;
				color: #fff;
			}

			.article ul li .miao span:first-child {
				width: 170px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				float: left;
			}

			.article ul li .miao span:last-child {
				float: right;
			}

			.user-info {
				display: flex;
				padding-bottom: 12px;
			}

			.user-info img {
				width: 50px;
				height: 50px;
				border-radius: 50%;

			}

			.user-info .info {
				padding-top: 8px;
				padding-left: 5px;
			}

			.user-info .info .nickName {
				display: block;
				color: #fff;
			}

			.user-info .info span:nth-child(n+2) {
				font-size: 10px;
				color: #bebebe;

			}

			.data .data_top {
				display: flex;
				justify-content: space-between;
				padding-bottom: 14px;
				border-bottom: 1px solid #bebebe;
			}

			.data .data_bottom {
				display: flex;
				justify-content: space-between;
				padding-bottom: 14px;
				padding-top: 12px;
			}

			.data .data_top li,
			.data .data_bottom li {
				display: inline-block;
				text-align: center;
			}

			.data .data_top li span,
			.data .data_bottom li span {
				display: block;
			}

			.data .data_top li span:first-child,
			.data .data_bottom li span:first-child {
				padding-bottom: 3px;
			}

			.data .data_top li span {
				color: #fff;
			}

			.data .data_bottom li span {
				color: #fff;
			}

			.medal {
				display: flex;
				flex-wrap: wrap;
			}

			.medal img {
				width: 36px;
				height: 36px;
				justify-content: space-between;
				margin-top: 4px;
			}

			.content {
				color: #000;

				padding: 10px 15px;

			}

			.content h1 {
				margin-top: 0px;
				text-align: center;
				margin-bottom: 30px;
			}

			.content .act_01 ul li {
				list-style: disc;
				padding: 6px;
				margin-left: 47px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="col-md-3">
				<div class="about">
					<div class="user-info">
						<img src="./imgs/touxiang.jpg">
						<div class="info">
							<span class="nickName">昵称正在加载中....</span>
							<span class="code">码龄2年</span>
							<span class="icon_1">暂未认证</span>
						</div>
					</div>
					<div class="data">
						<ul class="data_top">
							<li>
								<span>73</span>
								<span>原创</span>
							</li>
							<li>
								<span>1万+</span>
								<span>周排名</span>
							</li>
							<li>
								<span>11万+</span>
								<span>总排名</span>
							</li>
							<li>
								<span>1万+</span>
								<span>访问</span>
							</li>
							<li>
								<span class="icon_2"></span>
								<span>等级</span>
							</li>
						</ul>
						<ul class="data_bottom">
							<li>
								<span>992</span>
								<span>积分</span>
							</li>
							<li>
								<span>407</span>
								<span>粉丝</span>
							</li>
							<li>
								<span>134</span>
								<span>获赞</span>
							</li>
							<li>
								<span>27</span>
								<span>评论</span>
							</li>
							<li>
								<span>76</span>
								<span>收藏</span>
							</li>
						</ul>
					</div>
					<div class="medal">
						<img src="imgs/1024@240.png">
						<img src="imgs/blinknewcomer@240.png">
						<img src="imgs/blog_normal_medal@240.png">
						<img src="imgs/chizhiyiheng@240.png">
						<img src="imgs/fenxiangdaren@240.png">
						<img src="imgs/github@240.png">
						<img src="imgs/qiandao100@240.png">
					</div>
				</div>
				<div class="article">
					<h4>分类专栏</h4>
					<ul>
						<li>
							<img src="./imgs/20201014180756738.png">
							<div class="miao">
								<span>Node.js + Koa2 + vue全家桶实现新浪微博</span>
								<span>4篇</span>
							</div>
						</li>
						<li>
							<img src="imgs/20201014180756918.png">
							<div class="miao">
								<span>JavaScript数据结构</span>
								<span>6篇</span>
							</div>
						</li>
						<li>
							<img src="imgs/20201014180756928.png">
							<div class="miao">
								<span>原生Node.js开发Web Server博客项目学习笔记</span>
								<span>9篇</span>
							</div>
						</li>
						<li>
							<img src="imgs/20201014180756930.png">
							<div class="miao">
								<span>阿里OSS</span>
								<span>1篇</span>
							</div>
						</li>
						<li>
							<img src="imgs/20201014180756930.png">
							<div class="miao">
								<span>笔记</span>
								<span>11篇</span>
							</div>
						</li>
						<li>
							<img src="imgs/20201014180756918.png">
							<div class="miao">
								<span>Vue学习笔记</span>
								<span>14篇</span>
							</div>
						</li>
					</ul>
				</div>
			</div>

			<div class="col-md-9">
				<div class="content">
					<h1>实现子元素在父元素中水平垂直都居中笔记</h1>
					<div class="act_01">
						<h4>一、实现子元素在父元素中水平垂直都居中</h4>
						<ul style="">
							<li>设置子元素绝对定位</li>
							<li>设置子元素的left值和top值为50%</li>
							<li>设置父元素相对定位</li>
							<li>设置子元素margin-left：负自身宽度一半</li>
							<li>设置子元素margin-top：负自身高度一半</li>
						</ul>
					</div>
					<div class="act_02">
						<img src="imgs/snipaste20210614_160324.png" class="center-block img-responsive">
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="./bootstap/js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="./bootstap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</html>

欢迎访问我的个人博客

海面有风
关注
专栏目录
【实习练手demo】应hhhrrr要求,仿写CSDN移动端静态页面...
Myself's CSDN
06-22 617
仿写CSDN移动端静态页面 过去一周总结： 实习过去一周了,从最基础的静态页面开始练手，一个星期练了7-8个静态页面，期间复习了很多的页面布局的潜在技巧以及代码托管工具，技术的提升只是一小部分;更重要的是，初入职场的我； 您提醒我： 等等等等等等…(懒得整理了) hr教会我很多东西，真的非常感谢yyayyayya… 话不多说了，直接上代码吧！ 效果图如下： 代码部分： <!-- Copyright (c) Guangzhou Data Control Network Technology
html+css (静态页面+动画案例)
热门推荐
Cc200171的博客
05-08 1万+
案例1 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
仿CSDN静态页面
11-16
仿csdn加果壳网；页面首页采用仿csdn；博客采用果壳网的；可以练习做项目
实战之BBS(仿博客园写一个论坛)（二）登录页面，网站首页的实现
ama7790的博客
05-06 858
一.登录页面 1.效果展示： 2.技术点： 2.1验证码：验证码这个功能用了Image,ImageDraw,ImageFont，random，BytesIO模块和session Image是新创建一个图片，ImageDraw相当于在这个图片上创建一个画笔，ImageFont指定字体的格式 random随机模块，BytesIO开辟一片字节类型的内存空间，session用于存储...
模仿博客园页面
weixin_33742618的博客
08-18 355
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" hre...
模拟CSDN的简易博客(Java)
helloword233的博客
09-18 322
模拟CSDN的简易博客1.项目需求:2.项目介绍:3.项目思路:4.项目难点:5.项目评价: 1.项目需求: 之所以打算做一个有关博客的项目,是因为个人一只很好奇CSDN的作业原理,好奇是怎样的的结构和技术在支撑它运作.以前只是会用CSDN写博客,就算好奇也没有能力模仿,自从了解到Java Web技术后,就一直想要尝试一下,但感觉工作量有点大也一直未尝试.当学习了Spring技术后,一方面为了巩固知识,一方面为了完成心愿,于是就做了这个项目. 2.项目介绍: 此项目是一个模拟 CSDN 实现的简易博客，可以
仿制CSDN首页（html+css+js）+ 个性化登录注册页
所行皆坦途
11-06 1457
技术栈：HTML+CSS+JavaScript 特点、注意点：轮播图、导航条下拉显示更多 list、头像图案大小变化显示登录与注册、搜索框样式的变化、广告关闭显示其他内容、注册页面的两个盒子动画处理。 适用对象：适合初学完 Javascript 制作简单动效，掌握基本布局和样式处理，难度不大但是代码量较大，适合练手巩固基础。可私信我提供源码。
Java项目之模仿CSDN做一个DBB博客
mdxiaohu的博客
08-10 3628
项目源代码下载地址：https://download.csdn.net/download/mdxiaohu/10596423 不打算深入讲解，只做个记录。 上个月，做了个博客小项目练手。 当时的想法就是简单模仿一下CSDN博客，做一个自己的博客。 首先，我先列出来，项目所要用到的技术。 Java基础： 差不多就这些，我在这里主要是回顾一个流程。 先看下我模仿的效果图。 前端...
我的第四款软件--仿CSDN博客 所做的CODE 博客客户端
清流弯弯
07-19 1643
我总是遗忘，每次重新思考 ，很是浪费       就像冒泡算法写过很多次，研究过很多次，还写过专门的研究文章，现在让我写我也是写不出。       就如面试中的问题，很多都是以前碰到过，解决过的，可是放在那种环境下，我也无法短时间给出答案。        对于小学一年级复课一年，初中转学，高中复课一年，大学复课一年的我来说，现行的教育模式并不符合我。          我比
疫情下的5.20给女朋友写的一份信：哈哈感动了女友，一下午也值了（一份静态网站，基础入门的也可以看懂+简单部署）
qq_42296117的博客
05-25 1537
首先@???????? 网页端浏览（移动端没有适配）：给????????的一份信 本来想疫情下的520由于出行不便只能送一份表达心意的礼物，熟话说的好，礼轻情谊重哈哈????，但是这个时代礼轻也是不行，情谊通过送礼来表达也是也是有点俗气； 好在脑子????在最后一天突然想到用写一封信把心里话说出；写信的话哈哈墨水不多，字也不是很好看，拍照过去的话还不如通过网页来表达； 通过CSS3的修饰，网页十分讨女友喜欢，眼泪哗啦嘿嘿； 不说那么多啦，这里把我写源码的分享给大家-同时也是希望能帮助到????兄弟们： 使
仿csdn，有积分、设置提问分、散分等功能
09-17
转载：BBSXP改成的CSDN论坛样式，参考CSDN论坛增加了积分、设置提问分、散分等功能
模仿CSDN通过点击来选择标签
01-25
模仿CSDN通过点击来选择标签 , 纯js实现。
模仿CSDN文件授权下载系统
02-28
模仿CSDN文件下载，用户积分管理，授权下载。
仿CSDN网站源代码
05-26
实现部分CSDN网站功能的小项目 有比较好的练习价值
仿CSDN博客的登录及注册部分
07-02
仿CSDN博客的登录和注册 用三层架构做的 功能基本都实现了，看着还行吧！
web课程设计网页规划与设计 基于HTML+CSS美食网站设计与实现(6个页面)
VX_WJ88950106的博客
08-09 715
🎀 精彩专栏推荐👇🏻👇🏻👇🏻 🥧 美食网页介绍、🍰甜品蛋糕、🦐地方美食小吃文化、🍺餐饮文化、等网站的设计与制作。🍧美食主题网站 主要对各种美食进行展示，让浏览者清晰地了解到各种美食的详细信息，便于浏览者进行选择。该模块的左侧有个美食分类，用户可以选择自己喜欢的种类，当点击种类后，就会在右侧出现该分类下的各种美食，用户可以点击自己感兴趣的食品，从而看到它的具体信息。它的具体信息包括配料、产地及它的一些功能，使用户对该食品有着全面的认识。👨‍🎓静态网站的编写主要是用HTML DIV......
2023.11.4 软考信息安全工程师下午真题
最新发布
qq_40424393的博客
11-04 5409
2023.11.4 软考信息安全工程师下午真题
用HTML+CSS做一个漂亮简单大学生校园班级网页(web前端期末大作业)
专注于dreamweaver网页设计制作
08-10 855
🏫 校园班级网页设计 、👨‍🎓我的班级网页、我的学校、👩‍🎓校园社团、校园运动会、等网站的设计与制作。🏷️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站......
Bootstrap仿制CSDN用户主页页面
张宜强的博客
10-07 1955
Bootstrap仿制CSDN用户主页页面
写一个爬CSDN页面的爬虫
03-29
由于CSDN网站有反爬虫机制，为了避免被封IP，我们需要使用一些技巧来爬取页面。 首先，我们需要安装一些库：requests、beautifulsoup4、fake_useragent。 ```python pip install requests pip install beautifulsoup4 pip install fake_useragent ``` 然后，我们可以编写以下爬虫代码： ```python import requests from bs4 import BeautifulSoup from fake_useragent import UserAgent # 设置请求头 headers = { "User-Agent": UserAgent().chrome } # 爬取页面 url = "https://blog.csdn.net/" response = requests.get(url, headers=headers) # 解析页面 soup = BeautifulSoup(response.content, "html.parser") articles = soup.find_all("div", class_="article-item-box") # 输出结果 for article in articles: title = article.find("h4").text.strip() author = article.find("a", class_="nickname").text.strip() views = article.find("span", class_="read-num").text.strip() comments = article.find("span", class_="comments").text.strip() print(title, author, views, comments) ``` 这个爬虫代码可以爬取CSDN首页上的所有文章，并输出文章的标题、作者、阅读量和评论数。 需要注意的是，CSDN网站有反爬虫机制，如果频繁请求会被封IP。因此，我们需要设置请求头，使用随机的User-Agent来模拟不同的浏览器，让请求看起来更像是人类在浏览网页。此外，我们还可以设置代理IP来进行爬取。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海面有风

您的鼓励将是我前进的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值