HTML+CSS网页编辑一

.id{
width: 55%;

}
.nav{
width: 900px;
height: 200px;
border: 1px solid red;
background-image: url(ps/效果图_01.png);
background-size: 900px 200px;

}
.sp{
background-color: rgb(235, 226, 226);
text-align: center;
height: 200px;

}
#t1{
display: inline-block;
line-height: 50px;
width: 250px;
}
#t2{
display: inline-block;
line-height: 50px;
width: 250px;
}
#t3{
display: inline-block;
line-height: 50px;
width: 250px;
}
#t4{
display: inline-block;
line-height: 50px;
width: 250px;
}
#b1{
display: inline-block;
line-height: 50px;
width: 300px;
}
#b2{
display: inline-block;
line-height: 50px;
width: 300px;
}
#b3{
display: inline-block;
line-height: 50px;
width: 300px;
}
.gn{
text-align: center;
}
#d1{
display: inline-block;
line-height: 30px;
width: 250px;
}

#d2{
display: inline-block;
line-height: 30px;
width: 250px;
}
#d3{
display: inline-block;
line-height: 30px;
width: 250px;
}
#d4{
display: inline-block;
line-height: 30px;
width: 250px;
}
#d5{
display: inline-block;
line-height: 30px;
width: 250px;
}
#d6{
display: inline-block;
line-height: 30px;
width: 250px;

}
#d7{
    display: inline-block;
line-height: 30px;
width: 250px;;
}

#d8{
    display: inline-block;
line-height: 30px;
width: 250px;
}

.foot{
background-color: rgb(53, 52, 52);
color: blanchedalmond;
line-height: 40px;
list-style: none;
text-align: center;
}
.p{
text-align: center;
font-size: 30px;
color: blanchedalmond;

}

</style>

<div id=nav>
    <div id=nav-top>
        <ul>
            <li>首页</li>
            <li>主题</li>
            <li>下载</li>
            <li>产品</li>
            <li>论坛</li>
        </ul>
    </div>
</div>
<div align="center">
    <img src="ps/效果图_04.gif" alt="">
</div>
<hr >
<div class="sp">
    <br>
    <div id="t1">
        <p><img src="ps/效果图_08.gif" alt=""></p>
        <p>MIUI介绍视频</p>
    </div>
    <div id="t2">
        <p><img src="ps/效果图_10.gif" alt=""></p>
        <p>MIUIV5视频</p>

    </div>
    <div id=t3>
        <p> <img src="ps/效果图_12.gif" alt=""></p>
                <p>MIUI自由桌面</p>
    </div>
    <div id=t4>
        <p><img src="ps/效果图_14.gif" alt=""></p>
                <p> MIUI发展历程</p>
    </div>
 
</div>
<br>
 <br>
<div class="gn">
    <div id="d1">
        <p><img src="ps/效果图_21.gif" alt=""></p>
        <p><b>电话、短信</b> </p>
         <p>根据中国用户使用习惯特别优化</p>
         <p>更可发送免费网络短信</p>
    </div>
    <div id="d2">
        <p><img src="ps/效果图_23.gif" alt=""></p>
        <p><b>更安全</b></p>
         <p>系统级全面保护手机和数据安全</p>
         <p>更可拦截广告电话、短信</p>
    </div>
    <div id="d3">
        <p><img src="ps/效果图_25.gif" alt=""></p>
        <p><b>丰富的在线资源<</b></p>
         <p>取之不尽的视屏、音乐、游戏</p>
         <p>更有超过60万安卓应用...无比强大</p>
    </div>
    <div id="d4">
        <p><img src="ps/效果图_27.gif" alt=""></p>
        <p><b>与众不同</b></p>
         <p>独创百变主题与自由桌面</p>
         <p>从里到外，让你的手机个性十足</p>
    </div>
    <br>
    <br><br>
<div>
    <div id="d5">
        <p><img src="ps/效果图_33.gif" alt=""></p>
        <p><b>云服务</b></p>
         <p>同步通讯录、短信、相册</p>
         <p>为你保管好一切</p>
    </div>
    <div id="d6">
        <p><img src="ps/效果图_34.gif" alt=""></p>
        <p><b>极速桌面体验</b></p>
         <p>驱动级系统优化</p>
         <p>提供丝滑般体验</p>
    </div>
    <div
    id="d7">
        <p><img src="ps/效果图_35.gif" alt=""></p>
        <p><b>200余项功能该进</b></p>
         <p>精心打造相机，闹钟等必备工具</p>
         <p>更有贴心的大字、语音助手</p>
    </div>
    <div id="d8">
        <p><img src="ps/效果图_36.gif" alt=""></p>
        <p><b>“活”的操作系统</b></p>
         <p>根据论坛反馈不断进化</p>
         <p>每周五更新，风雨无阻</p>
    </div>
</div>
<br><br>
    <img src="ps/效果图_42.png" alt="">
    <br><br>
</div>
<div class="foot">
 <br>
 <ul id="b1">
     <li><b>活动公告</b></li>
     <li>四格报告</li>
     <li>内测申请</li>
 </ul>
 <ul id="b2">
     <li><b>更新日志</b></li>
     <li>3.6.14(开发版)</li>
     <li>3.2.22(推荐版)</li>
 </ul>
 <ul id="b3">
     <li ><span><b>关注MIUI</b></span> </li>
     <li>新浪微博</li>
     <li>腾讯微博</li>
 </ul>
    
    <br><br>
    <p align="center">
     MIUI官方网站-发烧友必刷的Android&nbsp;ROM-北京小米科技&copy;2013京ICP备10046444号
</p>
<br>
<p class="p">
      MIUI,为发烧而生
</p>
<br>
    
 </div>
</div>