Css定位、定位问题
Css定位、定位问题
提问于 2018-11-21 17:08:07
我试图将网站的名称定位到页面的左上角，.I在foodies.com中使用了页面的名称，在css中，我使用了以下位置:相对位置；顶部:10%；左:10%；但是它显示在接近页面中部的位置上。有没有人有任何解决办法。我真的很纠结于定位
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.intro {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
background:url(https://picstatio.com/download/1600x900/864423/food-dishes-beer-bottle.jpg)no-repeat 50% 50%;
}
.intro .inner{
display: table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}
.name{
position: absolute;
top: 10%;
left: 0%;
}
.content {
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.content h1 {
font-family: "Yantramana";
font-size: 600%;
font-weight: 100;
color: #E1EFE9;
line-height: 70%;
}
.btn{
font-family: "montserrat";
font-size: 135%;
font-weight: 400;
color: orange;
text-transform: uppercase;
text-decoration: none;
border: solid #ffffff;
padding: 10px 20px;
border-radius: 9px;
transition: all 0.7s;
}
.btn:hover {
color: #CBDFD6;
border: solid #CBDFD6;
}
.about-us{
height:100%;
width: 100%;
margin: auto;
display: table;
background-color: #ffffff;
background-size: cover;
position: relative;
}
.ab-content {
font-family: "Poiret One";
font-weight: lighter;
position: relative;
font-size: 150%;
left: 50%;
transform: translateX(-50%);
}
.ab-p{
text-align: center;
font-weight: lighter;
font-family: "montserrat";
}
h2{
text-align: center;
}
h3{
text-align: center;
font-family: "montserrat";
}
.ab-2p{
font-family:"montserrat";
font-size: 22px;
margin: 10px 10px;
}
ul {
display: flex;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
ul li {
list-style-type: none;
}
ul li a {
width: 80px;
height: 80px;
margin: 0 50px;
text-align: center;
font-size: 35px;
line-height: 80px;
display: block;
border: 3px solid orange;
border-radius: 50%;
color: orange;
position: relative;
overflow: hidden;
}
ul li a .fab{
position: relative;
color: orange;
transition: .5s;
}
ul li a:hover .fab {
transform: rotateY(360deg);
}
.color {
color:orange;
}<!DOCTYPE html>
<head>
<title>Foodies</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="css/animate.css" rel="stylesheet"/>
<link href="css/waypoints.css" rel="stylesheet"/>
<script src="js/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="js/waypoints.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<section class="intro">
<div class="inner">
<h1 class="name">Foodies<span class="blue">.com</span></h1>
<div class="content">
<section class="os-animation" data-os-animation="bounceInUp" data-os-animation-delay=".3s">
<h1>Find <span class="color">Your</span> Taste!</h1>
</section>
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<a class="btn" href="#">Get Started</a>
</div>
</div>
</section>
<section class="about-us">
<div class="ab-inner">
<div class="ab-content">
<section class="os-animation" data-os-animation="slideInLeft" data-os-animation-delay="0s">
<h2 class="center"><span class="color">Our Mission</span></h2>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<p class="ab-p">Our mission is to provide the best food ingedients.</p>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".5s">
<h3 class="ab-content"><span class="color">About</span></h3>
<section class="os-animation" data-os-animation="slideInUp" data-os-animation-delay=".6s">
<p class="ab-2p">Cooking is all about people. Food is maybe the only universal thing that really has the power to bring everyone together. No matter what culture, everywhere around the world, people get together to eat.Cooking is like snow skiing: If you don't fall at least 10 times, then you're not skiing hard enough.The fast-food industry is in very good company with the lead industry and the tobacco industry in how it tries to mislead the public, and how aggressively it goes after anybody who criticizes its business practices.The problem is when that fun stuff becomes the habit. And I think that's what's happened in our culture. Fast food has become the everyday meal.</p>
<h3 class="ab-content"><span class="color">Soical Media</span></h3>
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
</ul>
</div>
</div>
</section>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-21 17:22:34
我将修改同时包含name和content的name容器
使容器不对齐中间的东西
.intro .inner {
vertical-align: initial;
} 使用页边距将页眉和内容推入正确位置。
.name {
margin-bottom: 5em;
margin-left: 5%;
margin-top: 5%;
}希望这更接近你想要的布局。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53417262
复制相关文章
相似问题
腾讯云开发者
