SOURCE

<div id="menu1">
  <div id="line">
    <div id="logo">
      <img src="http://www.zhujianbook.com/templets/default/images/logo.gif"
      alt="" seyle="float:left" />
    </div>
    <div class="nav-srh">
      <form class="search_form" method="get" id="bdcs-search-form" action="//s.51shucheng.com/cse/search"
      target="_blank">
        <input type="hidden" name="s" value="18328509396291505865">
        <input type="hidden" name="entry" value="1">
        <div class="inp">
          <span>
            <input name="q" type="text" title="" size="22" maxlength="60" value=""
            name="s" id="bdcs-search-form-input" autocomplete="off" dir="ltr" placeholder="输入书名搜索...">
          </span>
          <span>
            <input class="bn-srh" type="submit" id="bdcs-search-form-submit" value="搜索">
          </span>
        </div>
      </form>
    </div>
     </div>
  </div>
  <div id="menu_tab">
    <ul class="menu">
      <li>
        <a href="index.html" class="nav">
          首页
        </a>
      </li>
      <li class="divider">
      </li>
      <li>
        <a href="product.html" class="nav">
          图书
        </a>
      </li>
      <li class="divider">
      </li>
      <li>
        <a href="about.html" class="nav">
          关于
        </a>
      </li>
      <li class="divider">
      </li>
      <li>
        <a href="faqs.html" class="nav">
          服务
        </a>
      </li>
      <li class="divider">
      </li>
      <li>
        <a href="checkout.html" class="nav">
          结算
        </a>
      </li>
      <li class="divider">
      </li>
      <li>
        <a href="contact.html" class="nav">
          联系
        </a>
      </li>
    </ul>
  </div>
  <div id="container">
    <div id="left" class="column">
      <div class="block">
        <h1>
          图书分类
        </h1>
        <ul id="navigation">
          <li class="color">
            <a href="#">
              文艺
            </a>
          </li>
          <li>
            <a href="#">
              社科
            </a>
          </li>
          <li class="color">
            <a href="#">
              生活
            </a>
          </li>
          <li>
            <a href="#">
              教育
            </a>
          </li>
          <li class="color">
            <a href="#">
              人文
            </a>
          </li>
          <li>
            <a href="#">
              军事
            </a>
          </li>
          <li class="color">
            <a href="#">
              管理
            </a>
          </li>
          <li>
            <a href="#">
              财经
            </a>
          </li>
          <li class="color">
            <a href="#">
              科技
            </a>
          </li>
          <li>
            <a href="#">
              期刊
            </a>
          </li>
          <li class="color">
            <a href="#">
              青春
            </a>
          </li>
          <li>
            <a href="#">
              少儿
            </a>
          </li>
          <li class="color">
            <a href="#">
              美术
            </a>
          </li>
          <li>
            <a href="#">
              体育
            </a>
          </li>
          <li class="color">
            <a href="#">
              工业
            </a>
          </li>
          <li>
            <a href="#">
              农业
            </a>
          </li>
          <li class="color">
            <a href="#">
              医学
            </a>
          </li>
        </ul>
      </div>
      <div class="title_box">
        特别推荐
      </div>
      <div class="special">
        <ul id="recommend">
          <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 id="main" class="float_r">
      <h1>
        关于书城
      </h1>
      <h3>
        公司简介
      </h3>
      <p>
        网络书城是全国最大的综合性中文网上购物书城，由国内著名出版机构、创业基金共同投资成立。书城在库图书近100万种，注册用户遍及全国32个省、市、自治区和直辖市，每天有上万人在书城浏览购物。书城凭借优质的产品和良好的服务，赢得了众多的荣誉。
      </p>
      <p>
        书城的经营理念如下：
      </p>
      <ul class="tmo_list">
        <li>
          打造互联网时尚品牌
        </li>
        <li>
          提供最好的用户体验
        </li>
        <li>
          坚持诚信为本的经营理念
        </li>
        <li>
          注重团队利益
        </li>
        <li>
          鼓励创新
        </li>
      </ul>
      <div class="cleaner h20">
      </div>
      <h3>
        经营模式
      </h3>
      <p>
        互联网提供了可以无限伸展的展示空间，可以容纳无限的商品及内容。在网络书城，消费者无论是购物还是查询，都不受时间和地域的任何限制。在消费者享受“鼠标轻轻一点，精品尽在眼前”的背后，是网络书城耗时3年搭建的庞大的物流体系，全国库房面积达到10万平方米，提供货到付款服务的城市超过400个，并为联营商户开通货到付款服务。
      </p>
      <div class="cleaner">
      </div>
      <blockquote>
        网络书城一直致力于在企业创造利润、对股东承担法律责任的同时，还承担对员工、消费者、社区和环境的责任。企业的社会责任要求企业必须超越把利润作为唯一目标的传统理念，强调要在生产过程中对人的价值的关注，强调对消费者、对环境、对社会的贡献，为此我们开展一系列公益活动，回报社会。
      </blockquote>
    </div>
  </div>
  <div id="footer">
    <a href="index.html">
      首页
    </a>
    |
    <a href="product.html">
      图书
    </a>
    |
    <a href="about.html">
      关于
    </a>
    |
    <a href="faqs.html">
      服务
    </a>
    |
    <a href="checkout.html">
      结算
    </a>
    |
    <a href="contact.html">
      联系
    </a>
    <p>
      版权 &copy;金融一班
    </p>
  </div>

