一、手机端通用布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机端通用布局</title>
<style>
a{
text-decoration: none;
color: #555555;
}
a{
border-right: 1px solid white;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
a:last-of-type{
border-right: none;
}
a:hover{
background: linear-gradient(to top,lightblue,white);
box-shadow: 0 0 5px #888;
}
</style>
</head>
<body>
<header>起点小说网</header>
<main>内容
</main>
<footer>
<a href="">新浪</a>
<a href="">qq</a>
<a href="">php中文网</a>
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、flex实现圣杯布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex实现圣杯布局</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
.header,footer{
box-sizing: border-box;
background-color: #555555;
height: 50px;
}
.main{
box-sizing: border-box;
flex: 1;
background-color: #9ad3d4;
display: flex;
}
.left{
box-sizing: border-box;
width: 200px;
background-color: #eeddee;
}
.right{
box-sizing: border-box;
width: 200px;
background-color: lightsalmon;
}
.center{
box-sizing: border-box;
flex: 1;
background-color: yellow;
}
.left{
order: 1;
}
.center{
order: 2;
}
.right{
order: 3;
}
</style>
</head>
<body>
<header class="header">头部</header>
<main class="main">
<article class="center">内容区</article>
<div class="left">左边栏</div>
<div class="right">右边栏</div>
</main>
<footer class="footer">底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、弹性布局实现登录表单
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局实现登录表单</title></title>
<style>
*{
margin: 0;
padding: 0;
/*outline: 1px dashed;*/
}
body{
display: flex;
height: 100vh;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
color: #444;
font-weight: lighter;
background: linear-gradient(to top,lightgreen,white,lightgreen);
}
.container{
box-sizing: border-box;
width: 300px;
height: 20px;
position: relative;
top: -60px;
}
h3{
text-align: center;
margin-bottom: 15px;
font-weight: lighter;
}
form{
display: flex;
flex-flow: column nowrap;
border: 1px solid gray;
padding: 15px;
border-radius: 10px;
background: linear-gradient(to left bottom,lightblue,white);
}
form:hover{
background: linear-gradient(to top,lightcyan,white);
}
form >div{
display: flex;
margin: 10px 0;
}
form > div > input {
flex: 1;
margin-left: 10px;
padding-left: 6px;
border: 1px solid #888;
border-radius: 8px;
}
form div > button {
flex: 1;
border-radius: 8px;
background-color: lightseagreen;
color: white;
height: 24px;
letter-spacing: 20px;
border: none;
}
form >div > button:hover{
background-color: lightcoral;
box-shadow: 0 0 5px #888;
}
</style>
</head>
<body>
<div class="container">
<h3>管理员登陆</h3>
<form action="">
<div>
<label for="email">邮箱：</label>
<input type="email" id="'email" name="email" placeholder="hyx000@qq.com">
</div>
<div>
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="不能少于6位">
</div>
<div>
<button>提交</button>
</div>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、商城首页flex布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<style>
body {
font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
display: flex;
box-sizing: border-box;
flex-direction: column;
}
/*初始化*/
*{
margin: 0;
padding: 0;
}
/*顶部导航1*/
header {
background-color: black;
box-sizing: border-box;
display: flex;
justify-content: center;
}
header > nav {
box-sizing: border-box;
display: flex;
width: 1230px;
justify-content: space-between;
}
header > nav > ul {
display: flex;
justify-content: space-between;
}
header > nav > ul > a {
text-decoration-line: none;
color: darkgrey;
/*border-right: 1px solid darkgrey;*/
margin: 10px;
font-size: smaller;
justify-content: space-between;
}
header > nav > ul > a:hover {
color: white;
}
/*内容区*/
main {
display: flex;
flex-direction: column;
align-items: center;
}
container {
width: 1230px;
display: flex;
justify-content: space-between;
}
/*次级导航*/
container > ul:first-of-type {
box-sizing: border-box;
margin: 15px 0;
display: flex;
}
container > ul:nth-of-type(2){
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
container > ul:nth-of-type(2) > a {
text-decoration-line: none;
color: black;
font-size:1rem;
margin:auto 10px ;
}
container > ul:nth-of-type(2) > a:hover {
color: #FF6700 ;
}
container > ul:last-of-type {
display: flex;
justify-content: flex-start;
}
container > ul:last-of-type input {
margin: auto 0;
height: 40px;
width: 220px;
}
container > ul:last-of-type li {
margin: auto 0;
}
/*规定页面主体框架*/
article {
width: 1230px;
display: flex;
}
/*上部分边框标签*/
article > ul:first-of-type {
width: 235px;
height: 455px;
display: flex;
flex-direction: column;
align-items: center;
background-color:#8B94A1;
justify-content: space-evenly;
}
article > ul:first-of-type > a{
width: 100%;
padding:12px 0;
text-decoration-line: none;
color: white;
display: flex;
justify-content: space-around;
}
article > ul:first-of-type > a:first-of-type {
margin-top: 10px;
}
article > ul:first-of-type > a:hover {
background-color:#FF6700;
}
article > ul:first-of-type > a:last-of-type {
margin-bottom: 10px;
}
article > ul:last-of-type {
flex-grow: 1;
}
/*中部推荐图片*/
list {
width: 1230px;
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<a href="">小米商城</a>
<a href="">MIUI</a>
<a href="">loT</a>
<a href="">云服务</a>
<a href="">金融</a>
<a href="">有品</a>
<a href="">小爱开放平台</a>
<a href="">企业团购</a>
<a href="">资质证明</a>
<a href="">协议规则</a>
<a href="">下载app</a>
<a href="">Select Location</a>
</ul>
<ul>
<a href="">登录</a>
<a href="">注册</a>
<a href="">消息通知</a>
<a href="">购物车</a>
</ul>
</nav>
</header>
<main>
<container>
<ul>
<a href="">
<img style="margin: auto 0" src="img/logo.JPG" height="52" width="54"/>
</a>
</ul>
<ul>
<a href="">小米手机</a>
<a href="">Redmi红米</a>
<a href="">电视</a>
<a href="">笔记本</a>
<a href="">家电</a>
<a href="">路由器</a>
<a href="">智能硬件</a>
<a href="">服务</a>
<a href="">社区</a>
</ul>
<ul>
<input type="text">
<li>
<button><img src="img/so.JPG" height="38" width="45"/></button>
</li>
</ul>
</container>
<article>
<ul>
<a href="">
<p>手机 电话卡</p>
<span>></span>
</a>
<a href="">
<p>电视 盒子</p>
<span>></span>
</a>
<a href="">
<p>笔记 本平板</p>
<span>></span>
</a>
<a href="">
<p>家电 插线板</p>
<span>></span>
</a>
<a href="">
<p>出行 穿戴</p>
<span>></span>
</a>
<a href="">
<p>智能 路由器</p>
<span>></span>
</a>
<a href="">
<p>电源 配件</p>
<span>></span>
</a>
<a href="">
<p>健康 ***</p>
<span>></span>
</a>
<a href="">
<p>耳机 音箱</p>
<span>></span>
</a>
<a href="">
<p>生活 箱包</p>
<span>></span>
</a>
</ul>
<ul>
<img src="img/banner.JPG" height="455" width="990"/>
</ul>
</article>
<list>
<a href=""><img src="img/1.JPG" height="175" width="235"/></a>
<a href=""><img src="img/2.JPG" height="175" width="315"/></a>
<a href=""><img src="img/3.JPG" height="175" width="315"/></a>
<a href=""><img src="img/4.JPG" height="175" width="315"/></a>
</list>
</main>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
