【进度2】从阿里云迁至腾讯云，并添加网站备案号
换云服务器时的备案配置
·
注：在阿里云备案成功网站域名不可以直接解析到腾讯云服务器，会被腾讯云的DNS拦截并跳转。
腾讯云服务器从2023.2.1-2023.2.15限时优惠，这里我选择的是2核2G这个。
HTML源码和备案号的添加
由于域名之前在阿里云和工信部已经备案过，换到腾讯云要重新备案（很无语），需保证网站能够正常访问并添加网站备案号。
alexandrmisko.html
<!DOCTYPE html>
<html style="overflow: hidden">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="taiji">
</div>
<div style="text-align: center">
<a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration: none; color: darkcyan; text-shadow: 0 8px 10px #6699FF; font-size: 20px">备案号：豫ICP备2022028497号-1</a>
</div>
</body>
<style>
body{
background: aliceblue;
}
#taiji{
margin: 50px auto;
width: 600px;
height: 600px;
animation: rotate 3s linear infinite;
animation-play-state: paused;
}
.taiji{
width: 300px;
height: 300px;
border-radius: 50%;
position: relative;
margin: 10px auto;
top:150px;
background-image: linear-gradient(to right,black 50%, white 50%);
}
.taiji::before,.taiji::after{
content: '';
position: absolute;
width: 30px;
height: 30px;
border-radius:50%;
left:50%;
transform: translateX(-50%);
}
.taiji::before{
background-color: white;
border: 60px solid black;
top: 0;
}
.taiji::after{
background-color: black;
border: 60px solid white;
bottom: 0;
}
.line{
width: inherit;
height: inherit;
transform-origin:50% 50%;
transition: all 0s;
position: absolute;
}
.line1{
height: 10px;
width: 80px;
background-color: #000000;
margin: 10px auto;
}
.line2{
display: flex;
width: 80px;
margin: 10px auto;
}
.line3,.line4{
height: 10px;
width: 35px;
background-color: #000000;
}
.line4{
margin-left: 10px;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
#taiji:hover{
animation-play-state: running;
}
</style>
<script>
var m = document.getElementById('taiji'),
lineLists = ",2,02,12,012,01,1,0";
lineLists = lineLists.split(',');
//四周的黑线
for(let i = 0; i < 8; i++){
var newNode = document.createElement("div");
newNode.classList.add("line");
for(let j = 0; j < 3; j++){
let child = document.createElement("div");
if(lineLists[i].indexOf(j) != -1){
let c1 = document.createElement("div"),
c2 = document.createElement("div");
child.classList.add("line2");
c1.classList.add("line3");
c2.classList.add("line4");
child.appendChild(c1);
child.appendChild(c2);
}else{
child.classList.add("line1");
}
newNode.appendChild(child);
}
newNode.style.transform = `rotate(${i*45}deg)`;
m.appendChild(newNode);
}
//太极图中间部分
var newNode = document.createElement("div");
newNode.classList.add("taiji");
m.appendChild(newNode);
console.log(m);
</script>
</html>网页效果展示
注：要提前配置好服务器的相关环境，这里使用的是docker+java+nginx镜像打包部署的。
😅后续：备案申请被驳回，原因是网页中的八卦阵与宗教相关
更新后的html源码：
<!DOCTYPE HTML>
<html>
<head>
<title>春禾计划</title>
<meta charset="utf-8"/>
</head>
<style>
/*将所有带边界或者内边距的清零*/
*{
padding: 0px;
margin: 0px;
}
/*设置整个页面的字体及文字颜色*/
body{
background-color: aliceblue;
font-family: arial,宋体,serif;
font-size: 12px;
color: #534616;
height: 180px;
}
#wrapper{
width: 960px;
margin: 0 auto;/*将整个网页居中显示*/
}
#header{
width: 100%;
height: 250px;
}
#header #logo{ /*后代选择器*/
color: gray;
font-size: 28px;
padding-top: 10px;
float: left;
margin-left: 50px;
}
a{ /*将整个页面的超链接下划线去掉*/
text-decoration: none;
}
/*伪元素选择器，未访问过链接的颜色*/
a:link{
color: darkgray;
}
#logo a{
color: darkgray;
}
/*伪元素选择器，已访问过链接的颜色*/
a:visited{
color: green;
}
/*伪元素选择器，鼠标悬浮时链接的颜色*/
a:hover{
color: red;
}
#main{
width: 100%px;
height: auto;
margin-top: 20px;
}
#left{
width: 25%;
height: 98%;
float: left;
}
#right{
width: 72%;
height: 98%;
float: right;
}
#footer{
width: 100%;
height: 90px;
background: gray;
margin-top: 8px;
float: left;
background: #D5E2CB;
padding: 20px;
text-align: center;
}
#search{
float: right;
margin-top: 15px;
}
#search .stxt{
width: 180px;
height: 20px;
}
#search .go{
width: 30px;
height: 24px;
}
/*所有的ul不带指示器*/
ul{
list-style-type: none;
}
#nav ul li a{
float: left;
margin-right: 28px;
font-size: 24px;
color: #D1C091;
/*text-align: center;*/
width: 100px;
}
#nav{
width: 100%;
height: 40px;
float: left;
margin-top: 150px;
margin-left: 50px;
}
#nav ul li a:hover{
text-decoration: underline;
}
/*左侧侧边栏样式*/
.title{
width: 100%;
height: 50px;
background: #D5E2CB;
line-height: 50px;
text-indent: 20px;//左缩进
}
.content{
padding-left: 20px;
padding-right: 20px;
line-height: 20px;
color: #787878;
border: 1px solid #D6E6CC;
padding-bottom: 20px;
margin-bottom: 20px;
}
.content li{
line-height: 25px;
border-bottom: dashed 1px #D1D1D1;
}
p{
margin: 10px;
}
#left .content,#right .content{
background: #F4FAF0;
}
</style>
<body >
<!--网站的容器-->
<div id="wrapper">
<!--网站头部-->
<div id="header">
<div id="logo">
<a href="#">Steven Gerrard! </a><span style="font-style: italic;font-size: 16px;"><span style="color: #fff;">You will</span> never walk alone!</span>
</div>
<div id="search">
<form action="#" method="get">
<input type="text" name="searchtxt" id="searchtxt" value="" class="stxt"/>
<input type="submit" name="btn_search" id="btn_search" value="GO" class="go"/>
</form>
</div>
<!--导航栏-->
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
<!--主体内容-->
<div id="main">
<div id="left">
<!--左侧侧边栏一-->
<div class="title">
<h2>Because Of You</h2>
</div>
<div class="content" style="border: none;">
I will not make,the same mistake that
you did,I will not let myself heart so misery!
</div>
<!--左侧侧边栏一-->
<div class="title">
<h2>Clubs</h2>
</div>
<div class="content">
<ul>
<li><a href="#">C罗</a></li>
<li><a href="#">梅西</a></li>
<li><a href="#">厄齐尔</a></li>
<li><a href="#">阿圭罗</a></li>
<li><a href="#">德布劳内</a></li>
<li><a href="#">本泽马</a></li>
</ul>
</div>
<!--左侧侧边栏二-->
<div class="title">
<h2>Clubs</h2>
</div>
<div class="content">
<ul>
<li><a href="#">皇家马德里</a></li>
<li><a href="#">巴塞罗那</a></li>
<li><a href="#">拜仁慕尼黑</a></li>
<li><a href="#">曼联</a></li>
<li><a href="#">阿森纳</a></li>
<li><a href="#">切尔西</a></li>
</ul>
</div>
<!--左侧侧边栏三-->
<div class="title">
<h2>Country</h2>
</div>
<div class="content">
<ul>
<li><a href="#">德国</a></li>
<li><a href="#">法国</a></li>
<li><a href="#">意大利</a></li>
</ul>
</div>
</div>
<!--右侧侧边栏-->
<div id="right">
<!--右侧内容一-->
<div class="title">
<h2>C罗</h2>
</div>
<div class="content">
<p>克里斯蒂亚诺·罗纳尔多（Cristiano Ronaldo），1985年2月5日出生于葡萄牙马德拉岛丰沙尔。简称C罗，葡萄牙足球运动员，司职边锋可兼任中锋，现效力于西甲皇家马德里足球俱乐部，并身兼葡萄牙国家队队长[1-2]。
C罗带球速度极快，善于突破和射门，拥有强悍的身体素质，技术非常全面[3]。</p>
<p>C罗出道于里斯本竞技。2003年，加盟英超曼联，期间获得了英格兰足球超级联赛冠军、欧洲冠军联赛冠军、世俱杯冠军等十个赛事冠军。囊获了英超最佳射手
、欧冠最佳射手、英格兰足球先生、世界足球先生、金球奖、欧洲金靴奖等个人荣誉[4]。2009年6月，C罗以身价9600万欧元转会至西甲皇马。前四赛季在199
场比赛中201个进球49次助攻，以场均1.01球的进球率成为皇马历史上进球率最高的球员[5]。</p>
</div>
<!--右侧内容二-->
<div class="title">
<h2>梅西</h2>
</div>
<div class="content">
<p>里奥·梅西（Lionel Messi），1987年6月24日出生于圣菲省罗萨里奥市，阿根廷足球运动员。</p>
<p>
2000年，梅西加入巴塞罗那俱乐部。2005年，阿根廷青年队夺取世青赛冠军，梅西赢得了金球奖和金靴奖双项大奖。2007年4月18日，梅西在国王杯半决赛对赫塔菲时复制了马拉多纳在世界杯上的连过五人进球。2008年北京奥运会上，梅西随阿根廷国奥队夺取了金牌。2009年底，他当选了欧洲足球先生和世界足球先生。梅西2008-2009赛季率领球队连夺西甲、国王杯和欧冠三个冠军。2011年，梅西获得首届国际足联金球奖，还获得了欧足联欧洲最佳球员。
2013年，他以46粒联赛进球的成绩第三次获得欧洲金靴奖奖杯。2014年，梅西随阿根廷队参加2014巴西世界杯。2014年巴西世界杯上，获得世界杯亚军</p>
</div>
<div class="title">
<h2>厄齐尔</h2>
</div>
<div class="content">
<p>梅苏特·厄齐尔（Mesut Özil），1988年10月15日出生于德国的盖尔森基兴，德国籍足球运动员，场上司职前腰及左边锋。效力于阿森纳足球俱乐部。</p>
<p>2005年，厄齐尔被沙尔克04足球俱乐部看中，便签约加入沙尔克04青年队。2007年至2010年夏天，厄齐尔在云达不来梅足球俱乐部共效力过三个赛季，夺得过一次德国杯冠军。2010年，厄齐尔加盟至西甲皇家马德里足球俱乐部，在皇马效力了三个赛季，
跟随皇马夺得过2011年国王杯和2012年的西甲联赛冠军。</p>
</div>
</div>
</div>
<!--尾部-->
<div id="footer">
<div style="text-align: center; margin-top: 35px">
<a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration: none; color: darkcyan; text-shadow: 0 8px 10px #6699FF; font-size: 20px">备案号：豫ICP备2022028497号-1</a>
</div>
</div>
</div>
</body>
</html>网页效果展示
技术共进，成长同行——讯飞AI开发者社区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)