橙色简洁风格响应式家庭主题公园网页模板



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

9 35 12



模板描述:橙色 简洁风格 响应式 家庭主题公园。橙色简洁风格响应式家庭主题公园网页模板HTML模板下载

代码结构

1. 引入CSS

<link href="style.css" rel="stylesheet" type="text/css" />

2. HTML代码

<form id="form1" name="form1" method="post" action="">
  <div id="wrapper">
    <div id="header">
      <div id="latestbox"><span class="orangetitle">our latest package</span><br />
        <strong>Icelerisqueauris mollis nis</strong><br />
      Ienenatisurna non aliquet laoreet, lobortis vel, gravida et volutpat a diam Maecenas rhoncus nunc<br />
        <br />
        <span class="style1"><img src="images/viewnow.gif" width="62" height="55" class="rightimg" /><img src="images/greenarrow.gif" alt="" width="14" height="15" align="top" /> Iitur quis est nec felis euismod cibus onec<br />
            <img src="images/greenarrow.gif" alt="" width="14" height="15" align="top" /> Ielis euismod cibusDonec </span><br />
      <span class="style1"><img src="images/greenarrow.gif" alt="" width="14" height="15" align="top" /> Iitur quis est nec felis euismod</span></div>
    </div>
    <div id="nav">
      <ul>
        <li>home</li>
        <li>about us</li>
        <li> our plans       </li>
        <li>rides</li>
        <li> profile       </li>
        <li>gallery</li>
        <li> enquiry</li>
        <li class="last"> contact </li>
      </ul>
    </div>
    <div id="topbar">
      <div id="searchbox">Irabitur quis est nec felis euismod cibusDonec hendrerit mi vitae libero<br />
        <div style="width:170px; padding: 18px 0 0 15px;">SEARCH 
           <input type="text" value="keywords" />
        </div>
      </div>
    </div>
    <div id="main"><div style="width:900px; height: 90px;">
      <div style="width:600px; float:left;"><img src="images/i1.gif" alt="" width="136" height="81" class="leftimg" /><span class="greentitle">Welcome to our Park</span><br />
        <span class="orangetext">Donec non ligula vel nibh eleifend scelerisqueauris mollis nis</span></div>
      <div style="width:270px; float:right;"><img src="images/latestyear.gif" width="263" height="85" alt="" /></div>
    </div><div style="width:900px; margin: 5px; color: #ac8923;"><span class="style2">Suspendisse potenti uis orci tortor, lobortis ve gravida et volutpat a diam</span> Maecenas rhoncus nunc ut sollicitudin sollicitudin, mauris metus aliquet leo at blandit pede justo eget quamurabitur ut risus at nisi ullamcorper feugiatonec venenatisurna non aliquet laoreet, lobortis vel, gravida et volutpat a diam Maecenas rhoncus nunc</div><div style="width:920px; margin: 5px; color: #ac8923; height: 70px;">
      <div style="width:450px; float:left;">
        <div style="padding:4px; background-color: #fdffe6; border-style: solid; border-width: 1px; border-color: #e3e6ba; margin-bottom: 5px;"><img src="images/blackarrow.gif" alt="" width="9" height="9" /><span class="orangetext">Maecenas rhoncus nunc ut sollicitudin sollicitudin mauris metus</span></div>
        <div style="padding:4px; background-color: #fdffe6; border-style: solid; border-width: 1px; border-color: #e3e6ba; margin-bottom: 2px;"><img src="images/blackarrow.gif" alt="" width="9" height="9" /><span class="orangetext">Maecenas rhoncus nunc ut sollicitudin sollicitudin mauris metus</span></div>
      </div><div style="width:100px; float:left;"><img src="images/clickmore.gif" width="99" height="60" alt="" /></div><div style="width:332px; float:right;"><img src="images/freeticket.gif" width="332" height="61" alt="" /></div>
    </div>
    <img src="images/fewquotes.gif" width="928" height="97" alt="" /><div style="height:425px; margin-top: 8px; width: 925px;"><Div style="width:353px; float:left; background-image: url(images/yellowbg.gif); height: 397px; padding: 13px;"><img src="images/i2.gif" alt="" width="114" height="60" class="leftimg" /><span class="orangetitle">      Our Gallery</span><br />
      <span class="style2">Eugiatonec vea non aliquet laoree</span><br />
      <br />
      <br />
      <div style="background-image:url(images/yellowbg2.gif); width:335px; height:33px; clear: both; color: #FFFFFF; font-weight: bold; padding: 10px;">Sollicitudin mauris metus aliquet leo at blandit pede sto eget quamurabitur ut risus at nis</div>
      <br /><div style="width:340px; padding-left: 10px; height: 110px;"><img src="images/pic01.gif" alt="" width="110" height="102" class="leftimg" />
        <div style="padding:4px; background-color: #fdffe6; margin-bottom: 3px; float: left; width: 200px;"><img src="images/orangearrow.gif" alt="" width="10" height="10" /><span class="orangetext"> Sollicitudin sollicitudin mauris</span></div><div style="padding:4px; background-color: #fdffe6; margin-bottom: 3px; float: left; width: 200px;"><img src="images/orangearrow.gif" alt="" width="10" height="10" /><span class="orangetext"> Tiquet leo it pede jus</span></div>
        <div style="padding:4px; background-color: #fdffe6; margin-bottom: 3px; float: left; width: 200px;"><img src="images/orangearrow.gif" alt="" width="10" height="10" /><span class="orangetext"> Leo it pede justo eget</span></div>
        <div style="padding:4px; background-color: #fdffe6; margin-bottom: 3px; float: left; width: 200px;"><img src="images/orangearrow.gif" alt="" width="10" height="10" /><span class="orangetext"> Mitudin sollicitudin mauris</span></div>
      </div>
      <br /><Div style="width:313px; background-image: url(images/yellowbg3.gif); height: 86px; margin: 0 auto; text-align: center; padding: 10px;"><span class="greentitle style3">Our Latest Plans</span><br />
        <span class="style4"><br />
          Sollicitudin mauris metus aliquet leo at blandit pede sto eget quamurabitur ut risus at nis</span></Div>
    </Div><Div style="width:510px; float:right; height: 420px;"><div style="height:260px;">
      <div style="width:464px; background-image: url(images/yellowbox.gif); height: 207px; padding: 18px; color: #FFFFFF;"><div style="width:220px; float:left;"><img src="images/i3.gif" alt="" width="82" height="57" class="leftimg" /><br />
          <span class="whitetitle">Portfolio</span><br />
          <br />
          <strong>Blandit pede justo eget quamurabitur ut risus at nisi ullamcorper feu</strong><br />
          <br />
          <img src="images/whitearrow.gif" alt="" width="11" height="9" /> Donec sollicitudin ipsum<br />
          <img src="images/whitearrow.gif" alt="" width="11" height="9" /> Praesent a dolor nec mi aucto<br />
          <img src="images/whitearrow.gif" alt="" width="11" height="9" /> Sed consectetuer mauris<br />
          <br /><div style="width:200px; background-image: url(images/barbg1.gif); height: 16px;"><img src="images/whitearrow.gif" alt="" width="11" height="9" />Blandit pede justo eget quam</div>
    </div><div style="width:190px; float:right;"><img src="images/i4.gif" alt="" width="59" height="45" class="leftimg" /><span class="whitetitle">Rides</span><br />
      <br />
      <br />
<div style="width:180px; background-image: url(images/barbg1.gif); height: 16px; clear: both; margin-bottom: 5px;"><img src="images/whitearrow.gif" alt="" width="11" height="9" />Blandit pede justo eget quam</div><div style="width:170px; background-image: url(images/barbg2.gif); height: 31px; clear: both; margin-bottom: 5px; padding: 5px;">Feugiatonec venenatisurna aliquet laorelobortis</div><div style="width:180px; background-image: url(images/barbg1.gif); height: 16px; clear: both; margin-bottom: 5px;"><img src="images/whitearrow.gif" alt="" width="11" height="9" />Blandit pede justo eget quam</div><div style="width:170px; background-image: url(images/barbg2.gif); height: 31px; clear: both; margin-bottom: 5px; padding: 5px;">Feugiatonec venenatisurna aliquet laorelobortis</div>
    </div>
    </div></div><Div style="height:160px;"><img src="images/rides.gif" /></Div>
    </Div>
    </div></div>
    <div id="footer"><br />
      <br />
      home   -   about us   -   our plans   -   rides   -   profile   -   gallery   -   enquiry   -   contact <br />
    @ Copyright Information Goes Here. All Rights Reserved.</div>
  </div>
</form>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 扁平化 黑色 bootstrap自适应 蓝色 普通自适应 欧美风 红色 中国风 绿色 韩系 灰色 日系 简洁简约 黄色 炫酷 紫色 卡通动画 橙色 精美 实用通用 艺术创意 粉色 大气 白色 棕色 清新 彩色 绘画 其他风格 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到