Jquery @媒体屏幕?不能向下移动箱子吗?
好的,有两个问题。。。当屏幕变小时,我如何移除滚动条?为什么我不能向下移动框?正如您从底部的代码中看到的,滚动条仍然无缘无故地存在,并且按钮即使有填充也不会移动!谢谢你的建议Jquery @媒体屏幕?不能向下移动箱子吗?,jquery,html,css,Jquery,Html,Css,好的,有两个问题。。。当屏幕变小时,我如何移除滚动条?为什么我不能向下移动框?正如您从底部的代码中看到的,滚动条仍然无缘无故地存在,并且按钮即使有填充也不会移动!谢谢你的建议 <!DOCTYPE html> <html> <link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png
<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Metro-M.svg/2000px-Metro-M.svg.png">
<head>
<style>
body {
background: URL("https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png") white no-repeat center top;
background-size: 100%;
background-color: white;
margin: 0;
padding: 0;
}
h2 {
Font-family: Arial;
top: 650px;
left: 10px;
position: absolute;
color: #525252;
font-size: 2vw;
letter-spacing: 1px;
}
h1 {
position: absolute;
top: 21%;
left: 36%;
color: white;
font-family: Arial;
font-size: 4.6vw;
letter-spacing: 1px;
}
p {
position: absolute;
width: 600px;
top: 800px;
left: 300px;
height: 25px;
font-family: Gill Sans, sans-serif;
color:#696969;
font-size: 17px;
}
ul {
word-spacing: .2em;
letter-spacing: .2em;
}
ul li {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
top: 43%;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
color: white;
text-align: center;
text-decoration: none;
font-size: 90%;
width: 150px;
height: 40px;
}
ul li:link,
ul li:visited {
font-family: Arial;
text-align: center;
vertical-align: middle;
line-height: 40px;
display: inline-block;
margin-top: 250px;
margin-left: 115px;
letter-spacing: 1px;
word-spacing: normal;
background-color: rgba(5, 4, 2, 0.1);
border: 2px solid white;
font-size: 90%;
width: 150px;
height: 40px;
text-decoration: none;
color: white;
}
li {
text-decoration: none;
color: white;
}
ul li:hover,
ul li:active {
background-color: white;
color: black;
text-decoration: none;
}
ul li a:hover, ul li a:active {
background-color: white;
color: black;
}
ul li a {
display: inline-block;
height: 100%;
width: 100%;
color: white;
text-decoration: none;
}
hr {
margin-right: 150px;
margin-left: 150px;
top: 700px;
}
@media screen and (max-width: 700px) {
.wrapper {
padding-top: 40%;
}
ul li {
margin: 10px;
}
h1{
position:absolute;
top: 70px;
left: 180px;
font-size
}
}
.wrapper {
padding-top: 0%;
}
</style>
<link rel="stylesheet" type="text/css" href="about.css">
<title>morgan</title>
</head>
<body>
<center><h1>WHO AM I?</h1></center>
<h2>Some Fun Facts</h2>
<p>I made this website from scratch when I was 14, I have a twin brother whose name is Pierson McNeal White, I have a older brother and sister who are aslo twins, I used to have 2 pet rats named Hermes and Cleo after the greek gods, and I watch the super bowl for the ads.</p>
<div class="wrapper">
<ul>
<li><a href="www.youtube.com" class="life" ><strong>MY LIFE</strong></a></li>
<li><a href="www.youtube.com" class="prot"><strong>PORTFOLIO</strong></a></li>
<li><a href="www.youtube.com" class="resume"><strong>RESUME</strong></a></li>
<li><a href="about.html" class="me"><strong>ABOUT ME</strong></a></li>
</ul>
</div>
</body>
</html>
身体{
背景:URL(“https://lh3.googleusercontent.com/-lYQ3vQHE3Mo/VrVKGwg8pqI/AAAAAAAADMQ/QKjs5ALViKo/w530-d-h253-p-rw/desk%2Bbackground.png)白色无重复中心顶部;
背景大小:100%;
背景色:白色;
保证金:0;
填充:0;
}
氢{
字体系列:Arial;
顶部:650px;
左:10px;
位置:绝对位置;
颜色:#525252;
字体大小:2vw;
字母间距:1px;
}
h1{
位置:绝对位置;
最高:21%;
左:36%;
颜色:白色;
字体系列:Arial;
字体大小:4.6vw;
字母间距:1px;
}
p{
位置:绝对位置;
宽度:600px;
顶部:800px;
左:300px;
高度:25px;
字体系列:Gill-Sans,Sans-serif;
颜色:#6969;
字号:17px;
}
保险商实验室{
字距:.2em;
字母间距:2米;
}
ulli{
字体系列:Arial;
文本对齐:居中;
垂直对齐:中间对齐;
线高:40px;
最高:43%;
显示:内联块;
边缘顶部:250px;
左边距:115px;
字母间距:1px;
字距:正常;
背景色:rgba(5,4,2,0.1);
边框:2倍纯白;
颜色:白色;
文本对齐:居中;
文字装饰:无;
字体大小:90%;
宽度:150px;
高度:40px;
}
李:链接,
李:访问{
字体系列:Arial;
文本对齐:居中;
垂直对齐:中间对齐;
线高:40px;
显示:内联块;
边缘顶部:250px;
左边距:115px;
字母间距:1px;
字距:正常;
背景色:rgba(5,4,2,0.1);
边框:2倍纯白;
字体大小:90%;
宽度:150px;
高度:40px;
文字装饰:无;
颜色:白色;
}
李{
文字装饰:无;
颜色:白色;
}
ul li:悬停,
ulli:主动{
背景色:白色;
颜色:黑色;
文字装饰:无;
}
ul li a:悬停,ul li a:活动{
背景色:白色;
颜色:黑色;
}
ullia{
显示:内联块;
身高:100%;
宽度:100%;
颜色:白色;
文字装饰:无;
}
人力资源{
右边距:150px;
左边距:150像素;
顶部:700px;
}
@媒体屏幕和屏幕(最大宽度:700px){
.包装纸{
垫面:40%;
}
ulli{
利润率:10px;
}
h1{
位置:绝对位置;
顶部:70像素;
左:180像素;
字体大小
}
}
.包装纸{
填充顶部:0%;
}
摩根
我是谁?
一些有趣的事实
我14岁时白手起家创建了这个网站,我有一个双胞胎兄弟,名字叫皮尔森·麦克尼尔·怀特,我有一个哥哥和一个姐姐,他们也是双胞胎,我以前养过两只宠物老鼠,它们的名字是希腊神赫密士和克莱奥,我还看了超级碗的广告。
滚动条没有消失,因为“p”元素的位置设置为绝对。以及300px的“左”值
这意味着该元素将保持600px的宽度和300px的左值,即使窗口大小较小,也会有效地使其宽度为900px