实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子</title>
<link rel="stylesheet" href="0-1.css">
<style>
.a1{
border:2px dashed #f00;
margin:15px;
background:#cdc;
}
.a{
border:1px solid ;
padding:20px;
background:#ede;
}
.inline-flex{
display: inline-flex;
}
.flex{
display: flex;
}
</style>
</head>
<body>
<h3>1块级_弹性容器</h3>
<div class="a1 flex">
<div class="a">a1</div>
<div class="a">a2</div>
<div class="a">a3</div>
</div>
<hr>
<h3>2行内_弹性容器</h3>
<div class="a1 inline-flex">
<span class="a">a1</span>
<span class="a">a2</span>
<span class="a">a3</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<link rel="stylesheet" href="dh1.css">
<style>
a{
text-decoration:none;
background:lime;
color: #222;
padding:5px 10px;
margin:0 5px;
border-radius:8px 8px 0 0;
}
nav{
display: flex;
border-bottom:1px solid #ccc;
}
a:hover,a:focus,a:active{
background: firebrick;
color:#fff;
}
</style>
</head>
<body>
<nav>
<a href="">首页</a>
<a href="">教学视频</a>
<a href="">社区问答</a>
<a href="">软件下载</a>
<a href="">联系我们</a>
</nav>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航</title>
<style>
*{
/*outline:1px solid #ccc;*/
margin:10px;
padding: 10px;
}
a{
text-decoration:none;
background:lime;
color: #222;
padding:5px 10px;
margin:0 5px;
border-radius:8px 8px 0 0;
}
nav{
display: flex;
border-bottom:1px solid #ccc;
}
a:hover,a:focus,a:active{
background: firebrick;
color:#fff;
}
body, nav, main, article{
display:flex;
}
body, article{
flex-direction:column;
}
footer{
border-top:1px solid #ccc;
}
nav{
padding-bottom: 0;
}
</style>
</head>
<body>
<header>
<h1>收藏博客</h1>
</header>
<nav>
<a href="">首页</a>
<a href="">教学视频</a>
<a href="">社区问答</a>
<a href="">软件下载</a>
<a href="">联系我们</a>
</nav>
<main>
<article>
<img src="../img/2.jpg" alt=""/>
<p>PHP中文网因专业的讲师水平和高效的视频质量，推出的各种视频课程系列一直以来都深受大家喜爱。特别是《天龙八部》系列、</p>
<button>立即学习</button>
</article>
<article>
<img src="../img/2.jpg" alt=""/>
<p>PHP中文网因专业的讲师水平和高效的视频质量，推出的各种视频课程系列一直以来都深受大家喜爱。特别是《天龙八部》系列、</p>
<button>立即学习</button>
</article>
<article>
<img src="../img/2.jpg" alt=""/>
<p>PHP中文网因专业的讲师水平和高效的视频质量，推出的各种视频课程系列一直以来都深受大家喜爱。特别是《天龙八部》系列、</p>
<button>立即学习</button>
</article>
</main>
<footer>
<p>
copyright ©2018-2021 集藏天下
</p>
</footer>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例
