您的位置：首页 > Web前端 > CSS

CSS中的弹性盒模型布局

2018-03-01 11:54 381 查看

CSS中的弹性盒模型布局

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul{
margin: 0;
padding: 0;
}

ul{
/* 去掉小圆圈 */
list-style: none;
}

.menu_con{
width: 960px;
height: 100px;
background-color: #ddd;
margin: 50px auto 0;
/* 设置成弹性盒模型的布局 */
display: flex;
}

.logo{
width: 80px;
height: 100px;
background-color: gold;
}

.menu{
/*background-color: cyan;*/
/* 增长速度 */
flex-grow: 1<
4000
/span>;

/* 设置弹性盒模型 */
display: flex;
/* 列内居中 */
align-items: center;
/* 裁剪 */
overflow: hidden;
}

.menu li{
/* 增长速度 */
flex-grow: 1;
/*background-color: red;*/
/* 行内居中 */
text-align: center;
/* 竖线 */
border-right: 1px solid #333;
/* 右移 */
margin-right: -1px;
}

.menu li a{
/* 去掉 下划线  */
text-decoration: none;
color: #666;
}

/* 使得屏幕内充满 文字 */
@media(max-width: 960px){
.menu_con{
width: 100%;
}
}
</style>
</head>
<body>
<div class="menu_con">
<div class="logo"></div>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">行业动态</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航