用HTML和CSS创建这个设计？
我正在寻找来自一些有用的HTML / CSS主人的小贤哲建议。 我正在建立一个网站，以帮助我所在地区的人找到一个公寓。 我一直和我的一位做图形设计的朋友一起工作，他创建了一些非常漂亮的模型，现在我正在用HTML / CSS实现。
我附上了过滤器的图像，我想知道如何创建它们。 如果我使用CSS来设置药丸形状的输入，它可能不适用于所有浏览器。 我是否应该采用创建形成输入背景的小型重复蓝线的方法？
我并不是要求某人为我编写代码，但我想知道是否有人有建议采用CSS或基于图像的方法来构建看起来像所附模型的设计。
这取决于你的观众。 我只针对最新的浏览器，所以我选择最新的CSS。 几乎所有的东西都可以在CSS中使用。 如果您必须支持旧浏览器，请使用JS作为后备。
这是我在大约20分钟内用纯CSS完成的。 当然，它可能会好得多，但我不想花更多时间，只是想让你开始，如果你决定这样做。
这里是演示：http://jsfiddle.net/ThinkingStiff/PHTsb/
HTML：
<div id="bedrooms" class="button">
<div id="walking">Walking</div>
<div class="body">Bedroom</div>
<div class="count">1</div>
<div class="down">▼</div>
</div>
CSS：
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Satisfy);
body
{
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGklEQVQI12Pw8fH5X19fD8YMMAZIkAHGANEAiZwUkmznO8QAAAAASUVORK5CYII=);
}
#bedrooms
{
width: 146px;
}
.button
{
background-color: #65c3e6;
background-image: linear-gradient(
top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
background-image: -webkit-linear-gradient(
top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
background-image: -moz-linear-gradient(
top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
background-image: -o-linear-gradient(
top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
background-image: -ms-linear-gradient(
top, rgba( 255, 255, 255, .4 ) 0%, rgba( 255, 255, 255, .0 ) 60%);
border-bottom: 1px solid #4998b8;
border-radius: 22px;
border-top: 1px solid #cbeef7;
box-shadow: 0 0 0 5px rgba(71,71,71,.65);
-webkit-box-shadow: 0 0 0 5px rgba(71,71,71,.65);
-moz-box-shadow: 0 0 0 5px rgba(71,71,71,.65);
-o-box-shadow: 0 0 0 5px rgba(71,71,71,.65);
-ms-box-shadow: 0 0 0 5px rgba(71,71,71,.65);
color: white;
height: 36px;
margin: 30px 0 0 30px;
position: relative;
}
#walking
{
font: bold 24px Satisfy;
left: -17px;
letter-spacing: -2px;
position: absolute;
text-shadow: 3px 3px 3px rgba(69,69,69,.2), -1px 1px 1px rgba(69,69,69,.1);
top: -13px;
transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
-ms-transform:rotate(-15deg);
}
.body
{
border-right: 1px solid #73c7e6;
display: inline-block;
font: normal 24px/24px Yanone Kaffeesatz;
height: 30px;
margin-left: 10px;
padding: 6px 8px 0 0;
text-shadow: 1px 1px 1px rgba(69,69,69,.2), -1px 1px 1px rgba(69,69,69,.1);
text-transform: uppercase;
vertical-align: top;
}
.count
{
border-left: 1px solid #8fd4eb;
color: #185269;
display: inline-block;
font: bold 16px/16px Helvetica, Arial;
height: 25px;
padding: 11px 6px 0 8px;
margin-left: 1px;
text-shadow: 1px 1px 1px rgba(255,255,255,.3), -1px 1px 1px rgba(255,255,255,.2);
vertical-align: top;
}
.down
{
color: #42778c;
display: inline-block;
font: normal 14px/14px Helvetica, Arial;
height: 24px;
padding-top: 12px;
text-shadow: 1px 1px 1px rgba(255,255,255,.3), -1px 1px 1px rgba(255,255,255,.2);
vertical-align: top;
}
你对浏览器的支持是对的。
所以我不会去这个CSS路线。
我会制作左右圆角边框并将其制作成图像。
我也会创建一个1px宽度的背景图像，然后水平repeat-x （ repeat-x ）。
Firefox 4.X +，Chrome和Safari中的CSS支持非常强大。 在IE 8和IE 9中甚至是合理的。您最好的选择可能是从CSS开始，如果检测到IE 6或7，则使用JavaScript来清理UI。 在这一点上，假设任何不使用IE 6或7的人都使用现代浏览器是相当安全的。
链接地址: http://www.djcxy.com/p/56065.html