当前位置：首页 > article >正文

十一、实战案例

article 2025/2/3 11:28:40

一、案例介绍

前端测试工具browser-sync - 提升前端页面实现效率

browser-sync作用：

1.启动一个静态的http服务器，方便我们预览和实现；

2.监听文件变更，刷新页面。

官网地址：Browsersync - 省时的浏览器同步测试工具 | Browsersync 中文文档

安装browser-sync

npm install -g browser-sync

启动browser-sync

//--server 开启服务器模式 --files="**/*" - 监听所有文件的改变
browser-sync start --server --files="**/*"

会自动打开当前页面

初始化html

! + tab

二、实现header

1、分析设计稿

略

2.编写基本结构

3.编写header

加入标题区域

三、实现banner

<section class="banner">
        <ul>
            <li>
                <div class="feature feature1"></div>
                <p>特点1</p>
            </li>
            <li>
                <div class="feature feature2"></div>
                <p>特点2</p>
            </li>
            <li>
                <div class="feature feature3"></div>
                <p>特点3</p>
            </li>
        </ul>
    </section>

/* banner */
.banner {
    width: 690px;
    padding: 20px;
    /* 左右设置为auto，这样左右两边的边距就自动居中*/
    margin: 0 auto;
    /*
        元素的外边距设置为负值，从而使该元素的内容向外移动，与相邻元素重叠或者超出容器边界
        margin负值使用，可以参考https://blog.csdn.net/m0_74284133/article/details/138618224
    */
    margin-top: -105px;
    background: #f0f0f0;
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
}

.banner ul {
    text-align: center;
    /* 处理inline-block独有的间隙问题*/
    font-size: 0px;
}

.banner ul li {
    /*inline-block可以像文字一样进行排版，所以.banner ul可以直接写text-align-center*/
    display: inline-block;
    height: 160px;
    width: 180px;
    /* background: red; */
    text-align: center;/*文字居中*/
    /* 处理inline-block独有的间隙问题,重新设置字体大小*/
    font-size: 14px;
}

.banner ul li .feature {
    margin: 20px auto;
    background: #f90;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

注意：

margin负值使用：可以参考CSS中margin值及margin负值_margin设置负值-CSDN博客

四、实现main

   <section class="main">
        <div class="block block1">
            <img src="./1.png">
            <div class="blockText">
                <h2>知识全面讲解</h2>
                <ul>
                    <li>- 核心知识全面覆盖</li>
                    <li>- 涉猎非核心知识</li>
                    <li>- 无用知识看一看</li>
                </ul>
            </div>
        </div>
        <div class="block block1">
            <div class="blockText">
                <h2>知识深入讲解</h2>
                <ul>
                    <li>- 以点带面</li>
                    <li>- 知识讲解清楚深入</li>
                    <li>- 没讲解的知识也深入</li>
                </ul>
            </div>
            <img src="./2.png">
        </div>
    </section>

/* main */
.main {
    margin: 100px auto;
    width: 720px;
    /* background: red; */
}

.main .block{
    margin-bottom: 100px;
    /* 经过下面样式设置，width不够，我们通过将margin-left设置为负值，内容向左移动20px,这样能保证图片和文字在一行，不会因为宽度不够，导致换行*/
    margin-left: -20px;
}

/* 这里采用float布局*/
.main .block .blockText {
    float: left;
    width: 260px;
    line-height: 50px;
    color: #999;
    font-size: 24px;
    margin-left: 20px;
}

.main .block .blockText h2 {
    font-size: 36px;
    margin-bottom: 50px;
}

.main .block img {
    float: left;
    width: 440px;
    height: 235px;
}

/*清除浮动*/
.main .block:after {
    content: '';
    display: block;
    clear: both;
}

注意重点:

当我们使用float布局时，如果float之间有间距，导致宽度不够，我们可以采用给父元素设置margin负值的方式，为父元素内容多腾挪出一些空间。

四、footer和页面调整

/* footer */
footer {
    text-align: center;
    font-size: 12px;
    color: #999;
}

还有一个问题，就是顶部太宽了，感觉跨度有点大。

继续优化一下，

header nav {
    max-width: 1000px;
    margin: 0 auto;
}

优化后

如果要求比较多，要求footer在上下滚动时固定在底部，并且要求是限宽的

    <footer>
        <div class="footerContent">
            TooBug @2018
        </div>
    </footer>

修改footer样式

/* footer */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 12px;
    color: #999;
    text-align: center;
}

footer .footerContent{
    width: 1000px;
    margin: 0 auto;
    background: red;
}

实现效果：

五、动画

在此之前给banner加个好看动画过渡：

六、process

<div class="progress"></div>

