- 博客(38)
- 收藏
- 关注
RSS订阅转载 响应式布局的概念
概念： 一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的， 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验优点：面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题缺点：兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长CSS3中的M
2017-03-03 11:16:37
501
原创 响应式布局设置--@media only screen and
only(限定某种设备)screen 是媒体类型里的一种and 被称为关键字，其他关键字还包括 not(排除某种设备)类型 解释all 所有设备braille 盲文embossed 盲文打印handheld 手持设备print 文档打印或打印预览模式projection
2017-03-03 11:14:46
528
原创 css中字体单位的不同：px、em、rem
px在Web页面制作中，我们一般使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的 Web页面时，他改变了浏览器的字体大小（虽然一般人不会去改变浏览器字体大小），这时会使用我们的Web页面布局被打破，这时就提出了使用“em”来定 义Web页面的字体。em在使用“em”作单位时，一定需要知道其父元素的设置，因为
2017-03-03 11:13:55
343
原创 IE下textarea默认不显示滚动条的实现代码
IE下textarea默认情况下会显示出竖直方向的滚动条，如果不想让它显示要怎么设置呢，如果需要隐藏滚动条，行数超过height时才显示出滚动条，需要把overflow设置为auto；
2017-03-03 11:11:05
462
原创 iconfont图标使用方法
1、首先进入：http://www.iconfont.cn/搜索你分类的关键字---然后加入购物车，通过购物车将字体下载到本地，解压文件；2、打开iconfont.css文件 第一段代码@font-face为声明图标字体，可以自定义字体的名称将自定义的图标字体名称放到html元素中一般情况下会下
2017-03-03 11:07:34
750
原创 style currentStyle getComputedStyle的区别和用法
style属性获取样式值，使用方法：obj.style.attrstyle只能获取元素的内联样式，内部样式和外部样式使用style都获取不到。currentStyle和getComputedStyle方法既可以获取内联样式，也可以获取外部样式和内嵌样式的值。获取的顺序是内联样式->外部样式->内嵌样式。他们之间的区别是currentStyle只适用于IE浏览器，getCompu
2017-03-03 11:04:54
423
原创 清除浮动的小例子
html文档为：css样式为：由于图片的高度高出父div的高度，因此图片溢出了：如何解决这一问题：添加一个清除浮动的样式： 问题得到了解决！！但是如果提前对div的高度进行了设定，那么添加清除浮动效果后，div会自动产生水平和竖直的滚动条
2017-03-03 10:59:55
393
原创 html5新增的语义标签
1、 section表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用，表示文档结构。2、article标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。3、aside元素标签可以包含与当前页
2017-03-03 10:57:17
553
原创 w3cshcool JS学习笔记
1、JS能够直接写入html输出流中，document.write 只能在输出流中使用2、JS可以对html标签里的事件做出反应，alert函数在JS中并不常用，但这个函数对于代码的测试非常方便。3、JS可以改变html标签里的内容，使用x.innerHTML方法改变，x为被改变的对象。DOM（文档对象模型）是访问html元素的正式w3c标准。4、JS能够改变h
2017-03-03 10:52:46
649
原创 设置图片在div中居中的方法
水平居中的办法：1、img为内联元素，将img设置为block块元素，并设定其宽度和高度，然后margin：0 auto，图片在其父元素中将会水平居中；2、直接在img所在的父元素中设置text-align：center，那么该img将会在它的父元素中处于水平居中位置；竖直居中的办法：1、在img标签前增加一个span元素，设置其为inline-bloc
2017-03-03 10:49:16
4607
原创 border-radius 50%和100%的区别
border-radius:150px/10px 表示水平方向的圆角半径为150px，垂直方向的半径为10px，如果只有一个参数，则水平和垂直方向的圆角半径是一样的。是一个 150px x 150px 大小的方形，将它的四个角的半径都设置成 50%。根据 W3Cborder-radius 的规范定义，如果border-radius 的值是百分比的话，就是相对于 border bo
2017-03-03 10:46:18
710
原创 before和after注意事项
1、默认的伪元素是一个内联元素，如果要设置宽高，就必须先将这个伪元素声明为块元素。2、如果不设置content属性，伪元素将不会起作用；3、插入的before和after元素是目标元素的子元素，可以被放置在这个元素任何内容的“前”或者“后”；
2017-03-01 01:23:38
589
原创 设置最小宽度 最小高度 最大宽度 最大高度的作用
1、 如果一个元素没有设置最小宽度(min-width)，这时当浏览器缩小到一定程度时，元素中的布局可能会发生变化，如果想要保持不变可以给元素（如div)设置最小宽度属性，当浏览器宽度小于该值时，该元素不再自适应，而是宽度设置为最小宽度；2、设置最小高度（min-height同理）3、如果设置了width，那宽度就定死了，而设置了max-width，实际宽度可以在0~m
2017-03-01 01:14:48
4151
原创 多级下拉菜单导航制作
水平导航菜单的制作思路：1、进行初始化的设置，将文档中所有元素的margin和padding设为0；2、将所有的a元素设置为块元素，去掉下划线，添加背景色#c和padding值；3、鼠标移入li时改变子元素a的背景色，此处应为 li:hover>a (意思为鼠标划过li时，其直属的子元素背景色改变#d，如果不加>,那么所有二级菜单极其子菜单的背景色#c将变为#d
2017-03-01 01:13:11
1365
原创 absolute绝对定位
分为两种情况：1、父级(所有的，包括直接和间接父级)中没有定义position属性，那么将会参照浏览器的左上角，并且配合top、right bottom、left四个偏移属性对定义了绝对定位属性的子元素进行定位；2、父级元素中定义了position属性，则会参照父级(可能是直接也可能是间接，但应该是最近的)元素，联合top等四个属性来定位定义了绝对定位属性的子元素，其
2017-03-01 01:02:03
622
原创 子选择器和包含选择器的区别
E F：包含选择器，选择E中所有的F标签，包括儿子，孙子，孙子的孙子都会被选中。E>F：子选择器，只能选中E元素的子元素，不能选中E元素的孙元素style> /* 包含选择符(E F) */ .demo div { border:1px solid #f00; } 可以选中id为a b c d的div元素 /* 子选择符(E>F
2017-03-01 01:00:33
618
原创 border各个边的宽度和高度是多少？
设定上右下左各个边框的宽度为22px 30px 40px 22px那么上图中红色区域的高度为22px，绿色区域高度为30px ，黄色区域高度为 22px ，蓝色区域高度为40px如果只有上左边框有宽度，那么只显示上左边框，且尺寸是原来的一半
2017-03-01 00:59:38
1657
原创 button标签和input type=button的区别
标签 定义一个按钮。 在button元素内部，您可以放置内容，比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。 与标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。重要事项：如果在HTML表单中使用button元素，不同的浏览器会提交不同的值。Internet Explorer将提交与之间的文本，而其他
2017-03-01 00:57:52
988
原创 background属性
background-color 规定使用的背景颜色background-position 规定背景图像的位置 top left， top center，top right ， center left， center center，center right right left，right
2017-03-01 00:56:49
292
原创 搜索衬线字体和无衬线字体的区别
serif 衬线字体：在笔画始末的地方有额外的装饰，且笔画的粗细会因直横的不同而有所区别。强调出字母笔画的走势及前后联系，使得前后文有更好的连续性，更适合走文阅读 ，汉字中的宋体就是衬线体sans serif无衬线字体：无衬线体笔划粗细基本一致，强调的是单个字母。容易造成字母辨识的困扰，常会有来回重读及上下行错乱的情形。因此，适合用作标题之类需要醒目但又不被长时间阅读的
2017-02-28 21:35:01
3560
原创 margin:0 auto设置水平居中的问题
margin:0 auto用于设定该元素在父元素水平方向上处于居中的位置，必须注意该元素要设置width，否则该样式不会起作用。测试代码为：.f{ width: 500px; height: 500px; background-color: #1abc9c; margin: 0 auto; } .s{ width: 300px; height: 300px;
2017-02-28 21:32:55
833
原创 制作竖直导航菜单
竖向导航栏 ul{ list-style: none; margin: 0; padding: 0; } .nav1{ width: 150px; margin-left: 30px; }
2017-02-28 21:30:54
497
原创 盒子模型
盒子模型（box-sizing）有border-box、content-box和 inherit；标准盒子模型中，width和height是设置的content的宽度和高度；而在IE盒子模型中。width和height设置的是content+padding+border的宽度和高度。content-box为我们常用的w3c盒子模型，增加padding和mar
2017-02-28 21:24:45
342
原创 控制背景铺排的区域 border-clip
border-clip属性规定背景的绘制区域border-box：背景黄色铺到了边框的位置padding-box：背景黄色铺到了padding区域，但没有铺排到border区域content-box：背景黄色铺到了内容区域，padding和border区域未涉及到。
2017-02-28 21:23:21
742
原创 背景色的范围
给一个div设置border和padding 背景色，背景色将会铺到哪些范围？背景色会从内一直铺到border，覆盖padding范围，见图
2017-02-28 21:19:24
449
原创 利用border创建三角形
首先确定三角形顶角的朝向，朝向哪个方向，对侧的border值需要设置得小一些。其它三个border值设置大一些，并且将其颜色设置为transparent，就能看到一个三角形的形状了。
2017-02-28 21:06:33
334
原创 新手写html时常犯的错误
1、DOCTYPE不声明的话，IE的布局会失败；2、用数字命名div，该div的样式不会生效；3、文件编码与charset不一致导致乱码。
2017-02-28 21:02:27
537
原创 为什么有的网页后缀为.htm
html文件的扩展名一般是.html，但是像DOS这样的旧的操作系统限制扩展名最多是3个字符，所以.htm扩展名也在被使用。
2017-02-28 20:59:50
1519
原创 dl dt 和dd的用法
dl默认的是块状元素用来创建一个普通的列表,用来创建列表中的上层项目，用来创建列表中最下层项目，和都必须放在标志对之间。dl —— define list——定义列表dt ——define list title——用于生成定义列表中各列表项的标题，重复使用可以定义多个列表项的标题。dd——define list define——用于生成定义列表各列表项
2017-02-28 20:59:12
8767
原创 css控制特别小的元素，IE处理不好怎么办
加一个overflow：hidden的属性，那么小元素就可以正常显示。清浮动时防止特别小的元素出现问题，可以在初始化css里面加一个id为clr的空div，其属性为：clr{clear：both；width：0px；height：0px；overflow：hidden；}
2017-02-28 20:57:46
203
原创 块元素内的浮动元素超过总高度，下面的块元素位置
一个父块元素中有几个浮动子元素（总高度超过父元素）和一个非浮动的块元素。问父元素下面紧接的块元素如何显示？非浮动的块元素紧挨着几个浮动元素排列，父元素下面的块元素从紧挨着最后一个浮动子元素，部分与非浮动块元素重合。解决方案：父元素下面的块元素增加一个margin-top值即可解决。
2017-02-28 20:56:07
434
原创 display的属性及属性值意义
display 属性有有24种：none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间inline： 指定对象为内联元素。block： 指定对象为块元素。list-item： 指定对象为列表项目。inline-block： 指定对象为内联块元素。（CSS2）table： 指定对象作为块元素级的表格。类同于html标签（CSS2）inlin
2017-02-27 21:34:50
3034
原创 内联元素与外联元素
内联元素：又称为行内元素，不会自动换行，行内元素是不能跳出行的，但是可以辅助进行样式修改行内元素设置宽度、高度、垂直方向的margin和padding均不会产生效果的，设置水平方向上的margin和padding会有效果属于内联元素的html标签有：a - 锚点abbr - 缩写acronym - 首字b - 粗体(不推荐)bdo - bid
2017-02-27 21:28:41
876
原创 十八哥视频教程中html和css的tips
1、做网页需要先布局，使用div占块布局，布局的原则从上到下，从左到右，从大到小；2、css的引入方式有四种：内部样式表，直接在html文档的head部分增加style标签，对属性进行设置；链入外部样式表，使用link链接外部的css文件；导入外部样式表，使用@import导入直接在标签文件中写入样式3、div默认是独占一行的4、float是飘的
2017-02-27 21:24:50
1526
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人