bootstrap实际应用之阿里百秀的制作

最新推荐文章于 2022-06-07 18:00:02 发布

海波东

最新推荐文章于 2022-06-07 18:00:02 发布

阅读量541

点赞数 2

分类专栏： web和网安文章标签： bootstrap html css

本文链接：https://blog.csdn.net/m0_52528565/article/details/119949464

版权

web和网安专栏收录该内容

13 篇文章

订阅专栏

视频教程
是参考黑马程序猿pink老师的视频加上自身所学所作的笔记，以及一些心得，希望能有所帮助
html快捷键
 真正的能理解CSS中的line-height
padding,border,margin与width宽度的关系

最后结果：
在这里插入图片描述

html:


<!DOCTYPE html>
<html lang="zh">
<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">
	   <!--[if lt IE 9]>
	      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
	      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
	    <![endif]-->
		<!-- 一定不要忘记引入bootstrap的文件 -->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
		<!--选择上面的时候会有提示 -->
		<link rel="stylesheet" href="css/index.css">
		<!-- 这一行就是链接css样式 -->
		
	<title></title>
</head>
<body>
	<div class="container">
		<div class="row">
			<header class="col-md-2">
				<div class="logo">
					<a href="#">
						<img src="images/logo%20(1).png" class="hidden-xs" >
						<!-- 这个是超小屏幕下隐藏 -->
						<span class="visible-xs">阿里百秀</span>
						<!-- 只是在超小屏幕下显示 -->
					</a>
				</div>
				<div class="nav">
						<ul>
							<li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
							<li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
							<li><a href="#" class="glyphicon glyphicon-phone">科技潮</a></li>
							<li><a href="#" class="glyphicon glyphicon-cutlery">美食流</a></li>
							<li><a href="#" class="glyphicon glyphicon-sunglasses">奇趣事</a></li>

						</ul>
				</div>
			</header>
			
			<article class="col-md-7">
				<!-- 新闻 -->
				<div class="news clearfix">
					<!-- 清除上面的部分的浮动，clear已经写好了 -->
					<!-- 把那个横线弄下来 -->
					 <ul>
					 	<li>
							<a href="#">
								<img src="images/logo%20(1).png" alt="">
								<p>阿里百秀</p>
							</a>
						</li>
  					 	<li>
							<a href="#">
								<img src="images/u=1649814532,887216683&fm=26&fmt=auto&gp=0.webp" alt="">
								<p>阿里巴巴公司成员骑摩托，求马云合影</p>
							</a>
						</li>
 					 	<li>
							<a href="#">
								<img src="images/u=3322107074,2785518000&fm=26&fmt=auto&gp=0.webp" alt="">
								<p>阿里巴巴公司成员骑天子驾二，求马云合影</p>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="images/u=3861352785,3895215636&fm=26&fmt=auto&gp=0.webp" alt="">
								<p>阿里巴巴公司成员开车，求马云合影</p>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="images/u=3861352785,3895215636&fm=26&fmt=auto&gp=0.webp" alt="">
								<p>阿里巴巴公司成员开车，求马云合影</p>
							</a>
						</li>
						
						
						
						
					 </ul>
				</div>
				<!-- 发表 -->
				<!-- .publish加tab快捷键  -->
				<div class="publish">
					<div class="row">
						<div class="col-sm-9">
							<h3>生活馆 关于大脑的100个健康知识 你知道几个</h3>
							<p class="text-muted hidden-xs">2020 8-27</p>
							<p class="text-muted">健康生活每一天</p>
						</div>
						<div class="col-sm-3 pic hidden-xs">
							<!-- 在超小屏幕下隐藏图片 -->
							<img src="images/u=1649814532,887216683&fm=26&fmt=auto&gp=0.webp" alt="">
						</div>
					</div>
					<!-- 以下是复制 -->
					<div class="row">
						<div class="col-sm-9">
							<h3>生活馆 关于大脑的100个健康知识 你知道几个</h3>
							<p class="text-muted hidden-xs">2020 8-27</p>
							<p class="text-muted">健康生活每一天</p>
						</div>
						<div class="col-sm-3 pic hidden-xs">
							<img src="images/u=1649814532,887216683&fm=26&fmt=auto&gp=0.webp" alt="">
						</div>
					</div>
					<div class="row">
						<div class="col-sm-9 ">
							<h3>生活馆 关于大脑的100个健康知识 你知道几个</h3>
							<p class="text-muted hidden-xs">2020 8-27</p>
							<p class="text-muted">健康生活每一天</p>
						</div>
						<div class="col-sm-3 pic hidden-xs">
							<img src="images/u=1649814532,887216683&fm=26&fmt=auto&gp=0.webp" alt="">
						</div>
					</div>				
					<div class="row">
						<div class="col-sm-9 ">
							<h3>生活馆 关于大脑的100个健康知识 你知道几个</h3>
							<p class="text-muted hidden-xs">2020 8-27</p>
							<p class="text-muted">健康生活每一天</p>
							<p class="text-muted"> 阅读(2417) 评论(89) 赞(89)
								<span class="hidden-xs">
									标签： 健康 、感染、 皮肤 、营养
								</span>
							</p>
						</div>
						<div class="col-sm-3 pic hidden-xs">
							<img src="images/u=1649814532,887216683&fm=26&fmt=auto&gp=0.webp" alt="">
						</div>
					</div>			
					
				</div>
				
				
			</article>
			<aside class="col-md-3">
				<a href="#" class="banner">
					<img src="images/u=3322107074,2785518000&fm=26&fmt=auto&gp=0.webp" >
				</a>
				<a href="#" class="hot">
					<span class="btn btn-danger">热搜</span>
					<h4 class="bg-success">欢迎加入中国博客联盟</h4>
					<p class="bg-success">黑马pink老师移动WEB开发-Bootstrap案例</p>
					
				</a>
			</aside>
		</div>
		
	</div>


