ife 2018 task6 学习布局

最新推荐文章于 2024-08-29 14:32:34 发布

小k铁柱

最新推荐文章于 2024-08-29 14:32:34 发布

阅读量216

点赞数 1

分类专栏： ife 2018 文章标签： css javascript html5 html css3

本文链接：https://blog.csdn.net/qq_40890601/article/details/106224822

版权

ife 2018 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

设计稿大概长这样
在这里插入图片描述
我大致分析了一下，把页面分为四个部分，分别是 header、swiper（轮播图）、main 和 footer. main 又分为 nav 导航和 content 内容。
于我而言，难点在content内容部分，我使用的是flex布局。以及导航nav，我加入了一点jquery的css() 事件。
我做出来的效果如下
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>学习布局（附带轮播图）</title>
		<link rel="stylesheet" href="css/task6.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		
	</head>
	<body>
		<header class="clearfix">
			<img src="img/logo.png">
			<ul>
				<li><a href="">Github</a></li>
				<li><a href="">Register</a></li>
				<li><a href="">Login</a></li>
			</ul>
		</header>
		<!--轮播图-->
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide"><img src="img/lunbo1.jpg"></div>
		        <div class="swiper-slide"><img src="img/lunbo2.jpg"></div>
		        <div class="swiper-slide"><img src="img/lunbo1.jpg"></div>
		    </div>
		    <!-- 如果需要导航按钮 -->
		    <div class="swiper-button-prev"></div>
		    <div class="swiper-button-next"></div>
		</div>
		<!-- 导航等组件可以放在container之外 -->
		<div class="main">
			<div class="nav">
				<div>
					<a href="#" class="active">HOME</a>
					<a href="#">PROFILE</a>
					<a href="#">ABOUT</a>
					
				</div>
				
			
			</div>
			<div class="content">
				<div class="row">
					<div><span>Content 1</span></div>
					<div><span>Content 2</span></div>
					<div><span>Content 3</span></div>
				</div>
				<div class="row">
					<div><span>Content 1</span></div>
					<div><span>Content 2</span></div>
					<div><span>Content 3</span></div>
					<div><span>Content 4</span></div>
				</div>
				<div class="row">
					<div><span>Content 1</span></div>
					<div><span>Content 2</span></div>
					<div><span>Content 3</span></div>
				</div>
			</div>
		</div>
		<footer>
			2018 ife.baidu.com
		</footer>
		<script src="js/swiper.min.js"></script>
		<script src="js/jquery-3.5.1.js"></script>
	<script>        
	   
		$(function(){
			swiper();
			// $(".nav a:first-child").addClass("nav-active");
			$(".nav a").click(function(){
				$(".nav a").removeClass("active");
				$(this).addClass("active");
				
			})
		})
		function swiper(){
			var mySwiper = new Swiper ('.swiper-container', {
			  direction: 'horizontal', // 垂直切换选项
			  loop: true, // 循环模式选项
			  // 如果需要前进后退按钮
			  navigation: {
			    nextEl: '.swiper-button-next',
			    prevEl: '.swiper-button-prev',
			  },
			})     
		}
	  </script>
	</body>
</html>

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
}

a {
	text-decoration: none;
}

.clearfix:after {
	/*伪元素是行内元素 正常浏览器清除浮动方法*/
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	*zoom: 1;
	/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

header {
	height: 50px;
	width: 100%;
	background-color: #6ca1d4;
	line-height: 50px;
	color: #fff;
}

header a {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	padding: 0 10px;
	height: 100%;
	line-height: 50px;
}

header a:hover {
	color: #fff;
	background: #4e6d8a;
}

header img {
	height: 60%;
	vertical-align: middle;
	margin-left: 10px;
}

ul li {
	list-style: none;
	display: inline-block;
}

header ul li {
	margin-right: 10px;
}

header ul {
	float: right;
	margin-right: 20px;
}

footer {
	width: 100%;
	height: 30px;
	background: #075e7f;
	text-align: center;
	color: #fff;
	margin-top: 20px;
}

.swiper-container {
	height: 300px;
	width: 100%;
}

.swiper-container img {
	width: 100%;
	height: 100%;
}

/* 导航条 */
.nav {
	height: 50px;
	border-bottom: 1px solid #afafaf;
	position: relative;
	font-size: 0;
	/* 消除间距 */
}

.nav a:link {
	border: 1px solid #afafaf;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	padding: 10px 15px;
	font-size: 16px;
	background-color: #d9d9d9;
}

.nav div {
	position: absolute;
	bottom: 10px;
	left: 20%;
	font-size: 0px;
}

.nav a:hover {
	color: #000000;
	background: #fff;
	border-bottom: 2px solid #fff;
}

.active {
	color: #000000;
	background: none;
	background: #fff;
	border-bottom: 2px solid #fff;
}

.content {
	width: 80%;
	margin: 10px auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;

}

.content .row div {
	height: 200px;
	text-align: center;
	border: 1px solid #bdbdbd;
	flex: 1;
	margin: 0 10px;
	margin-top: 10px;
}

.row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

span {
	vertical-align: middle;
}

span:after {
	content: "";
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}

差不多也就是上面这个样子，总结一下做这个task的心得。
1、href一定不能是空，必须是有值；
href="" 时表示访问当前页面，
我对有部分html标签不是很熟悉，比如a标签，在使用jquery给a标签添加了active这个class之后，发现没有效果，我一直不知道为什么，后来才发现是href="" 的缘故，href必须要设置成有值才能生效。我将href设置为“#” 之后click事件便生效了。
a中href="#"表示回到最顶部。如果当前页面中需要滚动的话，那么用这种方式就可以直接回到顶部。比如有些网站会在右下角制作一个图标按钮，回到顶部，那么此时可以考虑用这种最简单的方式实现。
2、轮播图的图片大小设置为width：100%；height:100%,这样就能撑满盒子。
3、以及多行文本垂直居中的问题。
我使用的是vertical-align: middle; 并使用伪元素，这是目前为止我觉得最好用的方法。也可以用flex布局。像header这种只有一行的，使用line-height就可以了。

这次的学习顺便学习了下轮播图，发现自己也只是略知一二，还未参透。
布局里也有许多知道欠缺，应该多多练习，加油，老铁们！

小k铁柱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ife 2018 task6 学习布局

设计稿大概长这样我大致分析了一下，把页面分为四个部分，分别是 header、swiper（轮播图）、main 和 footer. main 又分为 nav 导航和 content 内容。于我而言，难点在content内容部分，我使用的是flex布局。以及导航nav，我加入了一点jquery的css() 事件。我做出来的效果如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <
复制链接

扫一扫

专栏目录