.progress {
    position: absolute;
    width: 280px;
    height: 15px;
    left: 50%;
    /*
        left: 50%是起点，进度条的中心并不在起点，所以需要再向左移动-140px
    */
    margin-left: -140px;
    top: 22px;
    border-radius: 15px;
    /* background: red; */
    background: linear-gradient(135deg, red 0% ,red 33% , orange 33% , orange 66%, red  66%, red 100%);
    /* background-repeat: repeat-x; */
    background-size: 30px 15px;
}

让进度条动起来：

原理：通过background-position来定位背景图片，感觉像是滚动的。

.progress {
    position: absolute;
    width: 280px;
    height: 15px;
    left: 50%;
    /*
        left: 50%是起点，进度条的中心并不在起点，所以需要再向左移动-140px
    */
    margin-left: -140px;
    top: 22px;
    border-radius: 15px;
    border: 1px solid #999;
    /* background: red; */
    background: linear-gradient(135deg, red 0% ,red 33% , orange 33% , orange 66%, red  66%, red 100%);
    /* background-repeat: repeat-x; */
    background-size: 30px 15px;
    /*动画过渡，
        linear线性，infinite无限循环
    */
    animation: rolling .4s linear infinite;
}

@keyframes rolling {
    from {
        background-position: 0 0;
    }
    to {
        /*
        如果要反过来滚动，30px改为-30px
        */
        background-position: 30px 0;
    }
}

这样进度条就动起来了。

七、dialog

最后效果：

<!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="./style.css">
	<title>全面深入讲解CSS</title>
</head>
<body>
	<header>
		<nav>
			<div class="user">
				<a href="#" id="login">登录</a>
			</div>
			<ul>
				<li><a href="#">CSS基础知识</a></li>
				<li><a href="#">效果与动画</a></li>
				<li><a href="#">工具与工程化</a></li>
			</ul>
		</nav>
		<div class="headerMain">
			<ul class="introduction">
				<li>- 2017年末新课</li>
				<li>- 前端看家本领</li>
				<li>- 全面深入的讲解</li>
			</ul>
			<h1>全面深入讲解CSS</h1>
		</div>
	</header>
	<section class="banner fadeIn">
		<ul>
			<li>
				<div class="feature feature1"></div>
				<p>特点1</p>
			</li>
			<li>
				<div class="feature feature2"></div>
				<p>特点2</p>
			</li>
			<li>
				<div class="feature feature3"></div>
				<p>特点3</p>
			</li>
		</ul>
	</section>
	<section class="main fadeIn fadeInDelay">
		<div class="block block1">
			<img src="./1.png">
			<div class="blockText">
				<h2>知识全面讲解</h2>
				<ul>
					<li>- 核心知识全面覆盖</li>
					<li>- 涉猎非核心知识</li>
					<li>- 无用知识看一看</li>
				</ul>
			</div>
		</div>
		<div class="block block1">
			<div class="blockText">
				<h2>知识深入讲解</h2>
				<ul>
					<li>- 以点带面</li>
					<li>- 知识讲解清楚深入</li>
					<li>- 没讲的知识也深入</li>
				</ul>
			</div>
			<img src="./2.png">
		</div>
	</section>
	<footer>
		<div class="footerContent">
			TooBug @ 2018
		</div>
	</footer>
	<div class="progress"></div>

	<div class="dialogWrapper">
		<div class="mask"></div>
		<div class="dialog">
			<div class="title">登录</div>
			<div class="body">
				<form>
					<ul>
						<li>
							<label>用户名</label>
							<input type="text" name="username"/>
						</li>
						<li>
							<label>密码</label>
							<input type="password" name="password"/>
						</li>
						<li class="operateWrapper">
							<button id="cancelDialog">取消</button>
							<button class="primary">登录</button>
						</li>
					</ul>
				</form>
			</div>
		</div>
	</div>
	<script>
		function showProgress(){
			document.querySelector('.progress').classList.add('show');
		}
		function hideProgress(){
			document.querySelector('.progress').classList.remove('show');
		}

		// 点击登录按钮
		document.querySelector('#login').addEventListener('click', function(e){
			showProgress();
			setTimeout(function(){
				hideProgress();
				document.querySelector('.dialogWrapper').classList.add('show');
			}, 3000);
			e.preventDefault();
		});
		// 点击取消按钮
		document.querySelector('#cancelDialog').addEventListener('click', function(e){
			document.querySelector('.dialogWrapper').classList.remove('show');
			e.preventDefault();
		});
	</script>
</body>
</html>

*{
	margin:0;
	padding:0;
}
ul{
	list-style: none;
}

@keyframes fadeIn{
	form{
		transform: translateY(100px);
		opacity: 0;
	}
	to{
		transform: translateY(0);
		opacity: 1;
	}
}

.fadeIn{
	transform: translateY(100px);
	opacity: 0;
	animation: fadeIn 1s;
	animation-fill-mode: forwards;
}
.fadeInDelay{
	animation-delay: 1s;
}