</body>

</html>

css:

ul{
	list-style-type: none;
	/* 去除小圆点 */
	/* 可以直接打印首字母 */
	color: pink;
	margin: 0;
	padding: 0;
	/* div和a标签有一个默认的padding 单独来看时，如果没有，就会出现两个多余的空，前面一个空不被选中hover */
}

body{
	background-color: plum;
}
.container{
	background-color: plum;
}

a{
	color: #666;
	color: pink;
	text-decoration: none;
	/* 去除字体的下划线 */
}
a:hover{
	text-decoration: none;
	/* 去掉后鼠标放上去会有的123和相机会有下划线 */
}
@media screen and(min-width: 1280px) {
	.container{
		width: 1280px;
	}
}
/* header */
header{
	color: pink;
	padding-left: 0 !important;
}
.logo{
	background-color: red;
}
.logo img{
	display: block;
	width : 100%;
	max-width: 100%;
	/* 不让logo进行缩放 */
	margin: 0 auto;
	/* 小屏下文字居中 */
}
/* 进入超小屏幕下，logo隐藏起来 */
/* 我们事先准备好一个盒子，在logo里面，他平时是隐藏起来的，只有在超小屏幕下显示 */
.logo span{
	display: block;
	height: 50px;
	line-height: 50px;
	color: pink;
	font-size: 18px;
	text-align: center;
}
.nav{
	background-color: #eee;
	border-bottom: 1px solid #ccc ;
}
.nav ul li{
	background-color: palevioletred;
}
.nav a{
	display: block;
	/* 转换为块元素*/
	height: 50px;
	/* 块元素的高度为50px */ 
	line-height: 50px;
	/* 参考博客，一般常用height与height相同 */
	/* 同样的border,padding ,width,margin一样 */
	padding-left: 30px;
	color: pink;
	font-size: 16px;
}

.nav a:hover {
	background-color: red;
	color: pink;
	/* 鼠标放上去背景为红色，字体颜色为pink */
}
/* 当我们进入小屏幕 还有 超小屏幕 我们nav 里面的li浮动起来 并且宽度为20% */
@media screen and (max-width:991px) {
	.nav li{
		float: left;
		width:20%;
	}
	article{
		margin-top: 10px;
	}
	/* 中间的部分在大屏幕下没有上边距，紧贴着的 */
}

/* 当我们进入超小屏幕 nav中的文字会变成14px */
@media screen and (max-width:767px) {
	.nav li a{
		font-size: 14px;
		padding-left: 3px;
	}
	/* 当我们处于超小屏幕 第一个li 宽度为100% 剩下li 各占50%  */
	.news li:nth-child(1){
		width: 100% !important;
	}
	.news li{
		width: 50%!important;
	}
	.publish{
		font-size: 14px;
		color: deeppink;
		
	}
	
}
.nav a::before{
	vertical-align: middle;
	/* 这个是让那个摄像头垂直居中，与123在同一条线上 */
	padding-right: 5px;
}





.news li{
	color: pink;
	float: left;
	/* 选择的时候alt加数字，浮动垂直变成水平*/
	width: 25%;
	height: 128px;
	/* 128px就是一个小图片的高度 ，height一弄格式就出来了*/
	padding-right: 10px;
	margin-bottom: 10px;
	
}
.news li a{
	position: relative;
	/* 子绝父相 */
	display: block;
	width: 100%;
	height: 100%;
	/* color: pink; */
	background-color: purple;
	/* 这个就是划分出没有空格的那一部分 */
}
.news li:nth-child(1)
{
	width: 50%;
	height: 266px;
	background-color: plum;
}

.news li:nth-child(1) p
{
	line-height: 41px;
	color: pink;
	font-size: 20px;
	padding: 0 10px;
	/* color: pink; */
	/* 排除小的这个大的影响 */
	/* 这个权重更高一点 */
}


.news li a img{
	width: 100%;
	height: 100%;
	/* 让这个图和块元素一样大 */
}
.news li a p{
	/*子绝父相 */
	position: absolute;
	bottom: 0;
	left: 0;
	width:  100%;
	height: 41px;
	padding: 5px 10px;
	/* 上下5px，让图片上的文字往下，但是会影响第一个盒子的高度，就需要对第一个盒子另外设计，左右10px */
	background-color: rgba(0,0,0,.5);
	font-size: 12px;
	/* color: #fff; */
	color: pink;
	margin-bottom: 0;
	/* bootstrap默认给的下边距 */
}

.publish{
	border-top: 1px solid forestgreen;
}
.publish .row{
	border-bottom: 1px solid #ccc;
	
}
.pic img{
	width: 100%;
	/* 让图片跟着缩放 */
	height: 150px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.banner img{
	width: 100%;
}
.hot{
	color: pink;
	display: block;
	border: 1px solid #ccc;
	padding: 0 20px 20px;
	margin-top: 20px;
}
.hot span{
	border-radius: 0;
	margin-bottom: 20px;
}
.hot{
	color: pink;
	font-size: 12px;
}