[CSS3]响应式布局

导读

响应式就是一套代码, 兼容大中小不同的屏幕, 即网页内容不变, 网页布局随屏幕切换而改变

媒体查询

响应式布局的核心技术是媒体查询

  1. 媒体查询可以检测屏幕尺寸, 设置差异化的css

开发中的常用写法

  1. 使用范围属性, 划定屏幕范围
  • max-width 最大宽度
  • min-width 最小宽度
  1. 示例代码
<!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>Document</title><style>/* 视口宽度小于等于768px， 网页背景色是粉色 */@media (max-width: 768px) {body {background-color: pink;}}/* 视口宽度大于等于1200px， 网页背景色是skyblue */@media (min-width: 1200px) {body {background-color: skyblue;}}</style>
</head>
<body></body>
</html>

书写顺序: 所有的css属性都有层迭性, 所以使用媒体查询时也要注意书写顺序

  1. 如果使用min-width属性, 媒体查询要从小往大写
  2. 如果使用max-width属性, 媒体查询要从大往小写

  1. 示例代码
<!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>Document</title><style>/*视口宽度 >= 768px，网页背景色是 粉色视口宽度 >= 992px，网页背景色是 绿色视口宽度 >= 1200px，网页背景色是 skyblue*//* css属性都有层叠性 *//* 不按顺序写,屏幕大于1200px时,蓝色不会生效, 被绿色层叠  *//* @media (min-width: 1200px) {body {background-color: skyblue;}} */@media (min-width: 768px) {body {background-color: pink;}}@media (min-width: 992px) {body {background-color: green;}}@media (min-width: 1200px) {body {background-color: skyblue;}}</style>
</head>
<body></body>
</html>

媒体查询的完整写法 (工作中常用的还是简写)

  1. 关键词的可选值
  • and (多个条件要同时满足)
  • only (多个条件至少满足一个)
  • not (条件不满足)
  1. 媒体类型的可选值
  • 媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备

  1. 媒体特性的可选值
  • 媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等

外链式css引入: 满足条件时样式表才会生效

<!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>Document</title><!-- 视口宽度 >= 992px，网页背景色为粉色 --><!-- 视口宽度 >= 1200px，网页背景色为绿色 --><link rel="stylesheet" href="./one.css" media="(min-width: 992px)"><link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">
</head>
<body></body>
</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>Document</title><style>* {margin: 0;padding: 0;}.box {display: flex;width: 100%;}.left {width: 300px;min-height: 500px;background-color: pink;}.main {flex: 1;min-height: 500px;background-color: skyblue;}/* 如果检测到视口宽度小于768px, 认为是手机端, left隐藏 */@media (max-width: 768px) {.left {display: none;}}</style>
</head>
<body>/* 两列布局: 左侧固定宽度, 右侧宽度自适应 */<div class="box"><div class="left">left</div><div class="main">响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果</div></div>
</body>
</html>
  1. 大屏布局效果

  1. 中屏的布局效果

  1. 小屏的布局效果

BootStrap

了解BootStrap

知道UI框架的作用

  1. UI框架概念: 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap
  2. 作用: 基于框架开发，效率高，稳定性高

使用BootStrap框架快速开发响应式网页

  1. Bootstrap 是由 Twitter 公司开发维护的前端UI 框架，它提供了大量编写好的CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

体验一下: 引入框架, 通过类名, 就可以快速实现响应式布局, 非常方便

<!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>体验BootStrap</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>.container div {height: 50px;background-color: pink;}</style>
</head>
<body><div class="container"><div class="col-lg-3 col-md-6 col-sm-12">1</div><div class="col-lg-3 col-md-6 col-sm-12">1</div><div class="col-lg-3 col-md-6 col-sm-12">1</div><div class="col-lg-3 col-md-6 col-sm-12">1</div></div>
</body>
</html>
  1. 大屏效果:

  1. 中屏效果

  1. 小屏效果

  1. 超小屏效果

使用步骤

下载: 首页 → BootStrap3中文文档→下载BootStrap

  1. 中文官网: http://www.bootcss.com/
  2. 开发版本和源码版本

使用

  1. 引入BootStrap提供的CSS代码

  1. 调用类:使用Bootstrap提供的样式
  • container: 响应式布局版心类
  1. 代码演示
<!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>BootStrap使用方法</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>div {height: 50px;background-color: pink;}</style>
</head>
<body><div class="container">1</div>
</body>
</html>

  • 盒子添加container这个类名后, 就有了版心的效果, 并且使用媒体查询进行了屏幕适配

