简易的个人页面-CSDN博客

本文链接：https://blog.csdn.net/m0_73188161/article/details/138489134

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />

		<title>小刘的世界</title>
		<link rel="dns-prefetch" href="//example.com">
		<link rel="Shortcut icon" href="img/tx2.ico"/>
		<link rel="stylesheet" href="css/Mr.css"/>
		<style>
			body {
			    font-family: Arial, sans-serif;
			    padding: 20px;
			    margin: 0;
			}
			h1 {
			    text-align: center;
			}
			.container {
			    max-width: 800px;
			    margin: 0 auto;
			}
			/* 响应式布局 */
			@media (max-width: 767px) {
			    /* 当屏幕宽度小于等于767px时应用的样式 */
			    .container {
			        padding: 10px;
			    }
			}
		</style>
	</head>
	<body background="img/gx.png" style="background-repeat:no-repeat background-attachment:fixed; background-size:1530px 710px; " >
		
		<!--搜索框-->
		 <div class="searchcontainer">
			 <span class="search-icon"></span>
			 <form target="_blank" method="get" action="https://www.baidu.com/s">
				<input type="text" placeholder="&nbsp;&nbsp;&nbsp;搜索网页" name="word" class="search"/>
				<div class="ssk"><input type="submit" value="搜索" class="btnsearch"></div>
			</form>
		    </div>
		<!--结束-->
		
		<div class="zt">
			<!--个性-->
			<div class="gx">
				<img src="img/tx.jpg" class="logo"/>
				<p class="wzys">Mr.Qiang.cn</p>
			</div>
			<!--结束-->
			
			<!--签名-->
			<div class="qm">
				<div>
					<p class="qm2">“</p>
					<p class="qm3">Mr.Qiang!</p>
					<p class="qm4">而你撑伞拥我入怀中,一字一句誓言多慎重</p>
					<p class="qm5">”</p>
				</div>
			</div>
			<!--结束-->
			
			<!--时间-->
			<div class="sj">
				<div>
					<div class="my">
						<p>&nbsp;</p>
						<p class="my2">梦想还是要有的，万一见鬼了<br/>呢？<br/><br/><span style="margin-left: 155px;">-[小刘]</span></p>
					</div>
				</div>
			</div>
			
			<div class="sj2">
				<div id="date"></div>
				    <script>
				        // 获取当前日期
				        var currentDate = new Date();
				        // 获取年份
				        var year = currentDate.getFullYear();
				        // 获取月份（注意月份从0开始，所以要加1）
				        var month = currentDate.getMonth() + 1;
				        // 获取日期
				        var day = currentDate.getDate();
				        // 将年月日拼接成字符串
				        var dateStr = year + "年" + month + "月" + day + "日";
				        // 将日期显示在页面上
				        document.getElementById("date").innerHTML = dateStr;
				    </script>
			</div>
			
			<div class="sj3">
				<p id="result"></p>
				<script>
				    // 获取当前日期
				    var today = new Date();
				    // 获取星期几的数字值
				    var dayOfWeek = today.getDay();
				    // 定义星期几的数组
				    var weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				    // 显示今天是星期几
				    document.getElementById('result').innerHTML = weekDays[dayOfWeek];
				  </script>
			</div>
			
			<div class="sj4">
				<div class="sj41"></div>
				<script>
				   var t = null;
				   t = setTimeout(time, 1);//開始运行
				    function time() {
				        clearTimeout(t);//清除定时器
				        dt = new Date();
				        var h = dt.getHours();//获取时
				        var m = dt.getMinutes();//获取分
				        var s = dt.getSeconds();//获取秒
				        document.querySelector(".sj41").innerHTML =  h + ":" + m + ":" + s;
				        t = setTimeout(time, 1); //设定定时器，循环运行     
				    }
				 </script>
			</div>
			
			
			 <div class="tq" style="pointer-events: none;">
					<iframe width="200" height="50" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=52&icon=1"></iframe>
			 </div>
			 <!--结束-->
			 
			 <!--网站列表-->
			 <div>
			 	<img src="img/链接 .png" class="lj"/>
			 	<p class="wz">网站列表</p>
			 </div>
			 <!--结束-->
			 
			 <!--微信-->
			 <div class="weix">
				<a href="weixin://" class="wx3">
					<div class="wxzt">
						<img src="img/wx.png" class="wx"/>
						<p class="wx2">微信</p>
					</div>
				</a>
			 </div>
			 <!--结束-->
			 
			 <!--QQ-->
			 <div class="QQ">
			 	<a href="tencent://message/?uin=">
					<div class="QQzt">
						<img src="img/qq.png" class="QQ2"/>
						<p class="QQ3">QQ</p>
					</div>
				</a>
			 </div>
			 <!--结束-->
			 
			 <!--云题库-->
			 <div class="ytk">
			 	<a href="https://tiku.kgc.cn/testing/login" target="_blank">
			 		<div class="ytkzt">
			 			<img src="img/bdqnlogo.png" class="ytk2"/>
			 			<p class="ytk3">云题库</p>
			 		</div>
			 	</a>
			 </div>
			 <!--结束-->
			 
			 <!--抖音-->
			 <div class="dy">
				 <a href="https://cp.kuaishou.com/profile" target="_blank">
					 <div class="dyzt">
						 <img src="img/ks.png" class="dy2"/>
						 <p class="dy3">快手创作者平台</p>
					 </div>
				 </a>
			 </div>
			 <!---->
			 
			 <!--酷狗-->
			 <div class="kg">
				 <a href="kugou://" target="_blank">
				 	<div class="kgzt">
				 		<img src="img/kg.png" class="kg2"/>
				 		<p class="kg3">酷狗</p>
				 	</div>
				 </a>
			 </div>
			 <!--结束-->

			 <!--小红书-->
			 <div class="jf">
				 <a href="https://creator.xiaohongshu.com/creator/home" target="_blank">
					 <div class="bgzt">
					 	<img src="img/xhs.png" class="bg2"/>
					 	<p class="bg3">小红书</p>
					 </div>
				 </a>
			 </div>
			 <!--结束-->
		</div>
	</body>