#menu1 {
  position: relative;
  border: 1px solid red;
  background-color: #00FFFF;
  height: 60px;
}

a {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

#line {
  display: flex;
  flex-direction: row;
}

#logo {
  display: flex;
  flex: 4;
}

.nav-srh {
  display: flex;
  flex: 6;
  text-align: center;
  background: url(images/search-bg.png) no-repeat 0 0;
  margin: 5px 0 0 20px;
  overflow: hidden
}

.nav-srh form {
  padding: 0 1px 0 0;
  height: 38px;
  background: url(images/search-bg.png) no-repeat 100% 0;
}

.nav-srh .inp {
  position: relative;
  z-index: 40;
}

.nav-srh .inp {
  position: relative;
  padding-top: 5px;
  width: 366px;
}

.nav-srh input {
  float: left;
  width: 300px;
  height: 26px;
  line-height: 26px;
  border: 1px solid #A6D098;
  background: white;
  padding: 0 2px;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  margin-right: 3px;
  vertical-align: middle;
}

.nav-srh {
  width: 54px;
  height: 29px;
  font-size: 13px;
  padding: 1px 0 3px 3px;
  border: 0;
  background: transparent url(images/search-bg.png) no-repeat 0 -100px;
  cursor: pointer;
  letter-spacing: 3px;
  text-align: center;
}


/*---------页面菜单区域---------*/

.menu {
  background-color: #404040;
}
#menu_tab {				/*设置菜单容器样式*/
	clear:both; 				/*清除所有浮动*/
	height:18px;
	background: url(../images/menu_bg.gif) repeat-x; 	/*背景图像水平重复*/
	margin-bottom: 10px;
}
ul.menu {
  /*设置菜单列表的样式*/
  list-style-type: none;
  /*不显示项目符号*/
  float: left;
  /*向左浮动*/
  display: block;
  /*块级元素*/
  width: 982px;
  margin: 0px;
  padding: 0px;
}

ul.menu li {
  /*设置菜单列表项的样式*/
  display: inline;
  /*内联元素*/
  font-size: 12px;
  font-weight: bold;
  /*字体加粗*/
  line-height: 36px;
  /*行高36px*/
}

