*{ margin: 0px; padding:0px; } body{ margin:0 auto; 100%; font: 13px "宋体",Verdana,Arial,Helvetica,sans-serif; } a{ text-decoration: none;//不显示下划线 } a:link{color: #6ac3eb;} a:hover{color: red;}//鼠标悬停时效果 a:visited {color: #6ac3eb}//鼠标点击时效果 a:active {color: #6ac3eb}//鼠标点击之后效果 /* <div class="main"> <div class="image"><img src="default.jpg" /></div> <div class="text">这个地方显示文字,当文字的长度超出div宽度时,自动隐藏剩余的文字并以省略号代替显示</div> <div class="ullist"> <ul> <li><a >新闻列表</a></li> <li><a >新闻列表</a></li> </ul> </div> </div> */ .main{ box-shadow: 0 0 3px #000;//div阴影效果 background: url("bg.png") no-repeat scroll;//背景图片 cursor: pointer;//鼠标指针变成手掌型 } /*图片垂直居中*/ .image{ height:150px; 150px; display:table-cell; text-align:center; vertical-align:middle; position:relative; } .image img{ max- 150px;border: 0px; vertical-align:middle; } .text{ 140px;height:30px; white-space: nowrap;/* 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。不换行 */ overflow: hidden;/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow: ellipsis;//将被隐藏的那部分用省略号代替。 } .ullist ul{ list-style:none;} .ullist ul li{ cursor: pointer; font-weight: normal; line-height: 50px;//行高 text-align: left;//文本左对齐 text-indent: 10px;// background-color: #f2f2f2;//背景颜色 border-bottom: 1px solid #e0e0e0;//边框 border-right: 1px solid #e0e0e0; }