CSS 移动弹性布局
最编程
2024-05-04 17:28:50
...
一级标题
二倍图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片</title>
<style>
div{
width: 500px;
height: 500px;
border: 2px solid red;
background: url(../images/01.jpg) no-repeat;
/* background-size: 500px 200px; */
/* cover要完全覆盖div盒子,可能有部分背景图片显示不全 */
background-size: cover;
/* contain高度和宽度等比例拉伸 当宽度或者高度铺面div盒子就不再进行拉伸了 可能有部分空白区域*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css初始化normalize.css
npm install normalize.css
盒子模型box-sizing
<style>
div:nth-child(1){
/* 有这句话padding和border不会撑大盒子了,让盒子变成css3盒子模型 */
box-sizing: border-box;
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
border: 10px solid blue;
}
</style>
特殊样式
<style>
/* 去除高亮 */
a{
-webkit-tap-highlight-color:transparent;
}
/* 去除外观效果 */
input{
-webkit-appearance:nane;
}
/* 禁用长按页面时弹出菜单 */
/* img,a{-webkit-touch-callout:none;} */
</style>
</head>
<body>
<a href="#">黑马</a>
<input type="button" value="按钮">
</body>
流式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>流式布局</title>
<style>
*{
margin: 0;
padding: 0;
}
section{
width: 100%;
max-width: 980px;
min-width: 320px;
}
section div{
float: left;
width: 50%;
height: 400px;
}
section div:nth-child(1){
background-color: pink;
}
section div:nth-child(2){
background-color: purple;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>
二级标题
弹性布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,
maximum-scale=1.0,minimun-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
div{
display: flex;
width: 80%;
height: 300px;
background-color: pink;
justify-content: space-around;
}
div span{
width: 150px;
height: 100px;
background-color: purple;
margin-left: 5px;
flex:1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
父项属性
主轴
简写
三级标题
子项属性
flex属性定义子项目分配剩余空间,用flex来表示占多少份数
flex:number;
align-self控制子项自己在侧轴上的排列方式
span:nth-child(2){
align-self:flex-end;
}
order属性定义项目的排列顺序,越小越靠前
默认是0,取-1比0小所以在前面
四级标题
携程网首页案例
线性渐变
效果图
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/index.css">
<title>携程在手,说走就走</title>
</head>
<body>
<!-- 顶部搜索 -->
<div class="search-index">
<div class="search">搜索:目的地/酒店/景点/航班号</div>
<a href="#" class="user">我 的</a>
</div>
<!-- 焦点图模块 -->
<div class="focus">
<img src="../upload/focus.jpg" alt="">
</div>
<!-- 局部导航栏 -->
<ul class="local-nav"><li>
<a href="#" title="景点玩乐">
<span class="local-nav-icon-icon1"></span>
<span>景点玩乐</span>
</a>
</li>
<li>
<a href="#" title="景点玩乐">
<span class="local-nav-icon-icon2"></span>
<span>景点玩乐</span>
</a>
</li>
<li>
<a href="#" title="景点玩乐">
<span class="local-nav-icon-icon3"></span>
<span>景点玩乐</span>
</a>
</li>
<li>
<a href="#" title="景点玩乐">
<span class="local-nav-iconicon4"></span>
<span>景点玩乐</span>
</a>
</li>
<li>
<a href="#" title="景点玩乐">
<span class="local-nav-icon-icon5"></span>
<span>景点·玩乐</span>
</a>
</li>
</ul>
<!-- 主导航栏 -->
<nav>
<div class="nav-common">
<div class="nav-items">
<a href="#">海外酒店</a>
</div>
<div class="nav-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="nav-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
</div>
<div class="nav-common">
<div class="nav-items">
<a href="#">海外酒店</a>
</div>
<div class="nav-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="nav-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
</div>
<div class="nav-common">
<div class="nav-items">
<a href="#">海外酒店</a>
</div>
<div class="nav-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="nav-items">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
</div>
</nav>
<!-- 侧导航栏 -->
<ul class="subnav-entry">
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span>电话费</span>
</a>
</li>
<li>
<a href="#">
<span class="subnav-entry-icon"></span>
<span>电话费</span>
</a>
</li>
</ul>
<!-- 销售模块 -->
<div class="sales-box">
<div class="sales-hd">
<h2>热门活动</h2>
<a href="#" class="more">获取更多福利</a>
</div>
<div class="sales-bd">
<div class="row">
<a href="#">
<img src="../upload/pic1.jpg" alt="">
</a>
<a href="#">
<img src="../upload/pic2.jpg" alt="">
</a>
</div>
<div class="row">
<a href="#">
<img src="../upload/pic3.jpg" alt="">
</a>
<a href="#">
<img src="../upload/pic4.jpg" alt="">
</a>
</div> <div class="row">
<a href="#">
<img src="../upload/pic5.jpg" alt="">
</a>
<a href="#">
<img src="../upload/pic6.jpg" alt="">
</a>
</div>
</div>
</div>
</body>
</html>
CSS
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #222;
}
div {
box-sizing: border-box;
}
/* 搜索模块 */
.search-index {
display: flex;
/* 固定定位跟父级没有关系 它以屏幕为准 */
position: fixed;
top: 0;
left: 50%;
/* 固定的盒子应该有宽度 */
-webkit-transform: translateX(-50%)