栅格系统

栅格系统是BootStrap框架的核心

栅格化是指将整个网页的宽度分成若干等份

BootStrap3默认将网页分成12等份, 把所有的视口分为4类

<!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><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>.container div {height: 50px;background-color: pink;}</style>
</head><body><!--需求: 大屏: 一行排列4个内容  (12 / 4 = 3)中屏:一行排列2个内容   (12 / 2 = 6)--><div class="container"><div class="col-lg-3 col-md-6">1</div><div class="col-lg-3 col-md-6">2</div><div class="col-lg-3 col-md-6">3</div><div class="col-lg-3 col-md-6">4</div></div></body>
</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><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>div {height: 50px;background-color: pink;margin-bottom: 50px;}</style>
</head>
<body><!-- 版心样式 --><!-- 盒子居中, 自带左右各15px的padding --><div class="container">1</div><!-- 不需要版心内边距的时候用 --><!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 --><div class="container"><div class="row">2</div></div><!-- 通栏样式--><!-- 宽度100%: 自带左右各15px的padding --><div class="container-fluid">3</div>
</body>
</html>
  1. .container是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中。
  2. .container-fluid也是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,宽度均为 100%。
  3. 分别使用.row类名和.col类名定义栅格布局的行和列。
  • .container类自带间距15px;
  • .row类自带间距-15px

全局样式

掌握BootStrap手册用法使用全局CSS样式美化标签

  1. 手册: BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点
  2. 网站首页 →Bootstrap3中文文档 →全局css样式 →按分类导航查找目标类

表格样式

  1. 在官网中查看表格的全局样式

  1. 在代码中使用这些样式, 查看效果
<!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>全局CSS样式-表格</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body><table class="table table-striped table-bordered table-hover"><tr><th>数字1</th><th>数字2</th><th>数字3</th></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>1</td><td>2</td><td>3</td></tr></table></body>
</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>全局CSS样式-按钮</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body><button class="btn btn-success btn-lg">成功</button><button class="btn btn-warning btn-xs">警告</button>
</body>
</html>

组件

使用BootStrap组件快速布局网页

  1. 组件: BootStrap提供的常见功能，包含了HTML结构和CSS样式

  1. 使用方法
  • 引入BootStrap样式
  • 复制结构，修改内容
  1. 示例代码
<!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><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head><body>/* 路径导航组件  */<ol class="breadcrumb"><li><a href="#">首页</a></li><li><a href="#">用户中心</a></li><li><a href="#">用户</a></li><li class="active">数据</li></ol>
</body></html>

插件

使用BootStrap插件实现常见的交互效果

  1. BootStrap提供的常见效果,包含了HTML结构，CSS样式与JavaScript

  1. 插件的使用步骤
  • 引入BootStrap样式
  • 引入js文件: jQueryjs + BootStrap.minjs

  1. 复制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><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head><body><div class="dropdown"><button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown trigger<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dLabel"><li>111</li><li>111</li><li>111</li></ul></div><script src="./js/jquery.js"></script><script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body></html>

轮播图效果

复制技巧: 如果代码多, 拖拽复制就不方便, 左键点击开始位置, 按住shift再右键点击结束位置, 快速选择

<!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><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head><body><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_1.jpg" alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_2.jpg" alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_3.jpg" alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="../03-项目-AlloyTeam/AlloyTeam/uploads/banner_4.jpg" alt="..."><div class="carousel-caption">...</div></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div><script src="./js/jquery.js"></script><script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body></html>

字体图标

使用Glyphicons字体图标实现网页中的图标效果

  1. Glyphicons字体图标的使用步骤
  • HTML页面引入BootStrap样式文件
  • 空标签调用对应类名
    • glyphicon
    • 图标类
  1. 示例代码
<!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><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body><i class="glyphicon glyphicon-user"></i>
</body>
</html>

腾讯全端

项目准备

新建index.html文件和index.less文件

<!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><link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body><script src="./lib/js/jquery.js"></script><script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
  1. bootstrap.min.css中已经集成了清除浏览器默认的代码

banner

使用轮播组件, 并设置banner图的高度

