【免费】红酒专卖店宽屏设计公司网页模板_红酒专卖店宽屏设计公司酒红色葡萄酒css3单页.rar资源-CSDN文库

共36个文件

jpg：18个

png：5个

js：4个

需积分: 0 50 浏览量 2023-09-10 10:34:30 上传评论收藏 915KB RAR 举报

标题 "红酒专卖店宽屏设计公司网页模板_红酒专卖店宽屏设计公司酒红色葡萄酒css3单页.rar" 提供的信息表明，这是一个专为红酒专卖店设计的宽屏网页模板，使用了CSS3技术，颜色主题偏向酒红色，且采用了单页布局。描述中的 "html" 指出模板基于HTML构建。标签同样为 "html"，进一步确认了这个模板是基于HTML5语言设计的。在压缩包的文件名称列表中，我们可以发现以下关键文件： 1. **bootstrap.css**：这是Twitter Bootstrap框架的样式表文件，Bootstrap是一个流行的前端开发框架，提供响应式布局、移动设备优先的Web设计工具，使得网页设计更易于实现跨平台兼容和美观的用户界面。 2. **style.css**：这是自定义的样式表，通常包含页面特定的样式规则，用于定制Bootstrap的基础样式，或者定义与Bootstrap不相关的元素的样式。 3. **gallery.css**：可能用于创建一个图片展示或画廊功能，帮助用户以吸引人的方式浏览红酒产品。 4. **swipebox.css**：可能关联于一个轻量级的触摸滑动插件，如Swipebox，它能够为网页添加优雅的响应式图片和视频灯箱效果，增强用户体验。 5. **glyphicons-halflings-regular.eot**：这通常包含 Glyphicons 字体图标集的一部分，这些图标常用于Bootstrap项目中，为网页添加图形元素。 6. **index.html**：这是网站的主入口文件，包含整个网页的结构和内容，HTML标记语言用于定义网页布局、链接资源、嵌入媒体等。 7. **wel.jpg、g3.jpg、bg.jpg、g2.jpg**：这些都是图像文件，可能用作网页背景、产品展示、滑动图片等，为网站增添视觉吸引力，尤其是对于红酒专卖店，高质量的图片能够有效地展示产品。这个网页模板利用了HTML5和CSS3技术，结合Bootstrap框架提供了响应式的宽屏设计，适合红酒专卖店展示产品和品牌形象。自定义的CSS文件调整了整体样式，增强了视觉效果。同时，Swipebox可能被用于实现图片的交互展示，而图片文件则展示了网站的视觉设计元素。这样的网页设计有助于提升用户体验，吸引并引导潜在客户深入了解红酒产品。

资源推荐

资源详情

资源评论

收起资源包目录

红酒专卖店宽屏设计公司网页模板_红酒专卖店宽屏设计公司酒红色葡萄酒css3单页.rar （36个子文件）

g3.jpg 39KB

style.css 35KB

g2.jpg 34KB

b.jpg 32KB

jquery.swipebox.min.js 7KB

wel.jpg 40KB

responsiveslides.min.js 3KB

glyphicons-halflings-regular.woff 23KB

s1.jpg 13KB

glyphicons-halflings-regular.eot 20KB

S4.jpg 10KB

s2.jpg 11KB

glyphicons-halflings-regular.woff2 18KB

t3.jpg 17KB

b-pic.png 410KB

social.png 5KB

g6.jpg 33KB

t1.jpg 13KB

nav.png 3KB

arrows.png 4KB

bg.jpg 37KB

bootstrap.css 118KB

icons.svg 1KB

move-top.png 3KB

g5.jpg 33KB

swipebox.css 4KB

index.html 18KB

jquery-1.11.1.min.js 94KB

t2.jpg 21KB

gallery.css 4KB

g4.jpg 25KB

bg2.jpg 18KB

s3.jpg 9KB

s.jpg 20KB

jquery.flexisel.js 8KB

g1.jpg 24KB

