前端小白系列（1）——背景

最新推荐文章于 2023-07-09 17:12:03 发布

imLagre

最新推荐文章于 2023-07-09 17:12:03 发布

阅读量501

点赞数

分类专栏：前端工程文章标签：前端背景 LESS

本文链接：https://blog.csdn.net/imLagre/article/details/57151194

版权

前端工程专栏收录该内容

5 篇文章 0 订阅

订阅专栏

搭建好工程后，对于还没什么工作经验的博主决定先YY一下。

企业来说的话，前端手上应该会有设计图，之后便是了解清楚需求，再剖析整个项目的逻辑，整理出一个流程出来，理清好思路才能写得痛快。

好，YY结束。博主因为页面也没什么复杂的就直接省略以上步骤啦。

前面说到不能让页面那么“红果果”，于是博主第一件事便是去找图，而且一些组件功能如轮播图，可能也用得上，至于大家想贴什么图就随意了，只要不是那些会被河蟹的就好了。

基于导言中的页面效果，先得到下面这么个“基础设施”是必须的吧？

先上HTML代码吧。

<link rel="stylesheet" type="text/less" href="../css/style.less">
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script> -->
<!-- 引入LESS编译文件 -->
<script type="text/javascript" src="../../component/less.min.js"></script>
</head>
<body>
	<div id="wrap">
		<nav class="navbar">
			<ul>
				<li><a href="javascript:;" class="demo1">分页</a></li>
				<li><a href="javascript:;" class="demo2">轮播图</a></li>
				<li><a href="javascript:;" class="demo3">弹窗</a></li>
				<li><a href="javascript:;" class="demo4">表单验证</a></li>
			</ul>
		</nav>
	</div>

	<script type="text/javascript" src="../../component/jquery-3.0.0.js"></script>
	<!-- JS文件 -->
	<script type="text/javascript" src="../js/index.js"></script>

此处有个坑就是上一篇提到的gulpfile.js里的server任务，因为设置了root值，导致获取不到component文件下的less.min.js，所以出不来样式，删掉root后便解决了。当然，你也可以引入CDN来解决。

注意HTML标签的语义化。

然后是LESS的样式编写。

LESS的语法很方便，把常用的一些值定义成一个变量可以方便调用。一些未来可能需要更改的值建议也保存为一个变量，如页面的背景、字体等。

/* ------------------背景样式----------------- */
@bg-pic : '../images/bg.jpg'; //背景图片
@font-style : "Microsoft YaHei"; //页面字体

/* ------------------ 颜 色 -------------------*/
@red : red;
@orange : orange;
@yellow : yellow;
@green : green;
@aqua : aqua;
@blue : blue;
@purple : purple; //七彩
@gray : gray;

对背景的处理，这样即使拖动滚动条或者伸缩窗口，背景都能保持不错的显示。

body{
	background: url(@bg-pic) center center no-repeat fixed; //背景图片居中不重复并保持固定
	background-size: cover; //覆盖背景
}

内容显示区域居中，两侧留白。

#wrap{
	height: 100%;
	position: absolute;
	margin: 0 10%; //两侧留白
	top: 0;left: 0;right: 0;bottom: 0; //居中
}

然后就是对li的处理了。利用LESS方便的语法，博主决定让方块在鼠标悬停时使其浮起来。

.navbar{
	margin: 40px 100px;
	li{
		display: inline-block;
		min-width: 100px;
		height: 50px;
		line-height: 50px;
		margin-right: 10px;
		border: 1px solid lighten(@gray,20%);
		border-radius: 10px;
		cursor: pointer;
		text-align: center;
		font-size: 18px;

		-webkit-transition: 0.4s;
		transition: 0.4s;
		box-shadow: 3px 3px 5px darken(@gray,10%);
		&:nth-child(1){
			background-color: lighten(@red,10%);
		}
		&:nth-child(2){
			background-color: lighten(@orange,10%);
		}
		&:nth-child(3){
			background-color: lighten(@yellow,10%);
		}
		&:nth-child(4){
			background-color: lighten(@green,10%);
		}
		&:hover{
			box-shadow: 7px 7px 8px darken(@gray,20%);
			a{
				color: white;
			}
		}
	a{
		color: black;
	}
}
}

对比下上面的背景图就可以脑补效果啦。

很简单的效果，基本没遇到坑。

当然，要注意的还有几点：

1.浏览器前缀的补写。博主准备交给sublime的autofix插件了。大家也可以考虑使用prefixfree.js这个库。

2.兼容性代码。博主补两个链接：

http://www.jb51.net/css/469020.html

caniuse.com

3.移动端适配。如果是按照设计稿来做移动端的话，CSS中最好是使用rem作为数值单位。适配方案可参考网易或者淘宝移动端前端团队的开发思路。

接下来应该会直接开始写组件了，希望能严谨地写好JS吧。

imLagre

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端小白系列（1）——背景

搭建好工程后，对于还没什么工作经验的博主决定先YY一下。企业来说的话，前端手上应该会有设计图，之后便是了解清楚需求，再剖析整个项目的逻辑，整理出一个流程出来，理清好思路才能写得痛快。好，YY结束。博主因为页面也没什么复杂的就直接省略以上步骤啦。前面说到不能让页面那么“红果果”，于是博主第一件事便是去找图，而且一些组件功能如轮播图，可能也用得上，至于大家想贴什么图就随意了，只要不
复制链接

扫一扫