html手写代码怎么实现这样的标题栏啊 求大神指点
发布网友
发布时间：2022-04-29 13:54
共3个回答
热心网友
时间：2022-05-04 12:01
这个效果可以有很多种方法来实现的，这里为你演示最简单的一种，假设你的总长是600像素，两个标题栏为并排显示的效果，CSS样式如下：
<style type="text/css">
#box {width:600px; margin:20px auto}
#box .left,#box .righ {width:280px; font-weight:bold; line-height:25px; border-bottom:solid 2px #9e193f}
#box .left {float:left}
#box .righ {float:right}
#box .left_l {float:left; display:inline-block; width:85px; font-size:13px; background:#9e193f; color:#fff; padding-left:10px}
#box .righ_r {float:right; font-size:10px; color:#9e193f}
</style>
DIV编写格式如下：
<div id="box">
<div class="left">
<span class="left_l">学校简介</span>
<span class="righ_r">详情</span>
</div>
<div class="righ">
<span class="left_l">动态信息</span>
<span class="righ_r">更多</span>
</div>
</div>
直接复制以上代码，产生的结果如下：
如果《学校简介》与《动态信息》是图片，可在相应的DIV中使用：
<img src="图片路径/图片名称">即可。
热心网友
时间：2022-05-04 13:19
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试样式</title>
</head>
<style type="text/css">
html{height:100%;overflow:auto;overflow-y:scroll;}
body,html,span,div,ul,ol,li,dl,dd,dt,a,p,h1,h2,h3,h4,h5,h6,table,td,tr{color:#2c2c2c;list-style-type:none;margin:0;padding:0;font-size:12px;font-family:Microsoft YaHei,SimHei,SimSun;}
img{margin-top:0;margin-bottom:0;border:0 none;}
a:link,a:visited{text-decoration:none;}
.left {float: left;}
.right {float: right;}
.cn1000 { width:1000px; margin:0 auto;}
.title { margin-top:20px;}
.title_top { width:480px; line-height:32px; border-bottom:2px solid #f00;}
.title_top h3 { padding:0 20px; background-color:#f00; color:#fff;}
</style>
<body>
<div class="title cn1000">
<div class="title_top left"><h3 class="left">学校简介</h3><span class="right"><a href="#">详情</a></span></div>
<div class="title_top right"><h3 class="left">学校简介</h3><span class="right"><a href="#">详情</a></span></div>
</div>
</body>
</html>
热心网友
时间：2022-05-04 14:53
<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<style type="text/css">
.left{
margin:10px;
padding:0;
width:400px;
height:30px;
border-bottom:2px solid #bd0000;
float:left;
}
.school,.info{
text-align:center;
width:20%;
height:100%;
background:#bd0000;
line-height:30px;
color:white;
font-family:黑体;
float:left;
}
.detail,.more{
line-height:30px;
text-align:right;
width:20%;
height:100%;
float:right;
font-size:3px;
font-family:黑体;
color:#bd0000;
}
</style>
<body>
<div id="" class="left">
<div id="" class="school">
学校简介
</div>
<div id="" class="detail">
详情
</div>
</div>
<div id="" class="left">
<div id="" class="info">
动态信息
</div>
<div id="" class="more">
更多
</div>
</div>
</body>
</html>