</html>

CSS




/* 搜索框样式 */
.searchcontainer{
	display : flex;
	justify-content: center;    /*水平方向居中*/
}

.search-icon {
  background-image: url(file:///E:/Qiang/img/ss.png); /* 用你自己的图标URL替换这里 */
  background-size: cover;
  margin-left: 490px;
  margin-top: -323px;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
}
/* 搜索框样式 */
.search{
	width: 400px;
	height: 45px;
	background-repeat: no-repeat;        /*设置背景图片不平铺*/
	border-radius: 30px 0px 0px 30px;  
	padding-left: 50px;
	background-position: 10px 10px;       /*设置背景图片的位置*/
	color:darkgray;
	font-size: 18px; 
	border: none;                   /*去除边框*/ 
}
/* 搜索框获得焦点时样式 */
.search:focus{
	outline: coral solid 1px;    /*添加外边框*/
}
/* 搜索按钮样式 */
.btnsearch{
	width: 90px;
	height: 47px;
	border: none;
	background-color: coral;
	color: #fff;
	border-radius: 0px 20px 20px 0px;
	font-size: 20px;
	cursor: pointer;
}
/* 按钮悬浮时样式 */
.btnsearch:hover{
	background-color: #ff5900;
}

/*结束*/


.ssk{
	margin-left: 447px;
	margin-top: -47px;
}

.search{
	margin-left: -5px;
}


.zt{
	margin-top: -50px;
}

/*个性*/
.gx{
	margin-top: 50px;
	margin-left: -100px;
}

.wzys{
	color: aliceblue;
	font-family: MV Boli;
	font-size: 60px;
	margin-top: -95px;
	margin-left: 380px;
}

.logo{
	border-radius: 50%;
	overflow: hidden;
	margin-top: 200px;
	margin-left: 250px;
	width: 100px;
	animation:rotateImg 5s linear infinite;
}

 @keyframes rotateImg {
    
    0% {transform : rotate(0deg);}
    
    100% {transform : rotate(360deg);}
    
    }
/*结束*/

/*签名*/
.qm{
	width: 500px;
	height: 120px;
	margin-top: 50px;
	margin-left: 150px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.2);
}

