HTML / CSS
happyyyhy
这个作者很懒,什么都没留下…
展开
-
前端代码书写注意事项
本文主要总结的前端html代码书写的一些注意事项原创 2017-02-27 21:19:39 · 830 阅读 · 0 评论 -
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 · 312 阅读 · 0 评论 -
button标签和input type=button的区别
标签 定义一个按钮。 在button元素内部,您可以放置内容,比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处。 与标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。重要事项:如果在HTML表单中使用button元素,不同的浏览器会提交不同的值。Internet Explorer将提交与之间的文本,而其他原创 2017-03-01 00:57:52 · 1009 阅读 · 0 评论 -
border各个边的宽度和高度是多少?
设定上右下左各个边框的宽度为22px 30px 40px 22px那么上图中红色区域的高度为22px,绿色区域高度为30px ,黄色区域高度为 22px ,蓝色区域高度为40px如果只有上左边框有宽度,那么只显示上左边框,且尺寸是原来的一半原创 2017-03-01 00:59:38 · 1693 阅读 · 0 评论 -
子选择器和包含选择器的区别
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 · 637 阅读 · 0 评论 -
absolute绝对定位
分为两种情况:1、父级(所有的,包括直接和间接父级)中没有定义position属性,那么将会参照浏览器的左上角,并且配合top、right bottom、left四个偏移属性对定义了绝对定位属性的子元素进行定位;2、父级元素中定义了position属性,则会参照父级(可能是直接也可能是间接,但应该是最近的)元素,联合top等四个属性来定位定义了绝对定位属性的子元素,其原创 2017-03-01 01:02:03 · 647 阅读 · 0 评论 -
设置最小宽度 最小高度 最大宽度 最大高度的作用
1、 如果一个元素没有设置最小宽度(min-width),这时当浏览器缩小到一定程度时,元素中的布局可能会发生变化,如果想要保持不变可以给元素(如div)设置最小宽度属性,当浏览器宽度小于该值时,该元素不再自适应,而是宽度设置为最小宽度;2、设置最小高度(min-height同理)3、如果设置了width,那宽度就定死了,而设置了max-width,实际宽度可以在0~m原创 2017-03-01 01:14:48 · 4216 阅读 · 0 评论 -
before和after注意事项
1、默认的伪元素是一个内联元素,如果要设置宽高,就必须先将这个伪元素声明为块元素。2、如果不设置content属性,伪元素将不会起作用;3、插入的before和after元素是目标元素的子元素,可以被放置在这个元素任何内容的“前”或者“后”;原创 2017-03-01 01:23:38 · 614 阅读 · 0 评论 -
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 · 747 阅读 · 0 评论 -
设置图片在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 · 4789 阅读 · 0 评论 -
html5新增的语义标签
1、 section表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。2、article标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。3、aside元素标签可以包含与当前页原创 2017-03-03 10:57:17 · 577 阅读 · 0 评论 -
清除浮动的小例子
html文档为:css样式为:由于图片的高度高出父div的高度,因此图片溢出了:如何解决这一问题:添加一个清除浮动的样式: 问题得到了解决!!但是如果提前对div的高度进行了设定,那么添加清除浮动效果后,div会自动产生水平和竖直的滚动条原创 2017-03-03 10:59:55 · 418 阅读 · 0 评论 -
iconfont图标使用方法
1、首先进入:http://www.iconfont.cn/搜索你分类的关键字---然后加入购物车,通过购物车将字体下载到本地,解压文件;2、打开iconfont.css文件 第一段代码@font-face为声明图标字体,可以自定义字体的名称将自定义的图标字体名称放到html元素中一般情况下会下原创 2017-03-03 11:07:34 · 776 阅读 · 0 评论 -
IE下textarea默认不显示滚动条的实现代码
IE下textarea默认情况下会显示出竖直方向的滚动条,如果不想让它显示要怎么设置呢,如果需要隐藏滚动条,行数超过height时才显示出滚动条,需要把overflow设置为auto;原创 2017-03-03 11:11:05 · 479 阅读 · 0 评论 -
css中字体单位的不同:px、em、rem
px在Web页面制作中,我们一般使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用“em”来定 义Web页面的字体。em在使用“em”作单位时,一定需要知道其父元素的设置,因为原创 2017-03-03 11:13:55 · 361 阅读 · 0 评论 -
搜索衬线字体和无衬线字体的区别
serif 衬线字体:在笔画始末的地方有额外的装饰,且笔画的粗细会因直横的不同而有所区别。强调出字母笔画的走势及前后联系,使得前后文有更好的连续性,更适合走文阅读 ,汉字中的宋体就是衬线体sans serif无衬线字体:无衬线体笔划粗细基本一致,强调的是单个字母。容易造成字母辨识的困扰,常会有来回重读及上下行错乱的情形。因此,适合用作标题之类需要醒目但又不被长时间阅读的原创 2017-02-28 21:35:01 · 3615 阅读 · 0 评论 -
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 · 856 阅读 · 0 评论 -
十八哥视频教程中html和css的tips
1、做网页需要先布局,使用div占块布局,布局的原则从上到下,从左到右,从大到小;2、css的引入方式有四种:内部样式表,直接在html文档的head部分增加style标签,对属性进行设置;链入外部样式表,使用link链接外部的css文件;导入外部样式表,使用@import导入直接在标签文件中写入样式3、div默认是独占一行的4、float是飘的原创 2017-02-27 21:24:50 · 1545 阅读 · 0 评论 -
内联元素与外联元素
内联元素:又称为行内元素,不会自动换行,行内元素是不能跳出行的,但是可以辅助进行样式修改行内元素设置宽度、高度、垂直方向的margin和padding均不会产生效果的,设置水平方向上的margin和padding会有效果属于内联元素的html标签有:a - 锚点abbr - 缩写acronym - 首字b - 粗体(不推荐)bdo - bid原创 2017-02-27 21:28:41 · 899 阅读 · 0 评论 -
display的属性及属性值意义
display 属性有有24种:none: 隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间inline: 指定对象为内联元素。block: 指定对象为块元素。list-item: 指定对象为列表项目。inline-block: 指定对象为内联块元素。(CSS2)table: 指定对象作为块元素级的表格。类同于html标签(CSS2)inlin原创 2017-02-27 21:34:50 · 3119 阅读 · 0 评论 -
块元素内的浮动元素超过总高度,下面的块元素位置
一个父块元素中有几个浮动子元素(总高度超过父元素)和一个非浮动的块元素。问父元素下面紧接的块元素如何显示?非浮动的块元素紧挨着几个浮动元素排列,父元素下面的块元素从紧挨着最后一个浮动子元素,部分与非浮动块元素重合。解决方案:父元素下面的块元素增加一个margin-top值即可解决。原创 2017-02-28 20:56:07 · 466 阅读 · 0 评论 -
css控制特别小的元素,IE处理不好怎么办
加一个overflow:hidden的属性,那么小元素就可以正常显示。清浮动时防止特别小的元素出现问题,可以在初始化css里面加一个id为clr的空div,其属性为:clr{clear:both;width:0px;height:0px;overflow:hidden;}原创 2017-02-28 20:57:46 · 216 阅读 · 0 评论 -
dl dt 和dd的用法
dl默认的是块状元素用来创建一个普通的列表,用来创建列表中的上层项目,用来创建列表中最下层项目,和都必须放在标志对之间。dl —— define list——定义列表dt ——define list title——用于生成定义列表中各列表项的标题,重复使用可以定义多个列表项的标题。dd——define list define——用于生成定义列表各列表项原创 2017-02-28 20:59:12 · 8865 阅读 · 0 评论 -
为什么有的网页后缀为.htm
html文件的扩展名一般是.html,但是像DOS这样的旧的操作系统限制扩展名最多是3个字符,所以.htm扩展名也在被使用。原创 2017-02-28 20:59:50 · 1586 阅读 · 0 评论 -
标签a没有href属性
标签a如果没有置href属性,那么文字的显示跟普通文字没什么区别,看不出来是链接原创 2017-02-28 21:00:43 · 1431 阅读 · 0 评论 -
新手写html时常犯的错误
1、DOCTYPE不声明的话,IE的布局会失败;2、用数字命名div,该div的样式不会生效;3、文件编码与charset不一致导致乱码。原创 2017-02-28 21:02:27 · 569 阅读 · 0 评论 -
利用border创建三角形
首先确定三角形顶角的朝向,朝向哪个方向,对侧的border值需要设置得小一些。其它三个border值设置大一些,并且将其颜色设置为transparent,就能看到一个三角形的形状了。原创 2017-02-28 21:06:33 · 346 阅读 · 0 评论 -
背景色的范围
给一个div设置border和padding 背景色,背景色将会铺到哪些范围?背景色会从内一直铺到border,覆盖padding范围,见图原创 2017-02-28 21:19:24 · 473 阅读 · 0 评论 -
盒子模型
盒子模型(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 · 361 阅读 · 0 评论 -
制作水平导航栏
源代码为:样式代码为:最后一句代码的意思是:当鼠标划过类li1时,下面的nav2的类以block的形式展示出来原创 2017-02-28 21:28:51 · 415 阅读 · 0 评论 -
制作竖直导航菜单
竖向导航栏 ul{ list-style: none; margin: 0; padding: 0; } .nav1{ width: 150px; margin-left: 30px; }原创 2017-02-28 21:30:54 · 522 阅读 · 0 评论 -
flex布局
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。转载 2017-03-03 11:26:22 · 555 阅读 · 0 评论