936606539
- 浏览: 108364 次
- 来自: 西安
-
文章分类
- 全部博客 (142)
- html5 (6)
- java (8)
- css (12)
- js (14)
- 数据库 (6)
- 框架 (2)
- 网络知识 (1)
- mysql (9)
- 项目环境搭建 (6)
- webservice (7)
- 项目 (1)
- BMP (0)
- 系统 (5)
- GUI (1)
- 电子印章 (1)
- 编码 (4)
- 加密解密 (1)
- 顽固bug (1)
- 其他 (3)
- svn (2)
- 异常 (4)
- spring (2)
- NSIS (1)
- soap (1)
- 二进制学习 (1)
- git (12)
- http (1)
- angular (14)
- linux (1)
- 用命令在操作系统上干事情 (1)
- web前端 (2)
- linux 命令 (1)
- promise (1)
- css3 (1)
- 软件 (1)
- web (1)
- bootstrap (1)
- 面试 (1)
- webpack (1)
- react (3)
- 现成网站登陆界面样式 (1)
- 其他学习 (1)
最新评论
-
MoonLord：
其实不需要删文件，修改一个值就好了，参考：https://gi ...
Beyond Compare应用程序发生错误的解决方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
/* 小于200px*/
@media(min-width:300px) and (max-width:1000px){
#p2{
background:teal;
-webkit-border-radius: 30px;
-ms-border-radius:30px;
-o-border-radius:30px;
-moz-border-radius:30px;
border-radius: 30px;
}
}
</style>
<body>
<div class="container-fluid login">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3">
<form class="form-horizontal loginForm">
<h3 class="form-signin-heading">用户登录</h3>
<div class="form-group">
<label for="email" class="col-sm-2 col-xs-3 control-label">邮箱</label>
<div class="col-sm-8 col-xs-8">
<input type="text" class="form-control" name="email" placeholder="请输入邮箱">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 col-xs-3 control-label">密码</label>
<div class="col-sm-8 col-xs-8">
<input type="password" class="form-control" name="password" placeholder="请输入密码">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4 col-xs-4 ">
<div class="checkbox">
<label>
<input type="checkbox">记住我
</label>
</div>
</div>
<div class="col-sm-4 col-xs-4 control-label" >
<a href="resetPwd.html" id="forget">忘记密码？</a>
</div>
</div>
<div class="form-group">
<div class="col-sm-12 col-lg-12">
<button type="button" class="btn btn-primary btn-block" id="submit">登录</button>
</div>
</div>
</form>
</div>
</div>
<br/>
<p id='p2'>看我的响应式布局</p>
</body>
</html>
分享到：
发表评论
-
纯css 实现动态小火车
2018-07-28 21:04 669主要的知识点在于 1、对相对定位绝对定位的学习 2、图片渐变的 ... -
css 各种选择器
2018-07-26 19:10 565参考链接：https://www.w3cplus.com/cs ... -
不定数量的子元素，五个一组循环不同的颜色，用css3 nth-child实现
2018-07-25 22:34 1390注意：这其实是个数学题，我也是看nth-child（an+b） ... -
文字加上背景颜色线性渐变动画展示实例
2018-07-25 20:49 945<!DOCTYPE html> <html ... -
border-image 复合写法解析
2018-07-25 19:34 747参考链接：https://segmentfault.com/a ... -
css 各种浏览器兼容前缀写法
2018-07-18 16:49 5238参考链接：https://www.cnblogs.com/xm ... -
css3 伪类伪元素的实例
2018-07-18 11:22 489<!DOCTYPE html> <ht ... -
登陆样式
2018-07-10 22:40 429https://meibin08.github.io/reac ... -
bootstrap 日期控件
2017-08-15 16:33 617http://www.malot.fr/bootstrap ... -
css 知识点
2016-05-22 10:29 422css 知识点 -
css demo
2016-08-15 17:02 494css demo
相关推荐
**标题“CSS教程实例大全 很多实例在里面”**暗示了这是一个丰富的资源集合，涵盖了多种CSS技术的应用实例。这样的教程通常会包括基础到高级的各种示例，帮助学习者通过实践来理解CSS的工作原理和技巧。 **描述中的...
本资源集合包含了“上百个CSS实例”，旨在帮助初学者快速掌握CSS的基础知识和应用技巧。 1. **CSS选择器**：CSS的选择器是定位HTML元素的关键，包括标签选择器、类选择器、ID选择器、属性选择器等。例如，`p` 选择...
《Div+CSS布局实例源码》是一份专为学习和精通Div+CSS布局技术而设计的资源包。这个包包含了丰富的实例，旨在帮助初学者和有一定基础的学习者深入理解和掌握网页布局的核心技巧。Div+CSS是现代网页设计的基础，通过...
《HTML5与CSS3实例教程（第2版）》是一本深入浅出的教程，旨在帮助读者掌握HTML5和CSS3这两个现代网页开发的核心技术。HTML5是超文本标记语言的最新版本，它极大地扩展了网页内容的表示能力，而CSS3则是层叠样式表的...
**CSS（层叠样式表）教程（实例大全）** CSS，全称为Cascading Style Sheets，是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许我们将表现（样式）与内容（HTML结构）分离...
本“HTML5和CSS3实例教程”将通过一系列实践案例，教你如何结合使用这些特性，创建功能强大、视觉效果出众的网页。PDF电子版提供了详细的理论讲解，源代码则可以直接运行查看效果，帮助你从实践中学习，提升技能。...
3. **响应式设计**：在移动优先的设计理念下，许多实例将展示如何通过媒体查询（media queries）实现导航栏在不同屏幕尺寸下的适配，确保在手机、平板和桌面设备上的良好显示。 4. **动画效果**：CSS的过渡...
CSS Media Queries允许开发者根据设备的屏幕尺寸、方向等特性应用不同的样式，确保界面在任何设备上都有优秀的用户体验。 2. **过渡和动画**：CSS3引入了过渡和动画，使得元素状态改变时可以平滑过渡，或者在特定...
4. **响应式设计**: 这些实例很可能采用了媒体查询（Media Queries）来实现响应式设计，使得网页能在不同屏幕尺寸的设备上自适应显示。 5. **网页结构优化**: 好的源码会遵循语义化HTML，合理使用`div`和其他元素，...
在CSS（层叠样式表）领域，经典的实例是学习和掌握这一关键技术的重要途径。"圆角"作为CSS的一个核心特性，被广泛应用于网页设计中，为界面增添美观和现代感。下面，我们将深入探讨CSS圆角及其在实际应用中的各种...
这个压缩包包含两部分主要内容：一本名为"十天学会DIV+CSS(WEB标准).chm"的电子书，以及一个名为"jiaocheng"的文件夹，后者很可能包含了教程中的实例源代码和PSD设计文件。 首先，让我们深入了解一下`DIV`和`CSS`这...
6. **响应式设计**：随着移动设备的普及，CSS媒体查询（media queries）使得我们可以根据设备的屏幕尺寸和方向应用不同的样式，实现响应式网页设计。 7. **Flexbox与Grid布局**：Flexbox（弹性盒子布局）和Grid布局...
5. **响应式设计**：查看实例是否考虑了不同屏幕尺寸下的适配，可能用到媒体查询（media queries）。 6. **浏览器兼容性**：理解如何确保CSS代码在不同的浏览器上表现一致，可能需要引入前缀（prefixes）或者使用...
在"HTML5与CSS3实例教程 第二版"中，源代码涵盖了这些技术的应用，通过实际操作，学习者可以深入理解HTML5和CSS3的新特性，并掌握如何在实际项目中运用它们。代码文件（code）包含了这些实例的完整代码，供学习者...
在实例中，我们可能看到如何使用CSS创建响应式设计，这意味着网页会根据用户设备的屏幕大小自动调整布局。这通常通过媒体查询（`@media query`）来实现，允许我们在不同屏幕尺寸下应用不同的样式规则。例如，对于...
此外，CSS还支持媒体查询（media queries），使得网页可以响应不同的设备和视口大小，实现响应式设计，以适应手机、平板和桌面等不同设备的屏幕。 综上所述，这个经典CSS实例可能涵盖了JavaScript与CSS的结合、背景...
这个《HTML5和CSS3实例教程》的源代码集合为学习者提供了丰富的实践材料，帮助理解并掌握这两种语言的实际应用。 HTML5是超文本标记语言的第五个版本，它的主要改进包括： 1. **新元素的引入**：如`<header>`、`...
此外，CSS还支持响应式设计，通过媒体查询（`@media`）可以根据设备屏幕大小调整布局，确保在不同设备上都能呈现良好的用户体验。在"LOL首页"中，可能运用了媒体查询来适应手机、平板和桌面电脑等不同设备的显示。 ...
5. **响应式设计**：利用媒体查询（Media Queries），CSS可以根据设备屏幕尺寸调整样式，使网页在不同设备上都能提供良好的用户体验。 6. **动画和过渡**：CSS3引入了动画和过渡属性，可用于平滑地改变元素的样式，...
使用CSS媒体查询（Media Queries）可以确保导航在手机、平板和桌面电脑上都能良好展示。 7. **浏览器兼容性**：在编写JS和CSS时，需要考虑各种浏览器的兼容性问题，特别是老版本的Internet Explorer。利用条件注释...