Bootstrap设计可响应式的移动网页
2024-05-10 06:53:31
目录
1、设计响应式图片
1.1、使用标签（中）
1.2、使用css图片
2、响应式视频
3、响应式导航菜单
4、响应式表格
4.1、隐藏表格中的列
4.2 滚动表格中的列
4.3 转换表格中的列
1、设计响应式图片
1.1、使用<picture>标签（<body>中）
<picture>
<source media="(max-width: 600px)" srcset="m1.jpg">
<img src="m2.jpg"> </picture>
<picture>标签包含<source>标签和<img>标签，根据不同设备屏幕的宽度，显示不同的图片。上述代码的功能是，当屏幕的宽度小于 600 像素时，将显示 m1.jpg 图片，否则将显示默认图片 m2.jpg。
<!DOCTYPE html>
<html>
<head>
<title>使用<picture>标签</title>
</head>
<body>
<h1>使用<picture>标签实现响应式图片</h1><picture><source media="(min-width:900px)" srcset="m1.jpg"><img src="m4.jpg"/>
</picture>
</body>
</html>
1.2、使用css图片
@media screen and (min-width: 600px) { CSS 样式信息 }
上述代码的功能是，当屏幕大于 600 像素时，将应用大括号内的 CSS 样式。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width",initial-scale=1,maxinum-scale=1.0,user-scalable=”no”><!--指定页头信息--><title>使用CSS图片</title><style>/*当屏幕宽度大于800像素时*/@media screen and (min-width: 800px) {.bcImg {background-image:url(m3.jpg);background-repeat: no-repeat;height: 500px;}}/*当屏幕宽度小于799像素时*/@media screen and (max-width: 799px) {.bcImg {background-image:url(m4.jpg);background-repeat: no-repeat;height: 500px;}}</style>
</head>
<body>
<div class="bcImg"></div>
</body>
</html>
2、响应式视频
相比于响应式图片，响应式视频的处理稍微要复杂一点。响应式视频不仅仅要处理视频播放器的尺寸，还要兼顾到视频播放器的整体效果和体验问题。下面讲述如何使用<meta>标签处理响应式视频。
<meta>标签中的 viewport 属性可以设置网页设计的宽度和实际屏幕的宽度的大小关系。
语法格式如下：
<meta name="viewport" content="width=device-width",initial-scale=1,maxinum-scale=1,user-scalable=” no”>
3、响应式导航菜单
导航菜单是设计网站中最常用的元素。下面讲述响应式导航菜单的实现方法。利用媒体查询技术中的 media 关键字，获取当前设备屏幕的宽度，根据不同的设备显示不同的 CSS样式。
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS3响应式菜单</title>
<style>.nav ul {margin: 0;padding: 0;}.nav li {margin: 0 5px 10px 0;padding: 0;list-style: none;display: inline-block;*display:inline; /* ie7 */}.nav a {padding: 3px 12px;text-decoration: none;color: #999;line-height: 100%;}.nav a:hover {color: #000;}.nav .current a {background: #999;color: #fff;border-radius: 5px;}/* right nav */.nav.right ul {text-align: right;}/* center nav */.nav.center ul {text-align: center;}@media screen and (max-width: 600px) {.nav {position: relative;min-height: 40px;}.nav ul {width: 180px;padding: 5px 0;position: absolute;top: 0;left: 0;border: solid 1px #aaa;background-color: aqua;border-radius: 5px;box-shadow: 0 1px 2px rgba(0,0,0,.3);}.nav li {display: none; /* hide all <li> items */margin: 0;}.nav .current {display: block; /* show only current <li> item */}.nav a {display: block;padding: 5px 5px 5px 32px;text-align: left;}.nav .current a {background: none;color: #666;}/* on nav hover */.nav ul:hover {background-color: blue;}.nav ul:hover li {display: block;margin: 0 0 5px;}/* right nav */.nav.right ul {left: auto;right: 0;}/* center nav */.nav.center ul {left: 50%;margin-left: -90px;}}</style>
</head><body>
<h2>风云网上商城</h2>
<!--导航菜单区域-->
<nav class="nav"><ul><li class="current"><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>
</nav>
<p>风云网上商城-专业的综合网上购物商城，销售超数万品牌、4020万种商品，囊括家电、手机、电脑、化妆品、服装等6大品类。秉承客户为先的理念，商城所售商品为正品行货、全国联保、机打发票。</p>
</body>
</html>
4、响应式表格
4.1、隐藏表格中的列
为了适配移动端的布局效果，可以隐藏表格中不要用的列。通过利用媒体查询技术中的media 关键字，获取当前设备屏幕的宽度，根据不同的设备将不重要的列设置为：display：none，从而隐藏指定的列
<!DOCTYPE html>
<html >
<head><meta name="viewport" content="width=device-width, initial-scale=1"><title>隐藏表格中的列</title><style>@media only screen and (max-width: 600px) {table td:nth-child(4),table th:nth-child(4),table td:nth-child(6),table th:nth-child(6),table td:nth-child(1),table th:nth-child(1){display: none;}}</style>
</head>
<body>
<h1 align="center">商品采购信息表</h1>
<table width="100%" cellspacing="1" cellpadding="5" border="1"><thead><tr><th>编号</th><th>产品名称</th><th>价格</th><th>产地</th><th>库存</th><th>级别</th></tr></thead><tbody align="center"><tr><td>1001</td><td>冰箱</td><td>6800元</td><td>上海</td><td>4999</td><td>1级</td></tr><tr><td>1002</td><td>空调</td><td>5800元</td><td>上海</td><td>6999</td><td>1级</td></tr><tr><td>1003</td><td>洗衣机</td><td>4800元</td><td>北京</td><td>3999</td><td>2级</td></tr><tr><td>1004</td><td>电视机</td><td>2800元</td><td>上海</td><td>8999</td><td>2级</td></tr><tr><td>1005</td><td>热水器</td><td>320元</td><td>上海</td><td>9999</td><td>1级</td></tr><tr><td>1006</td><td>手机</td><td>1800元</td><td>上海</td><td>9999</td><td>1级</td></tr></tbody>
</table>
</body>
</html>
4.2 滚动表格中的列
通过滚动条的方式，可以将手机端看不到的信息，进行滚动查看。实现此效果主要是利用媒体查询技术中的 media 关键字，获取当前设备屏幕的宽度，根据不同的设备宽度，改变表格的样式，将表头有横向排列变成纵向排列。
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1"><title>滚动表格中的列</title><style>@media only screen and (max-width: 650px) {*:first-child+html .cf { zoom: 1; }table { width: 100%; border-collapse: collapse; border-spacing: 3; }th,td { margin: 0; vertical-align: top; }th { text-align: left; }table { display: block; position: relative; width: 100%; }/* <!--将thead所在部分至于右侧-->*/thead { display: block; float: left; }/*white-space: nowrap; 换行问题*/tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }thead tr { display: block; }th { display: block; text-align: right; }tbody tr { display: inline-block; vertical-align: top; }td { display: block; min-height: 1.25em; text-align: left; }th {background-color: antiquewhite; border-bottom: 0; border-left: 0; }td { border-left: 0; border-right: 0; border-bottom: 0; }tbody tr { border-left: 1px solid #babcbf; }th:last-child,td:last-child { border-bottom: 1px solid red; }}</style>
</head>
<body>
<h1 align="center">商品采购信息表</h1>
<table width="100%" cellspacing="1" cellpadding="5" border="1"><thead><tr><th>编号</th><th>产品名称</th><th>价格</th><th>产地</th><th>库存</th><th>级别</th></tr></thead><tbody align="center"><tr><td>1001</td><td>冰箱</td><td>6800元</td><td>上海</td><td>4999</td><td>1级</td></tr><tr><td>1002</td><td>空调</td><td>5800元</td><td>上海</td><td>6999</td><td>1级</td></tr><tr><td>1003</td><td>洗衣机</td><td>4800元</td><td>北京</td><td>3999</td><td>2级</td></tr><tr><td>1004</td><td>电视机</td><td>2800元</td><td>上海</td><td>8999</td><td>2级</td></tr><tr><td>1005</td><td>热水器</td><td>320元</td><td>上海</td><td>9999</td><td>1级</td></tr><tr><td>1006</td><td>手机</td><td>1800元</td><td>上海</td><td>9999</td><td>1级</td></tr></tbody>
</table>
</body>
</html>
4.3 转换表格中的列
转换表格中的列就是将表格转化为列表。利用媒体查询技术中的 media 关键字，获取当前设备屏幕的宽度，然后利用 CSS 技术将表格转化为列表。
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1"><title>转换表格中的列</title><style>@media only screen and (max-width: 800px) {/* 强制表格为块状布局 */table, thead, tbody, th, td, tr {display: block;}/* 隐藏表格头部信息 */thead tr {display:none;}tr { border: 1px solid red; }td {/* 显示列 */border: none;border-bottom: 1px solid green;position: relative;padding-left: 50%;white-space: normal;text-align:left;}}</style>
</head>
<body>
<h1 align="center">学生考试成绩表</h1>
<table width="100%" cellspacing="1" cellpadding="5" border="1"><thead><tr><th>学号</th><th>姓名</th><th>语文成绩</th><th>数学成绩</th><th>英语成绩</th><th>文综成绩</th><th>理综成绩</th></tr></thead><tbody align="center"><tr><td>1001</td><td>张飞</td><td>126</td><td>146</td><td>124</td><td>146</td><td>106</td></tr><tr><td>1002</td><td>王小明</td><td>106</td><td>136</td><td>114</td><td>136</td><td>126</td></tr><tr><td>1003</td><td>蒙华</td><td>125</td><td>142</td><td>125</td><td>141</td><td>109</td></tr><tr><td>1004</td><td>刘蓓</td><td>126</td><td>136</td><td>124</td><td>116</td><td>146</td></tr><tr><td>1005</td><td>李华</td><td>121</td><td>141</td><td>122</td><td>142</td><td>103</td></tr><tr><td>1006</td><td>赵晓</td><td>116</td><td>126</td><td>134</td><td>146</td><td>116</td></tr></tbody>
</table>
</body>
</html>
Bootstrap设计可响应式的移动网页相关推荐
- 200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se ...
- Web前端--HTML+CSS+JavaScript响应式网络科技网页设计
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
- HTML5期末大作业：动漫网站设计——html5响应式手机滑动海贼王漫画网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:动漫网站设计--html5响应式手机滑动海贼王漫画网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作 ...
- Web前端---响应式室内家具网页设计（HTML+CSS+JS）
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想要解决的问题,在这里常见网页设计作业题材有 个 ...
- Web前端期末大作业-响应式室内家具网页设计（HTML+CSS+JS）实现
作者主页:Java李杨勇 文末获取源码联系 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?网页要求的总数量太多?HTML网页作业无从下手?没有合适的模板?等等一系列问题.你想 ...
- html网页设计期末大作业——响应式化妆品护肤品网页(11页) web课程设计 网页规划与设计
html网页设计期末大作业--响应式化妆品护肤品网页(11页) web课程设计 网页规划与设计 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. ...
- 20款响应式的 HTML5 网页模板【免费下载】
下面的列表集合了20款响应式的 HTML5 网页模板,这些专业的模板能够让你的网站吸引很多的访客.除了好看的外观,HTML5 模板吸引大家的另一个原因是由于其响应性和流动性.赶紧来看看. 您可能感兴趣 ...
- 自适应设计与响应式设计
目前非常流行自适应设计与响应式设计,而且经常让人混淆,自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念. 在这先说明下这两者的异同: 自从移动终端飞速发展以来,各种各样的机型突飞猛进,很多网 ...
- Bootstrap实现的响应式APP下载页面代码
这次分享的是,一个设计优雅的APP下载页面主题,这套HTML是用当下最流行的Bootstrap框架实现的版本是v3.3.3,这套代码非常适合再次开发,代码简介没有多余的部分,结构组织清晰,代码注释完整 ...
最新文章
- clientcontainerThrift Types
- 【转】android电池（四）：电池 电量计(MAX17040)驱动分析篇
- i7 7代 linux,【Intel 酷睿i7 7代（移动版）参数】Intel 酷睿i7 7代（移动版）系列CPU参数-ZOL中关村在线...
- TensorFlow中Session.run和Tensor.eval的区别
- Python机器学习及分析工具：Scipy篇
- 設備(IE01/IE02/IE03)客製欄位及BAPI處理
- 013.Zabbix的Items(监控项)
- protobuf3 自定义option_Protobuf3 语法指南
- pil库修改图片大小_Gvcode库：一个更简单的、华人开源的、自动生成验证码的python库...
- 三轴加速度传感器和六轴惯性传感器_一文读懂汽车MEMS惯性传感器的七大应用（上）...
- php变量显示,php – 显示会话变量
- 获取存储过程返回值及代码中获取返回值(转)
- Python数据结构与算法（一）列表和元组
- LLVM每日谈之二十一 一些关于编译器和LLVM/Clang的代码
- R语言安装~R，Rstudio
- 推荐5款纯净好用的良心浏览器，实现浏览自由
- apache+php+mysql常见集成环境安装包
- Windows禁止某个软件联网保姆级教程
- 刚装新系统环境mscorsvw.exe进程占用CPU资料50%以上的原因
- Office快捷键大全之三（Access快捷键上篇）