.qm2{
	color: honeydew;
	font-size: 50px;
	font-family: Impact;
	margin-left: 5px;
}

.qm3{
	color: aliceblue;
	font-family: MV Boli;
	margin-top: -80px;
	margin-left: 40px;
}

.qm4{
	color: aliceblue;
	margin-top: -10px;
	margin-left: 40px;
}

.qm5{
	color: honeydew;
	font-size: 50px;
	font-family: Impact;
	margin-top: -10px;
	margin-left: 475px;
}
/*结束*/

/*时间*/
.sj{
	width: 600px;
	height: 150px;
	margin-top: -360px;
	margin-left: 800px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.2);
}

.sj2{
	color: aliceblue;
	font-size: 18px;
	margin-left: 1150px;
	margin-top: -140px;
}

.sj3{
	color: aliceblue;
	font-size: 18px;
	margin-left: 1320px;
	margin-top: -42px;
}

.sj4{
	color: aliceblue;
	font-size: 50px;
	margin-left: 1150px;
	margin-top: 5px;
}

.my2{
	color: aliceblue;
	margin-left: 10px;
	margin-top: -15px;
}
/*结束*/

/*天气*/
.tq{
	margin-top: -10px;
	margin-left: 1250px;
}

/*结束*/

.wz{
	color: aliceblue;
	margin-top: -30px;
	margin-left: 830px;
}

.lj{
	width: 30px;
	margin-top: 20px;
	margin-left: 802px;
}

/*微信*/
.wxzt{
	margin-left: 20px;
}

.weix{
	width: 190px;
	height: 100px;
	margin-left: 800px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.2);
}

.wx{
	width: 40px;
	margin-top: 25px;
	margin-left: 20px;
}

.wx2{
	font-size: 20px;
	margin-top: -37px;
	margin-left: 70px;
}

a{
	color: aliceblue;
	text-decoration: none;
}

a:hover{
	color: darkgrey;
	font-weight: bold;
}
/*结束*/

/*QQ*/
.QQ{
	width: 190px;
	height: 100px;
	margin-top: -100px;
	margin-left: 1000px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.2);
}

.QQ2{
	width: 40px;
	margin-top: 25px;
	margin-left: 20px;
}

.QQ3{
	font-size: 20px;
	margin-top: -37px;
	margin-left: 70px;
}

.QQzt{
	margin-left: 20px;
}
/*结束*/

/*云题库*/
.ytk{
	width: 190px;
	height: 100px;
	margin-top: -100px;
	margin-left: 1200px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.2);
}

.ytk2{
	width: 45px;
	margin-top: 25px;
	margin-left: 20px;
}

.ytk3{
	font-size: 20px;
	margin-top: -37px;
	margin-left: 70px;
}

.ytkzt{
	margin-left: 20px;
}
/*结束*/

/*抖音*/
.dy{
	width: 190px;
	height: 100px;
	margin-top: 8px;
	margin-left: 800px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.2);
}

.dy2{
	width: 45px;
	margin-top: 25px;
	margin-left: 20px;
}

.dy3{
	font-size: 20px;
	margin-top: -45px;
	margin-left: 70px;
}

.dyzt{
	margin-left: -10px;
}
/*结束*/

/*酷狗*/
.kg{
	width: 190px;
	height: 100px;
	margin-top: -100px;
	margin-left: 1000px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.2);
}

.kgzt{
	margin-left: 20px;
}

.kg2{
	width: 50px;
	margin-top: 25px;
	margin-left: 20px;
}

.kg3{
	font-size: 20px;
	margin-top: -40px;
	margin-left: 70px;
}
/*结束*/

/*积分*/
.jf{
	width: 190px;
	height: 100px;
	margin-top: -100px;
	margin-left: 1200px;
	border-radius: 5px;
	background-color: rgba(0, 0, 0, 0.2);
}

.bgzt{
	margin-left: 20px;
}

.bg2{
	width: 45px;
	margin-top: 25px;
	margin-left: 20px;
}

.bg3{
	font-size: 20px;
	margin-top: -40px;
	margin-left: 70px;
}
/*结束*/

效果图