189 8069 5689
给css加上背景图片
成都创新互联公司是一家专业提供四方台企业网站建设,专注与成都网站建设、做网站、H5响应式网站、小程序制作等业务。10年已为四方台众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
ul
li id="home"a href="#"全部/a/li
lia href="#"裕华/a/li
lia href="#"新华/a/li
lia href="#"桥东/a/li
lia href="#"桥西/a/li
lia href="#"长安/a/li
li a href="#"开发区/a/li
/ul
style
ul,li{ list-style-type:none; padding:0; margin:0;}
li{ float:left; font-size:12px;}
li a{ border:1px solid #eee; background:#fff;padding:5px; margin:0 5px; text-decoration:none; color:#333;}
li a:hover,#home a{ background:#845738; border:1px solid #eee; padding:5px; margin:0 5px; color:#fff;}
/style
你看下我做的这个效果
你没有加背景图片 我是直接加的背景颜色和边框
希望可以帮到你
在构建类似 Bootstrap 这样的 CSS 系统时，保持系统的简单性、稳定性、灵活性是相当重要的。这并非易事，尤其对于大型团队和项目来说，组件的数量可能会变得相当庞大。为了改善这种状况，你不妨考虑用前缀式类名取代链式类名。
.success { ... }
.btn.success { .. }
.alert.success { ... }
div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red"试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看/div
语法：
text-overflow : clip | ellipsis
参数：
clip : 不显示省略标记（...），而是简单的裁切
（clip这个参数是不常用的！）
ellipsis : 当对象内文本溢出时显示省略标记（...）
说明：
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
请您注意，text-overflow:ellipsis属性在FF中是没有效果的。
示例：
div { text-overflow : clip; }
text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50 个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text- overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省 略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样 才能实现溢出文本显示省略号的效果。
有的时候的某段文本太长了，会影响整个的布局，很多人用动态语言来解决这个问题，但必须区分中文和英文，因为中文相当于两个英文字符长度，这样不仅繁琐，而且加重了服务器的负担。其实，我们完全可以使用CSS完美解决这个问题，
html
head
style type="text/css"
body{
font-family:Arial, Helvetica, sans-serif;/*字体。*/
font-size:12px;/*字体大小12像素。*/
}
div{
width:200px;/*层的宽度。*/
height:24px;/*层的高度。*/
line-height:24px;/*行间距。*/
border:#ccc solid 1px;/*层边框为1像素灰色的实线。*/
background-color:#F9F9F9;/*背景颜色*/
margin:5px; /*距离周围都是5像素*/
}
div a{
color:#000;/*超文字超链接的颜色*/
display:block;/*定义为块级*/
width:150px;/*要显示文字的宽度*/
float:left;/*左对齐*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/
padding-right:7px; /*文字距离右侧7像素。*/
text-overflow:ellipsis;/* 支持 IE */
-o-text-overflow: ellipsis; /* 支持 Opera */
}
div:after{content:"...";}/* 支持 Firefox */
/style
/head
body
diva href="#"CSS截取字符串，超出用省略号代替sdfsdfdsfsdfsdfdsfdsfdsfds/a/div
diva href="#"CSS截取字符串，并将超出用省略号代替/a/div
/body
/html