Menu
Hello
I basically transcribed the following code from a video tutorial which teaches how to close a quick code if click the cross sign ×.
I have some questions on the code. Would you please help me out?
(1) Why does the multiple sign appear normally on the webpage instead of being italic as the multiple sign is being marked with ‘i’.
However if I replace multiple sign (×) with English letter (X), the English X will become italic.
These are what I am talking about.
>
<!– <i class=’close-btn’>X</i> –>
> <i class=”close-btn”>×</i>
(2) I don’t figure out why the coach especially writes the font-family for a cross sign here. What is his purpose here if you can guess this?
>
font-family: Arial, Helvetica, sans-serif;
I feel this is relevant to the first question above. If he just wants to make the cross sign normal, why doesn’t he write font-size: normal?
Thank you very much!
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
.box {
position: relative;
width: 74px;
height: 88px;
margin: 100px auto;
border: 1px solid #ccc;
color: #f40;
font-size: 12px;
text-align: center;
background-color: pink;
}
.box img {
width: 60px;
margin-top: 5px;
}
.close-btn {
position: absolute;
top: -1px;
left: -16px;
width: 14px;
height: 14px;
border: 1px solid #ccc;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<div class=”box”>
Hello
<img src=”images/tao.png” alt=””>
<!– <i class=’close-btn’>X</i> –>
<i class=”close-btn”>×</i>
</div>
<script>
var box = document.querySelector(‘.box’);
var btn = document.querySelector(‘.close-btn’);
btn.onclick = function() {
box.style.display = ‘none’;
}
</script>
</body>
</html>