web实习2

最新推荐文章于 2024-05-31 22:41:13 发布

一根想学会敲代码的薯条

最新推荐文章于 2024-05-31 22:41:13 发布

阅读量184

点赞数 2

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/m0_63577901/article/details/134302606

版权

1.2课本第147页“实验9”【内容见压缩包中“课本147页-实验9.pdf”文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #wrap{
            width: 900px;
            margin:0 auto;
            border:2px solid red;
            margin-top: 5px;
        }
        #div{
            text-align: center;
        }
        #pic{
            width: 420px;
            height: 300px;
            position: relative;
            margin: center;
            float: left;
            background-color: #77A;
            background-image:url(./实验2-0/ex9.jpg);
        }
        #text{
            background-image:url(./实验2-0/ex9.jpg);
            float: right;
            width: 420px;
            height: 500px;
            background-color: #77A;
            font-size: 10px;
            font-weight: bold;
        }
        #title{
            font-family:"华文彩云";
            font-size: 32px;
        }
        #author{
            font-size: 12px;
            font-weight: 12px;
            font-family: "黑体";
            text-align: right;
            margin-bottom: 24px;
        }
        p{
            font-family: "隶书";
            font-size: 12px;
            letter-spacing: 0.5em;
            line-height: 1.5em;
            text-align: center;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <div id="pic"> </div>
        <div id="text">
            <div id="title">木兰花令.拟古诀别词</div>
            <div id="author">纳兰性德</div>
            <div id="content">
            <p>人生若只如初见，</p>
            <p>何事秋风悲画扇。</p>
            <p> 等闲变却故人心，</p>
            <p>却道故心人易变。</p>
            <p>骊山语罢清宵半，</p>
            <p>泪雨霖铃终不怨。</p>
            <p>何如薄幸锦衣郎，</p>
            <p>比翼连枝当日愿。</p>
        </div>
        </div>
       
    </div>
</body>
</html>

1.2.2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
    h1{
        text-align: center;
        color:white;
        background-color: #678;
    }
   img{
    float: left;
    border: 1px dashed gray;
    margin: 10px 10px 10px 0;

   }
   p:first-letter{
    font-size: 3em;
    float: left;
   }
   </style>
    <title>Document</title>
</head>
<body>
    <h1>Head Line</h1>
    
    <img src="./实验2-0/cup.jpg" alt="">
    <p>Mobile Widget使用标准的Web技术，如HTMl,CSS,javascript等。
        这些经典的Web技术规范是由W3C（万维网联盟）的下属各个工作组
        制定并推进的，作为开发Widget之前的知识准备。在本章中我们将
        逐一介绍这些技术。
    </p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #box{
            background-color: #00005d;
            border: #00005d 10px;
            font-family: "Arial";
            display:block;
        }
        
        #divtop{
            margin: 0;
           padding: 0;
            height: 150px;
            background-color: #869dc7;
            vertical-align: middle;
        }
        h1{
            font-size: 40px;
            line-height: 150px;
            font-family:"Arial Black";
            color: #00005d;
            text-align:left;
           
        }
        #img1{
            float: left;
        }
        #mid{
            margin: 0;
           padding: 0;
            background-color: white; 
            height: 500px;
            font-family: "Arial";
        }
        #divmidleft{
            width: 254px;
            background-color: #b3c7e6;
            float: left;
            height: 500px;
            text-align: center;
            font-size: large;
           
        }
        #p1{
            color: gray;
        }
        #p2{
            color: white;
            font-family: "Arial";
            font: 100;
        }
        #p3{
            color: white;
            font-family: "Arial";
            font: 100;
        }
        #p4{
            color: white;
            font-family: "Arial";
            font: 100;
        }
        #divmidright{
            border-left: 10px solid black;
            border: 10px solid white;
            
        }
       #midp1{
        color: #869dc7;
       }
       #midp3{
        color: #869dc7;
       }
       #midp5{
        color: #869dc7;
       }
       #midp7{
        color: #869dc7;
       }
      #img2{
        float: right;
        line-height: 400px;
        top: 50%;
      }
      #bottom{
        margin: 0;
        padding: 0;
        background-color: #869dc7;
        text-align: center;
        color: #00005d;
        height: 50px;
        font-size: 0;
        letter-spacing: 0;
        vertical-align: middle;
        border: #869dc7 10px solid;
      }
      #bottomp{
        font-size: 15px;
        align:center;
        line-height: 30px;
        letter-spacing: 0;
      }
    </style>
    <title>Document</title>
