167. Web前端网页案例——【简单的仿花瓣首页精品网页（ 2页）】大学生期末大作业 html5+css3-CSDN博客

♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:

http://angella.blog.csdn.net

提示：以下是本篇文章正文内容，下面案例供参考：

一、网页概述

本实例应用html5+css3，div+css布局，代码简单,带实验报告书。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含2个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.html

<html>
   <head>
       <title>花瓣网首页</title>
       <meta charset="utf-8">
   </head>

   <body>
       <div id="wrap">
           <div id="top">
               <div id="top-1">
                   <div id="top-1-1">
                       <img src="images/logo1.png" id="logo1">
                       <div id="huaban">花瓣</div>
                   </div>
                   <div id="top-1-2">
                       <div class="daohang">发现</div>
                       <div class="daohang">最新</div>
                       <div class="daohang">美思</div>
                       <div id="daohang">
                           <div id="huodong">活动</div>
                       </div>
                       <div class="daohang">教育</div>
                   </div>
                   <div id="top-1-3">
                       <button type="button" id="denglu" type="width: 50px;height: 40px;"><a href="dneglu.html"
                               style="text-decoration: none;color:white;">登录</a></button>
                       <button type="button" id="zhuce"><a href=""
                               style="text-decoration: none;color:white;">注册</a></button>
                   </div>
               </div>
               <div id="top-2">
                   花瓣，陪你做生活的设计师
               </div>
               <div id="top-3">
                   <input type="text" name="search" placeholder="    搜索你喜欢的">
                   <a href="#">
                       <div id="fangdajing"></div>
                   </a>
               </div>
               <div id="top-4">
                   热门搜索：匠人匠心,精神工匠,灵感源泉
               </div>
           </div>
           <div id="mid">
               <div id="mid-1">
                   <hr class="hr1">大家正在关注
                   <hr class="hr2">
               </div>
               <div id="mid-2">
                   <div class="mid-2-img" style="background:url(images/1.png); background-size: cover;">草莓</div>
                   <div class="mid-2-img" style="background:url(images/2.png); background-size: cover;">派对装饰</div>
                   <div class="mid-2-img" style="background:url(images/3.png); background-size: cover;">雪</div>
                   <div class="mid-2-img" style="background:url(images/4.png); background-size: cover;">美食</div>
                   <div class="mid-2-img" style="background:url(images/5.png); background-size: cover;">书架</div>
                   <div class="mid-2-img" style="background:url(images/6.png); background-size: cover;">彩虹色</div>
               </div>
               <div id="mid-3">
                   <hr class="hr1">为您推荐
                   <hr class="hr2">
               </div>
               <div id="mid-4">
                   <div class="mid-4-div" id="mid-4-1">
                       <div id="triangle-1"></div>
                   </div>
                   <div class="mid-4-div" id="mid-4-2">
                       <div id="mid-4-2-1">
                           <p>笑靥如花的你</p>
                           <p><b style="font-size: 25px; color: black;">54</b>观看</p>
                       </div>
                       <hr style="height: 10px; background-color: ivory; border:none;">
                       <div id="mid-4-2-2">
                           <p>当下视觉||中餐摄影</p>
                           <p>
                                          
                                   
                               <b style="font-size: 25px; color: black;">89</b>观看
                           </p>
                       </div>
                   </div>
                   <div class="mid-4-div" id="mid-4-3" style="">
                       <div id="triangle-2"></div>
                   </div>
                   <div class="mid-4-div" id="mid-4-4" style="">
                       <div id="triangle-3"></div>
                   </div>

...

2.CSS

代码如下（节选示例）：

* {
           margin: 0;
           padding: 0;
       }

       #top {
           width: 1328px;
           height: 512px;
           background: url(images/6.jpg);
           margin: 0 auto;
           overflow: hidden;
       }

       #top-1 {
           width: 1328px;
           height: 65px;
           overflow: hidden;
       }

       #top-1-1 {
           width: 130px;
           height: 50px;
           margin-left: 100px;
           color: white;
           font-size: 35px;
           margin-top: 10px;
           float: left;
       }

       #logo1 {
           width: 50px;
           height: 50px;
       }

       #huaban {
           width: 80px;
           height: 50px;
           float: right;
       }

       #top-1-2 {
           width: 700px;
           height: 35px;
           margin-top: 20px;
           float: left;
       }

       .daohang {
           width: 140px;
           height: 35px;
           float: left;
           color: white;
           text-align: center;
           font-size: 21px;
       }

       #daohang {
           width: 140px;
           height: 35px;
           float: left;
           color: white;
       }

       #huodong {
           width: 50px;
           height: 35px;
           margin-left: 30px;
           float: left;
           text-align: center;
           font-size: 21px;
       }

       #new {
           width: 50px;
           height: 18px;
           float: left;
           margin-top: 8px;
           background-color: red;
           line-height: 18px;
           text-align: center;
           font-size: 15px;
       }

       #top-1-3 {
           width: 200px;
           height: 100px;
           float: left;
           margin-left: 100px;
       }

...