- 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=" 搜索网页" 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> </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; } /*结束*/
效果图
-