css基础

css之盒子模型与导航条

盒子模型

这里写图片描述

盒子中想要文本垂直居中
要使用 line-weight 行高=盒子高
text-align 文本对齐方式
left right center justify(两端对齐)

导航条制作过程

导航条的四种状态

link 未访问状态
hover 接触状态
active 激活状态
visited 访问过后状态

使用无序列表

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

去除圆点和外边框

list-style-type:none;
margin:0;
padding:0;

水平显示

display:inline;

为了让列表的块的宽度一致,定义属性

li{
float:left;
}
a{
display:block;
width:60px;
}

css浮动

float:left;
float:right;
float:none;
float:inherit;(继承)
注意: 浮动的块不是标准流,不浮动的块会在上面;
如果宽度或者高度大,则会出现并排或底部;

清理浮动:添加一个空元素

.clearfix:after{
content:" ";
display:block;
height:0;
clear:both;
visibility:hidden;
}
阅读更多
个人分类: css
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

css基础

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