首页分享前端，利用HTML和CSS制作的鲜花市场首页

前端，利用HTML和CSS制作的鲜花市场首页

来源：花匠小妙招时间：2024-12-05 20:54

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个网站</title>  <link rel="stylesheet" href="CSS/base.css"> <link rel="stylesheet" href="CSS/index.css"> </head> <body>  <div class="top"> <div class="top_in"> <div class="top_left"> <h1> <a href="#" title="鲜花"></a> </h1> </div> <div class="top_right"> <ul class="top_nav"> <li><a href="#">首页</a></li> <li><a href="#">商城</a></li> <li><a href="#">产品</a></li> <li><a href="#">应用</a></li> <li><a href="#">服务</a></li> <li><a href="#">体验店</a></li> </ul> <ul class="top_login"> <li><a href="#">登录</a></li> <li><a href="#">注册</a></li> <li></li> </ul> </div> </div> </div>  <div class="banner"> <div class="nav_out"> <div class="nav"> <ul> <li><a href="#"> <img src="images/xh1.png"> <p>珍珠雪山 <span style="color: #ffcaf3">玫瑰</span> </p> </a></li> <li><a href="#"> <img src="images/xh2.jpg"> <p>白色 <span style="color: #ffcaf3">洋桔梗</span> </p> </a></li> <li><a href="#"><img src="images/xh3.jpg"> <p>爱莎 <span style="color: #ffcaf3">玫瑰</span> </p> </a></li> <li><a href="#"><img src="images/xh4.jpg"> <p>粉色 <span style="color: #ffcaf3">洋桔梗</span> </p> </a></li> <li><a href="#"><img src="images/xh5.jpg"> <p>粉佳人 <span style="color: #ffcaf3">玫瑰</span> </p> </a></li> <li><a href="#"><img src="images/xh6.jpg"> <p>粉佳人 <span style="color: #ffcaf3">捧花</span> </p> </a></li> <li><a href="#"><img src="images/xh7.jpg"> <p>粉红雪山 <span style="color: #ffcaf3">玫瑰</span> </p> </a></li> </ul> </div> </div> <div class="figure"> <img src="images/huahua4.jpg"> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> </div> <div class="video"> <ul> <li><img src="images/h1.jpg"> <div class="video_info"> <img src="images/bfj.png"> <h3>樱花</h3> <p>视频</p> </div> </li> <li><img src="images/h3.jpg"> <div class="video_info"> <img src="images/bfj.png"> <h3>粉色</h3> <p>视频</p> </div> </li> <li><img src="images/h2.jpg"> <div class="video_info"> <img src="images/bfj.png"> <h3>玫瑰</h3> <p>视频</p> </div> </li> </ul> </div> </div>  <div class="content"> <dl> <dt> <h3>最新产品</h3> <p>查看全部花朵 ></p> </dt> <dd> <ul class="goods"> <li> <img src="images/huada.jpg"> <div class="des"> <h4>粉佳人</h4> <p>粉色</p> <span>一探芳容</span> </div> </li> <li> <img src="images/R-C.jpg" class="fd"> <div class="des"> <h4>粉佳人</h4> <p>粉色</p> <span>一探芳容</span> </div> </li> <li> <img src="images/sucai3.jpg"> <div class="des"> <h4>粉佳人</h4> <p>粉色</p> <span>一探芳容</span> </div> </li> <li> <img src="images/huayouxia1.jpg" class="fd"> <div class="des"> <h4>粉佳人</h4> <p>粉色</p> <span>一探芳容</span> </div> </li> <li> <img src="images/huayouxia2.jpg" class="fd"> <div class="des"> <h4>粉佳人</h4> <p>粉色</p> <span>一探芳容</span> </div> </li> </ul> </dd> <dt> <h3>精选套餐</h3> <p>查看全部套餐 ></p> </dt> <dd> <ul class="meal"> <li> <img src="images/taocan.jpg"> <p>第一套餐</p> </li> <li> <img src="images/taocan2.png"> <p>第二套餐</p> </li> <li> <img src="images/taocan5.png"> <p>第三套餐</p> </li> <li> <img src="images/taocan4.png"> <p>第四套餐</p> </li> </ul> </dd> </dl> </div>  <div class="footer"> <ul> <li><a href="#"></a><p>绝对正品</p></li> <li><a href="#"></a><p>满50免运费</p></li> <li><a href="#"></a><p>线下体验</p></li> </ul> <div class="footer_xia"> <p>2012-2022 四川省哈哈市信息技术有限公司版权所有 | <span>经营资质</span></p> <p><span>川ICP备18069660号</span> | ICP经营许可证编号：川B2-20201516 | <span>川公网安备 44030502000309号</span></p> </div> </div> </body> </html>

网址: 前端，利用HTML和CSS制作的鲜花市场首页 https://www.huajiangbk.com/newsview899292.html

所属分类：花卉