啪啪欧美精品A片二区

系統城裝機大師 - 唯一官網:www.trattoriacinecitta.com!

當前位置:首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

HTML連載70-相片墻、盒子陰影和文字陰影

時間:2020-02-24來源:電腦系統城作者:電腦系統城

一、 制作一個相片墻

二、  

復制代碼
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            height: 400px;

            border:1px solid black;

            background-color: skyblue;

            margin-top:100px;

            text-align: center;/*這個屬性是用來表示給內部五張圖片是水平居中的*/

        }

        ul li {

            list-style:none;

            width: 150px;

            height: 200px;

            background-color: red;

            display:inline-block;

            transition:transform 1s;

            position:relative;/*使用相對定位,是想把圖片能夠置頂*/

            box-shadow: 0 0 10px;/*使圖片有陰影*/

?

        }

        ul li:nth-child(1){

            transform: rotate(30deg);

        }

        ul li:nth-child(2){

            transform: rotate(-30deg);

        }

        ul li:nth-child(3){

            transform: rotate(50deg);

        }

        ul li:nth-child(4){

            transform: rotate(-50deg);

        }

        ul li image{

            width: 150px;

            height: 200px;

            box-sizing:border-box;

?

        }

        ul li:hover{

            /*transform:rotate(0px);*/

            transform: scale(1.5);/*放大*/

            z-index: 998;

        }

</style>

</head>

<body>

<ul>

    <li><img src="image/play_tennis2.jpg" alt=""></li>

    <li><img src="image/play_tennis2.jpg" alt=""></li>

    <li><img src="image/play_tennis2.jpg" alt=""></li>

    <li><img src="image/play_tennis2.jpg" alt=""></li>

    <li><img src="image/play_tennis2.jpg" alt=""></li>

</ul>

</body>

</html>
復制代碼

 

 

二、盒子陰影和文字陰影

1.如何給盒子添加陰影

box-shadow: 水平偏移  垂直偏移  模糊度  陰影擴展   陰影顏色   內外陰影(內陰影就是inset)

2.盒子的陰影分為外陰影和內陰影,默認情況下就是外陰影

3.陰影顏色如果不寫,那就默認是文字的顏色

4.省略的寫法:box-shadow:水平偏移  垂直偏移  陰影擴展 ;

5.如何給文字添加陰影

text-shadow:水平偏移 垂直偏移  模糊度  陰影顏色;

復制代碼
 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D173_ShadowOfBoxAndWord</title>

    <style>

        *{

            padding:0px;

            margin:0px;

?

        }

        div{

            height: 200px;

            width: 200px;

            margin:20px auto;

            background-color: red;

            border:1px solid black;

            text-align: center;

            line-height:200px;

            font-size:30px;

            box-shadow:10px 10px 10px 0px black;/*水平偏移  垂直偏移  模糊度  陰影擴展  陰影顏色  內外陰影*/

            text-shadow:3px 3px 3px blue;

        }

</style>

</head>

<body>

<div>我是盒子</div>

</body>

</html>
復制代碼

三、源碼:

D172_PhotoWall.html

D173_ShadowOfBoxAndWord.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D172_PhotoWall.html

https://github.com/ruigege66/HTML_learning/blob/master/D173_ShadowOfBoxAndWord.html

分享到:

相關信息

  • HTML5之audio屬性

    audio主要支持的音頻格式:mp3 ogg wav<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>audio</title></head><body> <!-- 方法一 --> <a...

    2020-03-04

  • HTML連載72-動畫效果及其他屬性

    一、動畫效果 1.過渡與動畫相類似,都需要三要素,那么他們的區別在哪里呢? ?答:過渡必須是人為的觸發才會執行動畫,動畫不需要人為的觸發就可以自動執行?動畫。 2.?相同點: (1)過度和動畫都是用來給元素添加動畫的;(2)過渡...

    2020-03-04

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載