摘要:本篇教程介绍了HTML+CSS入门 如何实现标题、横线、和圆形按纽共处一行,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 如何实现标题、横线、和圆形按纽共处一行,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
.clearfloat{
zoom:1;/*激活IE属性*/
}
.clearfloat:after{
display: block;
clear: both;
content: ‘‘;
visibility: hidden;
height: 0;
}
.header{
width: 1000px;
height: 40px;
line-height: 40px;
margin: 0 auto;
background: #ccc;
}
.header h3{
float: left;
margin-left: 40px;
color: #fff;
}
.header .line{
float: left;
width: 200px;
margin-left: 50px;
margin-top: 20px;
border-top: 1px solid #fff;
}
.header .btn-group{
float: right;
margin-right: 20px;
}
.header .btn{
/*inline-block元素默认会有4px的边距的hack,例如img,解决方法是将其改成block元素*/
display: inline-block;
width: 10px;
height: 10px;
margin-left: 6px;
background: #999;
border-radius: 50%;/*盒子会变成圆*/
}
.header .active{
background: #69f;
}
</style>
</head>
<body>
<div class="header clearfloat">
<h3>fruit list</h3>
<div class="line"></div>
<div class="btn-group">
<a href="" class="btn active"></a>
<a href="" class="btn"></a>
<a href="" class="btn"></a>
<a href="" class="btn"></a>
</div>
</div>
</body>
</html>
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号