티스토리 뷰
[1] ul li 형태의 리스트
밖으로 뺀 css 형태
[2] ol li 형태의 리스트
Horizontal Lists - 상단 메뉴에 많이 쓰인다고 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
ul#menu li {
display: inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px; //상하 10, 좌우 20
text-decoration: none;
border-radius: 14px 14px 0 0; //위 두 귀퉁이 14, 아래 귀퉁이 0
}
ul#menu li a:hover {
background-color: orange;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li><a href="./colspan.html">HTML</a></li> //상대경로 .은 같은경로, ..은 폴더를 나온다
<li><a href="./css3.html">CSS</a></li>
<li><a href="./ol.html">JavaScript</a></li>
<li><a href="./rowspan.html">PHP</a></li>
</ul>
</body>
</html>
'web > css,html' 카테고리의 다른 글
| Font Awesome - 아이콘 폰트형식으로 추가하기 (0) | 2018.08.14 |
|---|---|
| w3school (0) | 2018.01.17 |
| 마진, 패딩, Border, Outline (0) | 2018.01.17 |
| css적용하기, id와 class속성 (0) | 2018.01.17 |
| utf-8로 설정하기, html프로젝트 생성하기 ,html 실행시키기 (0) | 2018.01.17 |
댓글