代码 怎么写 使用CSS样式制作一个外框为虚线,内框为实线的课程表

html-css024

代码 怎么写 使用CSS样式制作一个外框为虚线,内框为实线的课程表,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

div{

border:1px dashed #999

width:505px

height:155px}

table{

margin:2px 2px

border:1px solid #F00

width:500px

height:150px

}

table td{

border:1px solid #F00}

</style></head>

<body>

<div>

<table border="1">

<tr>

<td scope="col">星期一</td>

<td scope="col">星期二</td>

<td scope="col">星期三</td>

<td scope="col">星期四</td>

<td scope="col">星期五</td>

<td scope="col">星期六</td>

<td scope="col">星期日</td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

</table>

</div>

</body>

</html>

这里是CSS样式--------->

<style>

.jmb{ width:912pxbackground:#FFFFFFborder:1px solid #F1BCC4border-left:noneborder-bottom:noneheight:autofloat:leftmargin-top:5px}

.jmb ul{ width:912pxcolor:#D45A57border-bottom:1px solid #F1BCC4float:leftline-height:32px}

.jmb ul li{ width:113pxfloat:leftborder-left:1px solid #F1BCC4text-align:center}

<style/>

这里是HTML--------->

<div class="jmb">

<ul style="width:912pxfont-weight:bold"><li>放课程名字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li></ul>

<ul style="width:912px"><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li></ul>

<ul style="width:912px"><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li></ul>

<ul style="width:912px"><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li></ul>

<ul style="width:912px"><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li><li>文字</li></ul>

</div>

才10分~~~~~~~~~~~~记得给我啊~~~~~~~!

效果图,颜色,边框可以自己修改成你自己喜欢的,边框也是,下面代码有说明,直接复制过去就可以用了

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>课程表</title>

<style type="text/css">

table{

width:50%

margin:50px auto 0

text-align: center

}

.class-schedule{

font-weight: bold

}

</style>

</head>

<body>

<!-- border设置边框,bgcolor设置背景颜色,bordercolor边框颜色,cellspacing表格到表格之间的间距,设置为0则和你的图一样,根据你的喜好自己调整。 cellpadding内容到表格的距离,类似padding,大小可以自己调整-->

<!-- 附:设置背景在table标签里面添加 background="图片地址" 可以自己尝试设置,其实很简单的-->

<!-- 注:周一到周五的背景是在对应的tr标签里面的 bgcolor,课时的背景颜色则是在td标签里面的bgcolor,颜色可以自己修改,或者去掉 -->

<table border="1px" bgcolor="#ffc792" bordercolor="#f00" cellspacing="2" cellpadding="10">

<tr>

<td colspan="6" class="class-schedule">课程表</td>

</tr>

<tr bgcolor="#0f0">

<td></td>

<td>周一</td>

<td>周二</td>

<td>周三</td>

<td>周四</td>

<td>周五</td>

</tr>

<tr>

<td bgcolor="#0f0">1-2节</td>

<td>HTML</td>

<td>高等数学</td>

<td>英语</td>

<td rowspan="2">计算机基础</td>

<td></td>

</tr>

<tr>

<td bgcolor="#0f0">3-4节</td>

<td></td>

<td>概率论</td>

<td>HTML</td>

<td>高等数学</td>

</tr>

<tr>

<td bgcolor="#0f0">5-6节</td>

<td></td>

<td>英语</td>

<td></td>

<td></td>

<td>概率论</td>

</tr>

</table>

</body>

</html>