基于bootstrap的科比中文网

一、盒子模型知识

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

二、栅格系统、列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 *
选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4
元素向右侧偏移了4个列（column）的宽度。

三、LVHA原则

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。在 CSS
定义中，a:active 必须被置于 a:hover 之后，才是有效的。

参考网页：
CSS 盒子模型
CSS中a标签样式的“爱恨”原则
CSS"爱恨原则”

四、科比中文网代码

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>科比中文网</title><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/mycss.css">
</head>
<body><nav class="navbar navbar-default" role="navigation"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><span class="sr-only">科比中文网</span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">科比中文网</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse navbar-ex1-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">生平简介</a></li><li><a href="#">00-01赛季</a></li><li><a href="#">01-02赛季</a></li><li><a href="#">09-10赛季</a></li><li><a href="#">01-02赛季</a></li></ul><ul class="nav navbar-nav navbar-left"><!-- <li><a href="#"></a></li> --><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">精彩时刻 <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">五佳球</a></li><li><a href="#">十佳球</a></li><li><a href="#">精彩抢断</a></li><li><a href="#">精彩扣篮</a></li></ul></li></ul><form class="navbar-form navbar-right " role="search"><div class="form-group"><input type="text" class="form-control" placeholder="搜索"></div><button type="submit" class="btn btn-default">搜索</button></form></div><!-- /.navbar-collapse --></nav><div class="container-fluid"><div class="row"><div class="col-sm-3 col-md-2 sidebar"><ul class="nav nav-sidebar"><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></div><div class="col-sm-9 col-offset-3 col-md-10 col-md-offset-2 "><!-- 保证页面的稳定性 --><!-- bs3-carousel就会出现以下内容  --><div id="carousel-id" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-id" data-slide-to="0" class="active"></li><li data-target="#carousel-id" data-slide-to="1" class=""></li><li data-target="#carousel-id" data-slide-to="2" class=""></li><li data-target="#carousel-id" data-slide-to="3" class=""></li></ol><div class="carousel-inner"><div class="item active"><img src="img/kobe1.jpg" alt="First slide"><div class="container"><div class="carousel-caption"><h1>Kobe</h1><p>科比·比恩·布莱恩特（Kobe Bean Bryant，1978年8月23日—2020年1月26日），出生于美国宾夕法尼亚州费城，前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”。</p></div></div></div><div class="item"><img src="img/kobe2.jpg" alt="Second slide" ><div class="container"><div class="carousel-caption"><h1>Kobe</h1><p>1996年NBA选秀，科比于第1轮第13位被夏洛特黄蜂队选中，后被交易至洛杉矶湖人队，整个NBA生涯都效力于洛杉矶湖人队。</p></div></div></div><div class="item"><img  src="img/kobe3.jpg" alt="Third slide"><div class="container"><div class="carousel-caption"><h1>Kobe</h1><p>1997年NBA全明星周末，科比赢得了扣篮大赛的冠军，18岁的科比也成为了NBA史上最年轻的扣篮大赛冠军。。2017年12月19日，湖人主场对阵勇士，中场时刻为科比的8号和24号两件球衣举行了退役仪式。</p></div></div></div><div class="item"><img  src="img/kobe4.jpg" alt="Forth slide"><div class="container"><div class="carousel-caption"><h1>Kobe</h1><p>2018年3月13日，科比凭借和动画师格兰·基恩合作的短片《亲爱的篮球》获第90届奥斯卡最佳短片奖。</p></div></div></div></div><a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div><hr/><div class="container"><div class="row list-img" ><div class="col-sm-6 col-sm-3 side-img"><img src="img/list-image/1.jpg"  alt=""></div><div class="col-sm-6 col-sm-3 side-img"><img src="img/list-image/2.jpg" alt=""></div><div class="col-sm-6 col-sm-3 side-img"><img src="img/list-image/3.jpg" alt=""></div><div class="col-sm-6 col-sm-3 side-img"><img src="img/list-image/4.jpg" alt=""></div></div></div>
</div> </div>
</div>
</body><script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script></html>

css部分

    @media(min-width:768px){/* 最小可见宽度 */.sidebar{/* 左侧的一系列  流经岁月*/display: block;position: fixed;top:51px;left: 0px;bottom: 20px;background-color: burlywood;}.nav-sidebar{margin-left: -20px;margin-right: -16px; }
}
.slide{top:-20px;/* 调整轮播图与导航栏之间的距离，消去空隙 */
}.nav-sidebar> li >a:visited{font-size: 25px;background-color: paleturquoise;}/* LVHA */
.nav-sidebar> li >a:hover{font-size: 30px;background-color: paleturquoise;color: black;
}
.nav-sidebar> li >a:active{font-size: 25px;background-color: paleturquoise;
}.list-img img{width: 100%;border-radius: 20px;height: 200px;
}

基于bootstrap的科比中文网相关推荐

年季度月周日控件html,基于bootstrap按年、季度、年月、年月日的日历插件(原创)...
插件描述:基于bootstrap按年.季度.年月.年月日的日历插件,作为bootstrapdatetimepicker的扩展更新时间:2020-07-02 22:02:19 更新说明:修改yk-da ...
置信区间（Confidence Intervals）是什么？如何计算置信区间？置信区间的两种计算方法是什么？二值样本置信区间如何计算？如何基于bootstrap抽样进行置信区间计算？
置信区间(Confidence Intervals)是什么?如何计算置信区间?置信区间的两种计算方法是什么?二值样本置信区间如何计算?如何基于bootstrap抽样进行置信区间计算? 目录置信区间( ...
基于BootStrap,FortAweSome，Ajax的学生管理系统
一. 基于BootStrap,FortAweSome,Ajax的学生管理系统代码部分 1.students.html <1>html页面文件 <!DOCTYPE html> & ...
基于BootStrap 4.x 中的Flex 实现各种布局
各种布局,总有一款适合你基于bootstrap 4.x 中的flex 布局 1.左右结构(左窄右宽) <div class="d-flex flex-row" style= ...
基于bootstrap实现简单用户管理功能
基于bootstrap实现简单用户管理功能,包括增删改以及列表分页展示功能. 1.web.xml配置servlet映射: <servlet><servlet-name>User ...
基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单
这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/76 ...
基于Bootstrap 3.x的免费高级管理控制面板主题：AdminLTE
AdminLTE 是一个基于Bootstrap 3.x的免费高级管理控制面板主题.AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小型移动设 ...
boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...
2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...

基于bootstrap的科比中文网

目录

一、盒子模型知识

二、栅格系统、列偏移

三、LVHA原则

四、科比中文网代码

基于bootstrap的科比中文网相关推荐

最新文章

热门文章