小花带你一周入门html+css（七）常见布局及定位使用丨【WEB前端大作战】
【摘要】 相信大家应该都听过说：Java、Asp.net、Php、Python、C、C++、C#、网站前端，网页设计等这些技术，但是可能你不知道，这些技术都需要掌握两个基础的技术—html+css。接下来我将带领大家一起，在一周的时间内，轻松搞定这两个技术。
今天我们来了解一下css常见布局及定位使用
等高布局、圣杯布局、固定定位、右下角的弹窗广告、对联广告、导航跟随、返回顶部等
CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时我们就已经能够对网页中各个元素进行精准的排版，做出符合我们意愿的网页啦！
关于CSS的各种属性，我们还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。我们需要改变边框，那就是“border”，那我们需要右侧边框做一些改变，那就是“border-right”。很明显，接下来按照我们的需求还有“右边框的宽度——border-right-with”，”右边框颜色——border-right-color”等等等，诸如此类~
完全就是我们需要什么，只要凭着需求去寻找。~follow me~
当你做 psd 设计的代码，发现问题，可能找不到答案或没有人帮你回答，也不要急，这时最好看看别人网页的布局结构，主要看 html 布局框架，进行借鉴（当然网上还有很多结构代码很槽糕）。然后了解美工图如何分析、如何使用 PS 工具切出需要的素材、如何使用这些切出的图片素材进行布局、布局技巧、兼容性解决与避免等。
总之：就是让自己布局时候能知道大的布局结构如何布局，建立布局思想与技巧。
首先我们拿到一张网页美工图片我们将从上下、上中下、左右、上中（中包括左右）下布局框架来思考。由此我们写页面 CSS 和 html 时候就先从上到下从外到内原则写 CSS 与 html。
下面我们学习一下常见的布局
1.等高布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>等高布局</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{
width: 800px;
margin: 0 auto;
border:5px solid #f00;
overflow: hidden;
}
.left{
width: 200px;
float: left;
background: orange;
padding-bottom: 8000px;
margin-bottom: -8000px;
}
.right{
width:600px;
float: right;
background:#ff0;
padding-bottom: 8000px;
margin-bottom: -8000px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
<p>等高布局</p>
</div>
<div class="right">
<p>左右两边通过padding-bottom=8000px,margin-bottom:-8000px;造成左右两边等高。</p>
</div>
</div>
</body>
</html>
2.圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣怀布局</title>
<style type="text/css">
*{margin: 0;padding: 0;border: 0;}
.box{
/*width: 1000px;*/
height: 800px;
margin: 0 auto;
position: relative;
}
.header, .footer {
background: #ccc;
text-align: center;
height: 40px;
line-height: 40px;
}
.footer {
clear: both;
}
.left{
width: 200px;
height: 800px;
background: #f00;
position: absolute;
top:0;
left: 0;
}
.right{
width: 200px;
height: 800px;
background: #ff0;
position: absolute;
top:0;
right: 0;
}
.center{
height: 800px;
padding: 0 200px 0 200px;
background: orange;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="box">
<div class="left">left</div>
<div class="center">
<p>中间不设宽，左右设宽并且绝对定位，定在左右两端。中间留出两边padding的值。center</p>
</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>
3.固定定位
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>固定定位</title>
<style type="text/css">
body { height: 5000px; color:#fff;}
* { margin: 0; padding: 0; }
.top { position:fixed; width: 100%; height: 50px; line-height: 50px; text-align: center; background: #fc0; left: 0; top: 10px;
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop + 10));
}
*html{
background-image:url(about:blank);
background-attachment:fixed;
}
.bottom { position:fixed; width: 100%; height: 50px; line-height: 50px; text-align: center; background: #f70; left: 0; bottom: 0;
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop + 10+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}
.center { position:fixed; width: 100%; height: 50px; line-height: 50px; text-align: center; background: #c70; left: 0; top: 50%; margin: -25px 0 0 0;
_position:absolute;
_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + 10 + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
</style>
</head>
<body>
<div class="top">我是头部固定定位</div>
<div class="center">我是垂直居中的固定定位</div>
<div class="bottom">我是底部固定定位</div>
</body>
</html>
4.右下角的弹窗广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>右下角弹窗</title>
<style type="text/css">
* { margin: 0; padding: 0; }
.ad { position:fixed; right: 0; bottom: -171px; }
.ad button { position:absolute; right: 0; top: 0; }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//页面加载完成之后 只要通过animate控制bottom为0即可
$('.ad').animate({'bottom':'0px'},500).fadeOut().fadeIn();
$('button').click(function(e) {
$('.ad').animate({'bottom':'-171px'},500);
});
})
</script>
</head>
<body>
<div class="ad">
<button>关闭</button>
<img src="add.png" width="453" height="171" />
</div>
</body>
</html>
5.对联广告-一直固定在某一位置的展示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单对联广告</title>
<style type="text/css">
body { height: 5000px; }
* { margin: 0; padding: 0; }
.leftAd,.rightAd { position:absolute; top: 50px; }
.leftAd { left: 0; }
.rightAd { right: 0; }
.closeBtn { position:absolute; right: 0; bottom: 0; }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
//我们需要在滚动条滚动的时候 才去执行让图片移动
$(window).scroll(function(e) {
var st = $(window).scrollTop() + 50;//获取窗口滚动条滚动的垂直距离
$('.leftAd,.rightAd').stop().animate({'top':st + 'px'},500);
});
})
</script>
</head>
<body>
<div class="leftAd"><img src="1.png" width="53" height="351" /><button class="closeBtn">关闭</button></div>
<div class="rightAd"><img src="1.png" width="53" height="351" /><button class="closeBtn">关闭</button></div>
</body>
</html>
6.导航跟随-如classroom网页导航一直固定在顶部
<!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">
<title>Classroom平台首页</title>
<link rel="stylesheet" href="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/styles.3606f7e21dc761ff3d1a.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
/*css reset*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,pre, form, fieldset, input, textarea, p, blockquote, th, td {padding: 0; margin: 0;font-family:"PingFang SC",PingFangSC-Regular,"Helvetica Neue","Microsoft YaHei Regular","Microsoft YaHei","宋体",sans-serif}
fieldset, img { border: 0; }
table {border-collapse: collapse; border-spacing: 0;}
ol, ul {list-style: none; }
address, caption, cite, code, dfn, em, strong, th, var { font-weight: normal; font-style: normal;}
caption, th {text-align: left;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;font-size: 100%;}
q:before, q:after {content: '';}
abbr, acronym {border: 0;}
a{text-decoration:none;color:#808080;}
/*导航样式*/
body{background-color: #fff;}
.nav { position: fixed;z-index: 1000; display: flex; align-items: center; height: 60px; width: 100%; padding: 0 40px; background-color: #fff; border-bottom: 1px solid #eee; }
.nav .nav_l { float: left; } /*logo*/
.nav_l h1 { float: left; width: 120px; height: 40px; background-image: url(https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/logo.ee14f183979fd61abac2.svg); background-size: 100% 100%; }
.nav_l h1 a { width: 100%; height: 100%; display: inline-block; }
/*导航菜单*/
.nav_l ul { float: left; margin: 6px 0 0 40px; }
.nav_l ul li { float: left; }
.nav_l ul li.act a { color: #5e7ce0; }
.nav_l ul li a:hover { color: #5e7ce0; }
.nav_l ul li a { display: block; float: left; font-size: 14px; color: #293040; line-height: 32px; margin-right: 48px; font-weight: bold; } /*导航条右侧*/
.nav_r { display: flex; margin-left: auto; line-height: 59px; height: 100%; }
.nav_r ul { display: none; }
.nav_r input[type=button] { margin-right: 42px; padding: 4px 20px; min-width: 80px; font-size: 14px; height: 32px; line-height: 20px; border: none; color: #293040; background: #fafafa; border: 1px solid #e3e5e9; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .05); border-radius: 16px; }
.nav_r input[type=button]:hover { transition: color .3s cubic-bezier(.645, .045, .355, 1); border: 1px solid #5e7ce0; }
.help, .user { padding: 0 10px; }
.help-icon { display: inline-block; width: auto; height: 40px; text-align: center; line-height: 40px; cursor: pointer; transition: all .3s; font-family: icomoonnew; font-size: 14px; font-weight: 400; text-transform: none; line-height: 40px; vertical-align: middle; -webkit-font-smoothing: antialiased; }
.help-icon:before { content: "\E0C5"; }
.user-icon { display: inline-block; width: 30px; height: 30px; line-height: 30px; font-size: 12px; border-radius: 100%; background-color: #ff8f74; color: #fff; text-align: center; }
.userid-icon { margin-left: 5px; }
/*轮播图*/
.con{width:100%;height:517px;position:relative;top:60px;overflow: hidden;}
.con ol{position: absolute;bottom:45px; width:100% ;text-align: center;transform: translate3d(0,0,0);z-index: 10;}
.con ol li{width: 8px;height: 8px;margin:0 2px;display: inline-block;border-radius: 100%;background: #000;opacity: .2;}
.con ol li.current{width: 28px!important;background:#5e7ce0!important;border-radius: 5px!important;opacity: 1;}
/*内容区域*/
.content {width: 1200px;margin: 0 auto; }
/*介绍区域*/
.content .intro-box {padding: 30px;margin-bottom:60px;position: relative;top: 36px;z-index: 2; width: 1200px;background: #fff;box-shadow: 0 0 20px 0 rgba(41,48,64,.1);border-radius: 5px;align-items: center; }
.intro-box-left{padding-right: 40px;width:90%;font-size: 16px;color: #5e6678;line-height: 32px;}
.intro-box-right{position: absolute;right: 40px;top:50%;margin-top:-16px;}
.intro-box-right input[type=button]{border-radius: 16px; margin-right: 12px; padding: 4px 20px; min-width: 80px; height: 32px; border: none; font-size: 14px!important; line-height: 20px; background-color: transparent; transition: .2s; white-space: nowrap; color: #fff; background-color: #5e7ce0;}
.intro-box-right input[type=button]:hover{color:#526ecc;}
/*云课堂区域*/
.content .class-box ,.market-box,.activity-box{ width:1200px; text-align:center; padding: 30px 0 40px;}
.class-box-title h3{font-size: 24px; font-weight:bold; color: #293040; margin: 0 0 16px;}
.class-box-title span{font-size: 16px; color: #575d6c;}
.course{overflow: hidden; padding-top: 40px;}
.course li{ width:380px; margin: 0 30px 30px 0;float: left; border: 1px solid #f7f8fa;box-shadow: 0 4px 16px 0 rgba(124,142,227,.12); border-radius: 12px;cursor: pointer;background: #fff; }
.content .course li:hover,.market-box .course li:hover{transform: translateY(-6px); transition: all .1s ease-out; box-shadow: 0 16px 20px 0 rgba(124,142,227,.24); z-index: 50;}
.course li.no_right{margin-right: 0;}
.course .img{width: 100%; height: 200px;border-radius: 12px 12px 0 0; overflow: hidden; background-image: url(https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/cloud-class.5974862e24f459dd518a.png); background-position: 0px 0px;}
.course li:nth-child(2) .img{background-position:0px -200px;}
.course li:nth-child(3) .img{background-position:0px -400px;}
.course li:nth-child(4) .img{background-position:0px -600px;}
.course li:nth-child(5) .img{background-position:0px -800px;}
.course li:nth-child(6) .img{background-position:0px -1000px;}
.course-content{padding:20px;text-align:left;}
.course h4{width: 100%; font-size: 16px; color: #293040; text-align:left;overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight:bold;}
.course .top{margin-top: 8px; color: #959eb2; font-size: 12px;margin-bottom: 30px;}
.icon-user,.icon-address{background-image: url(https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/classroom.sprite.d2922e64a1fdfbcab62c.png);display: inline-block;width: 16px;height: 16px;vertical-align: text-top;}
.icon-user{background-position: -312px -464px;}
.icon-address{background-position: -408px -440px;margin-left: 10px;}
.time{float: right;border-radius: 8px;border: 1px solid #eee;border-radius: 12px;padding: 2px 8px;}
.center{height: 48px; line-height: 24px; width: 100%;font-size: 14px; color: #5e6678; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; letter-spacing: .5px; word-break: break-all;}
.bottom{border-top: 1px solid rgba(0,0,0,.05);margin-top: 5px;padding:14px;}
.bottom input[type=button]{font-size: 14px; text-align: center; line-height: 20px; color: #e41f2b; padding: 2px 4px; border-radius: 2px; border:none;background-color: rgba(228,31,43,.1); float: right;}
.more{height: 40px; font-size: 16px; color: #293040!important; line-height: 24px; background: #fafafa; border: 1px solid #e3e5e9; box-shadow: 0 2px 4px -1px rgba(0,0,0,.05); border-radius: 20px; margin-right: 12px; padding: 9px 20px; min-width: 80px;}
.icon-chevron-right{position: relative; top: 3px; left: -3px; font-size: 16px;}
</style>
</head>
<body>
<div class="nav">
<!--页面导航区域-->
<div class="nav_l">
<h1 class="public-logo"><a href="#"></a></h1>
<ul>
<li class="act"><a href="#">首页</a></li>
<li><a href="#">教学市场</a></li>
<li><a href="#">云课堂</a></li>
<li><a href="#">培训认证</a></li>
<li><a href="#">云端实验室</a></li>
<li><a href="#">新工科实验班</a></li>
<li><a href="#">学习交流</a></li>
</ul>
</div>
<div class="nav_r">
<a href="#" > <input type="button" value="教学平台" /></a>
<div class="help">
<span class="help-icon"></span>
<ul>
<li><a href="#"><span class="help-icon"></span>帮助中心</a></li>
<li><a href="#"><span class="forums-icon"></span>用户论坛</a></li>
<li><a href="#"><span class="version-icon"></span>版本历程</a></li>
</ul>
</div>
<div class="user">
<span class="user-icon">HW</span>
<span class="userid-icon">hw84740751</span>
<ul>
<li><a href="#"><span></span>费用中心</a></li>
<li><a href="#"><span></span>Classroom控制台</a></li>
<li><a href="#"><span></span>子账号管理</a></li>
<li><a href="#"><span></span>意见反馈</a></li>
<li><a href="#"><span></span>退出登录</a></li>
</ul>
</div>
</div>
</div>
<div class="header">
<!--页面头部轮播图区域-->
<!--提示：不需要实现轮播图效果-->
<div class="con">
<ul>
<li><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/banner-1.5a1de8473b0940dd9515.jpg" width="100%" border="0" alt=""></li>
<li><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/banner-2.d69113832d9d49869f17.jpg" width="100%" border="0" alt=""></li>
<li><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/banner-3.78529fb07dac84804fe4.jpg" width="100%" border="0" alt=""></li>
<li><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/banner-4.883a698e6a7fc4d886c6.jpg" width="100%" border="0" alt=""></li>
<li><img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.12.003/banner-5.ca2846867357442a092f.jpg" width="100%" border="0" alt=""></li>
</ul>
<span>
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</span>
</div>
</div>
<div class="content">
<!--页面内容区域-->
<div class="intro-box">
<!--classroom介绍区域-->
<div class="intro-box-left">
Classroom是基于华为云的云上软件教学服务，支持高校师生实现备课、上课、作业、考试、实验、实训等全教学流程的线上教学，提供多类习题自动判题、企业级DevOps实训、免费在线习题库等众多高级特性辅助进行数字化教学转型。
</div>
<div class="intro-box-right">
<a href="#" > <input type="button" value="开始上课" /></a>
</div>
</div>
<div class="class-box">
<!--云课堂区域-->
<div class="class-box-title">
<h3>云课堂</h3>
<span>免费精品公开课，覆盖丰富知识点、课件与在线习题</span>
</div>
<ul class="course">
<li>
<div class="img"></div>
<div class="course-content">
<h4>区块链精品实践课</h4>
<div class="top">
<span class="user-name"><i class="icon-user"></i><span class="name-text"> Classroom</span></span>
<span class="address-name"><i class="icon-address"></i><span class="address-text"> 华为云</span></span>
<span class="time">6小时</span>
</div>
<p class="center">本课程由浅入深的介绍区块链技术缘起、原理机制、演进和发展现状，分享区块链典型应用场景及特点。了解华为云区块链的方案及特点，参与动手实验。从入门到实践，循序渐进一站式学习。</p>
<div class="bottom">
<input type="button" value="限时免费" />
</div>
</div>
</li>
<li>
<div class="img"></div>
<div class="course-content">
<h4>基于新工科的软件工程企业级专家实践课</h4>
<div class="top">
<span class="user-name"><i class="icon-user"></i><span class="name-text"> 马瑞新&姚冬、庄表伟等</span></span>
<span class="address-name"><i class="icon-address"></i><span class="address-text"> 大连理工大学&华为云</span></span>
<span class="time">6小时</span>
</div>
<p class="center">停课不停学，为了能够让同学们在家即可学习JAVA，大连理工大学软件学院基于华为云Classroom组织在线直播授课，采用基础知识讲解、在线编程、自动评分、任务闯关、项目训练等多种形式进行教学与实践，欢迎全国有JAVA学习和教学需求的学生和老师在线上观看教学。</p>
<div class="bottom">
<input type="button" value="限时免费" />
</div>
</div>
</li>
<li class="no_right">
<div class="img"></div>
<div class="course-content">
<h4>HE2E DevOps实践</h4>
<div class="top">
<span class="user-name"><i class="icon-user"></i><span class="name-text"> Classroom</span></span>
<span class="address-name"><i class="icon-address"></i><span class="address-text"> 华为云</span></span>
<span class="time">16小时</span>
</div>
<p class="center">HE2E即华为端到端的DevOps实施框架，集合了业界先进的实践，结合华为30年研发经验，形成的一套可操作可落地的敏捷开发方法论，并基于DevCloud工具链进行承载。</p>
<div class="bottom">
<input type="button" value="限时免费" />
</div>
</div>
</li>
<li>
<div class="img"></div>
<div class="course-content">
<h4>C语言程序设计</h4>
<div class="top">
<span class="user-name"><i class="icon-user"></i><span class="name-text"> Classroom</span></span>
<span class="address-name"><i class="icon-address"></i><span class="address-text"> 华为云</span></span>
<span class="time">96小时</span>
</div>
<p class="center">本课程适合作为高等学校计算机专业及相关专业C语言程序设计课程的教材，也可作为计算机等级考试参考书，还可供从事计算机软件开发人员参考使用。主要包含，C语言概述，数据类型，基本语句与结构化程序设计，数组，函数和模块化程序设计，指针，预处理命令，复杂数据类型，文件。附有习题，习题覆盖知识重点，题型丰富。</p>
<div class="bottom">
<input type="button" value="限时免费" />
</div>
</div>
</li>
<li>
<div class="img"></div>
<div class="course-content">
<h4>Web实践课</h4>
<div class="top">
<span class="user-name"><i class="icon-user"></i><span class="name-text"> Classroom</span></span>
<span class="address-name"><i class="icon-address"></i><span class="address-text"> 华为云</span></span>
<span class="time">96小时</span>
</div>
<p class="center">本门课程涵盖：WEB基础、CSS、JS、H5等教学内容组成，学生可以逐步提升前端开发能力。</p>
<div class="bottom">
<input type="button" value="限时免费" />
</div>
</div>
</li>
<li class="no_right">
<div class="img"></div>
<div class="course-content">
<h4>人工智能：算法与实践</h4>
<div class="top">
<span class="user-name"><i class="icon-user"></i><span class="name-text"> Classroom</span></span>
<span class="address-name"><i class="icon-address"></i><span class="address-text"> 华为云</span></span>
<span class="time">96小时</span>
</div>
<p class="center">本课程讲述的是有关人工智能算法与实践的内容，并介绍相关的数学基础、相关应用及工具，以及如何在实际环境中使用它们。课程不仅仅介绍了各种人工智能算法的理论知识，更是通过建立多个实际案例、习题测评，引导学生在实际项目中学到相关知识经验，同时老师可以灵活安排学生的学习任务，有效地对学生的知识吸收情况做针对性的解决。课程开发环境为python3.6及以上 + Anaconda3 。</p>
<div class="bottom">
<input type="button" value="限时免费" />
</div>
</div>
</li>
</ul>
<a href="#" class="more">查看更多<span class="icon-chevron-right"></span></a>
</div>
</div>
<div class="footer">
<!--页面尾部区域-->
<!--提示：页面尾部内容可以简化处理-->
</div>
</body>
</html>
7.返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>返回顶部</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body { height: 5000px; }
.toTop { background:url(1.png) no-repeat; width: 54px; height: 49px; position:fixed; right: 10px; bottom: 10px; display:none; }
.toTop:hover { background-image: url(2.png); }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
//console.log($(window).height());
if($(window).scrollTop() > $(window).height()){//当前滚动的高度大于窗口的高度 我们才让返回顶部按钮出现
$('.toTop').show();
}else{
$('.toTop').hide();
}
})
$('.toTop').click(function(e) {
$('body,html').animate({'scrollTop':'0px'},500);
});
})
</script>
</head>
<body>
<a href="javascript:;" class="toTop"></a>
</body>
</html>
不管学前端还是学后端，想提高自己的开发能力，最快的途径还是多练，因为就算看再多的文档和教程，自己不真正的动手写代码的话，不用两个月时间所学到的知识就忘记了，在真实项目中会遇到各种问题，不要一遇到问题就到处问别人，要培养自己遇到问题独立的去解决问题的能力。
可以在网上找别人的项目模仿着做，当你独立的完成一个项目以后，你会发现你已经入门了。
tips学习小技巧:
学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？anyway~希望大家可以成为一个优秀的前端！资历有限，错误难免，欢迎大力指正。
【WEB前端大作战】火热进行中：https://bbs.huaweicloud.com/blogs/255890
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）