header{
	background:linear-gradient(to bottom, #3A2CAC, #631D9F);
	height: 280px;
	padding: 20px;
}

header nav{
	max-width: 1000px;
	margin: 0 auto;
}
header nav a{
	color: #f0f0f0;
	text-decoration: none;
}
header nav a:hover{
	color:#f90;
}
header nav .user{
	float:right;
}
header nav li{
	display:inline-block;
	padding-right: 40px;
}

header .headerMain{
	width: 730px;
	color: #f0f0f0;
	margin: 50px auto;
}
header .headerMain .introduction{
	float:right;
}
header .headerMain h1{
	line-height:70px;
}

.banner{
	width: 690px;
	padding: 20px;
	margin: 0 auto;
	margin-top: -105px;
	background: #fff;
	box-shadow: 0 0 8px rgba(0,0,0,.3);
}
.banner ul{
	text-align: center;
	font-size:0;
}
.banner ul li{
	font-size: 14px;
	display: inline-block;
	height: 160px;
	width: 180px;
	/* background:red; */
	text-align: center;
}
.banner ul li .feature{
	margin: 20px auto;
	background:#f90;
	width: 80px;
	height: 80px;
	border-radius: 50%;
}

.main{
	margin: 100px auto;
	width: 720px;
	/* background:red; */
}
.main .block{
	margin-bottom: 100px;
	margin-left: -20px;
}
.main .block .blockText{
	float:left;
	width: 260px;
	line-height: 50px;
	color: #999;
	font-size: 24px;
	margin-left: 20px;
}
.main .block .blockText h2{
	font-size:36px;
	margin-bottom: 50px;
}
.main .block img{
	float:left;
	width: 440px;
	height: 235px;
	margin-left: 20px;
}
.main .block::after{
	content:'';
	clear:both;
	display: block;
}


footer{
	/* position: fixed; */
	/* bottom:0; */
	width: 100%;
	font-size:12px;
	color:#999;
	text-align:center;
}
footer .footerContent{
	/* width: 1000px; */
	/* margin: 0 auto; */
	/* background:red; */
}

@keyframes rolling {
	from{
		background-position: 0 0;
	}
	to{
		background-position: 30px 0;
	}
}
.progress{
	display:none;
	position: absolute;
	width: 280px;
	height:15px;
	left:50%;
	margin-left: -140px;
	top:22px;
	border-radius:15px;
	border: 1px solid #999;
	/* background:red; */
	background: linear-gradient(135deg, red 0%, red 33%, orange 33%, orange 66%, red 66%, red 100%);
	background-size:30px 15px;
	animation: rolling .6s linear infinite;
	/* background-repeat: no-repeat; */
}
.progress.show{
	display: block;
}

.dialogWrapper{
	display: none;
	position: fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	perspective: 500px;
}
.dialogWrapper.show{
	display:block;
}

.dialogWrapper .mask{
	width:100%;
	height:100%;
	background:rgba(0,0,0,.3);
}

@keyframes slideIn{
	from{
		transform: translate(-50%, -50%) rotateX(-90deg);
	}
	80%{
		transform: translate(-50%, -50%) rotateX(10deg);
	}
	to{
		transform: translate(-50%, -50%) rotateX(0deg);
	}
}

.dialogWrapper .dialog{
	position: absolute;
	left: 50%;
	top:50%;
	width:500px;
	height:300px;
	/* margin-left: -250px;
	margin-top: -150px; */
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
	transform: translate(-50%, -50%);
	background:white;
}
.dialogWrapper.show .dialog{
	animation: slideIn .4s;
	animation-fill-mode: forwards;
}

.dialogWrapper .dialog .title{
	height: 50px;
	line-height: 50px;
	padding: 0 30px;
	border: 1px solid #f0f0f0;
	font-size: 20px;
}
.dialogWrapper .dialog .body{
	padding: 30px 80px;
}

.dialogWrapper .dialog .body li{
	line-height: 50px;
	font-size:20px;
}

.dialogWrapper .dialog .body li label{
	display: inline-block;
	width: 100px;
}

.dialogWrapper .dialog .body li input{
	font-size:20px;
	border: 0 none;
	border-bottom:1px solid #ccc;
	width:230px;
}

.dialogWrapper .dialog .body li input:focus{
	outline:0 none;
}

.dialogWrapper .dialog .body li.operateWrapper{
	margin-top: 20px;
}
.dialogWrapper .dialog .body li.operateWrapper button{
	width: 140px;
	height: 40px;
	background:white;
	border: 1px solid #999;
	font-size:20px;
	letter-spacing: 1em;
	text-indent: 1em;
	cursor: pointer;
	margin-right: 50px;
}

.dialogWrapper .dialog .body li.operateWrapper button.primary{
	background:#4990E2;
	border-color: #4990E2;
	color:white;
}
.dialogWrapper .dialog .body li.operateWrapper button:last-of-type{
	margin-right:0;
}

查看全文

http://www.kler.cn/a/529689.html