我在CSS中遇到一些职位问题

时间：2019-05-05 20:22:39

标签： css

最近我已经开始使用一些CSS和html进行编码，因此我决定建立自己的第一个网站，因此在更改包含两个按钮（“ s'inscrire”和“ se connecter”）的div的位置时遇到了一些问题。 ）...另外，当我将鼠标悬停在标题列表上时，它开始向上和向下移动，我更改了填充，边距...但是什么也没发生！

@import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway');
*{
	margin:0;
	padding: 0;
	font-family: Raleway; 
}
body{
	background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
				url('1.jpg');
	background-position: center;
	background-size: cover;
	height: 100vh;
}
.main ul{
	float: right;
	display: block;
	list-style-type: none;
	font-size: 15px;
	margin-top: 20px;
	position: sticky;

}
.main ul li{
	display: inline-block;
	width: 150px;
}
.main ul li i{
	padding-right: 5px;
	color: #eccc68; 
	opacity: 0.6;
}
.main ul li a{
	text-decoration: none;
	color: #fff;
	padding: 5px 20px;
	border: 1px solid transparent;
	border-radius: 7px;

}
.main ul li a:hover{
	position: relative;
	display: block;
	background-color: #fff;
	color: #000;
	transition: 0.6s ease;
}
.main ul li.active a{
	background-color: #fff;
	color: #000;
}
.main ul ul li{
	list-style-type: none;
	display: none;
}
.main ul li:hover ul li{
	display: block;
}
.login ul{
	float: right;
	position: fixed;
	list-style-type: none;
	display: inline-block;
	font-size: 12px;

}

.logo img{
	float: left;
	width: 150px;
	height: auto;
	margin-top: 15px;
	margin-left: 0;
}
header{
	background-color: rgba(202, 211, 200,0.6);
}
.main{
	max-width: 1200px;
	margin: auto;
}

.title img{
	width: 40%;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%,-100%);

}
.title p{
	width: 40%;
	position: absolute;
	top: 54%;
	left: 50%;
	font-size: 25px;
	font-family: Montserrat;
	font-weight: lighter;
	transform: translate(-50%,-100%);
	text-align: center;
	color: #F8EFBA;
}
.button{
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%,-100%);
}
.button a i{
	padding-right: 5px;
	color: #eccc68; 
	opacity: 0.6;
}
.btn{
	border: 1px solid #eccc68;
	border-radius: 15px;
	padding: 10px 30px;
	color: #fff;
	font-size: 20px;
	text-decoration: none;
}
.btn:hover{
	background-color: #fff;
	color: #000;
	transition: 0.6s ease;

}
.footer{
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: rgba(0,0,0,0.4);
	height: 60px;
}
.footer ul{
	transform: translateX(1800px);
	margin-right: 0px;
	list-style-type: none;
	font-size: 15px;
	margin-top: 20px;
}
.footer ul li a i{
	font-size: 20px;
	padding-right: 5px;
	color: #eccc68;
}

.footer ul li{
	display: inline-block;
}
.footer h5{
	font-size: 11px;
	color: #eccc68;
	text-align: center;
	opacity: 0.7;

}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Trip Buddy | Your free online travel guide</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="shortcut icon" type="image/png" href="favicon.ico">
</head>
<body>
	<header>
		<div class="main">
			<div class="logo">
				<a href="acceuil.html"><img src="2.png"></a>
			</div>
			<ul>
				<li class="active"><a href="#"><i class="fas fa-home"></i>Accueil</a></li>
				<li><a href="#"><i class="fas fa-city"></i>Villes dispo</a>
					<ul>
						<li><a href="#">Marrakech</a></li>
						<li><a href="#">Rabat</a></li>
						<li><a href="#">Tanger</a></li>
						<li><a href="#">Essaouira</a></li>
					</ul>
				</li>
				<li><a href="#"><i class="fas fa-hand-holding"></i>Services</a></li>
				<li><a href="#"><i class="fas fa-user-alt"></i>Contact</a></li>
			</ul>
			
		</div>
		<div class="login">
				<ul>
					<li><a href="#">S'inscrire</a></li>
					<li><a href="#">Se connecter</a></li>
				</ul>
			</div>
		<div class="title">
			<img src="2.png">
			<p>Trip Buddy est ton premier accompagnant guide en ligne. Rejoignez notre nombreuse communauté et télecharger l'application sur toutes les platformes GRATUITEMENT!</p>
		</div>
		<div class="button">
			<a href="#" class="btn"><i class="far fa-play-circle"></i>Regarder video</a>
			<a href="#" class="btn"><i class="far fa-question-circle"></i>Aide</a>
		</div>
	</header>
	<footer>
		<div class="footer">
			<ul>
				<li><a href="#"><i class="fab fa-facebook"></i></a></li>
				<li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
				<li><a href="#"><i class="fab fa-instagram"></i></a></li>
				<li><a href="#"><i class="fab fa-snapchat-square"></i></a></li>
			</ul>
			<h5>
				&copy;Khalil 2019
			</h5>
		</div>
	</footer>