<!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><link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body><!-- banner --><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li><li data-target="#carousel-example-generic" data-slide-to="3"></li></ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox"><div class="item active"><img src="./uploads/banner_1.jpg" alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="./uploads/banner_2.jpg" alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="./uploads/banner_3.jpg" alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="./uploads/banner_4.jpg" alt="..."><div class="carousel-caption">...</div></div></div><!-- Controls --><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div><!-- banner --><script src="./lib/js/jquery.js"></script><script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
// banner
.carousel {// 如果视口<768, 图250 max-width// 如果视口<992, 图400 max-width// 如果视口>992, 图500 min-widthimg {height: 100% !important;}@media (max-width: 992px) {.item {height: 400px;}}@media (max-width: 768px) {.item {height: 250px;}}@media (min-width: 992px) {.item {height: 500px;}}
}

头部组件

使用导航条组件

<!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><link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body><!-- 头部 --><nav class="navbar navbar-default navbar-fixed-top"><div class="container"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#"><img src="./images/logo.png" alt=""></a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav navbar-right"><li><a href="#">首页</a></li><li><a href="#">博客</a></li><li><a href="#">GitHub</a></li><li><a href="#">Tweb Conf</a></li><li><a href="#">SuperStar</a></li><li><a href="#">Web前端</a></li><li><a href="#">关于</a></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav><!-- 头部 --><!-- banner -->... ...<!-- banner --><script src="./lib/js/jquery.js"></script><script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
// 头部
.navbar-default {background-color: transparent;border: 0;
}

定制导航

bootStrap默认的导航条组件, 是屏幕小于768时才折叠为图标, 项目需求是小于992时就堆叠排列

  1. 点击定制, 里面有非常多的配置项

  1. 如果知道位置, 可以从左侧的导航中索引, 如果不清楚, 直接全局搜索

  1. 找到需要修改的配置项之后, 修改为自己需要的值

  1. 下载定制好的bootstarp, 然后在项目中使用

<!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>/* 标准版 */<!-- <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"> -->/* 定制版 */<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="./css/index.css">
</head><body><script src="./lib/js/jquery.js"></script><script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body></html>
  1. 查看效果: 中屏的时候就可以堆叠排列了

开源项目

了解排版标签

  1. bootstrap为常见的标签都优化了默认样式, 同时提供了很多的类名, 可以方便的修改标签样式
  2. 如果需要查阅和使用, 找到全局样式, 点击排版区域进行查看

使用bootstrap栅格系统布局时, 栅格盒子只做布局, 内容的排版或者盒子的间距全部交给子级盒子

<!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><!-- <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"> --><link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 开源项目 --><div class="project"><div class="container">/* 栅格盒子只做布局, 其他的属性, 都要加给a标签 */<div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div><div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div><div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div><div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div></div></div><!-- 开源项目 --><script src="./lib/js/jquery.js"></script><script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body></html>
// 开源项目
.project {.container {div {background-color: pink;a {display: block;height: 200px;background-color: skyblue;}}}
}
  1. 这样布局的原因就是, 栅格系统把网页等分为12份, 已经占满了页面
  2. 如果再额外给栅格布局的盒子添加外边距, 会让布局容器超过100%, 导致换行排列

  1. 所以最佳实践, 栅格盒子只做布局 ,不设置任何属性, 这也符合单一职责的软件开发思想
  2. 如果想让盒子之间有距离,可以控制子集盒子的边距

完成开源项目区域

<!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><link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 头部 -->... ...<!-- 头部 --><!-- banner -->......<!-- banner --><!-- 开源项目 --><div class="project"><h3 class="h2">OpenSource/开源项目</h3><p>种类众多的开源项目，让你爱不释手</p><div class="container"><!-- .row --><div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div><div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div><div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div><div class="col-xs-12 col-sm-6 col-md-3"><a href="#">1</a></div></div></div><!-- 开源项目 --><script src="./lib/js/jquery.js"></script><script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body></html>
// 开源项目
.project {padding-top: 30px;text-align: center;.container {div {a {display: block;height: 200px;background-color: skyblue;}}}
}

扩展内容

在全局样式中, 还有辅助类和响应式工具这两个内容我们没接触, 现在了解一下

辅助类, 帮助我们快速完成一些效果

  1. 快速浮动和清除浮动可能会用到, 需要的时候, 查阅一下, 添加类名就行

响应式工具: 不同视口宽度控制元素显示隐藏

  1. 通过类名, 就能控制元素在不同适口的显示和隐藏
  2. 之前案例自己用媒体查询控制也行, 用这个类名方便一点

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.pswp.cn/diannao/85528.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

在 Windows安装 make 的几种方式

在 Windows安装 make 的几种方式

