보통 p 태그에는 테두리를 추가하는 일이 거의 없지만, 디자인할 때는 더 눈에 띄도록 div 태그에 테두리를 추가합니다.
예를 들어 보겠습니다. 예를 들어 웹사이트 홈페이지에서 머리 중간 부분(두 부분으로 나누어져 있음)과 아래쪽 부분, 이런 레이아웃 스타일을 어떻게 구현해야 할까요?
먼저 큰 div를 주고 머리 중간 부분을 모두 배치해야 합니다. 여기에서 머리글과 하단을 확인하려면 첫 번째 div에 대해 CSS 스타일을 만든 다음 이 div에 3개의 div 태그
를 추가해야 합니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#dv1{
width:800px;
height:500px;
border:1px solid red;
margin:0 auto; /*居中*/
}
</style>
</head>
<body>
<div id="dv1">
<div id="top">头部</div>
<div id="cen">中部</div>
<div id="but">底部</div>
</div>
</body>
</html> , 머리 중간과 아래쪽에 각각 div 태그를 추가해야 합니다. 전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#dv1{
width:800px; height:500px;border:1px solid red;margin:0 auto; /*居中*/text-align:center;
}
#top{
width:780px;height:100px;border:1px solid green;margin:0 auto;background-color:#ccc;margin-top:30px;
}
#cen{
width:780px; height:200px;border:1px solid black;margin:0 auto;background-color:#f77;margin-top:5px;
}
#but{
width:780px;height:100px;border:1px solid #f60;margin:0 auto;margin-top:5px;
}
#left{
width:200px;
height:198px;
border:1px solid green;
margin-left:5px;
float:left;
}
#right{
width:570px;
height:198px;
border:1px solid black;
float:right;
}
</style>
</head>
<body>
<div id="dv1">
<div id="top">头部</div>
<div id="cen">
<div id="left">左边</div>
<div id="right">右边</div>
</div>
<div id="but">底部</div>
</div>
</body>
</html> 참고: 테두리도 위쪽, 아래쪽, 왼쪽, 오른쪽으로 나누어야 합니다.
테두리 상단 상단
테두리 왼쪽 왼쪽
테두리 오른쪽 오른쪽
테두리 하단 하단
다음 섹션