master

分支 (1)

管理

管理

master

bowengshangmei
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>博文尚美</title>
    <link rel="stylesheet" href="./css/common .css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- header -->
    <div style="width: 1352px; margin: 0 auto">
      <div class="header_center">
        <img src="./images/logo.png" alt="博文尚美轮播图" class="float_leftoat_left" />
        <ul class="float_right font_size_14px">
          <li><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">PROTFOLIO</a></li>
          <li><a href="#">SERVICE</a></li>
          <li><a href="#">NEWS</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    </div>
    <!-- header -->

    <!-- 轮播图模块 -->
    <div class="CarouselMap">
      <ul>
        <li>
          <img src="./images/banner.png" alt="" />
        </li>
      </ul>
      <div class="DotController">
        <div class="item"></div>
        <div class="item active"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    </div>
    <!-- 轮播图模块 -->
    <!-- 服务范围 -->
    <div class="section1">
      <div class="section-header">
        <div class="section-header-box">
          <div class="section-header-left"></div>
          <div>服务范围</div>
          <div class="section-header-right"></div>
        </div>
        <p class="section-header-title">our services</p>
      </div>
      <div class="section1-content clearfix center">
        <div class="list">
          <img src="images/section1-img1.png" alt="图一" />
          <p class="p1">1、WEB DESIGN</p>
          <p class="p2 font_size_14px">
            企业品牌网站设计/手机网站制作 动画网站创意设计
          </p>
        </div>
        <div class="list">
          <img src="images/section1-img2.png" alt="图二" />
          <p class="p1">2、WEB DESIGN</p>
          <p class="p2 font_size_14px">
            企业品牌网站设计/手机网站制作 动画网站创意设计
          </p>
        </div>
        <div class="list">
          <img src="images/section1-img3.png" alt="图三" />
          <p class="p1">3、WEB DESIGN</p>
          <p class="p2 font_size_14px">
            企业品牌网站设计/手机网站制作 动画网站创意设计
          </p>
        </div>
        <div class="list">
          <img src="images/section1-img4.png" alt="图四" />
          <p class="p1">4、WEB DESIGN</p>
          <p class="p2 font_size_14px">
            企业品牌网站设计/手机网站制作 动画网站创意设计
          </p>
        </div>
      </div>
    </div>
    <!-- 客户案例 -->
    <div class="section2">
      <div class="section-header">
        <div class="section-header-box">
          <div class="section-header-left"></div>
          <div>{ 客户案例 }</div>
          <div class="section-header-right"></div>
        </div>
        <p class="section-header-title">
          With the best professional technology,to deaigin the best innovative
          web site
        </p>
      </div>

      <div class="section2-content center clearfix">
        <div class="li">
          <img src="./images/section2.png" alt="" />
        </div>
        <div class="li">
          <img src="./images/section2.png" alt="" />
        </div>
        <div class="li">
          <img src="./images/section2.png" alt="" />
        </div>
      </div>
      <div class="number font_size_14px">VIEW MORE</div>
    </div>
    <!-- 最新资讯 -->
    <div class="section-header">
      <div class="section-header-box">
        <div class="section-header-left"></div>
        <div>最新资讯</div>
        <div class="section-header-right"></div>
      </div>
      <p class="section-header-title">
        TEH LATEST NEWS
      </p>
    </div>

    <!-- content -->
    <div class="latest center clearfix">
      <img src="./images/section3.png" alt="" class="float_left" />
      <ul class="float_left">
        <li>
          <div class="latest-left float_left">
            <p>09</p>
            Jan
          </div>
          <div class="latest-right float_left">
            <p class="p1 font_size_14px">网站排名进入前三的技巧说明</p>
            <p class="p2 font_size_12px">
              很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎
              首页，更不用说进首页前三了。那么网站优...
            </p>
          </div>
        </li>

        <li>
          <div class="latest-left float_left">
            <p>08</p>
            Jan
          </div>
          <div class="latest-right float_left">
            <p class="p1 font_size_14px">flash网站制作的优缺点</p>
            <p class="p2 font_size_12px">
              虽然HTML5程序语言出现，大有逐渐代替Flash网站制作的意味，但是过于生硬的HTML5动画效果，始终...
            </p>
          </div>
        </li>

        <li>
          <div class="latest-left float_left">
            <p>06</p>
            Jan
          </div>
          <div class="latest-right float_left">
            <p class="p1 font_size_14px">哪些网站优化手法属于网站过度优化</p>
            <p class="p2 font_size_12px">
              大部分人都想让自己的网站，一夜之间出现在搜索引擎首页，独占鳌头。但是事实告诉我们罗马不是一...
            </p>
          </div>
        </li>

        <li>
          <div class="latest-left float_left">
            <p>07</p>
            Jan
          </div>
          <div class="latest-right float_left">
            <p class="p1 font_size_14px">做个网站多少钱？</p>
            <p class="p2 font_size_12px">
              “做个网站多少钱？”很多客户打电话过来直接第一句就抛出来的问题。这好比买辆车多少钱，你是要...
            </p>
          </div>
        </li>
      </ul>
    </div>
    <footer class="footer font_size_12px">
      <div class="center clearfix">
        <ul class="float_right">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </footer>
  </body>
</html>