我是网络开发领域的新学生。我正在尝试创建一个用于个人学习的静态页面,需要将图像留在菜单下方的左侧,但是,我已经尝试了我知道的表格,并且所有表格继续出现相同的错误,因此我相信有人在这里可以回答我。有人可以帮我吗?
这是html代码:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Home</title>
<link rel="shortcun icon" type="image/x-png" href="_imagens/icone-adv6.png"/>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="_css/estilo.css">
</head>
<body>
<header class="header">
<!-- inicio menu -->
<div class="logo">
<a href="index.html"><img src="_imagens/iconadv6.png"></a>
</div>
<nav>
<ul>
<li><a href="#"><p class="gilroy-bold">equipe</p></a></li>
<li><a href="#"><p class="gilroy-bold">cases</p></a></li>
<li><a href="#"><p class="gilroy-bold">agência</p></a></li>
</ul>
</nav>
<!-- fim menu -->
</header>
<div class="zoom">
<img src="_imagens/predio.png">
<div class="text-item">
</div>
<div id="tituloadv6">
<h1><p class="gilroy-bold">Somos a <br />ADV6</h1></p>
</div>
<div id="texto1">
<h3><p class="gilroy-bold">Não fazemos a menor ideia. <br />Fazemos a maior.</h3></a>
</div>
<div id="texto2">
<p class="gilroy-bold">Passa aqui! <br/> Tem playstation, café, <br />cerveja e muita criatividade. </a>
</div>
</body>
</html>
这是CSS代码:
@font-face{
font-family: "gilroy-bold";
src: url("../_fonts/gilroy-bold.ttf");
}
.gilroy-bold{
font-family: "gilroy-bold";
}
.header ul li a:hover {
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #FF8C00;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.zoom {
overflow: hidden;
}
.zoom img {
max-width: 90%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
float: right;
margin-top: 40px;
position: relative;
}
.zoom:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#tituloadv6{
margin-left: 60px;
font-size: 30px;
padding-top: 60px;
}
#logo{
padding-left: 20px;
padding-bottom: 0px;
padding-top: 15px;
}
#texto1{
padding-left: 100px;
}
#texto2{
font-size: 13px;
padding-left: 100px;
}
.header{
margin: 0;
padding: 0;
}
nav{
width: 100%;
}
ul{
margin: 5px 5px 5px 10px;
padding: 0px;
padding-bottom: 40px;
list-style: none;
}
li{
float: right;
}
.logo img{
position: absolute;
margin-top: 15px;
margin-left: 10px;
}
nav a{
width: 100px;
display: block;
padding: 20px 15px;
text-decoration: none;
}
答案 0 :(得分:0)
将float: right
更改为float: left
,将margin-top: 40px
更改为margin-top: 100px
.zoom img {
max-width: 90%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
float: left;
margin-top: 100px;
position: relative;
}
希望有帮助!
答案 1 :(得分:0)
将.zoom
类更改为此:
.zoom {
overflow: hidden;
display: block;
width: 100%;
}
然后更改img
标签的浮点数:
.zoom img {
.zoom img {
max-width: 90%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
float: left;
margin-top: 40px;
position: relative;
}
您需要更改文本的边距,以确保文本可读。
有关更多详细信息,请参见此codepen:https://codepen.io/aharish-the-typescripter/pen/GPqqpw