CSS-锚点笔记】的更多相关文章

CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background:white; background-clip:padding-box; ①  hsla:h是色调,取值范围是0-360.s是饱和度,取值范围是0%-100%.l是亮度,取值范围是0%-100%.a是透明度,取值范围是0-1. ② background-clip:用于调整背景图的显示区域,有3个值,b…
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="child"> hello world ! </div> </div> </body> 方法一:inline-block + text-align <style type="text/css"> body{ margin: 0px;…
css锚点的正常方法: <a href="#1f"></a> <a name="1f"></a> ios出现的问题:1.有时会点击无效2.连点锚点屏幕会一点一点的向上翻 解决方法:用jquery的窗口滚动事件,让需要被锚点的元素设置距离浏览器自定义的高度. <script> $("#maodian").click(function() { var hei=$(".maodian…
前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性转化为网页中的各种创意.这正是这本书将要呈现的内容.--引用自前言 ①DRY 是 Don't Repeat Yourself 的首字母缩写,意思是不应该重复你已经做过的事.它是一种广为流传的编程理念,旨在提升代码某方面的可维护性:在改变某个参数时,做到只改尽量少的地方,最好是一处.强调 CSS 代码…
css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal:    控制连续文本换行.break-word:    内容将在边界内换行.如果需要,词内换行(word-break)也会发生. text-overflow : clip | ellipsis取值:clip:    不显示省略标记(...),而是简单的裁切.ellipsis:    当对象内文本溢出时显示省略标记(...) text-shadow : none | <length>…
CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移动到链接上*/ a:active{color:green} /*选定的链接*/ 注意:使用hover时,必须置于link和visited之后:    使用active时,必须置于hover之后.…
Css随堂笔记(三) 1 关于背景图片   A 设置背景图片:background-image:url(“图片的路径”):   B 背景图片位置: background-position:1 方位名词 背景位置: 1.如果只设置一个方位词,另外一个默认居中 2.如果设置的值是两个方位词,与顺序无关 2 数值:背景位置: 1.如果设置的值是数字: 1.一个值得时候,表示水平方向的位移,垂直方向默认居中 2.两个值得时候,第一个表示水平位移 第二个表示垂直方向的位移 C 背景图片是否平铺:backg…
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面——也就是留下一个符合该值的图片位置): 2.获取一个图像的所有信息,包括内容.大小.及其分辨率:width-2值和height-2值(如果获取图像信息失败,则每个浏览器有每个浏览器的不同处理办法,比如加载一个破损的图片示意——但无论是什么浏览器,此时如果<img>中有alt值,则加载该值替代图片…
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin/border/padding/content而已,再多无非在不同box-sizing下的表现不同而已:但是书中记录的替换元素与非替换元素.content的一些用法.margin合并等等,让我对"盒模型四大家族"有了全新的认识 一.替换元素与非替换元素 根据"外在盒子"…
最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solutions). 以下是读书笔记. 首先,挺遗憾的是,除了封面上译者名字外,就完全看不到跟译者有关的东西,没有译者简介,没有译者序,没有后记……一点也没有(难道是我没找到?) 第1章 关于“有意义的标签”,这是css编程的前提.第4页上只是罗列了一些html标签,但是并没有详述他们的意义和用法.当然这是一本cs…
HTML语言剖析 Html简介-目录 全写: HyperText Mark-up Language  译名: 超文本标识语言  简释:一种为普通文件中某些字句加上标示的语言,其目的在于运用标签(tag)使文件 达到预期的显示效果.由文字(字母,数字.标点符号)及标签组合而成.任何文字编辑器都可以,这里推荐用:Dreamweaver.   1. Html特点: ► 描述性语言,结构语言,用于决定网页内容以什么样的形式显示: ► 通过标签来控制网页的文档.字符和段落等的格式,以及对脚本语言等的调用:…
CSS中的块级元素与行内元素 块级元素特性: 1.占据一整行,总是重起一行并且后面的元素也必须另起一行显示. 2.内联元素特性: 3.和其他内联元素显示在同一行. 块级元素列举如下: div(文档分区),article(文章内容), aside(伴随内容), audio(音频播放), blockquote(块引用), canvas(绘制图形), dd(定义列表中定义条目描述), dl(定义列表), fieldset(表单元素分组), figcaption(图文信息组标题), figure(图文信…
零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年~  知耻而后勇,从基础拾起~ 所以我写这一系列笔记~…
选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解,底下的css笔记会详细介绍不同的选择器~ <!DOCTYPE html> <html lang="en"> <head> <link href="index.css"> <meta charset="UTF…
像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种单位都是相对单位.1.像素像素为什么是相对单位呢?因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”).实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位. 2.em 就是本元素给定字体的 font-size 值,如果元素的 font-…
diV有 Class.Style.title.ID 等属性. 1.margin 空出边缘 margin:上 下 左 右(按顺时针顺序,缺少某一方向则对称) 2.border 边框(三要素:像素 形状 颜色) border-top : 1px solid black 上框 border-bottom : 1px solid #6699cc 下框 border-left : 1px solid #6699cc 左框 border-right : 1px solid #6699cc 右框 border…
HTML <font> 标签 定义和用法 <font> 规定文本的字体.字体尺寸.字体颜色. 实例 规定文本字体.大小和颜色: <font size="3" color="red">This is some text!</font> <font size="2" color="blue">This is some text!</font> <font…
第一篇见Css入门笔记01http://blog.csdn.net/qq_32059827/article/details/51406674 4.其他选择器 4.1.关联选择器 有时在页面上会出现我们需要让CSS样式作用在某个标签中的标签上. 格式: 父标签名 子标签名 <div> div中的数据 <span>div中的span中的数据</span> </div> <span>span中的数据</span> 当前的CSS要作用在div…
1. font的两个必须要写的:font-size 和 font-family text-indent 首行缩进(em)1em=一个文字大小 text-algin 对齐方式:left.center.right text-decortion 文本修饰: underline(下划线)overline(上划线)line-through(删除线)none(无) letter-spacing 字间距(为0时字间距本身为1个像素,若为5px则字间距实际为6px) word-spacing 词间距(先用空格将…
实习了一年时间,陆陆续续记录下来一堆笔记,不过也丢失了一些... 以后会持续更新.扩展,现在把碰到的知识点归纳于此,方便翻阅 一.html部分 1.取消iPhone自动识别数字为拨打号码 <meta name = "format-detection" content = "telephone=no"> 2.移动开发.响应式布局 <meta name="viewport" content="width=device-wi…
从23号开始用了4天时间看完了<Head First Html与CSS>这本书,本书讲解方式深入浅出,便于理解,结合习题,便于记忆,是一本不错的入门书.下面是本书的学习笔记: 一.认识HTML HyperText Markup Language,超文本标记语言的缩写.标记文本来告诉浏览器文本的结构. 注释放在<!--和-->之间,浏览器会忽略其中内容. 1.在电脑上创建一个html文件 打开记事本,另存为后缀名为.html,编码为UTF-8. 本地测试,直接在浏览器中打开,可以直接…
前言: 1.     这本书并没有面面俱到,涵盖所有内容,只提供作为初学者真正需要的东西:基本知识和信心.所以这不是唯一的参考书.(我买了一本<HTML5权威指南>作为参考书和这本一起看,但还是以本书为第一个月的主要学习书籍,权威指南将在看完这本后再认真看一遍) 2.     慢一点看,虽然这本书页数多但实际内容并没有页数那么夸张.慢才是真正的快,慢才能多思考和留充足的时间写代码. 3.     记笔记. 4.     睡前就别看书了,放松一下,我的办法是打dnf怪物猎人OL.目前的作息基本上…
1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距——所有内边距会与其他内联元素重叠(即这个内边距在一群内联元素里表现的不是叠加,而是公用一个最大的,而且这个样式效果必须在上下有块元素时才能体现.) 2. header.top img#headerSlogan{ float: right; } 这是一个最佳实践:实际上,这个选择器不需要增加.top也可…
一. 引用 <blockquote>ago aog aogag </blockquote> 则是引用一大段文字并独立显示 二. <a> 创建目的地 <h2><a id="chai">Chai Tea</a></h2>//创建了一个目标锚 <a href="index.html#chai">See Chai Tea</a>//链接到的位置 使用id属性在页面中创…
css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局.图片.颜色.页码.章节号等). 涵盖7大主题 背景与边框 形状 视觉效果 字体排印 用户体验 结构与布局 过渡与动画 资料 书籍注解 Lea verou博客 Lea verou github O'Reilly的HTMLBook标准 Atlas 将css用于书籍排印 Dabblet 在线演示 本书在E…
1.Document的一些特殊属性 document.lastModified document.URL document.title document.referrer document.domain document.write() document.writeIn()   2.查询选取的文本 使用鼠标mouseup事件   3.浏览器定义了多项文本编辑命令(富文本编辑器) 使用Document对象的execCommand()方法. document.queryCommandSupport(…
1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点   >>HtmlElement与HtmlDocument a:HtmlElement对象表示HTML中的一个个元素. b:HtmlDocument对象表示 HTML 文档树的根.HTMLDocument 接口对 DOM Document 接口进行了扩展,定义 HTML 专用的属性和方法.   >>HTML的DOM对象 a:DOM…
第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate stylesheet):type(text/css):media:(all(所有表现媒体, screen,print),title(配合候选使用). 3,@import url(sheet1.css) 需在style内使用,放在其他css规则之前. 4,向后可访问性:<style><!-- 样式 -->…
首先给头部文件引用格式 <link href="<%=basePath%>temp/public/css/style.css" rel="stylesheet" type="text/css" />rel规定当前文档与被链接文档之间的关系.type 规定被链接文档的 MIME 类型. <script type="text/javascript" src="<%=basePath%&…
CSS知识点 之 position布局 前段时间被同学怂恿,参加了百度前端技术学院的一个小培训,第一个阶段下来学到不少东西.课程的第一个阶段主要是HTML5 和 CSS 基础知识的一个小培训,给出的一些小任务虽然写起来不困难,但在写的过程中还是学到不少东西,查漏补缺.前端知识太丰富,很容易忽略一些小细节,自己也是倚着这个心态去学的,虽然写过网站,也写过app,不过这一程下来,通过里面给出的一些高水平的知识点的讲解,还是感觉很受用,现在分享出给大家伙看看,写的不好求放过,我第一次写东西,算是总结,…