html 리뷰게시판이동버튼(html)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 리뷰게시판이동버튼(html)相关的知识,希望对你有一定的参考价值。
//게시판 이동 버튼 시작
document.write("<div class='board_buttons'>");
document.write("<a class='board_button' href='/board/product/list.html?board_no=4'>전체 리뷰</a>");
document.write("<a class='board_button' href='/board/free/list.html?board_no=3001'>포토 리뷰</a>");
document.write("<a class='board_button selected' href='/board/free/list.html?board_no=2'>스텝 리뷰</a>");
document.write("</div>");
//게시판 이동 버튼 끝
<!-- 게시판 이동 버튼 관련 css 시작 -->
<style>
.board_buttons {
width: 100%;
height: auto;
margin: 40px auto;
text-align: center;
}
.board_button {
display: inline-block;
width: 20%; /* 버튼 개수에 맞게 사이즈 조정해서 사용하세요 */
padding: 14px 0;
font-size: 12px;
color: #333;
border: 1px solid #333;
text-align: center;
margin-left: 8px;
text-decoration: none;
}
.board_button:link,
.board_button:visited,
.board_button:active { text-decoration: none; }
.board_button:hover { text-decoration: underline; }
.board_button:first-child { margin-left: 0; }
.selected {
background: #333;
color: #fff;
}
</style>
<!-- 게시판 이동 버튼 관련 css 끝 -->
<!-- 게시판 이동 버튼 관련 css 시작 -->
<style>
.board_buttons {
width: 100%;
margin: 12px auto;
text-align: center;
}
.board_button {
display: inline-block;
width: 31%; /* 버튼 개수에 맞게 사이즈 조정해서 사용하세요 */
padding: 10px 0;
font-size: 11px;
color: #333;
letter-spacing: 1px;
border: 1px solid #333;
text-align: center;
margin-left: 5px;
text-decoration: none;
}
.board_button:first-child { margin-left: 0; }
.selected {
background: #333;
color: #fff;
}
</style>
<!-- 게시판 이동 버튼 관련 css 끝 -->
以上是关于html 리뷰게시판이동버튼(html)的主要内容,如果未能解决你的问题,请参考以下文章
html 위사업체에포토리뷰게시판작업
css 숨김 - “이리뷰가도움이되었나요?”의“아니요”버튼
javascript 고도몰이나기타솔루션사에서모바일주문내기더보기버튼눌렀을때리뷰작성버튼에링크붙여주는스크립트
html 상품상세 - 분리형게시판위젯
html 리뷰작성버튼
html dfloor스킨아이콘모양버튼그룹으로동작하는각영역에서로다른설설치