365体育备用网址报道24.6.1365体育备用网址布局与设计_365体育备用网址官网资讯

网络真人赌博机站点和电脑站点上的察看有区别。电脑站点屏幕大,可容纳信息多,访问速度快;而网络真人赌博机站点屏幕小、可容纳信息小,一般还使用手指进行点击。这就决议了网络真人赌博机网站文字上线娱乐城百家乐不能做得太细,内容也不宜过多。
依据网络真人赌博机屏幕高大于宽的特性,网站365体育备用网址采纳“吕”形布局设计,上部分为横幅部分,下部分为导航栏目区,导航栏目又分为三栏,每栏并排2个图标。这样页面简洁、给人以层次清楚感,并能更好的突出主要内容。如图24-23所示。
横幅部分使用幻灯轮播的方式,宣传口号,这样能够吸引访问者的注意,加强宣传效果。
其中导航栏目中主要有以下部分功能:

  1. 乐中乐娱乐场我们:用于介绍单位内部的组织架构等信息。
  2. 最新动态:提供最新的新闻、运动等信息内容的公布。
  3. 政策法规:颁布最新的政策法规资料等信息。
  4. 安全常识:提供生发生活常用的安全知识。
  5. 官方微博:链接到腾讯微博,察看最新公布的动态信息。
  6. 社区留言:链接到兴趣部落中,提供和网友的互动功能。

图24-23 365体育备用网址布局
我们把横幅内容放到一个盒子之中,其中定义一个宽度为3倍上线娱乐城百家乐宽度的列表,用来存放3张用于展示横幅的上线娱乐城百家乐,并将3张上线娱乐城百家乐设置为表格单元格元素,用于特效中的滑动。代码如下所示:

    <div style="-webkit-transform:translate3d(0,0,0);">
      <div id="banner_box" class="box_swipe" style="visibility: visible; ">
        <ul style="list-style-type: none; list-style-position: initial; list-style-image: initial; width: 1920px; -webkit-transition-duration: 500ms; -webkit-transform: translate3d(0px, 0px, 0px); ">
          <li style="width: 640px; display: table-cell; vertical-align: top; ">
            <a onclick="return false;">
              <img src="img/banner3.jpg" alt="" style="width:100%;">
            </a>
          </li>
          <li style="width: 640px; display: table-cell; vertical-align: top; ">
            <a onclick="return false;">
              <img src="img/banner2.jpg" alt="" style="width:100%;">
            </a>
          </li>
          <li style="width: 640px; display: table-cell; vertical-align: top; ">
            <a onclick="return false;">
              <img src="img/banner1.jpg" alt="" style="width:100%;">
            </a>
          </li>
        </ul>
        <ol>
          <li class="on"></li>
          <li class=""></li>
          <li class=""></li>
        </ol>
      </div>
    </div>

为了同一时刻只显示一张上线娱乐城百家乐,需要将其余部分的单元格上线娱乐城百家乐隐藏起来,同时对一切的元素都做出相应的处置,横幅盒子的样式操纵代码如下:

.box_swipe{
    overflow:hidden;
    position:relative;
}
.box_swipe ul{
    -webkit-padding-start: 0px;
}

.box_swipe>ol{
    height:20px;
    position: relative;
    z-index:10;
    margin-top:-25px;
    text-align:right;
    padding-right:15px;
    background-color:rgba(0,0,0,0.3);
}
.box_swipe>ol>li{
    display:inline-block;
    margin:5px 0;
    width:8px;
    height:8px;
    background-color:#757575;
    border-radius: 8px;
}
.box_swipe>ol>li.on{
    background-color:#ffffff;
}

而导航栏目区列表则存放6个内容项,每个内容项都包括链接、上线娱乐城百家乐、及文字说明,相应的代码如下:

<ul class="list_ul">
  <li>
    <a href="aboutus.HTML">
    <figure>
      <div>
      <img src="img/11f296bbc0f83cbde8c02784bc3c73fa.gif">
      </div>
      <figcaption>乐中乐娱乐场我们</figcaption>
    </figure>
    </a>
  </li>
  <li>
    <a href="latest.html">
    <figure>
      <div>
      <img src="img/908746f5f33374115b975b7a515781bd.png">
      </div>
      <figcaption>最新动态</figcaption>
    </figure>
    </a>
  </li>
  <li>
    <a href="laws.html">
    <figure>
      <div>
      <img src="img/34c38e577f5e7787337fea161a0d761a.jpg">
      </div>
      <figcaption>政策法现</figcaption>
    </figure>
    </a>
  </li>
  <li>
    <a href="safe.html">
    <figure>
      <div>
      <img src="img/f47eabd4255e84ab792d5fe5f8e86698.jpg">
      </div>
      <figcaption>安全常识</figcaption>
    </figure>
    </a>
  </li>
  <li>
    <a href="http://t.qq.com/doucube">
    <figure>
      <div>
      <img src="img/f93306140828edaa5f825d7cd2f09f0f.jpg">
      </div>
      <figcaption>官方微博</figcaption>
    </figure>
    </a>
  </li>
  <li>
    <a href="http://wx.wsq.qq.com/182998484">
    <figure>
      <div>
      <img src="img/991df18911fce16072ac94e206b89bea.jpg">
      </div>
      <figcaption>社区留言</figcaption>
    </figure>
    </a>
  </li>
</ul>

每个元素占用50%的宽度,这样就形成一排两列的效果,最终一切项一共组成3排。相应的样式操纵代码如下所示。

.list_ul{
    margin:10px 5px;
    overflow:hidden;
}

.list_ul a{
    color:#666;
    display:block;
    background:#fff;
    border:1px solid #efefef;
    border-radius:8px;
    -webkit-box-shadow:1px 2px 1px rgba(0,0,0,0.3);
    padding:10px 0;
    margin:5px;
}
.list_ul figcaption{
    line-height: 30px;
}

.list_ul figure>div{
    height:60px;
    overflow:hidden;
}
.list_ul li{
    display:inline-block;
    width:50%;
    float:left;
    text-align:center;
    -webkit-box-sizing:border-box;
}
.list_ul li img{
    max-width:52px;
    max-height:63px;
}

上述代码的最终实现效果就是一个365体育备用网址,如上面的图24-23所示。

------分隔线----------------------------

公布评论 (102人察看0条评论)
请自觉遵守互联网相关的政策法规,严禁公布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换上线娱乐城百家乐
最新评论