실습문제 4-9

WEB/TRAINNING 2017. 11. 4. 19:27 |

9. 다음 페이지를 작성하라. Most Visited Pages 텍스트를 text-shadow로 꾸미고,

이미지에 마우스를 올리면 box-shadow를 이용하여 박스에 그림자가 보이게 하라.


 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <title>text-shadow와 box-shadow</title>
    <style>
        h2
        {
        text-align: center;
        color : yellow;
    text-shadow : 2px 2px 2px black,
            0 0 25px blue,
            0 0 5px darkblue;
        }
        img:hover
        {
        box-shadow : 2px 2px 2px black,
            0 0 25px blue,
            0 0 5px darkblue
        }
    </style>
</head>
<body>
<h2>Most Visited Pages</h2>
<hr>
<table>
    <tr>
        <td><a href="http://www.naver.com">
                <img src="naver.png" width="200" height="150">
            </a></td>
        <td><a href="http://www.chosun.com">
                <img src="chosun.png" width="200" height="150">
            </a></td>
        <td><a href="http://www.amazon.com">
                <img src="amazon.png" width="200" height="150">
            </a>
        </td>
    </tr>
</table>
</body>
</html>
cs


저작자표시 비영리 동일조건

'WEB > TRAINNING' 카테고리의 다른 글

실습문제 5-2  (0) 2017.11.06
실습문제 5-1  (0) 2017.11.06
실습문제 4-8  (0) 2017.11.04
실습문제 4-7  (0) 2017.11.04
실습문제 4-6  (0) 2017.11.04
Posted by 너래쟁이
:

티스토리툴바