ul.menu li.divider {
  /*菜单项分隔线的样式*/
  display: inline;
  /*内联元素*/
  width: 4px;
  height: 36px;
  float: left;
  /*向左浮动*/
  background: url(../images/menu_divider.gif) no-repeat center;
  /*背景图像居中对齐无重复*/
}

a.nav:link,
a.nav:visited {
  /*菜单项未访问过链接、访问过链接的样式*/
  display: block;
  /*块级元素*/
  float: left;
  /*向左浮动*/
  padding: 0px 8px 0px 8px;
  /*上、右、下、左的内边距依次为0px,8px, 0px,8px*/
  margin: 0 14px 0 14px;
  /*上、右、下、左的外边距依次为0px,14px, 0px,14px*/
  height: 36px;
  text-decoration: none;
  /*链接无修饰*/
  text-align: center;
  /*文字居中对齐*/
  color: #fff;
  /*白色文字*/
}

a.nav:hover {
  /*鼠标悬停链接的样式*/
  display: block;
  /*块级元素*/
  float: left;
  /*向左浮动*/
  padding: 0px 8px 0px 8px;
  margin: 0 14px 0 14px;
  height: 36px;
  text-decoration: none;
  /*链接无修饰*/
  text-align: center;
  /*文字居中对齐*/
  color: #ccc;
  /*灰色文字*/
}


/*---------左侧边栏区域---------*/

#container {
  /*主体容器样式*/
  height: 100%/*相对单位*/
}

#container .column {
  /*column类样式*/
  position: relative;
  /*相对定位*/
  float: left;
  /*向左浮动*/
  margin-bottom: 10px;
}

#left {
  /*纵向菜单容器的样式*/
  width: 160px;
  /*宽度160px*/
}

.block {
  /*纵向菜单内容区域的样式*/
  width: 168px;
  border: 1px solid #C5C5C5;
  /*菜单边框为1px灰色实线*/
  padding: 1px 1px 14px 1px;
  margin-bottom: 4px;
}

#navigation,
#recommend {
  /*纵向菜单列表的样式*/
  width: 168px;
  margin: 0px;
  padding: 0px;
}

#navigation li,
#recommend li {
  /*纵向菜单列表项的样式*/
  list-style-type: none;
  /* 不显示项目符号*/
  line-height: 20px;
  padding: 0 0 0 13px;
}

.color {
  background-color: #EBEBEB/*奇数行菜单项背景色为浅灰色*/
}

#navigation a,
#recommend a {
  /*列表项超链接的样式*/
  color: #565656;
  /*文字深灰色*/
  text-decoration: none/*链接无修饰*/
}

#navigation a:hover,
#recommend a:hover {
  /*列表项悬停链接的样式*/
  color: #0283DD;
  /*文字青色*/
}

.title_box {
  /*特别推荐标题文字的样式*/
  width: 168px;
  height: 30px;
  margin: 5px 0 0 0;
  text-align: center;
  /*文字居中对齐*/
  font-size: 13px;
  font-weight: bold;
  /*字体加粗*/
  line-height: 30px;
  /*行高30px*/
}

.special {
  /*特别推荐图书容器的样式*/
  width: 168px;
  border: 1px solid #c5c5c5;
  /*容器的边框为1px浅灰色实线*/
  padding: 10px 0;
}


/*---------中央区域---------*/

#center {
  /*设置相关图片所在中央区域容器的样式*/
  width: 572px;
  /*设置容器宽度为572px*/
  position: relative;
  /*相对定位*/
}

.banner {
  /*设置书城促销广告的样式*/
  margin: 0 2px 0 1px;
  /*上、右、下、左的外边距依次为0px,2px,0px,1px*/
  float: left/*向左浮动*/
}

#content {
  /*设置内容区域的样式*/
  padding: 0px 12px 30px 20px;
  /*上、右、下、左的内边距依次为0px,12px,30px,20px*/
  float: left/*向左浮动*/
}