在 Windows 上使用 make&#xff08;通常用于自动化构建 C/C 项目等&#xff09;有几种方法。以下是最常见的几种安装和使用方法&#xff1a; 文章目录 ✅ 方法一&#xff1a;使用 Chocolatey 安装 GNU Make&#xff08;推荐&#xff09;✅ 方法二&#xff1a;使用 WSL&#xf…
阅读更多...
深度学习笔记25-RNN心脏病预测(Pytorch)

深度学习笔记25-RNN心脏病预测(Pytorch)

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、前期准备 1.数据处理 import torch.nn.functional as F import numpy as np import pandas as pd import torch from torch import nn dfpd.read_csv(r&…
阅读更多...
Pytorch知识点2

Pytorch知识点2

Pytorch知识点 1、官方教程2、张量&#x1f9f1; 0、数组概念&#x1f9f1; 1. 创建张量&#x1f4d0; 2. 张量形状与维度&#x1f522; 3. 张量数据类型➗ 4. 张量的数学与逻辑操作&#x1f504; 5. 张量的就地操作&#x1f4e6; 6. 复制张量&#x1f680; 7. 将张量移动到加速…
阅读更多...
池中锦鲤的自我修养，聊聊蓄水池算法

池中锦鲤的自我修养，聊聊蓄水池算法

面试如泡池&#xff0c;蓄水似人生 起初你满怀期待跳进大厂池子&#xff0c;以为自己是天选之子&#xff0c;结果发现池子里早挤满了和你一样的“锦鲤候选人”。HR的渔网一撒&#xff0c;捞谁全看概率——这不就是蓄水池算法的精髓吗&#xff1f; 初入池&#xff08;i≤k&…
阅读更多...
Linux应用开发之网络套接字编程

Linux应用开发之网络套接字编程

套接字&#xff08;Socket&#xff09;是计算机网络数据通信的基本概念和编程接口&#xff0c;允许不同主机上的进程&#xff08;运行中的程序&#xff09;通过网络进行数据交换。它为应用层软件提供了发送和接收数据的能力&#xff0c;使得开发者可以在不用深入了解底层网络细…
阅读更多...
小白的进阶之路系列之六----人工智能从初步到精通pytorch数据集与数据加载器

小白的进阶之路系列之六----人工智能从初步到精通pytorch数据集与数据加载器

本文将介绍以下内容： 数据集与数据加载器 数据迁移 如何建立神经网络 数据集与数据加载器 处理数据样本的代码可能会变得混乱且难以维护；理想情况下，我们希望我们的数据集代码与模型训练代码解耦，以获得更好的可读性和模块化。PyTorch提供了两个数据原语：torch.utils…
阅读更多...
深入理解设计模式之中介者模式

深入理解设计模式之中介者模式

深入理解设计模式之&#xff1a;中介者模式&#xff08;Mediator Pattern&#xff09; 一、什么是中介者模式&#xff1f; 中介者模式&#xff08;Mediator Pattern&#xff09;是一种行为型设计模式。它通过引入一个中介对象&#xff0c;来封装一组对象之间的交互&#xff0…
阅读更多...
基于通义千问的儿童陪伴学习和成长的智能应用架构。

基于通义千问的儿童陪伴学习和成长的智能应用架构。

1.整体架构概览 我们的儿童聊天助手将采用典型的语音交互系统架构，结合大模型能力和外部知识库： 2. 技术方案分解 2.1. 前端应用/设备 选择： 移动App（iOS/Android）、Web应用，或者集成到智能音箱/平板等硬件设备中。技术栈： 移动App： React Native / Flutter (跨平台…
阅读更多...
Python Day40

Python Day40

Task&#xff1a; 1.彩色和灰度图片测试和训练的规范写法&#xff1a;封装在函数中 2.展平操作&#xff1a;除第一个维度batchsize外全部展平 3.dropout操作&#xff1a;训练阶段随机丢弃神经元&#xff0c;测试阶段eval模式关闭dropout 作业&#xff1a;仔细学习下测试和训练代…
阅读更多...
WordPress_suretriggers 权限绕过漏洞复现（CVE-2025-3102）

WordPress_suretriggers 权限绕过漏洞复现（CVE-2025-3102）

免责申明： 本文所描述的漏洞及其复现步骤仅供网络安全研究与教育目的使用。任何人不得将本文提供的信息用于非法目的或未经授权的系统测试。作者不对任何由于使用本文信息而导致的直接或间接损害承担责任。如涉及侵权，请及时与我们联系，我们将尽快处理并删除相关内容。 前…
阅读更多...
基于Spring Boot 电商书城平台系统设计与实现(源码+文档+部署讲解）

基于Spring Boot 电商书城平台系统设计与实现(源码+文档+部署讲解）

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…
阅读更多...
LeetCode 39.组合总和：回溯法与剪枝优化的完美结合

LeetCode 39.组合总和：回溯法与剪枝优化的完美结合

一、问题本质与形式化定义 1.1 题目形式化描述 输入&#xff1a;无重复整数数组candidates、目标值target输出&#xff1a;所有和为target的组合集合&#xff0c;满足&#xff1a; 元素可重复使用组合内元素非降序&#xff08;避免重复解&#xff09;解集无重复组合 1.2 问…
阅读更多...
windows11安装编译QtMvvm

windows11安装编译QtMvvm

windows11安装编译QtMvvm 1 从github下载代码2 官方的Download/Installtion3 自行构建编译QtMvvm遇到的问题3.1 `qmake`问题执行命令报错原因分析qmake报错：找不到编译器 cl解决方案3.2 `make qmake_all`问题执行命令报错原因分析make命令未识别解决方案3.3 缺少`perl`问题执行…
阅读更多...
unix/linux source 命令，其历史争议、兼容性、生态、未来展望

unix/linux source 命令，其历史争议、兼容性、生态、未来展望

现在把目光投向unix/linux source命令的历史争议、兼容性、生态和未来展望，这能让我们更全面地理解一个技术点在更广阔的图景中所处的位置。 一、历史争议与设计权衡 虽然 source (或 .) 命令功能强大且不可或缺，但在其发展和使用过程中，也存在一些微妙的争议或设计上的权衡…
阅读更多...
开发时如何通过Service暴露应用？ClusterIP、NodePort和LoadBalancer类型的使用场景分别是什么？

开发时如何通过Service暴露应用？ClusterIP、NodePort和LoadBalancer类型的使用场景分别是什么？

一、Service核心概念 Service通过标签选择器&#xff08;Label Selector&#xff09;关联Pod&#xff0c;为动态变化的Pod集合提供稳定的虚拟IP和DNS名称&#xff0c;主要解决&#xff1a; 服务发现负载均衡流量路由 二、Service类型详解 1. ClusterIP&#xff08;默认类型…
阅读更多...
从线性代数到线性回归——机器学习视角

从线性代数到线性回归——机器学习视角

真正不懂数学就能理解机器学习其实是个神话。我认为&#xff0c;AI 在商业世界可以不懂数学甚至不懂编程也能应用&#xff0c;但对于技术人员来说&#xff0c;一些基础数学是必须的。本文收集了我认为理解学习本质所必需的数学基础&#xff0c;至少在概念层面要掌握。毕竟&…
阅读更多...
华为IP（7）

华为IP（7）

端口隔离技术 产生的背景 1.以太交换网络中为了实现报文之间的二层隔离&#xff0c;用户通常将不同的端口加入不同的VLAN&#xff0c;实现二层广播域的隔离。 2.大型网络中&#xff0c;业务需求种类繁多&#xff0c;只通过VLAN实现二层隔离&#xff0c;会浪费有限的VLAN资源…
阅读更多...
Docker Desktop无法在windows低版本进行安装

Docker Desktop无法在windows低版本进行安装

问题描述 因工作需要&#xff0c;现在一台低版本的window系统进行Docker Desktop的安装&#xff0c;但是安装过程当中出现了报错信息 系统版本配置 原因分析&#xff1a; 关于本机查看了系统的版本号&#xff0c;版本号如下为1909,但是docker Desktop要求的最低的win10版本…
阅读更多...
深入理解 Maven 循环依赖问题及其解决方案

深入理解 Maven 循环依赖问题及其解决方案

在 Java 开发领域&#xff0c;Maven 作为主流构建工具极大简化了依赖管理和项目构建。然而**循环依赖&#xff08;circular dependency&#xff09;**问题仍是常见挑战&#xff0c;轻则导致构建失败&#xff0c;重则引发类加载异常和系统架构混乱。 本文将从根源分析循环依赖的…
阅读更多...
Git 全平台安装指南：从 Linux 到 Windows 的详细教程

Git 全平台安装指南：从 Linux 到 Windows 的详细教程

目录 一、Git 简介 二、Linux 系统安装指南 1、CentOS/RHEL 系统安装 2、Ubuntu/Debian 系统安装 3、Windows 系统安装 四、安装后配置&#xff08;后面会详细讲解&#xff0c;现在了解即可&#xff09; 五、视频教程参考 一、Git 简介 Git 是一个开源的分布式版本控制系…
阅读更多...
最新文章

Copyright @ 2022~2023