반응형
- code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background:#D1D9E6;
}
.list {
background:white;
box-shadow:2px 2px 2px 2px black ;
position:absolute;
}
h1 {
padding: 5px 20px;
margin: 15px;
}
ul{
padding-left:10px;
margin-right:5px;
}
ul li {
padding: 10px;
margin-left:15px;
display: grid;
}
ul li:hover {
border-radius: 15px;
background:lightseagreen;
color:white;
}
</style>
<title>list style</title>
</head>
<body>
<h1>list style</h1>
<div class=list>
<ul>
<li><span>HyperText Markup Language</span></li>
<li><span>Cascading StyleSheet</span></li>
<li><span>JavaSript</span></li>
<li><span>Jquery</span></li>
</ul>
</div>
</body>
</html>결과물
list style
- HyperText Markup Language
- Cascading StyleSheet
- JavaSript
- Jquery
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 슬라이드(slide) 옆으로 움직이는 방향 (0) | 2020.11.13 |
|---|---|
| [HTML & CSS] 슬라이드(slide) 위로 올라가는 방향 (0) | 2020.11.09 |
| [HTML & CSS] html표를 CSV파일로 다운로드(DOWNLOAD) (0) | 2020.11.02 |
| [HTML & CSS] 다양한 모양의 체크박스(checkbox) 만들기 !! (코드&예시 첨부) (0) | 2020.10.27 |
| [HTML & CSS] 경고창(alert) 확인 / 취소 띄우기! (0) | 2020.10.26 |
댓글