#content p {
  /*设置内容区域段落的样式*/
  padding: 10px 0 0 5px;
  /*上、右、下、左的内边距依次为10px,0px,0px,5px*/
  margin: 0px;
  /*外边距为0px*/
  text-indent: 2em;
  /*首行缩进*/
}

.pad25 {
  /*设置相关图书标题图片上内边距*/
  padding-top: 25px;
  /*图片上内边距25px，使标题图片和明细区域保持分隔距离*/
}

.stuff {
  /*设置所有图书信息区域的样式*/
  margin: 25px 0 0 0;
  /*上、右、下、左的外边距依次为25px,0px,0px,0px*/
  float: left;
  /*向左浮动*/
}

.item {
  /*设置单个图书信息区域的样式*/
  width: 270px;
  /*宽度为270px*/
  float: left;
  /*向左浮动*/
  margin: 0 0 15px 0/*上、右、下、左的外边距依次为0px,0px,15px,0px*/
}

.item img {
  /*设置单个图书信息区域图片的样式*/
  float: left;
  /*向左浮动*/
  border: 1px solid #999;
  /*图片边框为1px灰色实线*/
}

.item span {
  /*设置图书右侧简介文字区域的样式*/
  font-weight: normal;
  /*正常粗细文字*/
  font-size: 12px;
  display: block;
  /*块级元素*/
  width: 135px;
  float: left;
  /*向左浮动*/
  padding: 5px 0 10px 8px;
  /*上、右、下、左的内边距依次为5px,0px,10px,8px*/
}

.name {
  /*设置图书作者文字的样式*/
  color: #4a4a4a;
  /*设置文字颜色为深灰色*/
  text-decoration: underline;
  /*加下划线*/
}

.name:link,
.name:visited {
  /*设置图书作者正常链接和访问过链接的样式*/
  text-decoration: underline/*加下划线*/
}

.name:hover {
  /*设置鼠标悬停链接的样式*/
  text-decoration: none/*链接无修饰*/
}

a.prod_buy,
a.prod_details,
a.prod_like {
  /*设置按钮链接的样式*/
  width: 75px;
  /*宽度75px*/
  height: 24px;
  /*高度24px*/
  display: block;
  /*块级元素*/
  float: left;
  /*向左浮动*/
  background: url(../images/link_bg.gif) no-repeat center;
  /*背景图像无重复中央对齐*/
  margin: 2px 5px 0 0;
  /*上、右、下、左的外边距依次为2px,5px,0px,0px*/
  text-align: center;
  /*文字居中对齐*/
  line-height: 24px;
  /*行高24px*/
  text-decoration: none;
  /*链接无修饰*/
  color: #159dcc;
}


/*---------右侧区域---------*/

#right {
  /*右侧区域容器样式*/
  width: 238px;
  /*容器宽238px*/
}

.rightblock {
  /*右侧区域内容的样式*/
  padding: 0 0 0 14px/*上、右、下、左的内边距依次为0px,0px,0px,14px*/
}

.blocks {
  /*右侧区域3个子栏目的样式*/
  width: 218px;
  /*子栏目宽218px*/
  background-image: url(../images/bg.gif);
  /*背景图像*/
  background-position: top left;
  /*背景图像顶端左对齐*/
  background-repeat: repeat-y;
  /*背景图像垂直重复*/
  margin: 0 0 2px 0
}

.blocks span {
  /*子栏目中局部文字信息的样式*/
  font-size: 11px;
  font-weight: bold;
  /*字体加粗*/
  display: block;
  /*块级元素*/
  float: left;
  /*向左浮动*/
  width: 68px;
  text-align: right;
  padding: 0 7px 0 0
}

.line {
  /*表单每行内容的样式*/
  display: block;
  /*块级元素*/
  float: left;
  /*向左浮动*/
  line-height: 19px;
  /*行高19px*/
  padding: 5px 0 0 0;
  margin: 0px;
}

