Jam's story

[CSS] div와 a로 메뉴 만들기+ hover 본문

WEB/CSS

[CSS] div와 a로 메뉴 만들기+ hover

애플쩀 2022. 5. 23. 09:41 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{margin:0px;}
.topnav{
background-color: #333;
overflow: auto;
}
.topnav a{
color:#f2f2f2;
text-decoration: none;
float:left;
padding: 14px 16px;
text-align: center;
}
.topnav a:hover{
background-color: #ddd;
color:black;
}
.topnav a:active{
	background-color: #4caf50;
	color:white;
}
</style>
</head>
<body>
<div class="topnav">
<a href="#"class="active">Home</a>
<a href="#">News</a>
<a href="#">Contact</a>
<a href="#">About</a>
<a href="#"></a>
</div>
<div>
	<h2 id="tne">Top Navigation example</h2>
	<p onclick="p_click()">Lorem ipsum dolor sit amet.</p>
</div>
<script type="text/javascript">
function p_click(){
	alert("p_click");
	//2번째방법
	var h2elemt=document.getElementById('tne');
	//함수명이 없는 익명함수
	h2elemt.onclick=function (){
		alert("h2_click");
		
	}
	
}
</script>
</body>
</html>
Insert title here
Home News Contact About

Top Navigation example

Lorem ipsum dolor sit amet.

저작자표시

'WEB > CSS' 카테고리의 다른 글

[CSS] li 꾸미기  (0) 2022.05.23
[CSS] 페이징 처리  (0) 2022.05.23
[CSS] 아이콘  (0) 2022.05.20
[CSS] 구글 글꼴 사용  (0) 2022.05.20
[CSS] font  (0) 2022.05.20
'WEB/CSS' Related Articles more
Comments