基于bootstrap的科比中文网

最新推荐文章于 2024-06-04 21:51:36 发布
最新推荐文章于 2024-06-04 21:51:36 发布
阅读量752 收藏 3
点赞数 1
文章标签： css html5 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45426640/article/details/109801978
版权

目录

一、盒子模型知识

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;
}

作业截图1

作业截图2

.Katherine௰
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
jsp+mysql设计的科比主题网站
12-17
北邮信息网络应用基础课设，jsp＋mysql实现动态网页，注册，登陆，购物车等功能，美观，简单易懂
科比.布莱恩特的主页模板
01-14
科比.布莱恩特的主页模板
HTML+CSS篮球静态网页设计（web前端网页制作课作业）NBA杜兰特篮球运动网页
最新发布
网页设计与制作
06-04 575
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构
HTML期末大作业：DIV简单的篮球网页制作期末作业 篮球明星科比js三级页面
dreamweaver网页设计
10-09 479
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
python 科比
11-08
python爬取科比的投篮数据，仅供学习下载，请勿用做其他商业用途。
基于bootstrap实现bootstrap中文网巨幕效果
08-30
"基于Bootstrap实现Bootstrap中文网巨幕效果" 本文主要介绍了如何基于Bootstrap实现Bootstrap中文网巨幕效果，通过对Bootstrap框架的深入了解和实践，实现了一个具有吸引力和交互性的巨幕效果，具有很高的参考和...
基于bootstrap的中文后台模板
09-01
这个“基于bootstrap的中文后台模板”显然是一个专门为后台管理系统设计的界面模板，它利用了Bootstrap的强大功能，提供了丰富的中文界面元素，使得开发者能够更便捷地构建出美观且易于操作的后台管理界面。...
基于Bootstrap的旅游官网页面实例
05-25
在"基于Bootstrap的旅游官网页面实例"中，我们可以深入探讨以下几个关键知识点： 1. **响应式设计**：Bootstrap的核心特性之一就是响应式设计，它允许网页根据用户使用的设备屏幕大小自动调整布局。在旅游官网页面...
Bootstrap V3 中文网 离线页面
05-28
Bootstrap V3 中文网离线页面是一个非常实用的资源，为开发者提供了在没有网络连接时也能访问Bootstrap V3文档的便利。Bootstrap是一个流行的前端开发框架，由Twitter开发，用于快速构建响应式、移动设备优先的网页...
基于bootstrap的前端网站设计
04-21
本教程主要关注基于Bootstrap的前端网站设计，适合初学者、学生、进行课程设计或毕业设计的人群。Bootstrap提供了丰富的组件、预定义的样式和易于使用的网格系统，能够帮助开发者快速构建美观且功能丰富的网站。 1....
一个简单的HTML5网页设计
12-11
一个简单的HTML5网页设计，有多个页面，是一些基本的设计，自己的结课作业，上传吧，所有东西都在压缩包内，有兴趣可以下载了解一下。
Kobe-Bryants-s-Career
04-19
分析科比-布莱恩特-科雷尔 POWER BI中制作的交互式仪表板，用于分析科比·布莱恩特的职业生涯。
NBA篮球个人网页
01-02
依NBA篮球队为题材的简单网页，喜爱篮球，抽时间做的一个小网页。
科巴科比
02-13
CoreUI Free React管理模板v3 CoreUI旨在成为UX游戏改变者。 纯透明的代码没有多余的组件，因此该应用程序足够轻巧，可以提供最终的用户体验。 这也意味着移动设备，其导航与台式机或笔记本电脑一样简单直观。 CoreUI Layout API允许您针对几乎任何设备（移动设备，Web或WebApp）自定义项目，CoreUI涵盖了所有设备！ 目录 版本号 CoreUI专业版 只有具有客户才能访问私有github CoreUI Pro存储库。 :flexed_biceps: :flexed_biceps: :flexed_biceps: :flexed_biceps: :flexed_biceps: :flexed_biceps: 安装 克隆回购 # clone the repo $ git clone https://github.com/coreui/coreui-free-react-admin-template.git my-project # go into app's directory $ cd my-projec
nba资讯网站 web静态网页小项目 html+js+css+bootstrap
06-12
只是本人web课程的一次期中小作业，使用html+js+css+bootstrap实现的类似于nba官网一样的网站。注意：这是一个web静态网页小项目，目的在于熟悉和训练html+css+js的学习。
网页设计---颜 色 英 文 代 码 全 集
Luqing的专栏
10-07 1908
var focus_width=544; var focus_height=255; var text_height=0; var swf_height = focus_height+text_height; var pics=http://www.ray
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
bootstrap中文网框架
06-08
Bootstrap中文网是一个开源的前端框架，它提供了众多的CSS、JavaScript组件和插件，可以帮助开发者快速开发出美观、响应式的网页。Bootstrap中文网框架是由Twitter的前端开发工程师Mark Otto和Jacob Thornton开发的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值