</head>
<body id="box">
    <div id="divtop">
        <img id="img1" src="./实验2-1/2-1/images/lighthouselogo.jpg" alt="">
        <h1>Lighthouse Island Bistro</h1>
    </div>
    <div id="mid">
        <div id="divmidleft">
        <p id="p1">Home</p>
        <p id="p2">Menu</p> 
        <p id="p3">Directions</p> 
        <p id="p4">Contact</p>
        </div>
        <div id="divmidright">
            <img id="img2" src="./实验2-1/2-1/images/lighthouseisland.jpg" alt="">
            <h2 id="midp1">  Locally Roasted Free-Trade Coffee</h2>
            <p id="midp2">  Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
            <h2 id="midp3">  Specialty Pastries</h2>
            <p id="midp4">  Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones, croissants, and cinammon rolls.</p>
            <h2 id="midp5">     Lunchtime is Anytime</h2>
            <p id="midp6">  Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables.</p>
            <h2 id="midp7">  Panoramic View</h2>
            <p id="midp8">   Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.
            </p>
        </div>
    </div>
    <div id="bottom">
        <p id="bottomp">Copyright © 2021</p> 
    </div>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
    *{
        padding: 0;
        margin: 0;
    }
    
    #haibao{
        margin-left: 100px;
        background-color: white;
        height: 960px;
        width: 691px;
        border: 3px solid black;
        display: block;
        overflow: hidden;

    }
    #head{
     width: 100%;
        height:110px;
    }
    #imag1{
        margin-top: 60px;
        margin-right: 40px;
       width: 100px;
        float: right;
    }
    #main{
        width: 100%;
        height: 700px;
        text-align: center;
    }
    #image2{
       
        float:center;
        width: 540px;
        clip-path: circle(40%);
      
    }
    #div1{
       text-align: center; 
       color: gray;
       font-size: 20px;
       padding: 0;
       margin: 0;
    }
    #div2{
        vertical-align: middle;
        padding: 0;
        margin: 0;
    }
    #sp1{
        vertical-align: middle;
        font-family:"等线";
        font-size: 60px;

    }
    #sp2{
        vertical-align: middle;
        font-size: 120px;
        color:darkolivegreen;
    }
    #sp3{
        vertical-align: middle;
        font-size: 140px;
        color:darkolivegreen;
    }
    #mid2{
        line-height: 25px;
    }
    #left{
        text-align: left;
        font-size: 14px;
        margin-left: 60px;
        float: left;
        color: gray;
        font-family: "微软雅黑";
    }
    #img1{
        width: 15px;
    }
    #right{
        font-family: "微软雅黑";
        margin-right: 40px;
        text-align: right;
    }
    #footer{
        width: 100%;
        height: 250px;
    }
    #footright{
        margin-top: 70px;
        
        margin-right: 50px;
        vertical-align: middle;
    }
    #img2{
        /* float: right; */
        width: 80px;
        vertical-align: middle;
    }
    #footleft{ 
      
        transform: translateX(-60px) rotateZ(45deg);
        
        width: 230px;
        height: 50px;
        float: left;
        margin-top: 0px;
        font-family: "黑体";
        background-color: brown;
        text-align: center;
    }
    #word{
        font-size: 30px;
        line-height: 50px;
        color: white;
    }
   </style>
    <title>Document</title>
