关于CSS中border中边线

html-css019

关于CSS中border中边线,第1张

<div id="banner">

<p>

fdb4e1

</p>

</div>

CSS中的代码:

#banner {

width:850px

height:200px

border:2px solid #ccc

background:#CCC

}

代码写错了,当然没有效果了,border 有三个参数用来设置 线宽,样式,颜色,中间不能有冒号

整个的外围大框,是一个外围容器,通常用border来设置

其中的内容通常用列表

<ul>

<li>1</li>

<li>2</li>

</ul>来做

就你给的图来说,通常会做一个外围容器,其中内容会用ul列表详细的css如下

/*外围容器*/

.bigbox{

float:left

width:250px

height:auto

margin:0

padding:10px

border:#e5e5e5 1px solid /*这里是你问的主要问题,用这句实现*/

}

.bigbox ul li{

list-style:none

float:left

width:230px

height:60px

}

.bigbox ul li .imgbox{

float:left

width:60px

height:45px

}

.bigbox ul li .imgbox img{

margin:0

padding:0

border:none

}

.bigbox ul li .content{

float:right

width:110px

height:45px

}

css样式要配合div的页面布局来使用,对以上的css配合的html div布局如下

<div class="bigbox">

<ul>

<li>

<div class="imgbox">这里主要是放置图片内容</div>

<div class="content">这里主要是放置文字内容</div>

</li>

<li>

<div class="imgbox">这里主要是放置图片内容</div>

<div class="content">这里主要是放置文字内容</div>

</li>

</ul>

</div>