master

分支 (1)

管理

管理

master

project
/
栅格布局页面.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_3205184_771t425tmon.css"/>
    <title>Bootstrap</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

	<style type="text/css">
		ul,li{
			list-style: none;
			margin: 0;
			padding: 0;
		}
		header{
			height: 60px;
			border-bottom: 1px solid rgba(0,0,0,.3);
			/* border: 1px solid blue; */
		}
		.header>section{
			/* border: 1px solid #008000; */
			height: 60px;
			line-height: 60px;
		}
		.banner{
			height: 370px;
			/* border: 1px solid black; */
			position: relative;
			top: -60px;
			background: url(img/banner1.jpg) no-repeat center;
			background-size: 100% 370px;
			z-index: -1;
		}
		.header>section:first-child{
			text-align: left;
		}
		.header>section:first-child>img{
			height: 50px;
		}
		.header>section:nth-child(2)>ul,.header>section:nth-child(3)>ul{
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		.header>section:nth-child(2)>ul>li>a{
			font-weight: bold;
			color: #333333;
		}
		.header>section:nth-child(3)>ul>li>a{
			font-weight: bold;
			color: #333333;
		}
		.header>section:last-child{
			text-align: right;
		}
		.header>section:last-child>i{
			font-size: 20px;
			font-weight: bold;
		}

		.content{
			text-align: center;
		}
		.content>section{
			margin-bottom: 20px;
		}
		.content>section:first-child>div{
			font-size: 2em;
			font-weight: bold;
		}
		.content>section:first-child>p{
			font-size: 2ex;
			padding: 20px 0;
		}
		.content>section:nth-child(2)>section>section{
			border: 1px solid #ccc;
			border-radius: 10px 10px 10px 10px;
			margin-bottom: 30px;
		}
		.content>section:nth-child(2)>section>section:hover{
			box-shadow: 5px 5px 5px #ccc,-5px 0 5px #ccc;
			transform: translatey(-5px);
		}
		.content>section:nth-child(2)>section>section>img{
			width: 100%;
			border-radius: 10px 10px 0 0;
		}
		.content>section:nth-child(2)>section>section>section>h6{
			font-size: 2em;
			background: #234391;
			color: #fff;
			border-radius: 5px;
			padding: 10px 20px ;
		}
		.describ>ul{
			/* border: 1px solid red; */
			margin-bottom: 20px;
		}
		.describ>ul>li{
			text-align: left;
			padding: 5px 0;
			padding-left: 40px;
			font-size: 18px;
			color: #8492a6;
		}
		.content>section:nth-child(2)>section>section>section:last-child{
			/* border: 1px solid red; */
			color: #8492A6;
			font-size: 14px;
			text-align: left;
			text-indent: 2em;
			padding: 10px 20px;
		}
		.content>section:last-child>a{
			font-size: 16px;
			font-weight: bold;
			color: #fff;
			background-color: #234391;
			border-radius: 5px;
			padding: 15px 40px;
		}

		footer{
			height: 370px;
			/* border: 1px solid #ccc; */
			margin-top: 40px;
		}
		footer>section:first-child{
			height: 350px;
			/* border: 1px solid red; */
		}
		footer>section:first-child>section:first-child>img{
			width: 30%;
			position: relative;
			top: 0;
			padding-bottom: 20px;
			padding-top: 20px;
			left: calc( 50% - 30% / 2);
		}
		footer>section:first-child>section:first-child>p{
			font-size: 14px;
			color: #8492A6;
			text-indent: 2em;
		}
		footer>section:last-child{
			height: 20px;
			text-align: center;
		}
		.flex1{
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
		.flex1>div>h6{
			padding: 10px 0;
			font-size: 18px;
			color: #5e5e5e;
			border-bottom: 1px solid blue;
			font-weight: bold;
		}
		.flex1>div>ul>li{
			text-align: center;
			padding: 10px 0;
		}
		.container>section>section:nth-child(3)>div{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: 80px;
		}
		.container>section>section:nth-child(3)>div>img{
			width: 100px;
		}

		@media screen and (max-width:768px) {
			header{
				border-bottom: 0;
			}
			.content>section:first-child>div{
				font-size: 1.5em;
				/* font-weight: bold; */
			}
		}
	</style>
  </head>
  <body>
	  <!-- 头部 -->
	  <header class="container">
		  <section class="row header">
			  <section class="col-xs-6 col-sm-6 col-md-2 col-lg-2">
				  <img src="./img/logo.png" >
			  </section>
			  <section class="hidden-xs hidden-sm col-md-8 col-lg-8">
				  <ul>
				  	<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>
					<li><a href="">猿来如此</a></li>
					<li><a href="">猿代码</a></li>
				  </ul>
			  </section>
			  <section class="hidden-xs hidden-sm col-md-2 col-lg-2">
				  <ul>
				  	<li><a href="">注册</a></li>
					<li><a href="">登录</a></li>
				  </ul>
			  </section>
			  <section class="col-xs-6 col-sm-6 hidden-md hidden-lg">
				  <i class="iconfont icon-menu"></i>
			  </section>
		  </section>
	  </header>
	  <section class="container-fluid banner">
	  </section>

	  <!-- 中间内容区域 -->
	  <section class="container content">
		  <!-- 上 -->
		  <section class="row">
			  <div class="col-12">
			  	超牛师资
			  </div>
			  <p>只挑IT精英，录制全套课程，名师出高徒，高徒有前程。</p>
		  </section>
		  <!-- 中 -->
		  <section class="row">
			  <!-- 三大框中的其中之一 -->
			  <section class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
				  <section>
					  <!-- 图 -->
					  <img src="./img/孙.jpg" >
					  <!-- 名字 -->
					  <section class="row">
					  					  <h6 class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-push-1 col-sm-push-1 col-md-push-1 col-lg-push-1">孙洪生</h6>
					  </section>
					  <!-- 介绍 -->
					  <section class="describ">
					  					  <ul>
					  					  	<li>java导师</li>
					  						<li>java导师</li>
					  						<li>java导师</li>
					  						<li>java导师</li>
					  					  </ul>
					  </section>
					  <section>现任某企IT系统架构师，北京大学计算机专业本硕毕业，曾担任优酷开发部经理、乐视研发部总监、用友U8事业部架构师等职位。</section>
				  </section>
			  </section>
			  <!-- 三大框中的其中之一 -->
			  <section class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
			  				  <section>
			  					  <!-- 图 -->
			  					  <img src="./img/孙.jpg" >
			  					  <!-- 名字 -->
			  					  <section class="row">
			  					  					  <h6 class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-push-1 col-sm-push-1 col-md-push-1 col-lg-push-1">孙洪生</h6>
			  					  </section>
			  					  <!-- 介绍 -->
			  					  <section class="describ">
			  					  					  <ul>
			  					  					  	<li>java导师</li>
			  					  						<li>java导师</li>
			  					  						<li>java导师</li>
			  					  						<li>java导师</li>
			  					  					  </ul>
			  					  </section>
			  					  <section>现任某企IT系统架构师，北京大学计算机专业本硕毕业，曾担任优酷开发部经理、乐视研发部总监、用友U8事业部架构师等职位。</section>
			  				  </section>
			  </section>
			  <!-- 三大框中的其中之一 -->
			  <section class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
			  				  <section>
			  					  <!-- 图 -->
			  					  <img src="./img/孙.jpg" >
			  					  <!-- 名字 -->
			  					  <section class="row">
			  					  					  <h6 class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-push-1 col-sm-push-1 col-md-push-1 col-lg-push-1">孙洪生</h6>
			  					  </section>
			  					  <!-- 介绍 -->
			  					  <section class="describ">
			  					  					  <ul>
			  					  					  	<li>java导师</li>
			  					  						<li>java导师</li>
			  					  						<li>java导师</li>
			  					  						<li>java导师</li>
			  					  					  </ul>
			  					  </section>
			  					  <section>现任某企IT系统架构师，北京大学计算机专业本硕毕业，曾担任优酷开发部经理、乐视研发部总监、用友U8事业部架构师等职位。</section>
			  				  </section>
			  </section>
		  </section>
		  <!-- 下 -->
		  <section><a href="">查看全部大牛讲师</a></section>
	  </section>

	  <!-- 底部区域 -->
	  <footer class="container">
		  <section class="row">
			  <section class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
				  <img src="img/logo.png" >
				  <p>学习猿地根据IT方向的线上学习特点，研发人机互动教学系统， 打造领先的学习模式。平台签约了十名大牛联合创办， 每个合伙人再召集几名身边的技术大咖，根据程序员的岗位需求研发精品课程， 并将一门学科中所需要的全部学习资料汇总在一起， 且实时更新。 选中一门课程即拥有全部的精品学习资源，不需要再找其它资源补充。</p>
			  </section>
			  <section class="hidden-xs hidden-sm col-md-5 col-lg-5 flex1">
				  <div>
				  	<h6>新手指南</h6>
					<ul>
						<li>挑选课程</li>
						<li>挑选课程</li>
						<li>挑选课程</li>
						<li>挑选课程</li>
						<li>挑选课程</li>
					</ul>
				  </div>
				  <div>
				  	<h6>新手指南</h6>
				  					<ul>
				  						<li>挑选课程</li>
				  						<li>挑选课程</li>
				  						<li>挑选课程</li>
				  						<li>挑选课程</li>
				  						<li>挑选课程</li>
				  					</ul>
				  </div>
				  <div>
				  	<h6>新手指南</h6>
				  					<ul>
				  						<li>挑选课程</li>
				  						<li>挑选课程</li>
				  						<li>挑选课程</li>
				  						<li>挑选课程</li>
				  						<li>挑选课程</li>
				  					</ul>
				  </div>
			  </section>
			  <section class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
				  <div>
					  <img src="img/qrcodenew.png" >
					  <span>
						学习猿地公众号
					  </span>
				  </div>
			  </section>
		  </section>
		  <section>实猿科技 学习猿地-LMONKEY © 辽ICP备19013136号</section>
	  </footer>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>