绍兴seo网站优化,电子商务网店运营,五个网站页面,网店代理货源网响应式网页
如何实现响应式网页#xff1f;
解决方案#xff1a;方法1. 通过媒体查询的方法media (条件) {html {background-color: green;}}方法2. 使用 Bootstrap 框架方法一
基本使用
style/* 屏幕宽度小于等于768#xff0c;网页背景色是粉色 --- 小于等于
解决方案方法1. 通过媒体查询的方法media (条件) {html {background-color: green;}}方法2. 使用 Bootstrap 框架方法一
基本使用
style/* 屏幕宽度小于等于768网页背景色是粉色 --- 小于等于 max-width */media (max-width: 768px) {body {background-color: pink;}}/* 屏幕宽度大于等于1200网页背景色是绿色 --- 大于等于 min-width */media (min-width: 1200px) {body {background-color: green;}}
/style以上是媒体查询的基本使用书写顺序
style/* 网页默认背景色是灰色 */body {background-color: #ccc;}/* 屏幕宽度 大于等于 768px网页背景色是粉色 */media (min-width: 768px) {body {background-color: pink;}}/* 屏幕宽度 大于等于 992px网页背景色是绿色 */media (min-width: 992px) {body {background-color: green;}}/* 屏幕宽度 大于等于 1200px网页背景色是skyblue */media (min-width: 1200px) {body {background-color: skyblue;}}
/style书写顺序min-width从小到大max-width从大到小左侧隐藏案例
style* {margin: 0;padding: 0;}.box {display: flex;}.left {width: 300px;height: 500px;background-color: pink;}.main {flex: 1;height: 500px;background-color: skyblue;}media (max-width:768px) {.left {/* 当视口宽度小于等于768时隐藏左侧 */display: none;}}
/stylebodydiv classboxdiv classleftleft/divdiv classmainmain/div/div
/body完整写法了解
语法
media 关键词 媒体类型 and (媒体特性) {CSS代码}关键词
关键词 / 逻辑操作符1. and2. only3. not媒体类型
它是用来区分设备类型的如屏幕设备、打印设备等其中手机、电脑、平板都属于屏幕设备
媒体类型名称值描述屏幕screen带屏幕的设备打印预览print打印预览模式阅读器speech屏幕阅读模式不区分类型all默认值包括以上3种情形
媒体特性
主要用来描述媒体类型的具体特征如当前屏幕的宽高、分辨率、横屏或竖屏等
媒体特性名称属性值视口的宽和高width、height数值视口最大宽和高max-width、max-height数值视口最小宽和高min-width、min-height数值屏幕方向orientationportrait竖屏landscape横屏
媒体查询之引入外部CSS !-- 视口宽度小于等于768px时网页背景色是粉色 --link relstylesheet media(max-width: 768px) href./css/pink.css!-- 视口宽度大于等于1200px时网页背景色是绿色 --link relstylesheet media(min-width: 1200px) href./css/green.css全面的模板link relstylesheet media逻辑符 媒体类型 and (媒体特性) hrefxxx.css开发中常用link relstylesheet media(媒体特性) hrefxx.css方法二
Bootstrap 简介
中文官网https://www.bootcss.com
Bootstrap是由Twitter公司开发维护的前端UI框架它提供了大量编写好的CSS样式允许开发者结合一定HTML结构及JavaScript快速编写功能完善的网页及常见交互效果。使用步骤
下载Bootstrap V5 中文文档 进入中文文档 下载 下载 Bootstrap 生产文件将下载好的文件进行解压 找到 bootstrap.min.css 文件 放入项目中引入 Bootstrap CSS 文件 link relstylesheet href./Bootstrap/css/bootstrap.min.css调用类名container 可以实现响应式布局版心 div classcontainerTest/div
栅格系统
专门用于响应式布局效果
body!-- 要求实现视口宽度大于等于576px时一行排1个盒子即每个盒子占12个栅格视口宽度大于等于768px时一行排2个盒子即每个盒子占6个栅格视口宽度大于等于1200px时一行排4个盒子即每个盒子占3个栅格--!-- 常见的bootstrap类1.响应式版心类container2.flex布局类row--div classcontainerdiv classrowdiv classcol-sm-12 col-md-6 col-xl-31/divdiv classcol-sm-12 col-md-6 col-xl-31/divdiv classcol-sm-12 col-md-6 col-xl-31/divdiv classcol-sm-12 col-md-6 col-xl-31/div/div/div
/body栅格化将整个网页的宽度分成12等份每个盒子占用对应的份数例如如果需要一行排4个盒子则每个盒子占3份即可 ( 12 / 4 3 )BreakpointClass infixDimensionsExtra smallNone576pxSmallsm≥576pxMediummd≥768pxLargelg≥992pxExtra largexl≥1200pxExtra extra largexxl≥1400px
Class infixNonesmmdlgxlxxlClass prefix.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
补充在VS Code中写关于Bootstrap的代码时默认是没有代码提示需要自己安装一个VS Code 插件 —— IntelliSense for CSS class names in HTML全局样式
button 类
官网查询https://v5.bootcss.com/docs/components/buttons/ divbutton classbtn btn-success btn-sm按钮1/buttonbutton classbtn btn-warning btn-lg按钮2/button/divbtn: 默认样式btn-success: 成功
btn-warning: 警告
......按钮尺寸btn-lgbtn-smtable 类
官网查询https://v5.bootcss.com/docs/content/tables/
bodytable classtable table-stripedtr classtable-successth姓名/thth年龄/thth性别/th/trtrtd张三/tdtd18/tdtd男/td/trtrtd李四/tdtd25/tdtd女/td/trtr classtable-dangertd王五/tdtd19/tdtd男/td/trtrtd赵六/tdtd32/tdtd女/td/tr/table
/bodytable: 默认样式
table-striped: 隔行变色
table-success: 表格颜色
......组件(Components)
1. 引入css样式表
2. 引入js文件需要结合实际情况看看网页是否有动态功能从而决定是否引入
3. 复制代码修改内容组件举例
要求通过复制粘贴快速实现一个轮播图效果轮播图官网地址https://v5.bootcss.com/docs/components/carousel/
style.box {margin: 0 auto;width: 600px;height: 320px;}
/stylebodydiv classcontainerdiv classboxdiv idcarouselExampleIndicators classcarousel slidediv classcarousel-indicatorsbutton typebutton data-bs-target#carouselExampleIndicators data-bs-slide-to0 classactive aria-currenttrue aria-labelSlide 1/buttonbutton typebutton data-bs-target#carouselExampleIndicators data-bs-slide-to1 aria-labelSlide 2/buttonbutton typebutton data-bs-target#carouselExampleIndicators data-bs-slide-to2 aria-labelSlide 3/buttonbutton typebutton data-bs-target#carouselExampleIndicators data-bs-slide-to3 aria-labelSlide 4/button/divdiv classcarousel-innerdiv classcarousel-item activeimg src./images/img2.png classd-block w-100 alt.../divdiv classcarousel-itemimg src./images/img3.png classd-block w-100 alt.../divdiv classcarousel-itemimg src./images/img2.png classd-block w-100 alt.../divdiv classcarousel-itemimg src./images/img3.png classd-block w-100 alt.../div/divbutton classcarousel-control-prev typebutton data-bs-target#carouselExampleIndicators data-bs-slideprevspan classcarousel-control-prev-icon aria-hiddentrue/spanspan classvisually-hiddenPrevious/span/buttonbutton classcarousel-control-next typebutton data-bs-target#carouselExampleIndicators data-bs-slidenextspan classcarousel-control-next-icon aria-hiddentrue/spanspan classvisually-hiddenNext/span/button/div/div/divscript src./Bootstrap/js/bootstrap.min.js/script
/body字体图标
前往官网下载https://icons.bootcss.com/复制 fonts 文件夹到项目目录网页引入 bootstrap-icons.css 文件调用 CSS 类名图标对应的类名
headmeta charsetUTF-8!-- 引入bootstrap-icons.css 文件 --link relstylesheet href./Bootstrap/font/bootstrap-icons.css
/head
style.bi-android2 {font-size: 100px;color: green;}
/stylebodyspan classbi-android2/span
/body
