HTML学习笔记 css定位浮动及瀑布流案例第十三节（原创）参考使用表

#fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; height: 100px; background-color: coral; float: left; } #td { width: 100px; height: 100px; background-color: chartreuse; float: left; } #container { w…

[CSS3] 学习笔记-CSS定位

页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制普通流:元素按照其在HTML中的位置顺序觉得排布的过程浮动绝对布局 2)定位属性 positon.top.left.right.bottom.overflow(设置元素溢出区域发生的事情).clip(设置元素显示的形状).vertical-align(设置元素垂直对齐的方式).z-index(设置元素的堆叠顺序)…

HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例第十二节（原创）参考使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS定位(静态,相对,固定,绝对布局)小广告案例</title> <link rel="stylesheet" href="tzy.css" type="text/css"> <…

amazeui学习笔记--css（布局相关1）--网格Grid

amazeui学习笔记--css(布局相关1)--网格Grid 一.总结基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class="am-g am-g-collapse"> 2.网格布局中的行和列:.am-g .am-u-xx-n 3.3种尺寸:sm md lg 4.从普通css到amaze: .am-g { margin: 0 auto; width: 100%; } .am-g-fixed { max-wi…

amazeui学习笔记--css（常用组件6）--图标Icon

amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class="am-icon-weixin"> Wechat</span> 2.图标大小: .am-icon-sm,放大 150% .am-icon-md,放大 200% .am-icon-lg,放大 250% 3.icon button:在 Icon 上添加 .am-icon-btn cl…

amazeui学习笔记--css（布局相关3）--辅助类Utility

amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horizontal 内容超出容器宽度时显示水平滚动条. <div class="am-scrollable-horizontal"> 3.垂直滚动: .am-scrollable-vertical 4.浮动相关: .am-cf - 清除浮动 .am-fl - 左浮动 .am-fr …

Windows phone 8 学习笔记(8) 定位地图导航

原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模拟器中测试新地图貌似比较理想.本节主要讲解下位置服务以及新地图控件的使用. 快速导航: 一.定位服务二.地图和导航一.定位服务通过手机定位服务可以开发利用手机地理位置的应用.我们可以通过应用监视手机行踪,配合地图使用可以用于导航等.定位服务可以及时取得手机地理位置,也可以持续跟…

amazeui学习笔记--css（基本样式4）--打印样式Print

amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的标题.链接显示在后面. <a href="http://www.amazeui.org">Amaze UI</a> 2.am-print-hide类: 浏览器可见,打印机隐藏. 二.打印样式Print 目录显示 URL 链接辅助 Class 参考链接打印样式组…

amazeui学习笔记--css（基本样式3）--文字排版Typography

amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块blockquote和定义列表(dl dt)注意一下 3.样式不能正常显示:拷贝过来的很多样式在博客中都不能正常显示二.文字排版Typography 目录字体字体定义字体辅助 Class Webkit 反锯齿字体相关链接元素基本样式标题 <h1> - <h6> 段落 &l…

amazeui学习笔记--css（基本样式2）--基础设置Base

amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素的盒模型设置为 border-box -moz-box-sizing: border-box; 3.em和px:根据字号做相应变化的场景也使用了 em,需要像素级别精确的场景也使用了 px 4.字号设置:Amaze UI 将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem…

amazeui学习笔记--css（基本样式）--样式统一Normalize

amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 2.Normalize.css:在默认的HTML元素样式上提供了跨浏览器的高度一致性. 二.样式统一Normalize 在统一浏览器默认样式上,Reset 一度非常流行,更有简单粗暴的通配符 reset : Copy * { margin: 0; padding: 0; border:0; } 时…

amazeui学习笔记--css（常用组件16）--文章页Article

amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .am-article-hd 文章头部,包含标题.元数据等 .am-article-title 文章标题 .am-article-meta 文章元数据,如作者.发布日期等 .am-article-bd 文章正文部分 .am-article-lead 文章摘要.导读等信息 .am-article-divi…

amazeui学习笔记--css（常用组件15）--CSS动画Animation

amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-animation-fade 淡入 .am-animation-scale-up 逐渐放大 .am-animation-scale-down 逐渐缩小 .am-animation-slide-top 顶部滑入 .am-animation-slide-bottom 底部滑入 .am-animation-sli…

amazeui学习笔记--css（常用组件14）--缩略图Thumbnail

amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> 外面添加一个容器,如 <div>.<figure>.<a> 等,再将 class 添加到容器上. 2.结合网格使用: <div class="am-g"> <div class="am-u-sm-4"> &l…

amazeui学习笔记--css（常用组件13）--进度条Progress

amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息. <div class="am-progress"> <div class="am-progress-bar" style="width: 30%"></div> </div> <div cla…

amazeui学习笔记--css（常用组件12）--面板Panel

amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容放在 .am-panel-bd 里面. <div class="am-panel am-panel-default"> <div class="am-panel-bd">这是一个基本的面板组件.</div> </div>…

amazeui学习笔记--css（常用组件11）--分页Pagination

amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-pagination class, 包含一系列 <li>. <ul class="am-pagination"> <li class="am-disabled"><a href="#">«</a&g…

amazeui学习笔记--css（常用组件10）--导航条Topbar

amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.<header class="am-topbar">导航条内容</header> 2.am-topbar模块下很多东西:am-topbar是命名空间加上模块名,所以肯定在模块下右很多东西,比如 <h1 class="am-topbar-brand"…

amazeui学习笔记--css（常用组件9）--导航nav

amazeui学习笔记--css(常用组件9)--导航nav 一.总结 1.导航基本使用:<ul> 添加 .am-nav class 以后就是一个基本的垂直导航.默认样式中并没有限定导航的宽度,可以结合网格使用.还是ul包li的形式. <ul class="am-nav"> <li class="am-active"><a href="#">首页</a></li> <l…

amazeui学习笔记--css（常用组件8）--列表list

amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包着li的形式.<ul class="am-list">里面是各种含着a标签的li</ul> 2.文字截断:在 <a> 上添加 .am-text-truncate class 可以实现文字超出一行时截断为 ....这是在链接列表里面的文字截断. <u…

amazeui学习笔记--css（常用组件7）--输入框组Input-group

amazeui学习笔记--css(常用组件7)--输入框组Input-group 一.总结 1.使用:Input group 基于 Form 组件和 Button 组件扩展,依赖这两个组件.在容器上添加 .am-input-group,在标签文字上添加 .am-input-group-label 2.Icon组件及添加文字: <div class="am-input-group"> <span class="am-input-group-label"…

amazeui学习笔记--css（常用组件5）--评论列表Comment

amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article也是div来的 2.comment基本结构如下: <article class="am-comment">  <a href=""> <img class="am-comment-avatar…

amazeui学习笔记--css（常用组件4）--关闭按钮Close

amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> 添加 .am-close class.<a href="#" class="am-close">×</a> 2.&times:关闭按钮用到的那个叉叉是&times,如果是icon font则不用 3.带边框样式:添加 .am-c…

amazeui学习笔记--css（常用组件3）--按钮组Button-group

amazeui学习笔记--css(常用组件3)--按钮组Button-group 一.总结 1.按钮组用法:把一系列要使用的 .am-btn 按钮放入 .am-btn-group . 2.按钮工具栏:将 .am-btn-group 放进 .am-btn-toolbar,实现工具栏效果. 3.按钮组大小:给 .am-btn-group 增加 class .am-btn-group-lg 或 .am-btn-group-sm 或 .am-btn-group-xs 改变按钮大小. 4.垂直排列: 使用…