[英]Need help to create html page with css div ul li list to make it rotational
I am posting html content of my test page which I want to design like few of the web pages I have seen on different web sites. 我正在发布测试页的html内容,我希望将其设计为类似于在不同网站上看到的很少的网页。 I want to create div with ul li list to make it rotational, at a time only three div should be displayed and remaining will be hidden.
我想用ul li列表创建div以使其旋转,一次只应显示三个div,其余的将被隐藏。 Hidden div should be visible only if I click on left or right rotation link
仅当我单击向左或向右旋转链接时,隐藏的div才应可见
For example... 例如...
New product list on this site. 该网站上的新产品列表。 www.mysmarttrip.in/index.php
www.mysmarttrip.in/index.php
Featured deal list on this site. 该网站上的精选交易清单。 www.freekaamaal.com
www.freekaamaal.com
I tried a lot to make it like that but my knowledge of CSS and Javascript is limited. 我做了很多尝试,但是我对CSS和Javascript的了解有限。 I need help form someone to make my page working like the site I posted above.
我需要别人的帮助,以使我的页面像我上面发布的网站一样工作。
Thanks in advance... please help me 预先感谢...请帮助我
My HTML page: 我的HTML页面:
<html>
<head>
<style type="text/css">
.product_head {
overflow: hidden;
width: 703px;
height: 35px;
padding: 0px;
position: relative;
border: 1px solid rgb(141, 196, 120);
font-family: verdana,geneva,Arial,helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
border-radius: 5px 5px 5px 5px;
text-align: center;
display: table-cell;
vertical-align: middle;
position: relative;
background-color: #27638C;
color: #FFFFFF;
font-size: 105%;
}
.product_page_box {
overflow: hidden;
width: 204px;
height: 250px;
padding: 0px;
margin: 2px 10px 5px 2px;
float: left;
position: relative;
border: 1px solid rgb(141, 196, 120);
font-family: verdana,geneva,Arial,helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
border-radius: 5px 5px 5px 5px;
}
.product_head .product_page_box ol, ul {
list-style: none outside none;
}
.product_container_head {
width: 204px;
height: 25px;
background-color: rgb(234, 248, 228);
padding: 10px;
text-align: center;
display: table-cell;
vertical-align: middle;
position: relative;
}
.product_container_head a {
color: #27638C;
text-transform: uppercase;
}
.product_details {
width: 172;
height: 25px;
vertical-align: middle;
text-align: center;
padding: 20px 10px 10px 0px;
position: relative;
margin: 10px;
border: 1px solid rgb(141, 196, 120);
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div class="product_head">
<p> main title </p>
</div>
<div>
<ul>
<li>
<div class="product_page_box">
<div class="product_container_head">
aa title </div>
<div class="product_details">
aa 1 </div>
<div class="product_details">
aa 2 </div>
<div class="product_details">
aa 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
bb title </div>
<div class="product_details">
bb 1 </div>
<div class="product_details">
bb 2 </div>
<div class="product_details">
bb 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
cc title </div>
<div class="product_details">
cc 1 </div>
<div class="product_details">
cc 2 </div>
<div class="product_details">
cc 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
dd title </div>
<div class="product_details">
dd 1 </div>
<div class="product_details">
dd 2 </div>
<div class="product_details">
dd 3 </div>
</div>
</li>
<li>
<div class="product_page_box">
<div class="product_container_head">
ee title </div>
<div class="product_details">
ee 1 </div>
<div class="product_details">
ee 2 </div>
<div class="product_details">
ee 3 </div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.