html （第四本書第九章參考）

本文轉載自查看原文 2018-07-26 11:25 2184

上機1

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>照片牆</title>
    <link href="css/上機練習1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
    <img src="image/1.jpg">
    <img src="image/2.jpg">
    <img src="image/3.jpg">
    <img src="image/4.jpg">
    <img src="image/5.jpg">
    <img src="image/6.jpg">
    <img src="image/7.jpg">
    <img src="image/8.jpg">
    <img src="image/9.jpg">
    <img src="image/10.jpg">
</div>
</body>
</html>

css

div{
    width: 960px;
    margin: 200px auto;
    position: relative;
}
img{
    border: 1px solid #ddd;
    padding: 10px;
    position: absolute;
    background: white;
    z-index: 1;
}
img:nth-of-type(even){
    width: 200px;
}
img:nth-of-type(odd){
    width: 300px;
}
img:nth-child(1){
    top: 0;
    left: 300px;
    transform: rotate(-15deg);
}
img:nth-child(2){
    top: -50px;
    left: 600px;
    transform: rotate(-20deg);
}
img:nth-child(3){
    bottom: 0;
    right: 0;
    transform: rotate(15deg);
}
img:nth-child(4){
    bottom: 0;
    right: 340px;
    transform: rotate(-20deg);
}
img:nth-child(5){
    top: -230px;
    left: 10px;
    transform: rotate(-30deg);
}
img:nth-child(6){
     top: 20px;
     left: 10px;
     transform: rotate(20deg);
}
img:nth-child(7){
    top: 5px;
    right: -65px;
    transform: rotate(20deg);
}
img:nth-child(8){
    top: -160px;
    left: 235px;
    transform: rotate(25deg);
}
img:nth-child(9){
    top: 95px;
    right: 85px;
    transform: rotate(15deg);
}
img:nth-child(10){
    top: 50px;
    left: 190px;
    transform: rotate(-10deg);
}
img:hover{
     z-index: 2;
     box-shadow: 5px 5px 5px #ddd;
     transform: rotate(0deg) scale(1.5);
 }

上機 2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>旋轉按鈕</title>
    <style type="text/css">
        h2{
            padding-left: 15px;
        }
        li {
            float: left;
            margin: 0 10px;
            list-style: none;
        }
        li:hover {
            transform: rotate(360deg) scale(1.5);
        }
    </style>
</head>
<body>
<h2>順時針旋轉360度放大1.2倍</h2>
<ul>
    <li><a href="#"><img src="image/rss.png" /></a></li>
    <li><a href="#"><img src="image/delicious.png" /></a></li>
    <li><a href="#"><img src="image/facebook.png" /></a></li>
    <li><a href="#"><img src="image/twitter.png"/></a></li>
    <li><a href="#"><img src="image/yahoo.png" /></a></li>
</ul>
</body>
</html>

css

無

上機 3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>照片牆</title>
    <link href="css/上機練習3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
    <img src="image/1.jpg">
    <img src="image/2.jpg">
    <img src="image/3.jpg">
    <img src="image/4.jpg">
    <img src="image/5.jpg">
    <img src="image/6.jpg">
    <img src="image/7.jpg">
    <img src="image/8.jpg">
    <img src="image/9.jpg">
    <img src="image/10.jpg">
</div>
</body>
</html>

css

