Strike
一年前，还是靠copy来应付作业，通过这几天的学习，发现只需要非常基础的知识就能很简单的完成。
首先展示下成果吧x
成果展示：
全屏状态：
在非全屏的情况下：
可以看到界面能够根据页面的缩放，进行一定程度的修改来适应浏览器的大小，其实实现这种效果的方法也相当的基础和简单。
使用比例大小来设置宽度和高度，这样可以使得页面能够根据浏览器的大小变化来实现对应的大小变化来适应新的浏览器大小。
具体实现的代码：
1. html部分：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="styles/stylefor2.css"><title>登錄界面</title></head><body><audio src="music/幸村恵理 - VOY@GER 黛冬優子Ver.mp3" autoplay loop></audio> /*音乐*/<div class="background_part"></div><div class="Login"><img src="./fyk.jpg" alt="用戶的頭像"> <div class="user_name"><p class="name">Strike_Beta</p></div><div class="password"><p>密碼：<input type="password" name="password"></p></div><button>登錄</button></div></body>
</html>2. ccs部分：
.background_part{background-image: url(../images/【ザ・冬優子イズム】黛冬優子+.jpg); /*背景图片设置*/position: fixed;top: 0;left: 0;z-index: -1;width: 100%;height: 100%; background-repeat: no-repeat;background-size: cover;background-attachment: fixed; /*背景不会随页面滚动而滚动*/opacity: 0.3;
}.Login{margin-left: 10%;margin-right: 10%;margin-top: 5%;text-align: center;width: 80%;height: 80%;padding: 20px;border: #5ce626 2px dashed;background-color: rgba(255, 255, 255, 0.678);border-radius: 2em; /*将图片裁剪成圆形*/
}.Login img{width: 30rem;height: 30rem;object-fit: cover; /*避免图片因为长宽高的设置而进行拉伸*/border-radius: 50%;border: 7px #5ce626 dotted; padding: 0;margin: 0;line-height: 1%;
}.user_name{margin-left: 42%;margin-right: 42%;width: 16em;height: 2em;line-height: 5%;
}.user_name p{font-size: 250%;
} .user_name p::first-letter{float: left;margin: 0;color: #5ce626;font-size: 200%;
}.password p{font-size: 160%;
}input{background-color: rgba(240, 248, 255, 0.3);padding-left: 1%;padding-top: 10px;padding-bottom: 10px;font-size: 70%;border-radius: 0.5em;
}button{color: white;padding-left: 1em;padding-top: 0.1em;padding-bottom: 00.1em;padding-right: 1em;text-align: center;max-width: 20%;height: 25%;font-size: 200%;background-color: #5ce626d0;border: rgba(255, 255, 255, 0.342) 2px solid;border-radius: 1em;
}个人笔记:
1.页面背景的设置：background_part部分
在一开始的时候，曾直接将background css设置直接写在<body>的里面，虽然能够成功设置背景，但修改等各方面都相当的不方便，尤其是opacity的部分，只要修改，body中的其他子元素就会跟着一起改变。从网上学学习到了如何用div来设置背景，效果相当不错。
2.内容的居中
其实一开始都是直接在父类里面直接text-align:center来直接完成居中，不过效果并不是很理想，所以想到之前用比例设置子类的长宽，所以就在父类内设置padding来将子类“挤压”到父类的中心，来实现居中。基本都是左右padding加上子类的width设置的比例大小正好等于100%来设置。
3.将各个部分切块处理
通过切块，使得我可以更轻松地设置各部分的css元素，然后可以在各块内使用各种布局来丰富页面。
以上就是本萌新蒟蒻的初次尝试，太弱了← ←，图一乐就好(
Strike
一年前，还是靠copy来应付作业，通过这几天的学习，发现只需要非常基础的知识就能很简单的完成。
首先展示下成果吧x
成果展示：
全屏状态：
在非全屏的情况下：
可以看到界面能够根据页面的缩放，进行一定程度的修改来适应浏览器的大小，其实实现这种效果的方法也相当的基础和简单。
使用比例大小来设置宽度和高度，这样可以使得页面能够根据浏览器的大小变化来实现对应的大小变化来适应新的浏览器大小。
具体实现的代码：
1. html部分：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="styles/stylefor2.css"><title>登錄界面</title></head><body><audio src="music/幸村恵理 - VOY@GER 黛冬優子Ver.mp3" autoplay loop></audio> /*音乐*/<div class="background_part"></div><div class="Login"><img src="./fyk.jpg" alt="用戶的頭像"> <div class="user_name"><p class="name">Strike_Beta</p></div><div class="password"><p>密碼：<input type="password" name="password"></p></div><button>登錄</button></div></body>
</html>2. ccs部分：
.background_part{background-image: url(../images/【ザ・冬優子イズム】黛冬優子+.jpg); /*背景图片设置*/position: fixed;top: 0;left: 0;z-index: -1;width: 100%;height: 100%; background-repeat: no-repeat;background-size: cover;background-attachment: fixed; /*背景不会随页面滚动而滚动*/opacity: 0.3;
}.Login{margin-left: 10%;margin-right: 10%;margin-top: 5%;text-align: center;width: 80%;height: 80%;padding: 20px;border: #5ce626 2px dashed;background-color: rgba(255, 255, 255, 0.678);border-radius: 2em; /*将图片裁剪成圆形*/
}.Login img{width: 30rem;height: 30rem;object-fit: cover; /*避免图片因为长宽高的设置而进行拉伸*/border-radius: 50%;border: 7px #5ce626 dotted; padding: 0;margin: 0;line-height: 1%;
}.user_name{margin-left: 42%;margin-right: 42%;width: 16em;height: 2em;line-height: 5%;
}.user_name p{font-size: 250%;
} .user_name p::first-letter{float: left;margin: 0;color: #5ce626;font-size: 200%;
}.password p{font-size: 160%;
}input{background-color: rgba(240, 248, 255, 0.3);padding-left: 1%;padding-top: 10px;padding-bottom: 10px;font-size: 70%;border-radius: 0.5em;
}button{color: white;padding-left: 1em;padding-top: 0.1em;padding-bottom: 00.1em;padding-right: 1em;text-align: center;max-width: 20%;height: 25%;font-size: 200%;background-color: #5ce626d0;border: rgba(255, 255, 255, 0.342) 2px solid;border-radius: 1em;
}个人笔记:
1.页面背景的设置：background_part部分
在一开始的时候，曾直接将background css设置直接写在<body>的里面，虽然能够成功设置背景，但修改等各方面都相当的不方便，尤其是opacity的部分，只要修改，body中的其他子元素就会跟着一起改变。从网上学学习到了如何用div来设置背景，效果相当不错。
2.内容的居中
其实一开始都是直接在父类里面直接text-align:center来直接完成居中，不过效果并不是很理想，所以想到之前用比例设置子类的长宽，所以就在父类内设置padding来将子类“挤压”到父类的中心，来实现居中。基本都是左右padding加上子类的width设置的比例大小正好等于100%来设置。
3.将各个部分切块处理
通过切块，使得我可以更轻松地设置各部分的css元素，然后可以在各块内使用各种布局来丰富页面。
以上就是本萌新蒟蒻的初次尝试，太弱了← ←，图一乐就好(