CSS

如果想要实现背景颜色渐变效果：

left是从左边开始，如果想要对角线比如，左上角就是left top，渐变效果始终是沿着一条线来实现的。

下面是跟着视频教学用flex布局写的一个移动端网页：

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,minimum-scale=1.0"><meta http-equiv="x-ua-compatible" content="ie=edge"><link rel="stylesheet" href="CSS/normalize.css"><link rel="stylesheet" href="CSS/demo2.css"><title>想死</title><style></style>
</head>
<body><div class="search-index"><div class="search">即使前路艰险，我也甘之如饴</div><a href="#" class="user">我 的</a></div><div class="focus"><a href="#"><img src="upload/focus.jpg" alt=""></a></div><ul class="local-nav"><li><a href="#" title="lxh"><span class="local-nav-icon"></span><span>重生之</span></a></li><li><a href="#" title="lxh"><span class="local-nav-icon"></span><span>各大</span></a></li><li><a href="#" title="lxh"><span class="local-nav-icon"></span><span>学科</span></a></li><li><a href="#" title="lxh"><span class="local-nav-icon"></span><span>刻不容缓</span></a></li><li><a href="#" title="lxh"><span class="local-nav-icon"></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代码：

*
{margin:0px;padding:0px;
}
li
{list-style:none;
}
a
{text-decoration:none;color:#ccc;
}
div
{box-sizing:box-border;
}
body
{width:100%;max-width:540px;min-width:320px;background-color:#ccc;margin:0 auto;
}
.search-index
{display:flex;position:fixed;top:0px;left:50%;width:100%;min-width:320px;max-width:540px;transform:translateX(-50%);height:44px;background-color:#fff;box-sizing:border-box;border-top:1px solid #ccc;border-bottom:1px solid #ccc;
}
.search
{position:relative;flex:1;height:26px;font-size:13px;color:#666;padding-left:30px;line-height:24px;border:2px solid #ccc;border-radius:5px;margin:7px 10px;box-shadow:0 2px 4px rgba(0,0,0,.2);
}
.search::before
{content:"";position:absolute;top:5px;left:5px;width:15px;height:15px;background:url(../images/sprite.png) no-repeat -59px -279px;background-size:104px auto;
}
.user
{width:44px;height:44px;font-size:12px;text-align:center;line-height:12px;color:#099fde;
}
.user::before
{content:"";display:block;width:23px;height:23px;background:url(../images/sprite.png) no-repeat -59px -194px;background-size:104px auto;margin:4px auto 0;
}
.focus
{margin-top:44px;
}
.focus a img
{width:100%;
}
.local-nav
{display:flex;width:100%;height:64px;margin:3px 4px;background-color:#fff;border-radius:8px;
}
.local-nav li
{flex:1;float:left;
}
.local-nav a
{display:flex;flex-direction:column;align-items:center;color:black;font-size:12px;
}
.local-nav-icon
{width:32px;height:32px;background:url(../images/localnav_bg.png) no-repeat 0 0;background-size:32px auto;margin-top:5px;margin-bottom:5px;
}
.local-nav li:nth-child(2) a .local-nav-icon
{background-position:0 -32px;
}
.local-nav li:nth-child(3) a .local-nav-icon
{background-position:0 -64px;
}
.local-nav li:nth-child(4) a .local-nav-icon
{background-position:0 -96px;
}
.local-nav li:nth-child(5) a .local-nav-icon
{background-position:0 -128px;
}
nav
{width:100%;border-radius:8px;margin:0 4px 3px;
}
.nav-common
{overflow:hidden;display:flex;height:88px;width:100%;background:-webkit-linear-gradient(left,#f75c53,#f7994b);border-radius:8px;
}
nav .nav-common:nth-child(2)
{margin:3px 0px;background:-webkit-linear-gradient(left,#4b90eb,#51bbeb);
}
nav .nav-common:nth-child(3)
{background:-webkit-linear-gradient(left,#34c3a7,#67d459);
}
nav .nav-common .nav-items
{flex:1;display:flex;flex-direction:column;font-size:14px;text-align:center;line-height:44px;
}
nav .nav-common .nav-items:nth-child(-n+2)
{border-right:1px solid #fff;
}
nav .nav-common .nav-items a
{flex:1;text-shadow:1px 1px rgba(0,0,0,.2);color:#fff;
}
nav .nav-common .nav-items a:nth-child(1)
{border-bottom:1px solid #fff;
}
nav .nav-common .nav-items:nth-child(1) a
{border:0;background:url(../images/hotel.png) no-repeat bottom center;background-size:121px auto;
}
nav .nav-common .nav-items:nth-child(1) a
{border:0;background:url(../images/hotel.png) no-repeat bottom center;background-size:121px auto;
}
.subnav-entry
{display:flex;flex-wrap:wrap;flex-content:center;width:100%;border-radius:8px;background-color:#fff;margin:0 4px;padding:5px 0px;
}
.subnav-entry li
{flex:20%;float:left;
}
.subnav-entry li a
{display:flex;flex-direction:column;align-items:center;font-size:14px;color:#000;
}
.subnav-entry-icon
{width:28px;height:28px;background:url(../images/subnav-bg.png) no-repeat 0 0;background-size:30px auto;margin-top:4px;
}
.subnav-entry li:nth-child(2) a .subnav-entry-icon
{background-position:0 -30px;
}
.subnav-entry li:nth-child(3) a .subnav-entry-icon
{background-position:0 -67px;
}
.subnav-entry li:nth-child(4) a .subnav-entry-icon
{background-position:0 -105px;
}
.subnav-entry li:nth-child(5) a .subnav-entry-icon
{background-position:0 -137px;
}
.subnav-entry li:nth-child(6) a .subnav-entry-icon
{background-position:0 -170px;
}
.subnav-entry li:nth-child(7) a .subnav-entry-icon
{background-position:0 -210px;
}
.subnav-entry li:nth-child(8) a .subnav-entry-icon
{background-position:0 -243px;
}
.subnav-entry li:nth-child(9) a .subnav-entry-icon
{background-position:0 -272px;
}
.subnav-entry li:nth-child(10) a .subnav-entry-icon
{background-position:0 -304px;
}
.sales-box
{width:100%;background-color:#fff;border-top:1px solid #bbb;border-radius:8px;margin:4px;
}
.sales-hd
{position:relative;height:44px;border-bottom:1px solid #ccc;
}
.sales-hd h2
{text-indent:-999px;overflow:hidden;
}
.sales-hd h2::after
{position:absolute;top:10px;left:8px;content:"";width:79px;height:15px;background:url(../images/hot.png) no-repeat 0 -20px;background-size:79px auto;
}
.sales-hd .more
{position:absolute;right:5px;top:11px;background:-webkit-linear-gradient(left,#ff4d69,#ffa1d1);border-radius:8px;color:#fff;font-size:14px;text-align:center;padding:3px 20px 3px 8px;
}
.sales-hd .more::after
{content:"";position:absolute;top:7px;right:9px;width:7px;height:7px;border-top:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg);
}
.sales-bd div
{display:flex;
}
.sales-bd .row a
{flex:1;border-bottom:1px solid #eee;
}
.sales-bd .row a img
{width:100%;
}
.sales-bd .row a:nth-child(1)
{border-right:1px solid #eee;
}