div{
    width: 960px;
    margin: 200px auto;
    position: relative;
}
img{
    border: 1px solid #ddd;
    padding: 10px;
    position: absolute;
    background: white;
    z-index: 1;
}
img:nth-of-type(even){
    width: 200px;
}
img:nth-of-type(odd){
    width: 300px;
}
img:nth-child(1){
    top: 0;
    left: 300px;
    transform: rotate(-15deg);
}
img:nth-child(2){
    top: -50px;
    left: 600px;
    transform: rotate(-20deg);
}
img:nth-child(3){
    bottom: 0;
    right: 0;
    transform: rotate(15deg);
}
img:nth-child(4){
    bottom: 0;
    right: 340px;
    transform: rotate(-20deg);
}
img:nth-child(5){
    top: -230px;
    left: 10px;
    transform: rotate(-30deg);
}
img:nth-child(6){
     top: 20px;
     left: 10px;
     transform: rotate(20deg);
}
img:nth-child(7){
    top: 5px;
    right: -65px;
    transform: rotate(20deg);
}
img:nth-child(8){
    top: -160px;
    left: 235px;
    transform: rotate(25deg);
}
img:nth-child(9){
    top: 95px;
    right: 85px;
    transform: rotate(15deg);
}
img:nth-child(10){
    top: 50px;
    left: 190px;
    transform: rotate(-10deg);
}
img:hover{
     z-index: 2;
     box-shadow: 5px 5px 5px #ddd;
     transform: rotate(0deg) scale(1.5);
     transition: transform 0.6s ease-in-out;
 }

上機 4

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ彩貝熱銷時裝</title>
    <link href="css/上機練習4.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="first">
    <p><span>超級信用卡</span><br/>線上線下課累計彩貝積分</p>
    <img src="image/1.bmp"/>
</div>
<div id="second">
    <p><span>彩貝搶霸</span><br/>每天10點更新</p>
    <img src="image/2.bmp"/>
</div>
<div id="third">
    <p><span> 熱門優惠劵</span><br/>全場免費領取</p>
    <img src="image/3.bmp"/>
</div>
<div id="fourth">
    <p><span>促銷活動</span><br/>匯集全網優惠</p>
    <img src="image/4.bmp"/>
</div>
<div id="fifth">
    <p><span>精挑細選</span><br/>給你最好的選擇</p>
    <img src="image/5.bmp"/>
</div>
</body>
</html>

css

p{
    font-size: 12px;
    line-height: 36px;
    margin-left: 20px;
}
span{
    font-weight: bold;
    color: gray;
    font-size: 14px;
}
img:hover{
    transform: translate(-12px,0);
    transition: all 1s ease-out;
}
#first{
    border: 1px solid gainsboro;
    position: absolute;
    left: 50px;
    top: 20px;
    width: 226px;
    height: 286px;
}
#second{
    border-top: 1px solid gainsboro;
    border-bottom: 1px solid gainsboro;
    position: absolute;
    left: 276px;
    top: 20px;
    width: 230px;
    height: 143px;
}
#third{
    border: 1px solid gainsboro;
    position: absolute;
    left: 506px;
    top: 20px;
    width: 230px;
    height: 143px;
}
#fourth{
    border-bottom: 1px solid gainsboro;
    position: absolute;
    left: 276px;
    top: 164px;
    width: 230px;
    height: 143px;
}
#fifth{
    border: 1px solid gainsboro;
    position: absolute;
    left: 506px;
    top: 164px;
    width: 230px;
    height: 143px;
}
#first img{
     position: absolute;
     bottom: 38px;
     right: 20px;
}
#second img{
    position: absolute;
    bottom: 15px;
    right: 0;
}
#third img{
    position: absolute;
    bottom: 20px;
    right: 5px;
}
#fourth img{
      position: absolute;
      bottom: 5px;
      right: 10px;
}
#fifth img{
     position: absolute;
     bottom: 5px;
     right: 0;
}

上機 5

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ彩貝導航</title>
    <link href="css/上機練習5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
    <img src="image/logo_170x46.png"/>
    <ul>
        <li>返回商城</li>
        <li>商旅頻道</li>
        <li>積分商城</li>
        <li>商旅頻道</li>
        <li>了解彩貝</li>
        <li>彩貝活動</li>
        <li>個人中心</li>
    </ul>
    <img src="image/iconsB_11.gif"/>
    <img src="image/iconsB_12.gif"/>
    <img src="image/iconsB_13.png"/>
    <nav id="first"></nav>
    <nav id="second"></nav>
</div>
</body>
</html>

css

