前端学习-day14

2024-09-07 23:44
文章标签 学习 前端 frontend day14

本文主要是介绍前端学习-day14，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

    • 01-媒体查询
    • 02-媒体查询-书写顺序
    • 03-媒体查询
    • 04-媒体查询-link引入
    • 06-Bootstrap-使用
    • 07-Bootstrap-栅格系统
    • 08-Bootstrap-按钮样式
    • 09-Bootstrap-表格样式
    • 10-bootstrap组件
    • 11-bootstrap字体图标
    • alloyTeam项目
      • index.html
      • index.less

01-媒体查询

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 屏幕宽度小于等于768，网页背景色是粉色 */@media(max-width:768px){body{background-color: pink;}}/* 屏幕宽度大于等于1200，网页背景是绿色 */@media(min-width:1200px){body{background-color: pink;}}</style>
</head>
<body></body>
</html>

02-媒体查询-书写顺序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*   <!-- 从小到大写 --> */body{background-color: #ccc;}@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>

03-媒体查询

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box{display: flex;}.left{width: 300px;height: 500px;background-color: pink;}.right{flex: 1;height: 500px;background-color: green;}@media(max-width:768px){/* 隐藏左侧的粉盒子 */.left{display: none;}}</style>
</head>
<body><div class="box"><div class="left">left</div><div class="right">dbsh恨不得不得不都会觉得吧v和的环境司机阿尔法会如何南方人是甲方缴纳skier哦首都机场你可能才看到你几年级的农村电视剧大奖吉萨大夫人警方南昌南昌彻底解决彻底解除冻结你拒绝</div></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

04-媒体查询-link引入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" media="(max-width:768px)" href="./css/pink.css"><link rel="stylesheet" media="(min-width:1200px)" href="./css/green.css">
</head>
<body></body>
</html>

在这里插入图片描述

06-Bootstrap-使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href=".//bootstrap/css/bootstrap.min.css"><style>div{height: 50px;width: 50px;background-color: pink;}</style>
</head>
<body><div class="container">1</div>
</body>
</html>

在这里插入图片描述

07-Bootstrap-栅格系统

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body><!-- 视口宽度大于等于1200px，一行排4个盒子（最起码有四个盒子）视口宽度大于等于768px，一行排2个盒子视口宽度大于等于576px，一行排1个盒子--><div class="container"><div class="row"><div class="col-xl-3 col-md-6 col-sm-12">1</div><div class="col-xl-3 col-md-6 col-sm-12">2</div><div class="col-xl-3 col-md-6 col-sm-12">3</div><div class="col-xl-3 col-md-6 col-sm-12">4</div></div></div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

08-Bootstrap-按钮样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body><button class="btn btn-success btn-sm">按钮1</button><button class="btn btn-warning btn-lg">按钮1</button>
</body>
</html>

在这里插入图片描述

09-Bootstrap-表格样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body><table class="table table-striped table-hover"><tr class="table-success"><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张胜男</td><td>19</td><td>男</td></tr><tr><td>张胜男</td><td>19</td><td>男</td></tr><tr><td>张胜男</td><td>19</td><td>男</td></tr></table>
</body>
</html>

在这里插入图片描述

10-bootstrap组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"><style>.bg-body-tertiary{background-color: pink !important;}</style>
</head>
<body><!-- 1.引入样式表2.引入js3.复制结果，修改内容--><!-- 导航 --><nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">家</a></li><li class="nav-item"><a class="nav-link" href="#">特征</a></li><li class="nav-item"><a class="nav-link" href="#">图片</a></li><li class="nav-item"><a class="nav-link disabled">展示</a></li></ul></div></div></nav><!-- 轮播图 --><div id="carouselExampleIndicators" class="carousel slide"><div class="carousel-indicators"><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button></div><div class="carousel-inner"><div class="carousel-item active"><img src="./img/1.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./img/1.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./img/1.jpg" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./img/1.jpg" class="d-block w-100" alt="..."></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div><script src="./bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

11-bootstrap字体图标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap/css/font/bootstrap-icons.min.css"><style>.bi-android2{color: aqua;font-size: 100px;}</style>
</head>
<body><i class="bi bi-android2"></i>
</body>
</html>

在这里插入图片描述

alloyTeam项目

在这里插入图片描述

index.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="shortcut icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.min.css"><link rel="stylesheet" href="./css/index.css">
</head>
<body><!-- 导航栏 --><nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top"><!-- 将container-fluid改为container起到一个版心居中的作用 --><div class="container"><a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt=""></a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">博客</a></li><li class="nav-item"><a class="nav-link" href="#">Github</a></li><li class="nav-item"><a class="nav-link disabled"><i class="bi bi-fire"></i>TWeb Conf</a></li><li class="nav-item"><a class="nav-link disabled">SuperSter</a></li><li class="nav-item"><a class="nav-link disabled">Web前端导航</a></li><li class="nav-item"><a class="nav-link disabled">关于</a></li></ul></div></div></nav><!-- 轮播图 --><div id="carouselExampleIndicators" class="carousel slide"><div class="carousel-indicators"><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button></div><div class="carousel-inner"><div class="carousel-item active"></div><div class="carousel-item"></div><div class="carousel-item"></div><div class="carousel-item"></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button></div><!-- 开源项目 --><div class="project container"><div class="title"><h2>OpenSource / 开源项目</h2><p>种类众多的开源项目，让你爱不释手</p></div><div class="content"><div class="row"><!-- 内边距不会填充子级的背景色 --><div class="col-lg-3 col-md-6 box"><a href="#"><div><img src="./assets/images/omi.png" alt=""></div><div class="text"><h2>omi</h2><p>开放现代的Web组件化框架</p></div></a></div><div class="col-lg-3 col-md-6 box"><a href="#"><div><img src="./assets/images/omi.png" alt=""></div><div class="text"><h2>omi</h2><p>开放现代的Web组件化框架</p></div></a></div><div class="col-lg-3 col-md-6 box"><a href="#"><div><img src="./assets/images/omi.png" alt=""></div><div class="text"><h2>omi</h2><p>开放现代的Web组件化框架</p></div></a></div><div class="col-lg-3 col-md-6 box"><a href="#"><div><img src="./assets/images/omi.png" alt=""></div><div class="text"><h2>omi</h2><p>开放现代的Web组件化框架</p></div></a></div></div></div></div><script src="./Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

index.less

//out:../css/
// 导航栏
.bg-body-tertiary{// 透明色background-color: transparent !important;.navbar-collapse{flex-grow: 0;.nav-link{color: white;}.navbar-nav .nav-link.active{color:yellow;}}
}
// 轮播图
.carousel{// 媒体查询 轮播图：小于768 图片高度250 大于等于768图片高度400 大于等于992图片高度500@media (max-width:768px) {.carousel-item{height: 250px;}} @media (min-width:768px) {.carousel-item{height: 400px;}} @media (min-width:992px) {.carousel-item{height: 500px;}} .carousel-item{// height: 500px;background-size: cover;background-position: center 0;}.carousel-item:nth-child(1){background-image: url(../assets/uploads/banner_1.jpg);}.carousel-item:nth-child(2){background-image: url(../assets/uploads/banner_2.jpg);}.carousel-item:nth-child(3){background-image: url(../assets/uploads/banner_3.jpg);}.carousel-item:nth-child(4){background-image: url(../assets/uploads/banner_4.jpg);}
}// 开源项目
// 视口宽度大于992：一行排四个 
// 视口宽度大于768：一行排两个
.project{margin-top: 60px;// 这行代码的作用是让开源项目这个盒子里面的所有小盒子以及里的文字水平居中text-align: center;.row{.box{height: 200px;// box有内边距是让box和a之间有白边padding: 10px;a{text-decoration: none;// 块级元素的高度和父级的一样的大display: block;// a的内边距是让a里面的字不那么靠近边缘padding: 20px;.text{color: white;h2{margin-top: 7px;}}}&:nth-child(1) a{background-color: pink;}&:nth-child(2) a{background-color: yellowgreen;}&:nth-child(3) a{background-color: skyblue;}&:nth-child(4) a{background-color: red;}}}
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这篇关于前端学习-day14的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1146500。

相关文章

HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2