1. Bootstrap使用
Bootstrap使用四步曲:
- 创建文件夹结构
- 创建html骨架结构
- 引入相关样式文件
- 书写内容
2. 需求分析
2.1 页面布局分析
- 左侧:上下两部分,上面图片,下面一个列表。
- 中间:上下两部分,上面通过列表实现,第一个li宽度为50%,其他li宽度为25%,第一个li的高度为266px,其他li高度为128px;下面通过
左右两个div实现,左边是文字,右边是图片。 - 右侧:上下两个部分,上面是图片,下面是文字。
2.2 屏幕划分分析
3.代码实现
3.1 代码结构
3.2 html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>阿里百秀</title>
<!--[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]-->
<!-- 引入 bootstrap样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- 引入自定义的首页样式文件 -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<div class="row">
<!-- 左侧区域 -->
<header class="col-md-2">
<!-- LOGO区域 -->
<div class="logo">
<a href="#">
<img src="/images/logo.png" alt="">
</a>
</div>
<!-- 列表区域 -->
<div class="nav">
<ul>
<li><a class="glyphicon glyphicon-camera" href="#">生活馆</a></li>
<li><a class="glyphicon glyphicon-picture" href="#">自然汇</a></li>
<li><a class="glyphicon glyphicon-apple" href="#">科技潮</a></li>
<li><a class="glyphicon glyphicon-gift" href="#">奇趣事</a></a></li>
<li><a class="glyphicon glyphicon-glass" href="#">美食节</a></li>
</ul>
</div>
</header>
<!-- 中间区域 -->
<article class="col-md-7">
<!-- 新闻区域 -->
<div class="news">
<ul>
<li>
<a href="#">
<img src="/images/lg.png" alt="">
<p>阿里百秀</p>
</a>
</li>
<li>
<a href="#">
<img src="/images/1.jpg" alt="">
<p>奇了,成都一小区护卫长得像马云,市民纷纷求合影</p>
</a>
</li>
<li>
<a href="#">
<img src="/images/2.jpg" alt="">
<p>奇了,成都一小区护卫长得像马云,市民纷纷求合影</p>
</a>
</li>
<li>
<a href="#">
<img src="/images/4.jpg" alt="">
<p>奇了,成都一小区护卫长得像马云,市民纷纷求合影</p>
</a>
</li>
<li>
<a href="#">
<img src="/images/1.jpg" alt="">
<p>奇了,成都一小区护卫长得像马云,市民纷纷求合影</p>
</a>
</li>
</ul>
</div>
<!-- 发表区域 -->
<div class="publish">
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于养生应该知道的知识</h3>
<p class="text-muted">alibaixiu 发布于 2015-11-20</p>
<p>养生知识10个,你值得拥有</p>
<p class="text-muted">阅读(2417)评论(1234)赞(12万)标签:健康</p>
</div>
<div class="col-sm-3">
<img class="pic" src="/images/4.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于养生应该知道的知识</h3>
<p class="text-muted">alibaixiu 发布于 2015-11-20</p>
<p>养生知识10个,你值得拥有</p>
<p class="text-muted">阅读(2417)评论(1234)赞(12万)标签:健康</p>
</div>
<div class="col-sm-3">
<img class="pic" src="/images/4.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-9">
<h3>生活馆 关于养生应该知道的知识</h3>
<p class="text-muted">alibaixiu 发布于 2015-11-20</p>
<p>养生知识10个,你值得拥有</p>
<p class="text-muted">阅读(2417)评论(1234)赞(12万)标签:健康</p>
</div>
<div class="col-sm-3">
<img class="pic" src="/images/4.jpg" alt="">
</div>
</div>
</div>
</article>
<!-- 右侧区域 -->
<aside class="col-md-3">
<!-- banner区域 -->
<a class="banner" href="#">
<img src="/images/zgboke.jpg" alt="">
</a>
<!-- hot区域 -->
<a class="hot" href="#">
<span class="btn btn-primary">热搜</span>
<h4 class="text-primary">欢迎加入中国博客联盟</h4>
<p class="text-muted">这里收录了国内各个领域的优秀博客,是一个全人工编辑的开放式博客联盟交流和展示</p>
</a>
</aside>
</div>
</div>
</body>
</html>
3.3 css 代码
ul {
list-style: none;
padding: 0;
margin: 0;
}
/* 修改 container 的最大宽度为1280px */
@media screen and (min-width: 1280px) {
.container {
width: 1280px;
}
}
/* header */
header {
padding-left: 0 !important;
}
.logo {
background-color: #429ad9;
}
.logo img {
width: 100%;
}
.nav {
background-color:#f6f6f6 ;
border-bottom: 1px solid #ccc;
}
.nav a {
display: block;
height: 50px;
line-height: 50px;
padding-left: 30px;
font-size: 16px;
text-decoration: none;
color: #666;
}
.nav a:hover {
background-color: #fff;
}
/* a前面的图标 */
.nav a::before {
vertical-align: middle;
padding-right: 5px;
}
.news {
/* 清除浮动 */
overflow: hidden;
}
.news li {
float: left;
width: 25%;
height: 128px;
padding-right: 10px;
margin-bottom: 10px;
}
.news li a {
position: relative;
/* 将a转换为块级元素才能设置宽高 */
display: block;
width: 100%;
height: 100%;
/* background-color: skyblue; */
}
.news li a img {
width: 100%;
height: 100%;
}
.news li p {
position: absolute;
}
/* 第一个li */
.news li:nth-child(1) {
width: 50%;
height: 266px;
}
.news li:nth-child(1) a p {
font-size: 20px;
/* 垂直居中 */
line-height: 41px;
padding: 0 10px;
}
.news li a p {
position: absolute;
/* 左下角 */
left: 0;
bottom: 0;
background-color: rgb(0, 0, 0,0.3);
width: 100%;
height: 41px;
color: #fff;
font-size: 12px;
padding: 5px 10px;
margin-bottom: 0;
}
.publish {
border-top: 1px solid #ccc;
}
.publish .row {
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
.pic {
margin-top: 10px;
}
/* aside */
.banner img {
width: 100%;
}
.hot {
/* 将a标签转换为块元素 */
display: block;
margin-top: 20px;
border: 1px solid #ccc;
/* 左右下有一个距离 */
padding: 0 20px 20px;
}
.hot:hover {
text-decoration: none;
}
.hot span {
border-radius: 0;
margin-bottom: 20px;
}
.hot p {
font-size: 12px;
}
3.4 效果
参考:黑马pink老师css课程,我跟着敲得