</body>
</html>

请您解决此问题，我将非常感谢您的帮助。谢谢。

1 个答案:

答案 0 :(得分：0)

我已更改以下CSS代码和菜单，现已修复。 

int day = 30;

请访问codepen 

    .main ul li a{
    text-decoration: none;
    color: #fff;
    padding: 5px 20px;
    border: 1px solid transparent;
    border-radius: 7px;
    position: relative;
    display: block;
    transition:all 0.6s ease; /* this will be always at normal stage not at hover*/

}
.main ul li a:hover{
    background-color: #fff; 
    color: #000;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway');
*{
	margin:0;
	padding: 0;
	font-family: Raleway; 
}
body{
	background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
				url('1.jpg');
	background-position: center;
	background-size: cover;
	height: 100vh;
}
.main ul{
	float: right;
	display: block;
	list-style-type: none;
	font-size: 15px;
	margin-top: 20px;
	position: sticky;

}
.main ul li{
	display: inline-block;
	width: 150px;
}
.main ul li i{
	padding-right: 5px;
	color: #eccc68; 
	opacity: 0.6;
}
.main ul li a{
	text-decoration: none;
	color: #fff;
	padding: 5px 20px;
	border: 1px solid transparent;
	border-radius: 7px;
  position: relative;
	display: block;
	transition:all 0.6s ease; /* this will be always at normal stage not at hover*/

}
.main ul li a:hover{
	background-color: #fff; 
	color: #000;
}
.main ul li.active a{
	background-color: #fff;
	color: #000;
}
.main ul ul li{
	list-style-type: none;
	display: none;
}
.main ul li:hover ul li{
	display: block;
}
.login ul{
	float: right;
	position: fixed;
	list-style-type: none;
	display: inline-block;
	font-size: 12px;

}

.logo img{
	float: left;
	width: 150px;
	height: auto;
	margin-top: 15px;
	margin-left: 0;
}
header{
	background-color: rgba(202, 211, 200,0.6);
}
.main{
	max-width: 1200px;
	margin: auto;
}

.title img{
	width: 40%;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%,-100%);

}
.title p{
	width: 40%;
	position: absolute;
	top: 54%;
	left: 50%;
	font-size: 25px;
	font-family: Montserrat;
	font-weight: lighter;
	transform: translate(-50%,-100%);
	text-align: center;
	color: #F8EFBA;
}
.button{
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%,-100%);
}
.button a i{
	padding-right: 5px;
	color: #eccc68; 
	opacity: 0.6;
}
.btn{
	border: 1px solid #eccc68;
	border-radius: 15px;
	padding: 10px 30px;
	color: #fff;
	font-size: 20px;
	text-decoration: none;
}
.btn:hover{
	background-color: #fff;
	color: #000;
	transition: 0.6s ease;

}
.footer{
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: rgba(0,0,0,0.4);
	height: 60px;
}
.footer ul{
	transform: translateX(1800px);
	margin-right: 0px;
	list-style-type: none;
	font-size: 15px;
	margin-top: 20px;
}
.footer ul li a i{
	font-size: 20px;
	padding-right: 5px;
	color: #eccc68;
}

.footer ul li{
	display: inline-block;
}
.footer h5{
	font-size: 11px;
	color: #eccc68;
	text-align: center;
	opacity: 0.7;

}

相关问题
最新问题