.blocks input {
  /*表单输入标签的样式*/
  width: 130px;
  /*输入标签宽130px*/
  height: 15px;
  /*输入标签高15px*/
  float: left;
  /*向左浮动*/
  border-top: 2px inset #808080;
  /*上边框为2px深灰色内阴影线*/
  border-left: 2px inset #808080;
  /*左边框为2px深灰色内阴影线*/
  border-right: 1px solid #CDCDCD;
  /*右边框为1px浅灰色实线*/
  border-bottom: 1px solid #CDCDCD/*下边框为1px浅灰色实线*/
}

.more {
  /*更多信息文字的样式*/
  display: block;
  /*块级元素*/
  float: left;
  /*向左浮动*/
  color: #0283DD;
  /*青色文字*/
  text-decoration: underline;
  /*加下划线*/
  margin: 15px 0 0 0
}

.reg {
  /*注册文字的样式*/
  color: #0283DD;
  /*青色文字*/
  text-decoration: underline;
  /*加下划线*/
  margin: 0 11px;
}

.reg:link,
.reg:visited,
.more:link,
.more:visited {
  /*注册链接和更多信息链接的样式*/
  color: #0283DD;
  text-decoration: underline
}

.reg:hover,
.more:hover {
  /*注册和更多信息鼠标悬停链接的样式*/
  text-decoration: none/*链接无修饰*/
}

.center {
  /*设置表单元素居中对齐的样式*/
  width: 218px;
  text-align: center/*文字居中对齐*/
}

.pad20 img {
  /*设置登录按钮图片的样式*/
  margin-top: 15px;
  /*上外边距15px*/
}

#news {
  /*设置最新消息区域的样式*/
  padding: 0 5px 5px 13px;
  float: left;
  /*向左浮动*/
}

#right .date {
  /*设置消息发布日期的样式*/
  display: block;
  /*块级元素*/
  width: 100px;
  line-height: 19px;
  /*行高19px*/
  margin: 11px 0 12px 0;
  text-align: center;
  /*文字居中对齐*/
  font-family: Arial;
  font-size: 12px;
  font-weight: normal;
  /*文字正常粗细*/
  color: #272727;
  background-image: url(../images/date.gif);
  background-position: top left;
  background-repeat: no-repeat;
}

#news p {
  /*设置最新消息区域中段落的样式*/
  display: block;
  /*块级元素*/
  float: left;
  /*向左浮动*/
  width: 195px;
  text-indent: 2em;
  /*首行缩进*/
}

#friend {
  /*设置友情链接区域的样式*/
  width: 200px;
  margin: 10px 0;
  padding: 0px;
}

#friend li {
  /*设置友情链接列表项的样式*/
  list-style-type: none;
  /*不显示列表项目符号*/
  line-height: 20px;
  /*行高20px*/
  padding: 0 0 0 13px;
}

#friend a {
  /*设置友情链接区域超链接的样式*/
  color: #565656;
  text-decoration: none/*链接无修饰*/
}

#friend a:hover {
  /*设置友情链接区域鼠标悬停链接的样式*/
  color: #565656;
  text-decoration: underline/*加下划线*/
}


/*---------页面底部版权区域---------*/

#footer {
  /*设置底部版权区域的样式*/
  clear: both;
  /*清除所有浮动*/
  border-top: 3px solid #B7C1C4;
  /*设置上边框为3px实线*/
  padding: 8px 0 17px 0;
  text-align: center;
  /*文字居中对齐*/
  color: #323232/*深灰色文字*/
}

#footer a {
  /*设置版权区域链接的样式*/
  color: #323232;
  /*深灰色文字*/
  text-decoration: none;
  /*链接无修饰*/
  margin: 0 3px;
}

#footer p {
  /*设置版权区域段落的样式*/
  padding: 10px 0 0 0/*上、右、下、左的内边距依次为10px,0px,0px,0px*/
}


/*---------页面底部版权区域样式结束---------*/