看了你的网站,你只要改几个css参数就可以一行变3个了。但是这将改变你的div的宽度
成都创新互联公司 - 成都服务器托管,四川服务器租用,成都服务器租用,四川网通托管,绵阳服务器托管,德阳服务器托管,遂宁服务器托管,绵阳服务器托管,四川云主机,成都云主机,西南云主机,成都服务器托管,西南服务器托管,四川/成都大带宽,机柜大带宽、租用·托管,四川老牌IDC服务商
ul#list-img li {
float: left;
padding: 12px 0 6px 30px;
width: 253px;
height: 267px;
overflow: hidden;
}
ul#list-img li .bx {
border: 1px solid #EBEBEB;
background: white;
text-align: center;
float: left;
overflow: hidden;
padding: 5px 3px;
width: 230px;
height: 255px;
}
如果你想不改变宽度 又想一行放多个,那不就加宽页面宽度,要不就要用横向滚动条,
具体效果是在一行里加个div 包含3个你要的效果的div
div style="width:100%;overflow-x:scroll;"
ul id="list-img" class="ptd10" style="width:1400px;float:left"li.../li/ul
/div
css样式分三种,内部样式,内联样式和外部样式。外部样式,顾名思义,也就是通过link /引入的css样式文件,而内部样式呢,主要是放在style/style中的样式,而内联样式,就是直接嵌入标签的,充当标签的一个属性,使用style='这里写样式' 来实现。
他们的优先级是内联样式的优先级最高,其次判断内部和外部样式的优先级得看它们在html中出现的位置,一般来说,越靠后的优先级也就越高。
css是英文Cascading Style Sheets的缩写。
它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
它包含3种类型,内部样式,行内样式和外部样式表三种
作用的效果是按顺序从下到上,相同样式下面的会覆盖原有样式,除特殊情况外,一般都是行内样式内部样式外部样式。
以div为例
行内样式写法:
在style里面写样式
div style="height:30px; background:#f00;"/div
内部样式:
在head标签内加入style标签,在标签内写样式:
style
div{height:30px; background:#f00;}
/style
外部样式是建立一个新文件后缀名为.css
举个例子:
建立style.css文件放在项目根目录下:
在里面写入
div{height:30px; background:#f00;}
然后保存,在html的head标签内调用样式
link rel="stylesheet" type="text/css" href="style.css" /
CSS种类
CSS为什么称为串联式排版样式呢 ? 是因为可以混合使用以下Style Sheets种类,其优先执行顺序依编号排列。
Inline (同列) : 使用HTML标记的STYLE属性,只和定义的区段有效。
如 :
P STYLE=COLOR:RED
Embedding (内嵌) : 使用 STYLE.../STYLE标记 ( 置于BODY本文区之前 ),定义HTML标记供整个网页使用。可使用多个STYLE.../STYLE标记
如 :
HTML 文件开始
STYLE TYPE=text/css 排版样式区开始
!-- 排版样式区内容 --
/STYLE 排版样式区结束
BODY 本文区开始 本文区内容
/BODY 本文区结束
/HTML 文件结束
Linking (连结) : 使用 LINK标记 ( 用于HEAD区 ),即将排版格式分开处理 ( 以 . CSS 为副档名储存成一个独立的文字档 ) ,再连结使用。可使用多个LINK标记。
如 :
HTML 文件开始
HEAD 标头区开始
LINK TYPE=text/css REL=STYLESHEET
HREF=s1.css 连结CSS档
/HEAD 标头区结束
BODY 本文区开始
本文区内容
/BODY 本文区结束
/HTML 文件结束
css是外部样式
style是行内样式
两都的区别css对于后期的修改比较灵活。
有效执行顺序,如果内部写了style样式的话,style为最终执行样式,意思就是style的优先级高于css
style
.a {
background:#CCC;
height:80px;
width:440px;
overflow:hidden;
}
.b {
background:#f00;/*是图片位置*/
float:left;
height:80px;
overflow:hidden;
margin:0 5px;
position:relative;
width:100px;
}
.b span {
background:#000;
bottom:0;
color:#fff;
font-size:12px;
line-height:20px;
height:20px;
position:absolute;
width:100px;
overflow:hidden;
text-align:center;
filter: alpha(opacity=50);/*调整文字透明度*/
-moz-opacity:0.5; /*调整文字透明度*/
opacity: 0.5; /*调整文字透明度*/
}
/style
div class="a"
div class="b"
span文字1/span
/div
div class="b"
span文字1/span
/div
div class="b" style="color:#f00;"
span文字1/span
/div
div class="b"
span文字1/span
/div
/div
差不多就这样!
有两种方式
1、在head标签之间添加style标签
2、直接在HTML代码里添加style属性,然后在属性里定义css代码
3、也可以将1中的style标签里的内容放到一个css文件里,然后在html页面引用这个文件也是一样的效果
link href="css文件路径" rel="stylesheet" !--这样就可以了,尽量代码简洁--
4、下面是我的HTML代码