Skip to content

Instantly share code, notes, and snippets.

@yooongjin

yooongjin/home.html

Last active November 24, 2020 02:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yooongjin/f300e3bf2c46e4852fe833cafd43d69e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yooongjin/f300e3bf2c46e4852fe833cafd43d69e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
home.html
<!DOCTYPE html>
<html>
<head>
<title>옷골라쇼핑몰</title>
<script src="jquery-3.4.1.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@1,700&display=swap');
ul{
display:block;
}
li{
display:inline;
}
body{
background-color: beige;
width : 1500px;
}
div#wrapper{
width : 100%;
text-align : left;
min-height : 300px;
margin : 0 auto;
}
header, footer, nav, aside, section{
margin:5px;
padding : 10px;
}
header {
margin-left :15px;
margin-right :15px;
height : 50px;
background-color: burlywood;
border-bottom: 2px solid black;
border-radius : 10px;
box-shadow: 2px 2px grey;
}
nav, section, aside {
float : left;
height : 600px;
}
section {
margin-top: 30px;
width :1470px;
}
article {
display: inline-block;
width : 95%;
height : 45%;
margin-left:30px;
}
td.form{
margin:0px;
padding:10px;
width:140px;
height:140px;
}
#menu{
position :absolute;
top:20px;
left:250px;
padding :0;
margin : 0;
width:1150px;
}
#menu li {
display : inline-block;
padding:0px;
text-align:center;
border-top-left-radius:10px;
border-top-right-radius: 10px;
font-size:19px;
font-weight: bolder;
width:208px;
padding-top:12.5px;
padding-bottom:12.5px;
cursor:pointer;
}
#menu li a{
display:block;
}
#menu li:hover{
background-color: rgb(214, 134, 30, 0.4);
text-decoration: underline;
}
#menu ul li:hover{
text-decoration: underline;
background-color: (0,0,0,0.2);
}
#icon {
display : inline-block;
position: absolute;
margin :0px;
top:20px;
left: 50px;
width : 250px;
height : 50px;
}
#icon p{
font-family: 'Ubuntu', sans-serif;
font-size: 20px;
margin:0px;
}
#icon p::first-letter{
font-size:2em;
color:navy;
}
#menu_2{
margin:0;
margin-left:10px;
padding:0;
}
#menu_2 li{
border-top-left-radius : 10px;
border-top-right-radius: 10px;
padding-left:15px;
padding-right:15px;
cursor:pointer;
}
#menu_2 li:hover{
background-color: rgb(226, 216, 170);
}
table#lst{
margin:0px;
padding:0px;
}
#item_box{
width: 1380px;
height:180px;
background-color :rgb(226, 220, 191);
margin:0px;
padding:0px;
padding-top:15px; padding-left:40px;
border-radius: 10px;
box-shadow: 5px 5px grey;
}
a { text-decoration:none ; color:#000000}
p#title{
font-size :20px;
font-weight :bold;
}
#menu ul{position: absolute; display : none; padding-top:50px; top:50px; background: rgb(226, 216, 170);padding:0px; margin:0px; border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}
#menu ul li{display:block; border-radius: 0px; padding:0px; margin:0px; text-align:center; width :208px; line-height: 43px; }
</style>
<script>
function test(a, b){
var d = document.getElementById(a);
var td1 = document.getElementById(a+'_td1');
var td2 = document.getElementById(a+'_td2');
var td3 = document.getElementById(a+'_td3');
var td4 = document.getElementById(a+'_td4');
if(b == 1) {
td1.style.backgroundColor= 'red' ;
td2.style.backgroundColor= 'red';
td3.style.backgroundColor= 'red';
td4.style.backgroundColor= 'red';
}
if(b == 2) {
td1.style.backgroundColor= 'blue';
td2.style.backgroundColor= 'blue';
td3.style.backgroundColor= 'blue';
td4.style.backgroundColor= 'blue';
}
if(b == 3) {
td1.style.backgroundColor= 'black';
td2.style.backgroundColor= 'black';
td3.style.backgroundColor= 'black';
td4.style.backgroundColor= 'black';
}
if(b == 4) {
td1.style.backgroundColor= 'green';
td2.style.backgroundColor= 'green';
td3.style.backgroundColor= 'green';
td4.style.backgroundColor= 'green';
}
};
var menu_id =null;
var menu_id1 = null;
function init(){
// test('art1', 1); test('art2', 1);
document.getElementById('m_0').style.backgroundColor='rgb(226, 220, 191)';
document.getElementById('n_0').style.backgroundColor='rgb(226, 220, 191)';
menu_id = 'm_0'
menu_id1 = 'n_0'
}
function menu_select(id){
if(id == menu_id) return;
var doc = document.getElementById(id);
doc.style.backgroundColor= 'rgb(226, 220, 191)';
document.getElementById(menu_id).style.backgroundColor="";
menu_id = id;
};
function menu_select1(id){
if(id == menu_id1) return;
var doc = document.getElementById(id);
doc.style.backgroundColor= 'rgb(226, 220, 191)';
document.getElementById(menu_id1).style.backgroundColor="";
menu_id1 = id;
};
</script>
<script>
$(document).ready(function () {
$("#menu li").hover(function(){
$(this).find("ul").stop().fadeToggle(200);
});
});
</script>
</head>
<body>
<div id = "wrapper">
<header>
<div id="icon">
<p><a href = "D:\\대학\\강의자료\\2020년 2학기\\고급웹프로그래밍\\기말플젝\\home.html">OS GOLLA <span style="font-size:12px; color:brown">shop</span></a></p>
</div>
<ul id="menu">
<li><a>TOP</a>
<ul>
<li><a>T-SHIRT</a></li>
<li><a>SWEAT</a></li>
<li><a>SHIRT</a></li>
<li><a>NEAT</a></li>
</ul></li>
<li><a>BUTTOM</a>
<ul>
<li><a>T-SHIRT</a></li>
<li><a>SWEAT</a></li>
<li><a>SHIRT</a></li>
<li><a>NEAT</a></li>
</ul></li>
<li><a>OUTER</a>
<ul>
<li><a>T-SHIRT</a></li>
<li><a>SWEAT</a></li>
<li><a>SHIRT</a></li>
<li><a>NEAT</a></li>
</ul></li>
<li><a>SHOES</a>
<ul>
<li><a>T-SHIRT</a></li>
<li><a>SWEAT</a></li>
<li><a>SHIRT</a></li>
<li><a>NEAT</a></li>
</ul></li>
<li><a>ACCESSORY</a>
<ul>
<li><a>T-SHIRT</a></li>
<li><a>SWEAT</a></li>
<li><a>SHIRT</a></li>
<li><a>NEAT</a></li>
</ul></li>
</ul>
</header>
<section>
<article>
<p id='title'style = "margin: 10px">Popular Product</p>
<hr style = "background-color: brown;height:2px; margin:10px;">
<ul id='menu_2'>
<li id='m_0' onclick="menu_select('m_0')"><a>TOP</a></li>
<li id='m_1' onclick="menu_select('m_1')">BUTTOM</li>
<li id='m_2' onclick="menu_select('m_2')"><a>OUTER</a></li>
<li id='m_3' onclick="menu_select('m_3')"><a>SHOES</a></li>
<li id='m_4' onclick="menu_select('m_4')"><a>ACCESSORY</a></li>
</ul>
<div id = "item_box">
<table width='1340' class="lst" border='1'>
<td class = form><img src="" alt="no image"></td>
<td class = form><img src="" alt="no image"></td>
<td class = form><img src="" alt="no image"></td>
<td class = form><img src="" alt="no image"></td>
<td class = form><img src="" alt="no image"></td>
<td class = form><img src="" alt="no image"></td>
<td class = form><img src="" alt="no image"></td>
<td class = form><img src="" alt="no image"></td>
</table>
</div>
</article>
<br><br><br>
<article>
<p id='title' style = "margin: 10px">Recommended Product</p>
<hr style = "background-color: brown;height:2px; margin:10px;">
<ul id='menu_2'>
<li id='n_0' onclick="menu_select1('n_0')"><a>TOP</a></li>
<li id='n_1' onclick="menu_select1('n_1')">BUTTOM</li>
<li id='n_2' onclick="menu_select1('n_2')"><a>OUTER</a></li>
<li id='n_3' onclick="menu_select1('n_3')"><a>SHOES</a></li>
<li id='n_4' onclick="menu_select1('n_4')"><a>ACCESSORY</a></li>
</ul>
<div id = 'item_box'>
<table width='1340' class='lst' border="1">
<td class = form><img src="" alt="no image"></td>
<td class =form><img src="" alt="no image"></td>
<td class=form><img src="" alt="no image"></td>
<td class =form><img src="" alt="no image"></td>
<td class =form><img src="" alt="no image"></td>
<td class =form><img src="" alt="no image"></td>
<td class=form><img src="" alt="no image"></td>
<td class =form><img src="" alt="no image"></td>
</table>
</div>
</article>
</section>
</div>
<script>init()</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment