15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 网页设计作品——农业

网页设计作品——农业

时间:2023-07-06 17:36:01 | 来源:网站运营

时间:2023-07-06 17:36:01 来源:网站运营

网页设计作品——农业:

作品文件

该作品使用js+html+css,使页面效果更加丰富

home页面效果

home页面相关代码

<div class="banner-bottom"> <div class="container"> <h3><span>agriculture</span> is best, enterprise is acceptable, but avoid being on a <span class="fixed_w3">fixed wage</span></h3> <div class="agileits_banner_bottom_grids"> <div class="col-md-3 agileits_banner_bottom_grid"> <div class="hovereffect w3ls_banner_bottom_grid"> <img src="images/1.jpg" alt=" " class="img-responsive" /> <div class="overlay"> <h4>Cattle Farm</h4> <p>Maecenas ullamcor non nunc eget.</p> </div> </div> </div> <div class="col-md-3 agileits_banner_bottom_grid"> <div class="hovereffect w3ls_banner_bottom_grid"> <img src="images/2.jpg" alt=" " class="img-responsive" /> <div class="overlay"> <h4>Farming</h4> <p>Maecenas ullamcor non nunc eget.</p> </div> </div> </div> <div class="col-md-3 agileits_banner_bottom_grid"> <div class="hovereffect w3ls_banner_bottom_grid"> <img src="images/3.jpg" alt=" " class="img-responsive" /> <div class="overlay"> <h4>Poultry</h4> <p>Maecenas ullamcor non nunc eget.</p> </div> </div> </div> <div class="col-md-3 agileits_banner_bottom_grid"> <div class="hovereffect w3ls_banner_bottom_grid"> <img src="images/4.jpg" alt=" " class="img-responsive" /> <div class="overlay"> <h4>Gardening</h4> <p>Maecenas ullamcor non nunc eget.</p> </div> </div> </div> <div class="clearfix"> </div> </div> </div> </div>

services页面效果

services页面相关代码

<div class="service-bottom"> <div class="container"> <div class="col-md-3 w3layouts_service_bottom_grid"> <div class="agileits_w3layouts_stats_grid"> <i class="fa fa-users" aria-hidden="true"></i> </div> <p class="counter">654</p> <h3>Customers</h3> </div> <div class="col-md-3 w3layouts_service_bottom_grid"> <div class="agileits_w3layouts_stats_grid"> <i class="fa fa-bullhorn" aria-hidden="true"></i> </div> <p class="counter">231</p> <h3>Popularity</h3> </div> <div class="col-md-3 w3layouts_service_bottom_grid"> <div class="agileits_w3layouts_stats_grid"> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> </div> <p class="counter">553</p> <h3>Success</h3> </div> <div class="col-md-3 w3layouts_service_bottom_grid"> <div class="agileits_w3layouts_stats_grid"> <i class="glyphicon glyphicon-pencil" aria-hidden="true"></i> </div> <p class="counter">422</p> <h3>Lines of Code</h3> </div> <div class="clearfix"> </div> </div> </div>

portfolio页面效果

portfolio页面相关代码

<div class="services"> <div class="container"> <h3 class="w3l_header w3_agileits_header1">Our <span>Portfolio</span></h3> <div class="wthree_services_grids"> <ul class="simplefilter"> <li class="active" data-filter="all">All</li> <li data-filter="1">Category 1</li> <li data-filter="2">Category 2</li> <li data-filter="3">Category 3</li> </ul> <div class="filtr-container"> <div class="col-md-4 col-sm-4 filtr-item" data-category="1" data-sort=""> <div class="agileits_portfolio_grid"> <a class="group1" href="images/1.jpg" title="Viticulture"> <img class="img-responsive" src="images/1.jpg" alt="" /> <div class="w3_textbox"> <h4>Viticulture</h4> <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p> </div> </a> </div> </div> <div class="col-md-4 col-sm-4 filtr-item" data-category="2, 3" data-sort=""> <div class="agileits_portfolio_grid"> <a class="group1" href="images/2.jpg" title="Viticulture"> <img src="images/2.jpg" alt="" class="img-responsive" /> <div class="w3_textbox"> <h4>Viticulture</h4> <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p> </div> </a> </div> </div> <div class="col-md-4 col-sm-4 filtr-item" data-category="1" data-sort=""> <div class="agileits_portfolio_grid"> <a class="group1" href="images/3.jpg" title="Viticulture"> <img src="images/3.jpg" alt="" class="img-responsive" /> <div class="w3_textbox"> <h4>Viticulture</h4> <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p> </div> </a> </div> </div> <div class="col-md-4 col-sm-4 filtr-item" data-category="3" data-sort=""> <div class="agileits_portfolio_grid"> <a class="group1" href="images/4.jpg" title="Viticulture"> <img src="images/4.jpg" alt="" class="img-responsive" /> <div class="w3_textbox"> <h4>Viticulture</h4> <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p> </div> </a> </div> </div> <div class="col-md-4 col-sm-4 filtr-item" data-category="3" data-sort=""> <div class="agileits_portfolio_grid"> <a class="group1" href="images/6.jpg" title="Viticulture"> <img src="images/6.jpg" alt="" class="img-responsive" /> <div class="w3_textbox"> <h4>Viticulture</h4> <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p> </div> </a> </div> </div> <div class="col-md-4 col-sm-4 filtr-item" data-category="2" data-sort=""> <div class="agileits_portfolio_grid"> <a class="group1" href="images/7.jpg" title="Viticulture"> <img src="images/7.jpg" alt="" class="img-responsive" /> <div class="w3_textbox"> <h4>Viticulture</h4> <p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit.</p> </div> </a> </div> </div> <div class="clearfix"> </div> </div> </div> </div> </div>

mail页面效果

mail页面相关代码

<div class="services"> <div class="container"> <h3 class="w3l_header w3_agileits_header1">Get in <span>Touch</span></h3> <div class="w3layouts_mail_grid"> <div class="col-md-4 w3layouts_mail_grid_left"> <div class="w3layouts_mail_grid_left1 hvr-radial-out"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> </div> <div class="w3layouts_mail_grid_left2"> <h3>Mail Us</h3> <a href="mailto:info@example.com">info@example.com</a> </div> </div> <div class="col-md-4 w3layouts_mail_grid_left"> <div class="w3layouts_mail_grid_left1 hvr-radial-out"> <span class="glyphicon glyphicon-home" aria-hidden="true"></span> </div> <div class="w3layouts_mail_grid_left2"> <h3>Address</h3> <p>PO Box 97845 Baker , Australia</p> </div> </div> <div class="col-md-4 w3layouts_mail_grid_left"> <div class="w3layouts_mail_grid_left1 hvr-radial-out"> <span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> </div> <div class="w3layouts_mail_grid_left2"> <h3>Phone</h3> <p>+(0121) 121 121</p> </div> </div> <div class="clearfix"> </div> </div> </div> </div> <div class="services"> <div class="container"> <h3 class="w3l_header w3_agileits_header1">Contact <span>Info</span></h3> <div class="w3layouts_mail_grid"> <div class="col-md-5 agileits_mail_grid_left agileinfo_mail_grid_left"> <div class="agileits_mail_grid_lft_grid wthree_mail_grid_lft_grid"> <h4>Integer venenatis massa lobortis porta</h4> <ul> <li><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>Nulla nec facilisis turpis ac</li> <li><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>Eget ornare ex nisl nec lacus</li> <li><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>Ut tortor augue, placerat massa</li> <li><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>Quisque consectetur sagittis</li> <li><span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>Curabitur mollis dignissim erat</li> </ul> </div> <div class="agileits_mail_grid_lft_grid1 w3_agileits_mail_grid_lft_grid1"> <h4><span>Twitter</span> Posts</h4> <ul> <li><a href="#">@Mark Lii</a> consequat dui id turpis <a href="#">http://example.com</a> auctor tellus eu nisi vehicula consequat.</li> <li><a href="#">@Henry Paul</a> sit amet dolor <a href="#">http://example1.com</a> porttitor suscipit orci semper, bibendum.</li> <li><a href="#">@John Carl</a> augue diam consequat mi <a href="#">http://example2.com</a> facilisis vitae, euismod vitae orci consequat.</li> </ul> </div> </div> <div class="col-md-7 agileits_mail_grid_right agileits_w3layouts_mail_grid_right"> <div class="agileits_mail_grid_right1 agile_mail_grid_right1"> <form action="#" method="post"> <span> <i>Name</i> <input type="text" name="Name" placeholder=" " required=""> </span> <span> <i>Email</i> <input type="email" name="Email" placeholder=" " required=""> </span> <span> <i>Subject</i> <input type="text" name="Subject" placeholder=" " required=""> </span> <span> <i>Message</i> <textarea name="Message" placeholder=" " required=""></textarea> </span> <input type="submit" value="Submit Now"> </form> </div> </div> <div class="clearfix"> </div> </div> </div> </div>ps:由于篇幅较大无法全部展示,可关注微信公众号《IT的世界》并回复作品主题《农业》获取源代码。该作品仅供学习参考

关键词:农业,作品,设计

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