页面练习--鲜花店

一个简单的页面

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的鲜花网店</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>
<!--主容器-->
<div id="container">
  <!--banner-->
  <div id="banner">
    <!--banner图片,img转换为块状元素-->
      <img id="banner_img" src="images/banner.jpg"/>

    <!--导航-->
      <ul>
        <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>
        <li><a href="#">支付方式</a></li>
      </ul>
  </div>

  <!--左边的链接-->
  <div id="left">
    <!--用户登录-->
    <div id="userlogin">
      <img src="images/login.jpg" />
      <form>
        <p>
        <span>用户：</span><input  type="text" class="text"/>
        </p>

        <p>
        <span>密码：</span><input  type="text" class="text"/>
        </p>

        <p>
          <input  type="button" class="btn" value="登录"/>
          <input  type="button" class="btn" value="注册"/>
          <a href="#">忘记密码</a>
        </p>
      </form>
    </div>

    <!--鲜花分类-->
    <div id="flower_class">
      <img  src="images/category.jpg"/>
      <h4><span>用途</span></h4>
      <ul>
        <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>
        <li><a href="#">开业花篮</a></li>
        <li><a href="#">会议用花</a></li>
      </ul>

      <h4><span>花材</span></h4>
      <ul>
        <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>
        <li><a href="#">扶朗</a></li>
        <li><a href="#">剑兰</a></li>
      </ul>

      <h4><span>价格</span></h4>
      <ul>
        <li><a href="#">100~200元</a></li>
        <li><a href="#">200~300元</a></li>
        <li><a href="#">300~400元</a></li>
        <li><a href="#">400~500元</a></li>
        <li><a href="#">500~600元</a></li>
        <li><a href="#">600~800元</a></li>
        <li><a href="#">800元以上</a></li>
      </ul>
    </div>
  </div>

  <!--右边的主体-->
  <div id="main">
    <!--本站快讯-->
    <div id="flash_flower">
      <img  src="images/latest.jpg"/>
      <ul>
        <li><a href="#"><img  src="images/new1.jpg"/></a></li>
        <li><a href="#"><img  src="images/new2.jpg"/></a></li>
        <li><a href="#"><img  src="images/new3.jpg"/></a></li>
      </ul>
    </div>

    <!--鲜花推荐-->
    <div id="recommend_flower">
      <img  src="images/recommend.jpg"/>
      <ul>
        <li><a href="#"><img  src="images/flower1.jpg"/><span class="span1">幸福的味道</span></a><span class="span2">￥288元</span></li>
        <li><a href="#"><img  src="images/flower2.jpg"/><span class="span1">阳光守护你</span></a><span class="span2">￥300元</span></li>
        <li><a href="#"><img  src="images/flower3.jpg"/><span class="span1">温情永远</span></a><span class="span2">￥268元</span></li>
        <li><a href="#"><img  src="images/flower4.jpg"/><span class="span1">爱无界</span></a><span class="span2">￥318元</span></li>
        <li><a href="#"><img  src="images/flower5.jpg"/><span class="span1">亲亲宝贝</span></a><span class="span2">￥368元</span></li>
        <li><a href="#"><img src="images/flower6.jpg"/><span class="span1">相信是缘</span></a><span class="span2">￥188元</span></li>
        <li><a href="#"><img src="images/flower7.jpg"/><span class="span1">水晶童话</span></a><span class="span2">￥198元</span></li>
        <li><a href="#"><img src="images/flower8.jpg"/><span class="span1">天使之爱</span></a><span class="span2">￥268元</span></li>
      </ul>
    </div>

    <!--新品上市-->
    <div id="market_flower">
      <img  src="images/new.jpg"/>
      <ul>
        <li><a href="#"><img  src="images/flower9.jpg"/><span>粉色迷情</span></a></li>
        <li><a href="#"><img  src="images/flower10.jpg"/><span>海岸的优雅</span></a></li>
        <li><a href="#"><img  src="images/flower11.jpg"/><span>百年地中海</span></a></li>
        <li><a href="#"><img  src="images/flower12.jpg"/><span>爱要说出口</span></a></li>
      </ul>
    </div>

    <!--鲜花导购-->
    <div id="guide_flower">
      <img  src="images/tips.jpg"/>
      <ul>
        <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>
        <li><a href="#">种花与送花</a></li>
        <li><a href="#">手捧一束鲜花的等待</a></li>
      </ul>
    </div>
  </div>

</div>

</body>
</html>

