网站建站查询,株洲发布,国内网站,阿里云卸载wordpress目录 01-index.html的完整代码02-图片可以通过类 rounded-circle 设置为圆形显示03-li classnav-item mt-1 a中#xff0c;类mt-1是什么意思#xff1f;类a又是什么意思#xff1f;04-hrefjavascript:void(0);是什么意思#xff1f;05-类f… 目录 01-index.html的完整代码02-图片可以通过类 rounded-circle 设置为圆形显示03-li classnav-item mt-1 a中类mt-1是什么意思类a又是什么意思04-hrefjavascript:void(0);是什么意思05-类font-menu是什么样式06-类margin1是什么样式07-类d-none是什么样式08-类d-sm-block是什么样式09-类card-link是什么样式10-类rounded-pill是什么样式11-template1 和 template2是如何实现切换的12-类clearfix是什么作用为什么要清除浮动13-类carousel slide是什么效果14-类rounded是什么效果 01-index.html的完整代码
!DOCTYPE html
html
headmeta charsetUTF-8titleTitle/titlemeta nameviewport contentwidthdevice-width,initial-scale1, shrink-to-fitnolink relstylesheet hrefbootstrap-4.5.3-dist/css/bootstrap.cssscript srcjs/jquery-3.5.1.slim.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.bundle.js/scriptscript srcbootstrap-4.5.3-dist/js/bootstrap.min.js/script!--css文件--link relstylesheet hrefcss/style.css!--字体图标文件--link relstylesheet hreffont-awesome-4.7.0/css/font-awesome.cssscript srcjs/index.js/script!--Font Awesome是一套专为Twitter Bootstrap设计的图标字体几乎囊括了网页中可能用到的所有图标这些图标通过Web Font的方式来显示可以被任意缩放、改变颜色你可以像修改文字样式那样来修改图标样式。 --
/head
body classcontainer-fluid
div classrow!--header--div classcol-12 col-lg-3 left div idtemplate1div classrowdiv classcol-10ul classnavli classnav-itema classnav-link active hrefindex.htmlimg width40 srcimages/logo.png alt classrounded-circle/a/lili classnav-item mt-1 aa classnav-link hrefjavascript:void(0);账户/a/lili classnav-item mt-1 aa classnav-link hrefjavascript:void(0);菜单/a/li/ul/divdiv classcol-2 mt-2 font-menu text-righta ida1 hrefjavascript:void(0); i classfa fa-bars/i/a/div/divdiv classmargin1h5 classml-3 my-3 d-none d-sm-block text-lg-centerspan classb心情惬意来杯咖啡吧/spannbsp;nbsp;i classfa fa-coffee/i/h5div classml-3 my-3 d-none d-sm-block text-lg-centera hrefjavascritp:void(0); classcard-link btn rounded-pill text-success ai classfa fa-user-circle/inbsp;登nbsp;录/aa hrefjavascritp:void(0); classcard-link btn btn-outline-success rounded-pill text-success a注nbsp;册/a/div/div/divdiv idtemplate2 classd-nonediv classrowdiv classcol-10ul classnavli classnav-itema classnav-link active hrefindex.htmlimg width40 srcimages/logo.png alt classrounded-circle/a/lili classnav-itema classnav-link mt-2 a hrefindex.html咖啡俱乐部/a/li/ul/divdiv classcol-2 mt-2 font-menu text-righta ida2 hrefjavascript:void(0);i classfa fa-times/i/a/div/divdiv classmargin2div classml-5 mt-5h6a hrefindex.html门店/a/h6h6a hrefindex.html俱乐部/a/h6h6a hrefindex.html菜单/a/h6hr/h6a hrefindex.html移动应用/a/h6h6a hrefindex.html臻选精品/a/h6h6a hrefindex.html专星送/a/h6h6a hrefindex.html咖啡讲堂/a/h6h6a hrefindex.html烘焙工厂/a/h6h6a hrefindex.html帮助中心/a/h6hr/a hrefindex.html classcard-link btn rounded-pill text-success pl-0i classfa fa-user-circle/inbsp;登nbsp;录/aa hrefindex.html classcard-link btn btn-outline-success rounded-pill text-success注nbsp;册/a/div/div/div/divdiv classcol-12 col-lg-9 right p-0 clearfixdiv idcarouselExampleControls classcarousel slide data-ridecarouseldiv classcarousel-inner max-hdiv classcarousel-item activeimg srcimages/001.jpg classd-block w-100 alt.../divdiv classcarousel-itemimg srcimages/002.jpg classd-block w-100 alt.../divdiv classcarousel-itemimg srcimages/003.jpg classd-block w-100 alt.../div/diva classcarousel-control-prev href#carouselExampleControls data-slideprevspan classcarousel-control-prev-icon/span/aa classcarousel-control-next href#carouselExampleControls data-slidenextspan classcarousel-control-next-icon/span/a/div!--多列卡片浮动排版--div classp-4 listh5 classtext-center my-3 a咖啡推荐/h5h5 classtext-center mb-4 asmall在购物旗舰店可以发现更多咖啡心意/small/h5div classcard-columnsdiv classmy-4 my-sm-0img classcard-img-top srcimages/006.jpg alt/divdiv classmy-4 my-sm-0img classcard-img-top srcimages/004.jpg alt/divdiv classmy-4 my-sm-0img classcard-img-top srcimages/005.jpg alt/div/div/div!--网格系统布局--div classrow py-5div classcol-12 col-sm-6 pt-2div classcard border-0 text-center text-sm-leftdiv classcard-body ml-5h4 classcard-title咖啡俱乐部/h4p classcard-text a开启您的星享之旅星星越多、会员等级越高、好礼越丰富。/pa href# classcard-link btn btn-outline-success a注册/aa href# classcard-link btn btn-outline-success a登录/a/div/div/divdiv classcol-12 col-sm-6 text-center mt-5a hrefimg srcimages/007.png alt classimg-fluid/a/div/divdiv classp-4 listh5 classtext-center my-3咖啡精选/h5h5 classtext-center mb-4 asmall在购物旗舰店可以发现更多咖啡心意/small/h5div classrowdiv classcol-12 col-sm-6 col-md-3 mb-3 mb-md-0div classbg-light p-4 list-border roundedimg classimg-fluid srcimages/008.jpg alth6 classtext-secondary text-center mt-3 a套餐一/h6/div/divdiv classcol-12 col-sm-6 col-md-3 mb-3 mb-md-0div classbg-white p-4 list-border roundedimg classimg-fluid srcimages/009.jpg alth6 classtext-secondary text-center mt-3 a套餐二/h6/div/divdiv classcol-12 col-sm-6 col-md-3 mb-3 mb-md-0div classbg-light p-4 list-border roundedimg classimg-fluid srcimages/010.jpg alth6 classtext-secondary text-center mt-3 a套餐三/h6/div/divdiv classcol-12 col-sm-6 col-md-3 mb-3 mb-md-0div classbg-light p-4 list-border roundedimg classimg-fluid srcimages/011.jpg alth6 classtext-secondary text-center mt-3 a套餐四/h6/div/div/div/divdiv classp-4h5 classtext-center my-3咖啡讲堂/h5h5 classtext-center mb-4 asmall了解更多咖啡文化/small/h5div classboxul idulList classclearfixli classlist-border roundedimg srcimages/015.jpg alt width300h6 classtext-center mt-3 a咖啡种植/h6/lili classlist-border roundedimg srcimages/014.jpg alt width300h6 classtext-center mt-3 a咖啡调制/h6/lili classlist-border roundedimg srcimages/013.jpg alt width300h6 classtext-center mt-3 a 咖啡烘焙/h6/lili classlist-border roundedimg srcimages/012.jpg alt width300h6 classtext-center mt-3 a手冲咖啡/h6/li/uldiv idlefti classfa fa-chevron-circle-left fa-2x text-success/i/divdiv idrighti classfa fa-chevron-circle-right fa-2x text-success/i/div/div/div/div
/div
!--footer——在sm型设备尺寸下显示--
div classrow fixed-bottom d-block d-sm-none py-1 bg-light border-top idfooter ul classtext-center p-0 idmyTablia classab b text-dark hrefindex.htmli classfa fa-home fa-2x p-1/ibr/主页/a/lilia classb text-dark hrefjavascript:void(0);i classfa fa-calendar-minus-o fa-2x p-1/ibr/门店/a/lilia classb text-dark hrefjavascript:void(0);i classfa fa-user-circle-o fa-2x p-1/ibr/我的账户/a/lilia classb text-dark hrefjavascript:void(0);i classfa fa-bitbucket-square fa-2x p-1/ibr/菜单/a/lilia classb text-dark hrefjavascript:void(0);i classfa fa-table fa-2x p-1/ibr/更多/a/li/ul
/div
/body
script srcjs/jquery-1.8.3.min.js/script
script$(function(){var nowIndex0;var liNumber$(#ulList li).length;function change(index){var ulMoveindex*300; //设置移动距离$(#ulList).animate({left:-ulMovepx},500);}$(#left).click(function(){nowIndex (nowIndex 0) ? (--nowIndex) :0;change(nowIndex);})$(#right).click(function(){nowIndex(nowIndexliNumber-1) ? (nowIndex) :(liNumber-1);change(nowIndex);});})
/script
/html02-图片可以通过类 rounded-circle 设置为圆形显示
相关代码如下
img width40 srcimages/logo.png alt classrounded-circle运行效果如下
03-li classnav-item mt-1 a中类mt-1是什么意思类a又是什么意思
类mt-1这是Bootstrap的辅助类之一用于控制元素的外边距margin-top。具体来说mt-1 表示在该元素的顶部添加一个较小的外边距。mt 代表 “margin-top”而数字 1 表示外边距的大小或程度。Bootstrap提供了一系列边距类从 mt-0没有外边距到 mt-5最大外边距不等。
类a:这是自定义的样式用于控制字体大小。在文件 “E:\HTML_code\book_code\ch15\css\style.css” 中 相关代码如下
.a{font-size: 22px;
}
.b{font-size: 20px;
}
.c h5{font-size: 20px;
}04-hrefjavascript:void(0);是什么意思
li classnav-item mt-1 aa classnav-link hrefjavascript:void(0);账户/a
/li请问其中的hrefjavascript:void(0);是什么意思
在提供的Bootstrap代码中hrefjavascript:void(0);是一个在HTML中常见的用法通常用于创建一个不执行任何实际操作的超链接anchor。 href 是HTML中超链接元素 a 的属性它定义了链接目标的URL。正常情况下这将是指向一个网页或其他资源的URL。但当 href 的值为 javascript:void(0); 时它实际上是一种JavaScript伪链接。 javascript:void(0); 是一个JavaScript表达式它执行一个空操作并返回 undefined。这是一种常见的技巧用于创建一个点击链接时不执行任何跳转或操作的超链接通常用于一些特定的交互或事件处理需求。
这种做法通常用于防止页面跳转但允许你附加JavaScript事件处理程序以便在链接被点击时执行特定的JavaScript代码。在您提供的代码中点击账户链接将不导致浏览器跳转到新页面而是执行与该链接关联的JavaScript代码如果有的话。这可以用于触发模态框、下拉菜单或其他用户界面交互元素的显示或隐藏等操作。
总结说白了就是预留一个 javascript 脚本的操作在这里以便将来添加 javascript 操作。
05-类font-menu是什么样式
这是自定义的一个类定义代码如下
.font-menu{font-size: 1.3rem;
}06-类margin1是什么样式
这是自定义的一个类定义代码如下
media (min-width: 992px){.left {position: fixed;top: 0;left: 0;}.right{margin-left:25% ;}.margin1{margin-top: 40vh;}提问 40vh是什么意思 答“vh” 是 CSS 中的一个长度单位它表示视窗viewport的高度的百分比。具体来说1vh 等于视窗高度的1%。这个单位通常用于响应式设计以使元素的大小或位置相对于视窗的高度进行调整。在你提供的代码中“margin-top: 40vh;” 表示元素的上外边距margin-top设置为视窗高度的 40%。这将使元素在视窗中垂直居中距离视窗顶部的距离为视窗高度的 40%。
07-类d-none是什么样式
相关代码如下
h5 classml-3 my-3 d-none d-sm-block text-lg-centerspan classb心情惬意来杯咖啡吧/spannbsp;nbsp;i classfa fa-coffee/i
/h5Bootstrap的类d-none是用于控制元素的显示与隐藏的类。这个类主要用于响应式设计可以帮助你在不同屏幕大小或设备上隐藏或显示特定的内容。
d-none类的作用是将一个元素设为不可见即隐藏它无论在哪种设备上都不显示。它适用于以下情况 隐藏元素 你可以将d-none类应用于任何HTML元素如div、p、span等以使它们在页面上不可见。 响应式设计 这个类通常与Bootstrap的响应式工具类一起使用例如d-sm-none、d-md-none、d-lg-none、d-xl-none等这些类允许你根据不同的屏幕大小来控制元素的可见性。例如d-md-none将元素在中等屏幕尺寸及更大的屏幕上隐藏。
示例
div classd-none这个元素在所有屏幕大小下都不可见。/div
div classd-md-none这个元素在中等屏幕尺寸及更大的屏幕上不可见。/div使用d-none类以及其他相关类可以帮助你根据用户的设备或屏幕尺寸来提供更好的用户体验确保内容在不同设备上都能够适当显示或隐藏。
但是很奇怪在我的电脑浏览器上“心情惬意来杯咖啡吧 ”居然是显示状态的截图如下 不过这个问题感觉不是很重要先略过吧。
08-类d-sm-block是什么样式
Bootstrap中的d-sm-block类是用于控制元素在特定屏幕大小viewport width上显示为块级元素block element的类。这类用于实现响应式设计允许你在不同屏幕尺寸上控制元素的可见性和布局。
具体来说d-sm-block类的作用是使元素在小型small屏幕尺寸上显示为块级元素这意味着元素会在自己的行上占据整个可用宽度换句话说元素会从上到下垂直排列而不是水平并排排列。
这种类的结构通常用于响应式设计以适应不同大小的屏幕使内容在小屏幕上更容易阅读和浏览。
示例
div classd-sm-block这个元素在小型屏幕上显示为块级元素垂直排列。/div在上述示例中元素在小型屏幕上将显示为块级元素占据整个可用宽度而在较大屏幕上则可能显示为行内元素水平排列。
通过结合使用不同的d-*-block和d-*-none类你可以根据不同的屏幕尺寸来控制元素的可见性和布局以创建响应式的页面布局提供更好的用户体验。
09-类card-link是什么样式
a hrefjavascritp:void(0); classcard-link btn rounded-pill text-success ai classfa fa-user-circle/inbsp;登nbsp;录/a在Bootstrap中无类card-link在自定义样式中也无类card-link。用F12进入调试模式也没发现这个类。
10-类rounded-pill是什么样式
在Bootstrap中rounded-pill 是一个用于设置元素圆角边框的类通常用于创建圆形或椭圆形的元素比如按钮或图像。它是Bootstrap 4和Bootstrap 5的一部分用于改变元素的外观。
rounded-pill 类将元素的边框设置为圆形使其看起来像一个椭圆或圆形的形状而不是传统的矩形。这可用于创建视觉上吸引人的按钮、徽章、标签或其他元素。
以下是如何在HTML中使用rounded-pill类的示例
button classbtn btn-primary rounded-pill圆形按钮/button在这个示例中rounded-pill 类被应用于一个按钮元素使按钮的边框变为圆形从而呈现出圆形按钮的外观。
请注意rounded-pill 是Bootstrap的一个辅助类用于快速设置元素的外观但你可以进一步自定义这些边框样式通过CSS来实现更精细的控制。
11-template1 和 template2是如何实现切换的
template1和template2之间的切换是通过d-none类来实现的。d-none类是Bootstrap提供的一个用于隐藏元素的类。 div idtemplate2 classd-none具体来说template2元素具有d-none类这使得它一开始是隐藏的。当需要切换到template2时相关的组件比如这里的导航组件会移除d-none类使其可见。类似地要切换回template1只需相关组件重新添加d-none类。
12-类clearfix是什么作用为什么要清除浮动
div classcol-12 col-lg-9 right p-0 clearfixBootstrap的类clearfix是用来解决浮动元素在容器内部导致高度塌陷的问题的一种解决方案。在网页开发中经常会使用浮动float来布局元素但浮动的元素可能会让其父容器无法正常计算高度从而导致容器无法包含浮动元素的问题。clearfix类可以用来清除这些浮动确保父容器正确地包裹其内部的浮动元素。
通常您会将clearfix类应用于父容器以确保它包含了其中的浮动元素。这可以通过将clearfix类添加到父容器的HTML元素上来实现或者您可以使用内联样式。
以下是一个示例演示如何在Bootstrap中使用clearfix类
div classcontainer clearfixdiv classfloat-left浮动元素 1/divdiv classfloat-left浮动元素 2/div
/div那么什么叫高度塌陷的问题呢请大家看下面这篇博文 https://blog.csdn.net/xiagh/article/details/53356158
其实现原理是什么呢请大家看下面这篇博文 https://blog.csdn.net/qq_36538012/article/details/133946031
13-类carousel slide是什么效果
div idcarouselExampleControls classcarousel slide data-ridecarouselBootstrap中有一个类叫做carousel用于创建轮播carousel组件。这类是Bootstrap的Carousel组件的核心类用于创建轮播图像、内容和幻灯片效果。
要创建一个轮播你通常需要以下步骤
包含必要的Bootstrap CSS和JavaScript文件。创建一个具有.carousel类的HTML元素通常是一个div元素。在轮播元素内部创建包含轮播项的幻灯片slides通常是div元素它们应该具有.carousel-item类。在每个轮播项内部添加图像、文本或其他内容。使用导航控件如前进和后退按钮以及指示器表示当前轮播项的小圆点来导航轮播。
以下是一个简单的Bootstrap轮播示例
!DOCTYPE html
html
headmeta charsetutf-8titleBootstrap Carousel Example/title!-- 引入Bootstrap的CSS和JavaScript文件 --link relstylesheet hrefhttps://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.cssscript srchttps://code.jquery.com/jquery-3.5.1.slim.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/popperjs/core2.9.3/dist/umd/popper.min.js/scriptscript srchttps://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js/script
/head
bodydiv idmyCarousel classcarousel slide data-ridecarousel!-- 轮播指示器 --ul classcarousel-indicatorsli data-target#myCarousel data-slide-to0 classactive/lili data-target#myCarousel data-slide-to1/lili data-target#myCarousel data-slide-to2/li/ul!-- 轮播项目 --div classcarousel-innerdiv classcarousel-item activeimg srcimage1.jpg altImage 1/divdiv classcarousel-itemimg srcimage2.jpg altImage 2/divdiv classcarousel-itemimg srcimage3.jpg altImage 3/div/div!-- 左右导航按钮 --a classcarousel-control-prev href#myCarousel rolebutton data-slideprevspan classcarousel-control-prev-icon aria-hiddentrue/spanspan classsr-onlyPrevious/span/aa classcarousel-control-next href#myCarousel rolebutton data-slidenextspan classcarousel-control-next-icon aria-hiddentrue/spanspan classsr-onlyNext/span/a
/div/body
/html这个示例中carousel类用于创建轮播元素carousel-item类用于定义轮播项。通过使用Bootstrap的CSS和JavaScript你可以实现具有轮播效果的图像或内容展示。
14-类rounded是什么效果
div classbg-light p-4 list-border rounded在Bootstrap中rounded 是一个用于添加圆角边框效果的类。这个类可以应用于各种元素如按钮、图像、卡片等以使它们的边框具有圆角效果使元素看起来更加柔和和现代。
rounded 类有多个变体你可以根据需要选择其中之一 rounded这是基本的圆角类会在元素的所有四个角上添加相同程度的圆角。 rounded-top这个类将圆角效果应用在元素的顶部两个角上而底部的两个角则保持直角。 rounded-right、rounded-bottom、rounded-left这些类分别将圆角效果应用在元素的右上角、右下角、左下角。它们分别只作用于一个角而其他角仍然保持直角。 rounded-circle这个类将元素变成一个圆形通常用于图像。 rounded-pill这个类将元素变成一个椭圆形通常用于按钮使其具有椭圆形的外观。 rounded-0这个类会移除所有圆角效果使元素的边角都变成直角。
以下是一些示例
button classbtn btn-primary rounded圆角按钮/button
img srcexample.jpg classimg-fluid rounded-circle alt圆形图像
div classcard rounded-top!-- 卡片内容 --
/div使用这些类可以让你根据设计需求自定义元素的边角效果使界面看起来更吸引人。