*{
    margin: 0;
}
div{
    position: relative;
    height: 90px;
    background: linear-gradient(to bottom,white, rgb(240, 240, 240)) ;
}
img:nth-of-type(1){
    position: absolute;
    top: 33%;
    left: 110px;
}
img:nth-of-type(2){
    position: absolute;
    top: 43%;
    left: 1010px;
}
img:nth-of-type(2):hover{
    transform: rotate(360deg);
    transition: transform 0.3s linear;
}
img:nth-of-type(3){
    position: absolute;
    top: 43%;
    left: 1050px;
}
img:nth-of-type(3):hover{
    transform: rotate(360deg);
    transition: transform 0.3s linear;
}
img:nth-of-type(4){
    position: absolute;
    top: 43%;
    left: 1090px;
}
img:nth-of-type(4):hover{
    transform: rotate(360deg);
    transition: transform 0.3s linear;
}
#first{
    background: url("../image/header_03.png") 0 0 no-repeat;
    width: 66px;
    height: 23px;
    position: absolute;
    top: 25%;
    left: 335px;
}
#first:hover{
    animation:flash 0.3s linear both ;
    background: url("../image/header_05.png") 0 0 no-repeat;
}
#second{
     background: url("../image/header_07.png") 0 0 no-repeat;
     width: 66px;
     height: 23px;
     position: absolute;
     top: 25%;
     left: 525px;
}
#second:hover{
    animation:flash 0.3s linear both ;
    background: url("../image/header_09.png") 0 0 no-repeat;
}
ul{
    position: absolute;
    left: 320px;
    top: 45px;
    padding: 0;
}
li{
    list-style: none;
    float: left;
    border-right: 1px solid;
    padding: 0 15px;
    line-height: 18px;
}
li:nth-of-type(7){
    border-right: none;
}
@keyframes flash {
    0%{width:0;}
    33%{width:23px;}
    66%{width:46px;}
    100%{width:69px;}
}

課后3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ彩貝高級搜索</title>
    <link href="css/本章作業3.css" rel="stylesheet" type="text/css">
</head>
<body>
<form method="post">
    <h3>高級搜索</h3>
    <div></div>
    <p><input type="search" placeholder="   請輸入關鍵字"/></p>
    <p><input type="submit" value="搜索"/><p>
    <div>
        <select>
            <option>場合</option>
        </select>
        <select>
            <option>性別</option>
        </select>
        <select>
            <option>風格</option>
        </select>
        <select>
            <option>色系</option>
        </select>
        <select>
            <option>價格</option>
        </select>
        <select>
            <option>年齡</option>
        </select>
        <select>
            <option>季節</option>
        </select>
    </div>
</form>
</body>
</html>

css

*{
    margin: 0;
}
form{
    margin: 200px auto;
    padding: 0 10px;
    border: 1px gainsboro solid;
    width: 162px;
    text-align: center;
}
h3{
    text-align: left;
    margin:8px 0;
}
div:nth-of-type(1){
    background-color: red;
    height: 5px;
    margin-bottom: 20px;
}
p{
    margin-bottom: 10px;
}
p:nth-of-type(1) input{
    height: 35px;
    width: 162px;
}

p:nth-of-type(2) input{
    height: 30px;
    width: 70px;
}
div:nth-of-type(2){
    opacity: 0;
    height: 0;
    margin-bottom: 16px;
    text-align: left;
    padding-left: 6px;
}
div:nth-of-type(2):hover{
    animation: flash 2s linear forwards;
}
select{
    width: 60px;
    margin: 4px 4px;
    color: #85857e;
    border: 1px solid #dbdbcf;
    height: 22px;
    font-size: 13px;
}
@keyframes flash {
    100% {
        opacity: 1;
        height: 100%;
    }
}

課后4

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百度糯米購物信息導航</title>
    <link href="css/本章作業4.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
    <ul id="pic">
        <li><img src="image/toolbar_05.png"/></li>
        <li><img src="image/toolbar_10.png"/></li>
        <li><img src="image/toolbar_15.png"/></li>
        <li><img src="image/toolbar_19.png"/></li>
    </ul>
    <ul id="txt">
        <li>購物車</li>
        <li>我的關注</li>
        <li>我的足跡</li>
        <li>我的消息</li>
    </ul>
</div>
</body>
</html>

css

