 아래 이미지와 같이 메인 페이지를 만들어 보겠습니다. html과 css소스는 아래에 첨부했습니다. 메인페이지 이미지
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/common.css" type="text/css"> <title>My portfolio</title> </head> <body> <!--로고--> <h2><a href="index.html"><img src="images/logo.png" alt="로고 이미지"></a></h2> <!--S:mainNav--> <div class="mainNav"> <ul> <li class="nav01"><a href="sub01.html">내소개</a></li> <li class="nav02"><a href="sub02.html">작품1</a></li> <li class="nav03"><a href="sub03.html">작품2</a></li> <li class="nav01"><a href="sub04.html">작품3</a></li> </ul> </div> <!--E:mainNav--> <!--S:contents--> <div class="contents"> <!--E:slide--> <div> <a href="sub01.html"><img src="images/img01.jpg" alt="작품이미지1"></a><a href="sub02.html"><img src="images/img02.jpg" alt="작품이미지2"></a><a href="sub03.html"><img src="images/img03.jpg" alt="작품이미지3"></a> </div> <div> <a href="sub03.html"><img src="images/img04.jpg" alt="작품이미지1"></a><a href="sub04.html"><img src="images/img05.jpg" alt="작품이미지2"></a><a href="sub03.html"><img src="images/img06.jpg" alt="작품이미지3"></a> </div> <!--E:slide--> </div> <!--E:contents--> <!--S:footer--> <div class="footer"> <address>Copyright © 2018 Design</address> </div> <!--E:footer--> </body> </html> @charset "utf-8"; /*레이아웃 공통 부분*/ /*전체 공백없애기*/ * { margin: 0; padding: 0; } /*글꼴*/ body { text-align:center; font-family: Nanum, 돋움, dotum, Gotham, "Helvetica Neue", Helvetica, arial, sans-serif; color: #444; } /*배경 이미지*/ body { background: black url(../images/bg.jpg) repeat-x center top; /*그림이 짧으므로 그림 아래 컬러 추출. 포지션은 center top*/ } /*로고부분 공백*/ h2 { margin:40px 0; } /*불렛없애기*/ ul { list-style-type: none; } /*링크*/ a { text-decoration: none; } /*상단 메뉴 mainNav*/ .mainNav { height: 50px; background: #046380; } .mainNav > ul { width: 1000px; margin: 0 auto; overflow: hidden; } .mainNav > ul > li { float: left; width: 250px; } .mainNav > ul > li:before { content: "|"; color: #ccc; } .mainNav > ul > li:first-child:before { content: none; } .mainNav > ul > li > a { display: inline-block; padding: 0 99px; color: #ccc; line-height: 50px; } .mainNav > ul > li > a:hover, .mainNav > ul > li > a:focus { background-color: #333; } /*인덱스 페이지 이미지 위아래 공백*/ .contents { margin-top: 30px; margin-bottom: 30px; } /*서브 페이지 레이아웃 공통부분*/ /*subBox*/ .subBox p:first-child { text-align: right; font-size: 0.8em; } .subBox { width: 950px; background: #ffffff; margin: 0 auto; font-family: Nanum, 돋움, dotum, Gotham, "Helvetica Neue", Helvetica, arial, sans-serif; color: #444; padding: 30px; margin-top: 30px; } .subBox h2{ margin-bottom:20px; font-size: 18px; font-weight: bold; line-height: 2.5em; margin-top: 20px; border-top: 1px dotted #6c6c6c; border-bottom: 1px dotted #6c6c6c; color:#1e61a8; text-align: left; } .subBox dl dd{ margin-bottom: 30px; text-align: justify; line-height: 1.8em; } .subBox dl dt{ font-weight: bold; line-height: 1.8em; text-align: left; } /*하단 footer*/ .footer { padding: 20px 0; border-top: 1px solid #888888; font-size:0.8em; color: #c0c0c0; } |
Html 메인페이지 소스 - html meinpeiji soseu
관련 게시물
저작권 © 2024 nguoilontuoi Inc.
