<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自适应</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./job.css">
</head>
<body>
<div class="main">
<div class="inset">
<!--<div class="social-icons">-->
<div class="span">
<a href="#"><i>用户登录</i>
</a></div>
<!--<div class="clear"></div>-->
<div class="span1">
<a href="#"><i>用户注册</i>
</a></div>
<!--<div class="clear"></div>-->
<!--</div>-->
</div>
</div>
</body>
</html>
/*body{background-color: #fff;}*/
/*body{background-color: #2d2d2d}*/
html,body,div,span,h2,p,a,img,sub,u,i,menu,form
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
.span {
float:left;
display: block;
background:#3B5998;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
border:1px solid #3B5998;
outline:none;
width: 49.99%;
}
.span1 {
float:right;
transition: all 0.5s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
background: #55ACEE;
outline:none;
width: 49.99%;
}
.clear{clear:both;}
.inset{
overflow: hidden;
text-align: center;
width: 100%;
margin: auto;
}
/*----自适应-----*/
@media (max-width:1200px){
.main {
width:60%;
margin: 7em auto 0;
}
}
@media (max-width:992px){
.main{
width: 70%;
margin: 9em auto 0;
}
}
@media (max-width:768px){
.main{
width:80%;
margin: 6em auto 0;
}
.span,.span1 {
margin:0 auto;
text-align:center;
width: 100%;
margin-bottom: 15px;
}
}
换行
相关推荐
Bootstrap响应式布局是一种基于前端开发框架Bootstrap实现的网页设计技术，它使得网页能够在不同设备上自动适应，提供一致且良好的用户体验。Bootstrap是由Twitter推出的一款开源工具包，它包含了一系列CSS和...
基于python flask框架构建的前后端分离，房屋租赁系统全栈项目，采用RESTful风格，使用bootstrap响应式布局，可用于本科毕业设计，课程设计作业等 使用flask框架RESTful风格快速搭建。 一个互联网租房项目，前端使用...
总的来说，实现腾讯全端Bootstrap响应式布局，需要熟练掌握HTML的结构化标签，理解Bootstrap框架的栅格系统和组件，以及灵活运用CSS媒体查询。这不仅有助于创建出高质量的网页，也有助于提升你的前端开发技能，更好...
Bootstrap是世界上最受欢迎的前端开发框架之一，尤其以其强大的响应式布局功能著称。响应式布局是一种设计方法，它允许网页根据访问设备的屏幕尺寸和方向自动调整其布局、内容和功能，提供一致且优化的用户体验。...
Bootstrap响应式布局是Web开发中的一个关键概念，它使得网站设计能够适应不同设备的屏幕尺寸，从而提供良好的用户体验。Bootstrap框架是由Twitter开发并开源的一款强大的前端开发工具，它提供了丰富的预定义样式、...
蓝色win8扁平风格的bootstrap响应式布局后台管理
Bootstrap是一个流行的前端开发框架，它提供了一套响应式设计和移动设备优先的解决方案，使得开发者能够轻松创建适应不同...对于想要学习和实践Bootstrap响应式布局导航栏功能的开发者，这个例子提供了一个很好的起点。
在"bootstrap响应式布局导航效果"中，我们主要关注的是Bootstrap导航条（Navbar）如何适应不同屏幕尺寸。Bootstrap的导航条具有内置的响应式功能，当屏幕宽度变窄时，导航条会折叠成一个汉堡菜单，以节省空间并保持...
在“html5 bootstrap响应式布局的垂直时间轴代码”这个项目中，我们将探讨如何利用这两者来创建一个动态的时间轴效果。 响应式布局是现代网页设计的关键，它确保网页在不同设备和屏幕尺寸上都能正常显示。Bootstrap...
04-bootstrap响应式布局.html
这款“蓝色Win8扁平风格的Bootstrap响应式布局后台管理模板”是专为创建现代、高效且用户友好的后台管理系统而设计的。 标题中的“蓝色Win8扁平风格”指的是该模板的设计灵感来源于Windows 8操作系统，其特征是简洁...
基于BootStrap响应式布局的实现案例1-（基础版） 每组中都有 3 张效果图，分别是一个响应式网页在大屏、中屏和小屏上的显示效果，要求按小组序号 对 7 取余加 1 指定的题号完成相应效果图的响应式网页，要求网页效果...
Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级...
目前bootstrap响应式布局提供的分辨率区间只能到1200px，大于1200px均算作1200px区间。随着屏幕分辨率的提高，1200px已无法满足要求，需要更多大于1200px的区间。在1200px基础上，为了满足公司portal的需求，自己...
bootstrap实现响应式登录页面
JavaWeb旅游网站——BootStrap响应式布局 环境： mysql 8.0 jdk 1.8 tomcat 9 redis 2.9.8 主要功能：用户登录、用户注册、修改密码、旅游路线搜索、旅游线路收藏、线路收藏排行榜
总之，Bootstrap响应式模态登录框插件结合了Bootstrap的响应式布局、模态组件和jQuery的交互功能，提供了一种高效、易于集成的登录解决方案。开发者可以根据自己的需求对插件进行自定义，以满足各种项目的需求，同时...
Bootstrap响应式旅游网站是一种利用Bootstrap框架构建的，能够适应不同设备屏幕尺寸的旅游主题网站。Bootstrap是由Twitter开发的开源前端框架，它提供了丰富的组件、预设的CSS样式、JavaScript插件以及网格系统，...
bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码bootstrap响应式web开发课程的潮流穿搭网站手敲代码...
Bootstrap响应式注册登录界面模板是基于流行的前端框架Bootstrap 4.2.1开发的一个实用工具，旨在为开发者提供易于使用的、跨平台的用户界面元素，适用于网页的注册和登录功能。这个模板的特点在于其响应式设计，能够...