作业

最新推荐文章于 2022-10-03 13:38:05 发布

MXWzjw

最新推荐文章于 2022-10-03 13:38:05 发布

阅读量230

点赞数

分类专栏：前端文章标签：作业

本文链接：https://blog.csdn.net/MXWzjw/article/details/78516701

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CODING COFFEE</title>
        <meta name="Generator" content="EditPlus">
        <meta name="Author" content=''>
        <style type="text/css">
            h1{ /*margin:0 auto;
            width:50%;
            border:2px dashed red;*/
            text-align:center;
            }
            .wrapper{
                width:1080px;
                /*border:2px solid red;*/
                margin:0 auto;


            }
            .arr{
                float:left
            }
            .brr{width:50%;
            float:right
            }


            body{
                background-color:red;
                background-image:url('./coffee/img/co.jpg' );
                background-repeat:no-repeat;
                background-attachment:fixed;
                background-position:left center;
                background-size:cover;
                /*background:rgba(255,0,0,0.5) url('./coffee/img/co.jpg') no-repeat fixed left top ;
                background-size:cover*/
            }
            hr{ width:60%;

                border:2px dashed grey;
                isibility:hidden;
            }
            p{  line-height: 20px;
                color:black;
                text-align:left;
            }
            span {
                border:2px solid red;
                //padding-bottom:100px;
                //margin-bottom:100px;
                display:inline-block;
                display:none;
                isibility:hidden;
            }
                p{
                    display:inline-block;
                line-height:50px;



            }

        </style>
    </head>
    <body>

        <div>
            <h1>CODING COFFEE MENU</h1>
            <hr>

        </div>
        <!--<div class="wrapper">
                <div class="arr">
                    <img id="ppp"src="./coffee/img/c2.jpg" height="300">
                </div>
                <div class="brr">   
                    <h2>蓝山咖啡</h2>
                    <p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p>
                </div>
                <div style="clear:both;"></div>
            </div>-->
            <script type="text/javascript">

            var app=[{'product':'蓝山咖啡','img':'"./coffee/img/c2.jpg" height="300"','descreption':'源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。'},
                    {'product':'拿铁咖啡','img':'"./coffee/img/c2.jpg" height="300"','descreption':'源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。'},
                    {'product':'卡布奇诺','img':'"./coffee/img/c2.jpg" height="300"','descreption':'源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。'},
            ]
            for(i=0;i<app.length;i++){
                document.write('<div class="wrapper"><div class="arr"><img id="ppp" src='+app[i]['img']+'></div>');
                document.write('<div class="brr"><h2>'+app[i].product+'</h2>');
                document.write('<p>'+app[i]['descreption']+'</p></div><div style="clear:both;"></div></div><hr>');
            }
</script>

    </body>
</html>