明明照着写的，但写出来的效果不知道啥东西，好晕呐-慕课网

明明照着写的，但写出来的效果不知道啥东西，好晕呐

来源：2-2 基本界面编写

蒹葭苍沧

2021-01-12 17:50

<!DOCTYPE html><html lang='zh-cn'>    <head>        <title>海报画廊</title>        <meta charset="utf-8">        <style type="text/css">            *{                margin: 0;                padding: 0;            }            body{                background-color: #fff;                color: #555;                font-family: 'Avenir Next','Lantinghei SC';                font-size: 14px;                -webkit-font-smoothing:antialiased;            }            .wrap{                width: 100%;                height: 600px;                position: absolute;                top: 50%;                margin-top: -300px;                background-color: #333;                overflow: hidden;            }            /*海报样式*/            .photo{                width: 260px;                height: 320px;                position: absolute;                z-index: 1;                box-shadow:  0 0 1px rgba(0,0,0,0.01);            }            .photo .side{                width: 100%;                height: 100%;                background-color: #eee;                position: absolute;                top: 0;                right: 0;                padding: 20px;                box-sizing: border-box;            }            .photo .side-front{               display: none;            }            .photo .side-front image{                width: 100%;                height: 250px;                line-height: 250px;                overflow: hidden;            }            .photo .side-front image img{                width: 100%;            }            .photo .side-front .caption{                text-align: center;                font-size: 16px;                line-height: 50px;            }            .photo .side-back{                            }            .photo .side-back .desc{                color: #666;                font-size: 14px;                line-height: 1.5em;            }            /*当前选中的海报样式*/            .photo_center{                left: 50%;                top:50%;                margin: -160px 0 0 -130px;                z-index: 999;            }        </style>    </head>    <body onselectstart='return false;'>        <div class="wrap">            <div class="phone photo_center">                <div class="side side-front">                    <p class="image"><img src="maidou.jpg"></p>                    <p class="caption">麦兜我和我妈妈</p>                </div>                <div class="side side-back">                    <p class="desc">描述信息</p>                </div>            </div>        </div>    </body></html>

写回答关注