如何在HTML中创建垂直旋转的链接? [英] How to make vertically rotated links in HTML?
本文介绍了如何在HTML中创建垂直旋转的链接?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想尝试完成此操作:
使用此代码:
<div id='left_column_date_search'>
<a href='#' class='a1'><span>Dnes</span></a>
<a href='#' class='a2 selected'><span>Zítra</span></a>
<a href='#' class='a3'><span>Pátek</span></a>
<a href='# 'class='a4'><span>Sobota</span></a>
</div> <!-- end: #left_column_date_search -->
#left_column_date_search { width: 36px; float: left; overflow: hidden;}
#left_column_date_search a {
display: block;
position: relative;
color: #fff;
text-shadow: 1px 0px 0px #000;
text-decoration: none;
}
#left_column_date_search a.selected {
/* background: url(/images/structure/city-search-grad-selected.jpg); */
color: #660000;
text-shadow: 0px 1px 0px #9e4a4a;
}
#left_column_date_search a:hover {
background: url(/images/structure/city-search-grad-hover.png);
}
#left_column_date_search a.a1{ height: 73px !important; }
#left_column_date_search a.a2 { height: 73px !important; }
#left_column_date_search a.a3 { height: 100px !important; }
#left_column_date_search a.a4 { height: 100px !important; }
#left_column_date_search a.a5 { height: 100px !important; }
#left_column_date_search a.a6 { height: 100px !important; }
#left_column_date_search a.a7 { height: 100px !important; }
#left_column_date_search a span {
display: block;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
position: absolute;
top: 0px;
left: 0px;
}
但我得到的是:
>
任何建议?
推荐答案
这里是我的解决方案。我已更新您的HTML和CSS允许这一点。以下是一个实例: http://jsfiddle.net/8RTaV/4/
Here is my solution. I have updated your HTML and CSS to allow for this. Here is a live example: http://jsfiddle.net/8RTaV/4/
HTML :
<div id='left_column_date_search'>
<a href='#' class='a1'>Dnes</a>
<a href='#' class='a2 selected'>Zítra</a>
<a href='#' class='a3'>Pátek</a>
<a href='#' class='a4'>Sobota</a>
</div> <!-- end: #left_column_date_search -->
CSS:
#left_column_date_search {
background: #000;
width: 36px;
float: left;
}
#left_column_date_search a {
display: block;
height: 60px;
width: 60px;
color: #fff;
text-shadow: 1px 0px 0px #000;
text-decoration: none;
line-height: 31px;
margin: 5px 0 0;
text-align: center;
}
#left_column_date_search a.selected {
/* background: url(/images/structure/city-search-grad-selected.jpg); */
color: #660000;
text-shadow: 0px 1px 0px #9e4a4a;
}
#left_column_date_search a:hover {
background: url(/images/structure/city-search-grad-hover.png);
}
#left_column_date_search a{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
这篇关于如何在HTML中创建垂直旋转的链接?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文