网格图像HTML

我是一个HTML初学者，我试图创建ma网格和图像，并且我想翻转图像上的文本，但是我不能。有人会帮助我吗？我做了几个测试，没有任何工作。如果我停下来，我正在研究这个问题，并逐渐得到它，但这一次我需要帮助。代码：网格图像HTML

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.img { 
 
    margin: 5px; 
 
    border: 1px solid #ccc; 
 
    float: left; 
 
    width: 180px; 
 
    position:relative; 
 
} 
 

 
div.img:hover { 
 
    border: px solid #777; 
 
} 
 

 
div.img img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
#NomeAnime { 
 
    position:relative; 
 
    width:98%; 
 
    left:2px; 
 
    top:-20%; /* Posição vertical */ 
 
    color: white; /* Cor do texto */ 
 
    font: bold 13px arial, sans-serif; /* Fonte */ 
 
    text-align: center; /* Alinhamento */ 
 
    height: 16px; 
 
    overflow: hidden; 
 
    background-color:green; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="img"> 
 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Trolltunga Norway" width="300" height="200"> 
 
<div id="NomeAnime">teste</div></div> 
 
</div> 
 

 
<div class="img"> 
 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Forest" width="600" height="400"> 
 
<div id="NomeAnime">teste</div></div> 
 

 
<div class="img"> 
 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Northern Lights" width="600" height="400"> 
 
<div id="NomeAnime">teste</div></div> 
 
</div> 
 

 
<div class="img"> 
 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Mountains" width="600" height="400"> 
 
<div id="NomeAnime">teste</div></div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2017-03-03 David Benner

请翻译你的岗位上英语！ – gyre

嗯，如果你可以把你的问题翻译成英文，那就太好了:-) – Swellar

我是一个HTML初学者，我正在尝试创建ma网格和图像，并且我想翻转图像上的文字，但是我不能。有人会帮助我吗？我做了几个测试，没有任何工作。如果我停下来，我正在研究这个问题，并逐渐得到它，但这一次我需要帮助。代码： – Swellar

-1

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.img { 
 
    margin: 5px; 
 
    border: 1px solid #ccc; 
 
    float: left; 
 
    width: 180px; 
 
    height: 10px; 
 
    position:relative; 
 
} 
 

 
div.img:hover { 
 
    border: px solid #777; 
 
} 
 

 
div.img img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
#NomeAnime { 
 
    position:relative; 
 
    width:98%; 
 
    left:2px; 
 
    top:-20px; /* Posição vertical */ 
 
    color: white; /* Cor do texto */ 
 
    font: bold 13px arial, sans-serif; /* Fonte */ 
 
    text-align: center; /* Alinhamento */ 
 
    height: 16px; 
 
    overflow: hidden; 
 
    background-color:green; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="img"> 
 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Trolltunga Norway" width="300" height="200"> 
 
    <div id="NomeAnime">teste</div> 
 
</div> 
 

 
<div class="img"> 
 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Forest" width="600" height="400"> 
 
    <div id="NomeAnime">teste</div> 
 
</div> 
 

 
<div class="img"> 
 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Northern Lights" width="600" height="400"> 
 
<div id="NomeAnime">teste</div> 
 
</div> 
 

 
<div class="img"> 
 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Mountains" width="600" height="400"> 
 
    <div id="NomeAnime">teste</div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2017-03-03 06:23:35 Pradeepkumar

你应该id="NomeAnime"改变你class="NomeAnime"，因为id标识应为每个HTML节点是唯一的;

将您的css类声明从#NomeAnime更改为.NomeAnime以匹配类选择器;

最后，将您的position:relative更改为'position：absolute'和top:-20%' to top：20％`或根据需要更改。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
div.img { 
 
    margin: 5px; 
 
    border: 1px solid #ccc; 
 
    float: left; 
 
    width: 180px; 
 
    position:relative; 
 
} 
 

 
div.img:hover { 
 
    border: px solid #777; 
 
} 
 

 
div.img img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.NomeAnime { 
 
    position:absolute; 
 
    width:98%; 
 
    left:2px; 
 
    top:20%; /* Posição vertical */ 
 
    color: white; /* Cor do texto */ 
 
    font: bold 13px arial, sans-serif; /* Fonte */ 
 
    text-align: center; /* Alinhamento */ 
 
    height: 16px; 
 
    overflow: hidden; 
 
    background-color:green; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="img"> 
 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Trolltunga Norway" width="300" height="200"> 
 
<div class="NomeAnime">teste</div></div> 
 
</div> 
 

 
<div class="img"> 
 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Forest" width="600" height="400"> 
 
<div class="NomeAnime">teste</div></div> 
 

 
<div class="img"> 
 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Northern Lights" width="600" height="400"> 
 
<div class="NomeAnime">teste</div></div> 
 
</div> 
 

 
<div class="img"> 
 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Mountains" width="600" height="400"> 
 
<div class="NomeAnime">teste</div></div> 
 
</div> 
 

 
</body> 
 
</html>

来源

2017-03-03 05:45:09 andrepaulo

-1

我已经改变了文本块悬停旋转。刚刚尝试这一个

div.img { 
     margin: 5px; 
     border: 1px solid #ccc; 
     float: left; 
     width: 180px; 
     position: relative; 
    } 

    div.img:hover { 
     border: px solid #777; 
    } 

    div.img img { 
     width: 100%; 
     height: auto; 
    } 

    #NomeAnime { 
     position: relative; 
     width: 98%; 
     left: 2px; 
     top: -20%; 
     /* Posição vertical */ 
     color: white; 
     /* Cor do texto */ 
     font: bold 13px arial, sans-serif; 
     /* Fonte */ 
     text-align: center; 
     /* Alinhamento */ 
     height: 16px; 
     overflow: hidden; 
     background-color: green; 
     -moz-transition: -moz-transform ease 0.6s; 
     -webkit-transition: -webkit-transform ease 0.6s; 
     -o-transition: -o-transform ease 0.6s; 
     -ms-transition: -ms-transform ease 0.6s; 
     transition: transform ease 0.6s; 
    } 

    div.img:hover #NomeAnime { 
     color: #00FF22; 
     -moz-transform: rotate(360deg); 
     -webkit-transform: rotate(360deg); 
     -o-transform: rotate(360deg); 
     -ms-transform: rotate(360deg); 
     transform: rotate(360deg); 
    }

HTML

<div class="img"> 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Trolltunga Norway" width="300" height="200"> 
    <div id="NomeAnime"> 
     <span>teste</span> 
    </div> 
</div> 

<div class="img"> 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Forest" width="600" height="400"> 
    <div id="NomeAnime"> 
     <span>teste</span> 
    </div> 
</div> 

<div class="img"> 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Northern Lights" width="600" height="400"> 
    <div id="NomeAnime"> 
     <span>teste</span> 
    </div> 
</div> 

<div class="img"> 
    <img src="http://iv1.lisimg.com/image/7814282/600full-asa-butterfield.jpg" alt="Mountains" width="600" height="400"> 
    <div id="NomeAnime"> 
     <span>teste</span> 
    </div> 
</div>

小提琴

https://jsfiddle.net/Jaffar29sha/nc7a09ns/1/

来源

2017-10-05 10:20:28 Jaffar

回答

相关问题