BNX 홈페이지 구현 - 2

HTML

 

 

div.prod-list-box.con>ul.row>li.cell*18>(.img-box>img[src="bnx.oa.gg/img/bnx_16fw_visual_$$_list.jpg"])+.prod-name{단가라 ops}+.prod-price{19,000}를 한후 탭하여 18개의 이미지의 밑에 상품명과 가격이 들어가게 만들어 준다

 

 

 

CSS

 

 

 

 

 

 

 

1. 상품 리스트 박스의 ul>li에 위치를 조정하고 마우스를 올렸을 때 커서가 포인터로 바뀌게 설정해주고 6개의 사진씩 들어가게 바꾸어준다

2. 800px이하의 넓이일때는 5개씩 보이도록,

 700px일때는 4개, 600px일때는 3개, 500px일때는 2개, 400px일때는 1개로 설정해준다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. 상품리스트 박스의 양옆을 메인사진과 같게 맞추어 준다

4. 상품평과 상품가격의 위치와 글자두께, 크기를 조정해준다

5.상품가격뒤에 "원"을 붙이고 글자두께와 크기를 평범하게해준다

6.상품명에 마우스를 올렸을 때 밑줄이 나오도록 설정해준다

 

 

 

 

 

 

 

 

 

 

 

 

결과