</head>
<body>
    <div id="haibao">
        <div id="head">
            <img id="imag1" src="./实验2-2/2-2/pearson.png" alt="">
        </div>
        <div id="main">
            <div>
                <img  id="image2" src="./实验2-2/2-2/lotus-1.jpg" alt="">
                <div id="div1">
                   <p>Web Development &Design Foundations with HTML5,7th Edition</p> 
                </div>
                <div id="div2">
                    <p>
                        <h1> 
                            <span id="sp1">学习 </span>
                            <span id="sp2">HTML</span>
                            <span id="sp3">5</span>
                        </h1>
                        
                    </p>
                </div>
                <div id="mid2">
                    <div id="left">
                        <p>
                            <img id="img1" src="./实验2-2/2-2/list-image.png" alt="">
                             网页设计与开发入门经典最新版
                        </p>
                        <p>
                            <img id="img1" src="./实验2-2/2-2/list-image.png" alt="">
                             教育学博士&网页设计专家出品
                        </p>
                        <p>
                            <img id="img1" src="./实验2-2/2-2/list-image.png" alt="">
                             全面覆盖、深入讲解HTML5所有相关主题
                        </p>
                        <p>
                            <img id="img1" src="./实验2-2/2-2/list-image.png" alt="">
                            知识点、自测题、100+手动练习，267道复习题
                        </p>
                        <p>
                            <img id="img1" src="./实验2-2/2-2/list-image.png" alt="">
                            四大案例：咖啡屋，宠物医院、度假村、房产公司
                        </p>
                        <p>
                            <img id="img1" src="./实验2-2/2-2/list-image.png" alt="">
                             由浅入深，循序渐进，旨在有效锻炼读者的实操能力。
                        </p>
                    </div>
                    <div id="right">
                    <p>
                        Terry Felke-Morris 著
                    </p>
                    <p>
                        潘玉琪 译
                    </p>
                    </div>
                </div>
            </div>
        </div>

        <div id="footer">
            <div id="footright">
                <div style="float: right;">
                <img id="img2" src="./实验2-2/2-2/tsinghua.png" alt="">
                出版社
            </div>
            </div>
            <div id="footleft">
                <p id="word">(第七版)</p>
            </div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .parent{
        display: flex;
        flex-direction: row;
        height: 423px;
        width: 750px;
        overflow: hidden;
        border: 1px solid black;
      }
      .right{
        height: 423px;
        width: 200px;
        background-color: #6EA933;
      }
      .left{
        display: flex;
        flex-direction: column;
        height: 423px;
        width: 550px;
        padding-top: 10px;
      }
      .top{
        display:flex;
        flex-direction: row;
        width: 570px;
        height: 80px;
        font-size: 0px;
      }
      .one{
        width: 20px;
        height: 100px;
        font-size: 30px;
        color: #6AA52F;
        padding-top:20px;
        text-align: right;
      }
      .another{
        width: 516px;
        height: 100px;
        font-size: 0px;
      }
      .title{
        font-size: 30px;
        padding-top: 10px;
        color: #6AA52F;
        line-height: 0;
      }
      .graytop{
        line-height: 0em;
        color: gray;
        font-size: x-small;
      }
      .bottom{
        padding-top: 20px;
        display: flex;
        flex-direction: row;
        width: 570px;
        height: 340px;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
      .block{
        padding-left: 20px;
        width: 200px;
        height: 130px;
      }
      .blocktop{
        width: 200px;
        height: 38px;
        background-color:#6AA52F;
        color: white;
        text-align:left;
        text-indent: 10%;
        line-height: 38px;
        font-family: '微软雅黑';
        font-size: large;
      }
      .blockbot{
        width: 200px;
        height: 112px;
        color: gray;
        font-size: 13px;
        padding-left: 5px;
        line-height: 20px;
      }
      img{
        height: 550px;
        overflow: hidden;
        transform: translateX(-120px) 
      }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="parent"> 
        <div class="left">
            <div class="top">
                <div class="one">
                    |
                </div>
                <div class="another">
                    <p class="title">乡村旅游业发展的优势</p>
                    <p class="graytop"> 乡村旅游资源类型丰富、旅游体验独特,具备发展特色旅游业的优势条件</p>
                </div>  
            </div>
            <div class="bottom">
                <div class="block">
                    <div class="blocktop">
                        旅游资源丰富：
                    </div>
                    <div class="blockbot">
                        农村旅游资源分布广、旅游资源类型丰富，<strong style="color: black;">自然景现、人文历史、宗教文化、民族风情、农村农业、特色饮食</strong>等应有尽有。
                    </div>
                </div>
                <div class="block">
                    <div class="blocktop">
                        接近本地游客：
                    </div>
                    <div class="blockbot">
                        由于疫情的爆发,长途旅行的困难与风险越来越高,本地周末休闲度假游快速爆发,农村发展旅游业承接本地及 <strong style="color: black;">周边周末度假需求。</strong>
                    </div>
                </div>
                <div class="block">
                    <div class="blocktop">
                       旅游承载能力强：
                    </div>
                    <div class="blockbot">
                        旅游消费方式也在发生着巨大的变化,从之前的<strong style="color: black;">景点拍照打卡游</strong>,向<strong style="color: black;">观光休闲度假游</strong>转变,农村自然条件优越、可以满足更多游客不同类型的旅游诉求
                    </div>
                </div>
                <div class="block">
                    <div class="blocktop">
                        提供差异化的体验:
                    </div>
                    <div class="blockbot">
                        城市成人与少儿长时间生活在钢铁水泥建设成的城市,缺少与大自然接触的条件与机会,<strong style="color: black;">深入农村,亲近大自然</strong>,除了放松旅游之外,还可以获得探索世界的快乐。
                    </div>
                </div>
                
            </div>
        </div>
        <div class="right">
            <img src="./实验2-3/2-3/tourist.png" alt="">
        </div>
       
    </div>
</body>
</html>

5.一个动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style >
        .heart{
            width: 400px;
            height:420px ;
            position: relative;
            margin: auto;
            /* border: 1px solid black; */
            animation: heart 1s infinite alternate;
        }
        .left{
            width: 50%;
            height: 80%;
            background-color: plum;
            transform: translate(55px) rotate(-45deg);
            border-radius: 120px 120px 0 0;
            box-shadow: 0 0 20px plum;
        }
        .right{
            position: relative;
            top: -80%;
            width: 50%;
            height: 80%;
            background-color: plum;
            transform: translate(151px) rotate(45deg);
            border-radius: 120px 120px 0 0;
            box-shadow: 0 0 20px 0  plum;
        }
        @keyframes heart {
            from{
                transform: scale(0.5);
        
            }
            to{
                transform: scale(1);
            }
            
        }
        .heart:hover{
            animation-play-state: paused;
        }
        .title{
            color: powderblue;
            margin: auto;
            text-align: center;
        }
        
    </style>
    <title>Document</title>
</head>
<body>
    <div class="title">
        <h1>一颗跳动的香芋紫爱心！</h1>
    </div>
    <div class="heart">
        <div class="left">
        </div>
        <div class="right">
        </div>

    </div>
</body>
</html>