<!DOCTYPE HTML> <html> <head> <title>Home</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Winery Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" /> <script type="applijegleryion/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />  <link href="css/style.css" rel='stylesheet' type='text/css' /> <link href="css/gallery.css" rel='stylesheet' type='text/css' /> <script src="js/jquery-1.11.1.min.js"></script>  <link href='#css?family=Source+Sans+Pro:400,700|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>  </head> <body>  <div class="banner" id="home"> <div class="header-top"> <div class="logo"> <a href="index.html"><h1>Winery</h1></a> </div>  <span class="menu"> </span> <div class="top-menu"> <nav class="cl-effect-16"> <ul> <li><a class="active scroll" href="#home" data-hover="Home">Home</a></li> <li><a class="scroll" href="#service" data-hover="Services">Services</a></li> <li><a class="scroll" href="#products" data-hover="Products">Products</a></li> <li><a class="scroll" href="#team" data-hover="Team">Team</a></li> <li><a class="scroll" href="#gallery" data-hover="Gallery">Gallery</a></li> <li><a class="scroll" href="#contact" data-hover="Contact">Contact</a></li> <div class="clearfix"></div> </ul> </nav> </div>  <script> $("span.menu").click(function(){ $(".top-menu ul").slideToggle("slow" , function(){ }); }); </script>  <div class="clearfix"></div>  </div>  <div class="container"> <div class="inner-slider"> <div class="col-md-5 banner-slider"> <div id="top" class="callbacks_container"> <ul class="rslides" id="slider4"> <li> <div class="banner-info"> <h3>100% Pure Organic...!</h3> <p>Lorem Ipsum Maecenas tristique orci ac sem. Duis ultricies pharetra magna.<lable> Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsumipsum dolor sit amet,</lable> consectetuer dolor sit.</p> </div> </li> <div class="banner-info"> <h3>Royal Quality Wine</h3> <p>Lorem Ipsum Maecenas tristique orci ac sem. Duis ultricies pharetra magna.<lable> Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsumipsum dolor sit amet,</lable> consectetuer dolor sit.</p> </div> <li> <div class="banner-info"> <h3>100% Pure Organic...!</h3> <p>Lorem Ipsum Maecenas tristique orci ac sem. Duis ultricies pharetra magna.<lable> Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsumipsum dolor sit amet,</lable> consectetuer dolor sit.</p> </div> </li> </ul> </div> </div> <div class="col-md-7 banner-pic"> <img class="img-responsive " src="images/b-pic.png" alt="" /> </div> <div class="clearfix"></div> </div> </div> </div>  <script src="js/responsiveslides.min.js"></script> <script> // You can also use "$(window).load(function() {" $(function () { // Slideshow 4 $("#slider4").responsiveSlides({ auto: true, pager: true, nav: true, speed: 500, namespace: "callbacks", before: function () { $('.events').append("<li>before event fired.</li>"); }, after: function () { $('.events').append("<li>after event fired.</li>"); } }); }); </script>  </div>  <div class="welcome"> <div class="container"> <div class="welcome-top"> <div class="col-md-6 welcome-text"> <h3 class="tittle two">WELCOME TO WINERY</h3> <p>Lorem Ipsum Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsumipsum dolor sit amet, consectetuer dolor sit.</p> <p>Lorem Ipsum Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsumipsum dolor sit amet, consectetuer dolor sit.</p> <p>Lorem Ipsum Maecenas tristique orci ac sem. Duis ultricies pharetra magna. Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsumipsum dolor sit amet, consectetuer dolor sit.</p> </div> <div class="col-md-6 welcome-img"> <img class="img-responsive " src="images/wel.jpg" alt="" /> </div> <div class="clearfix"></div> </div> </div> </div>   <div class="services" id="service">  <div class="container"> <h3 class="tittle">OUR SERVICES</h3> <div class="serve-grids"> <div class="serve-grids-top"> <div class="col-md-3 service-box"> <figure class="icon"> <i class="glyphicon glyphicon-time"></i> </figure> <h5>Amet Dolor</h5> <p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </div> <div class="col-md-3 service-box"> <figure class="icon"> <i class="glyphicon glyphicon-user"></i> </figure> <h5>Amet Dolor</h5> <p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </div> <div class="col-md-3 service-box"> <figure class="icon"> <i class="glyphicon glyphicon-glass"></i> </figure> <h5>Amet Dolor</h5> <p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </div> <div class="col-md-3 service-box"> <figure class="icon"> <i class="glyphicon glyphicon-music"></i> </figure> <h5>Amet Dolor</h5> <p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </div> <div class="clearfix"> </div> </div> </div>  </div> </div> <div class="copyrights">Collect from <a href="http://www.moobnn.com/" >手机网站模板</a></div>   <div class="products" id="products"> <div class="container"> <h3 class="tittle">PRODUCTS</h3> <ul id="flexiselDemo3"> <li> <div class="biseller-column"> <a class="lightbox" href="#goofy"> <img src="images/s1.jpg"/> </a> <div class="lightbox-target" id="goofy"> <img src="images/s1.jpg"/> <a class="lightbox-close" href="#"> </a> <div class="clearfix"> </div> </div> </div> </li> <li> <div class="biseller-column"> <a class="lightbox" href="#goofy"> <img src="images/s4.jpg"/> </a> <div class="lightbox-target" id="goofy"> <img src="images/s4.jpg"/> <a class="lightbox-close" href="#"> </a> <div class="clearfix"> </div> </div> </div> </li> <li> <div class="biseller-column"> <a class="lightbox" href="#goofy"> <img src="images/s3.jpg"/> </a> <div class="lightbox-target" id="goofy"> <img src="images/s3.jpg"/> <a

评论收藏

内容反馈