body {
    width: 1220px;
    height: 2405px;
    background: url("../image/img.bmp") no-repeat center;
    background-size: 130%;
}
#pic {
    position: fixed;
    right: 0;
    bottom: 30%;
    list-style: none;
}
#pic li {
    background: #5f5f5f;
    margin: 5px 0;
    padding: 9px 7px 5px;
    border-radius: 5px 0 0 5px;
}
#txt {
    position: fixed;
    right: 0;
    bottom: 30%;
    list-style: none;
}
#txt li {
    margin: 4px 0;
    padding: 7px 18px 7px 0;
    border-radius: 5px 0 0 5px;
    width: 90px;
    font-size: 13px;
    line-height: 21px;
    text-align: center;
    color: white;
    opacity: 0;
    border: solid 1px;
}
#txt li:hover {
    animation: flash 1s ease-in forwards;
}
@keyframes flash {
    0% {
        background: #5f5f5f;
        transform: translateX(80px);
        transition: transform;
    }
    100% {
        opacity: 0.8;
        background: #d80000;
    }
}

課后5

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>城市場景動畫</title>
    <link href="css/本章作業5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="father">
    <img src="image/balloon.png"/>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

css

* {
    margin: 0;
}
@keyframes sky {
    0% {
        background: #0e0e42
    }
    33% {
        background: #78706d
    }
    50% {
        background: #fad6bf
    }
    66% {
        background: #b6ffde
    }
    100% {
        background: #0e0e42
    }
}
@keyframes balloon {
    0% {
        transform: rotate(10deg);
        transition: transform;
    }
    25% {
        transform: translateX(-400px) rotate(30deg);
        transition: transform;
    }
    50% {
        transform: translateX(-720px) rotate(60deg);
        transition: transform;
    }
    75% {
        transform: translateX(-1000px) rotate(40deg);
        transition: transform;
    }
    100% {
        transform: translateX(-1400px);
        transition: transform;
    }
}
#father {
    position: relative;
    height: 600px;
    width: 1300px;
    animation: sky 30s linear infinite;
}
img{
    position: absolute;
    right: -70px;
    top: 30px;
    animation: balloon 30s linear infinite alternate;
}
#father div:nth-of-type(1) {
    background: url(../image/beans.png);
    width: 88px;
    height: 201px;
    position: absolute;
    left: 655px;
    bottom: 180px;
}
#father div:nth-of-type(2) {
    background: url(../image/skyline.png);
    width: 1300px;
    height: 147px;
    position: absolute;
    bottom: 156px;
}
#father div:nth-of-type(3) {
    background: url(../image/groundBack.png) 65px;
    width: 1300px;
    height: 281px;
    position: absolute;
    bottom: 0;
}
#father div:nth-of-type(4) {
    background: url(../image/Glockenspiel.png);
    width: 137px;
    height: 263px;
    position: absolute;
    left: 518px;
    bottom: 155px;
}
#father div:nth-of-type(5) {
    background: url("../image/Planetarium.png");
    width: 347px;
    height: 285px;
    position: absolute;
    left: 832px;
    bottom: 108px;
}
#father div:nth-of-type(6) {
    background: url("../image/dowEventCenter.png");
    width: 520px;
    height: 229px;
    position: absolute;
    left: 67px;
    bottom: 125px;
}
#father div:nth-of-type(7) {
    background: url("../image/groundMid.png");
    width: 1300px;
    height: 299px;
    position: absolute;
    bottom: 0;
}
#father div:nth-of-type(8) {
    background: url("../image/friendshipShell.png");
    position: absolute;
    width: 231px;
    height: 370px;
    left: 262px;
    bottom: 108px;
}
#father div:nth-of-type(9) {
    background: url("../image/groundFront.png") 255px;
    width: 1300px;
    height: 301px;
    position: absolute;
    bottom: 0;
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html （第四本書第四章參考） html （第四本書第七章浮動參考） html （第四本書第八章參考） html （第四本書第五章參考）第九章 Service html （第四本書第六章盒子模型參考）第九章：Javascript類和模塊 9 第九章安全認證《C與指針》第九章練習高數A（下）第九章