第一个全面屏手机 html css 拿去用别笑

<html><head>
<meta charset="utf-8">
<title>磊创一代模型</title>

<style type="text/css">
body {
background-color: #ccc;
}

#phone {
width: 250px;
height: 500px;
margin: 60px auto;
border: solid 10px #3b3b3b;
border-radius: 50px;
box-shadow: 3px 5px 5px 1px rgba(0, 0, 0, 0.5);
position: relative;
background:url(lock_screen_wallpaper.jpg);
background-size:cover;
}

#phone:before {
content: "";
display: block;
width: 50px;
height: 2px;
background-color: #2e2e2e;
position: absolute;
top: -12px;
left: 150px;
border-radius: 3px 3px 0px 0px;
}

#phone:after {
content: "";
display: block;
width: 2px;
height: 50px;
background-color: #2e2e2e;
position: absolute;
left: -12px;
top: 60px;
border-radius: 3px 0px 0px 3px;
}

#screen {
width: 247px;
height: 497px;
margin: 0px auto 0px;
border: solid 1px #1a1a1a;
background-color: #cccc;
font-size: 23px;
border-radius: 39px;
background:rgba(0, 0, 0, 0.3);
}

#pcontent {
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #FFF;
font-size: 17px;
text-align: center;
}
.pcontent-time{
    bottom: 68%;
    position: relative;
    font-size: 61px;
    font-weight: 100;
}
.pcontent_m_d{
    position: relative;
    bottom: 70%;
    font-size: 15px;
}
.pcontent_lunar_calendar{
    position: relative;
    bottom: 69%;
    font-size: 12px;
}
.pcontent_message{
    position: relative;
    bottom: 68%;
    font-size: 13px;
}    
.phone_model{
    margin-left: 44%;
}
.phone_mean{
    margin-left: 44%;
    margin-top: 5px;
    font-size: 3px;
}        
</style>
</head>
  <body>
    <div id="phone">
        <div id="screen">
            <div id="pcontent">
               <div class="pcontent-time" style="">10:48</div>
               <div class="pcontent_m_d">6月28日 星期五</div>
               <div class="pcontent_lunar_calendar">戊戌年五月十五</div>
               <br>
                <div class="pcontent_message">1、7月后半月台风影响风险大，需特别留意台风相关预报预警信息，提前落实防台措施。近10年同期有6年有台风对我市造成明显风雨影响，其中2009年“莫拉菲”和2012年“韦森特”均造成严重影响。
                2、7月中、下旬有持续性强降雨，地质灾害风险大，请做好危险边坡等的安全管理。近10年同期平均有7-8天局地暴雨以上的强降雨，其中1-2天局地大暴雨，最大日雨量281.3毫米，一半年份有暴雨造成的灾情。
                </div>
            </div>
        </div>
    </div>
    <div class="phone_model">LC A100</div>
    <div class="phone_mean">Life's Change</div>
  </body>
 </html>
第一个全面屏手机 html css 拿去用别笑

猜你喜欢