/*initialise*/
html,body,div,ul,li,img,form,input,p,h4,span,a{ margin:0px; padding:0px;}
img { border:none;}
#container{ width:700px; margin:0px auto; background-color:#FFD8D9; overflow:hidden;}
body { background-color:#FFD8D9;}

/*banner*/
#banner { width:700px; height:155px; overflow:hidden;}
#banner img { display:block; width:698px; height:120px; border:1px solid #FFF;}
#banner ul{ display:block; width:700px; height:33px; float:left; list-style:none;}
#banner li { display:block; width:100px; height:33px;line-height:33px; float:left; background:url(../images/button1.jpg) no-repeat;}
#banner li a { display:block; width:100px; height:33px; line-height:33px; color:#630002; font-size:12px; text-align:center; text-decoration:none;}
#banner li a:hover { color:#FFF; text-decoration:underline; background:url(../images/button1_bg.jpg) no-repeat;}

/*left*/
#left { width:180px; float:left; margin-top:2px; background-color:#FFF; display:inline;}
#left img { display:block; width:180px; height:50px;}
/*userlogin*/
#userlogin form { font-size:12px}
#userlogin form input.text { width:90px; border-top:none; border-left:none; border-right:none; border-bottom:1px solid #000;}
#userlogin p { width:180px; display:block; height:30px; line-height:30px; text-align:center;}
#userlogin form input.btn { background-color:#FFF; border:1px solid #000;}
#userlogin p a { color:#333333; text-decoration:none; font-size:12px;}
#userlogin p a:hover { color:#000088; text-decoration:underline;}
/*flower_class*/
#flower_class{ overflow:hidden;}
#flower_class h4 { display:block; background-color:#FFD1D1; width:144px; height:20px; margin-left:18px; font-size:12px; line-height:20px; margin-top:10px;}
#flower_class h4 span { margin-left:8px;}
#flower_class ul { display:block; width:144px; margin-left:18px; font-size:12px; margin-right:18px; }
#flower_class li { display:block; width:144px; height:18px; line-height:18px; border-bottom:1px dotted #999; margin-top:2px; background:url(../images/icon1.gif) no-repeat 10px 6.5px;}
#flower_class li a { color:#000; text-decoration:none; margin-left:25px;}
#flower_class li a:hover { color:#666666; text-decoration:underline;}

/*main*/
#main { margin-top:2px; width:518px; margin-left:2px;  display:inline; float:left;}
/*flash_flower:本站快讯*/
#flash_flower { overflow:hidden; background-color:#FFF;}
#flash_flower img { display:block; width:518px; height:33px;}
#flash_flower ul { display:block; width:518px; list-style:none; }
#flash_flower li { display:block; width:170px; margin-left:2px; float:left; background-color:#FFD8D9;}
#flash_flower a { display:block; width:170px;}
#flash_flower a img { display:block; width:170px; height:107px; border:none;}
/*recommend_flower:鲜花推荐*/
#recommend_flower { margin-top:5px; overflow:hidden; background-color:#FFF;}
#recommend_flower img { display:block; width:518px; height:33px;}
#recommend_flower ul { display:block; width:518px; list-style:none; }
#recommend_flower li { display:block; width:106px; float:left; margin-left:18.5px;}
#recommend_flower a { display:block; width:106px;}
#recommend_flower li img { display:block; width:106px; height:106px;}
#recommend_flower li a { font-size:12px; line-height:30px; text-align:center; color:#666666; text-decoration:none;}
#recommend_flower li a:hover { color:#D20005; text-decoration:underline;}
#recommend_flower .span2{ line-height:30px; font-size:12px; font-family:Arial, Helvetica, sans-serif; text-align:center; display:block; width:106px; height:30px;}
/*market_flower: 新品上市*/
#market_flower { margin-top:5px; overflow:hidden; background-color:#FFF;}
#market_flower img { display:block; width:518px; height:33px;}
#market_flower ul { display:block; width:518px; list-style:none; }
#market_flower li { display:block; width:106px; float:left; margin-left:18.5px;}
#market_flower a { display:block; width:106px;}
#market_flower li img { display:block; width:106px; height:106px;}
#market_flower li a { font-size:12px; line-height:30px; text-align:center; color:#666666; text-decoration:none;}
#market_flower li a:hover { color:#D20005; text-decoration:underline;}
/*guide_flower:鲜花导购*/
#guide_flower { margin-top:5px; overflow:hidden; background-color:#FFF; height:130px;}
#guide_flower img { display:block; width:518px; height:33px;}
#guide_flower ul { display:block; width:518px; list-style:none; }
#guide_flower li { display:block; width:259px; height:20px; float:left; background:url(../images/icon2.gif) no-repeat 20px 6px;}
#guide_flower li a { display:block; width:229px; height:20px; line-height:20px; font-size:12px; text-decoration:none; color:#000; text-align:left; margin-left:30px;}
#guide_flower li a:hover { color:#D20005; text-decoration:underline;}

时间： 2024-10-13 03:29:43

页面练习--鲜花店的相关文章

小程序的红利期

其实一直都有人问我,小程序是否还有机会.我必须承认,一开始我就看错了,也许现在还是错的,不过没关系,跟大家分享一下,如果又错了,就继续攒经验值.对创业者而言,很多时候,做错总比错过有价值. 我最近常说的是,小程序的价值,在于寄生. 小程序自身的入口,只有一个,是附近的小程序.当然,这个入口也是有价值的,但不足以支撑腾讯关于小程序生态的野心. 那么其他的入口,全部是寄生关系. 我们来数一数. 1.公众号以前公众号只可以绑定3个小程序,后来放开50个.我们注意到这段时间很多公众号都绑定了小程序,这

毕业设计课题大全

标题: 交换机端口数据流量信息采集方法评述(1人) 目的: 本题目意在通过检索"截获交换机封包"的相关资料,研究对交换机端口流量进行实时监测的手段和方法及实现的原理. 内容:论文要求分析交换机内部封包的交换和计数原理,进而探查如何通过局域网络监测交换机端口的实时流量信息. 参考资料:思科CCNA和CCNP认证教材,及相关参考资料计算机专业毕业设计题目大全 http://blog.renren.com/share/250527820/12343150865 重点考虑: 5.电子邮件服务

centos下整合PagerDuty、nagios初探（on-call尝鲜和体验）

[前言] 今天在某个群里看见有人介绍了PagerDuty,介绍到了slack.整合后可以更加方便和团队合作.于是我觉得来尝尝鲜. [PagerDuty是什么?] PagerDuty是一款能够在服务器出问题时发送提醒的软件.在发生问题时,提醒的方式包括屏幕显示.电话呼叫.短信通知.电邮通知等,而且在无人应答时还会自动将提醒级别提高.该软件通过一个控制面板对问题进行监控.官方网站:http://www.pagerduty.com,提醒下这不是免费的午餐哈. [注册] 1.打开页面https://si

屌丝就爱尝鲜头——java8初体验

Java8已经推出,让我们看看他的魅力.让我们看看他改变较大的部分. 一.java8概述 Java8是由Oracle(甲骨文)公司与2014年3月27日正式推出的.Java8同时推出有3套语言系统,分别是Java SE8.Java SE Emebbled 8.Java ME8. Java SE8较以往的系统增强的功能有: ①增强了对集合式操作语言--lambda表达式的支持,"Lambda 表达式"(lambda expression)是一个匿名函数,Lambda表达式基于数学中的λ演

微信小程序的原型设计尝鲜

"小程序"来了,大世界要变了?微信小程序可能是近期业绩最火的话题之一了. 这个根植于微信流量巨无霸的应用,将对应用市场.对微商.电商.对企业的开发成本.获客成本将产生深远影响?将制造出绕开Google Play和AppStore的另一大App体系?将实现"知人性"的PM张小龙先生的"用后即走"的轻量App之梦?将秒杀传统的App? 虽有海量追捧者趋之若鹜,但也有冷静人士淡定的白眼.但无论如何,腾讯这步棋子既然落在了棋盘上,绝不能悔棋,更不可能半途

使用 Vue 开发 Weex 页面

Vue & Weex 介绍 Vue.js 是 Evan You 开发的渐进式 JavaScript 框架,在易用性.灵活性和性能等方面都非常优秀.开发者能够通过撰写 *.vue 文件,基于 <template>, <style>, <script> 快速构建组件化的 web 应用. Vue.js 在 2016 年 10 月正式发布了 2.0 版本,该版本加入了 Virtual-DOM 和预编译器的设计,使得该框架在运行时能够脱离 HTML 和 CSS 解析,只依

页面繁体简体互换

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Chines._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

404页面 - Html Notes

404错误页面腾讯公益404 用法说明:http://www.qq.com/404/ 引用脚本:<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" ></script> 或<script type="text/javascript" src="http

浅谈WEB页面提速（前端向）

记得面试现在这份工作的时候,一位领导语重心长地谈道——当今的世界是互联网的世界,IT企业之间的竞争是很激烈的,如果一个网页的加载和显示速度,相比别人的站点页面有那么0.1秒的提升,那也是很大的一个成就. 然后我不知道怎么写下去了,就在群里问了那群狗头军师,结果是这样的... 推荐免费培训课:http://www.jinhusns.com/Products/Curriculum/?type=xcj 好的,是时候“语锋一转”切回主题了 —— 如何提升我们站点页面的访问速度.减少等待时间,从而最大化地