CSS
布朗狗熊
这个作者很懒,什么都没留下…
展开
-
HTML、CSS定义字体、颜色、背景等属性
字体属性 字体font-family:"字体1","字体2",... 例:font-family:“宋体”; 字号font-size:大小的取值 例:font-size:16px; 注意:xx-small:绝对字体尺寸,最小。 x-small:绝对字体尺寸,较小。 medium:绝对字体尺寸,正常默认值。对应还有large、x-large、xx-large等。large...原创 2018-07-31 12:31:52 · 14991 阅读 · 0 评论 -
响应式布局之媒体查询法
响应式不同分辨率设置1.1024px显屏 @media screen and (max-width : 1024px) { /* 样式写在这里 */ }2.800px显屏 @media screen and (max-width : 800px) { /* 样式写在这里 */ }3.640...原创 2019-06-29 21:16:35 · 392 阅读 · 0 评论 -
js实现图片时间,京东倒计时案例
html代码<div id="pic"> <img src="img/0.png" alt="" /> <img src="img/0.png" alt="" /> <span>时</span> <img src="img/0.png" alt="" /> <...原创 2019-07-20 22:09:00 · 839 阅读 · 0 评论 -
js拖拽实现动态评分以及九宫格的实现
拖拽实现动态评分效果<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,i,em{padding: 0;margin: 0;} i,em{fon...原创 2019-08-02 20:42:54 · 496 阅读 · 0 评论 -
js封装的运动函数适用于获取样式和样式变化(宽,高,透明度等)
封装的js函数 startMove.js//获取样式的函数function getStyle(obj,attr){ if(window.getComputedStyle){ return getComputedStyle(obj,null)[attr]; } return obj.currentStyle[attr];}/* 参数 * domobj要改变的dom对象 ...原创 2019-08-05 09:08:46 · 348 阅读 · 1 评论 -
js写一个烟花效果
调用一个startMove的js文件,这个封装用的原生js,包括获取样式,高度,宽度和透明度等。引用js地址如下https://blog.csdn.net/weixin_40196539/article/details/98477850如有错误,欢迎指正,不胜感激!烟花完整代码如下:<!DOCTYPE html><html> <head> <...原创 2019-08-16 20:32:55 · 616 阅读 · 0 评论 -
js用类的方法写萤火虫和组合创建的方法写萤火虫
上面两张为素材图方法一:类的方法<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html{ height: 100%; } body...原创 2019-08-16 20:37:47 · 281 阅读 · 0 评论 -
原生js实现放大镜效果
下面是用到的图片下面是html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*body{padding: 0;margin: 0;}*/ i...原创 2019-08-16 21:26:34 · 276 阅读 · 0 评论 -
原生js实现星星评分效果
注意图片路径问题代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul,li,body{padding: 0;margin: 0;} ...原创 2019-08-16 21:29:26 · 835 阅读 · 0 评论 -
原生js实现瀑布流
瀑布流效果主要步骤分为1.排好第一行2.找出最小高度,往下排3.最小高度更新4.数据后续添加,找到最小值,加载数据js代码如下:<script type="text/javascript"> var data = ["img2/1.jpg","img2/5.jpg","img2/9.jpg","img2/1.jpg","img2/5.jpg","img2/9.jpg"...原创 2019-08-16 21:33:02 · 160 阅读 · 0 评论 -
js中的cookie基础封装和ajax的cookie完整封装以及实现7天免登陆效果
免登陆效果,主要是浏览器中cookie的作用,可以设置保存数据到本地,从而实现记住密码,免登陆1.cookie的基础封装,面试经常考这个。function setCookie(key,value,n){//cookie添加函数 var oDate = new Date(); oDate.setDate(oDate.getDate()+n); //value = encodeURIComp...原创 2019-08-16 21:41:04 · 788 阅读 · 0 评论 -
flex弹性布局和多栏布局
flex弹性布局在未来flex布局将成为布局的首选方案 Flex是flexinle Box的缩写,意思是弹性布局;用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局。即:display:flex;Css3中box-sizing:属性让两种盒模型相互转变box-sizing : content-box || border-box || inherit;采用flex布局的元...原创 2019-06-29 21:15:12 · 430 阅读 · 1 评论 -
CSS3新增属性
关于文本的:文本阴影:text-shadow 文本换行: Word-wrap 、 Word-break Css3服务器端字体: @font-face 使用方法: @font-face{ font-family:webFont; src:url(‘font/字体名称.otf’); } Div{font-family:webFont;} (阿里文字图标的加...原创 2019-06-29 21:13:34 · 3777 阅读 · 0 评论 -
常用浏览器内核介绍
常用浏览器内核以及介绍1)Trident :IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器代表作品IE,因为Ie捆绑在Windows中,所有占有极高的市场份额,又称IE内核或MSHTML,此内核只能应用于windows平台,且是不开源的。 2)Gecko:代表作品Mozilla Firefox是开源的,它的最大优势是跨平台,能在Microsoft Window...原创 2019-06-22 09:28:47 · 296 阅读 · 0 评论 -
css样式介绍以及选择器介绍
css:层叠样式表(css样式表),主要用来设置HTML文本内容的(字体,大小,对齐方式)图片的外形(宽高,边框样式,边距等等)以及板面的布局等外观样式,css以html为基础,提供了丰富的功能,而且还针对不同的浏览器设置不同的样式<!-- 引入css样式表的三种方式 --><!-- 1.行内样式表:通过style标签的style属性来设置元素的样式 -->&...原创 2018-09-14 19:28:32 · 208 阅读 · 0 评论 -
css背景图片属性
设置背景图片background-repeat: 1.repeat(默认):背景图片在纵向和横向上平铺。 2.no-repeat:背景图片不平铺。 3.repeat-x:背景图片在横向上平铺。 4.repeat-y:背景图片在纵向上平铺。背景图片位置background-positi...原创 2018-09-14 19:31:44 · 1501 阅读 · 0 评论 -
css外观属性和字体样式属性
外观属性1.color:文本颜色,属性值三种写法1.直接写颜色值,red,blue,green.2.颜色的十六进制值#FF00000(推荐写法)3.RGB代码,比如红色rgb(255,0,0)2.line-height:行间距,也就是行与行之间的距离。行间距的单位用像素px 3.text-align:水平方向的对齐方式,1.left:左对齐(默认值)2.right:(右对齐)3.cente...原创 2018-09-14 19:35:31 · 518 阅读 · 0 评论 -
标签显示器模式以及转换 display
标签的类型(显示模式) HTML标签一般分为三种类型,1.块标签(块元素) 2.行内标签(行内元素)3.行内块标签(行内块元素) 块标签(块元素): 1.追常见的块标签:<h1>-<h6>,<div>,<p>,<ul>,<ol>,<li>,最典型的块标签是div ...原创 2018-09-14 19:42:00 · 561 阅读 · 0 评论 -
css中边框,行高等属性介绍
内边距:边框与内容之间的距离padding-left:左内边距 eg:padding-left: 10px; padding-top:上内边距 eg:padding-top:10px; padding-bottom:下内边距 eg:padding-bottom:10px; padding-right:右内边距 eg:padding-right:10px; padding属性值的4种形...原创 2018-09-14 20:29:16 · 344 阅读 · 0 评论 -
文本溢出的属性和解决方法
在写Html页面中,在文字详情等页面有宽度限制,需要显示省略号等1. 文本溢出显示省略号的写法 1)容器宽度:width:value; 2)强制文本在一行显示:white-space:nowrap(强制换行)/()/()/()/ 3)溢出内容隐藏:overflow:hidden(隐藏)/scroll(滚动条)/auto(自动:溢出显示滚动条,不溢出不显示)/inheri...原创 2019-06-22 09:16:13 · 1846 阅读 · 0 评论 -
HTML网页自适应以及清除浮动
自适应定义:网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。优点:元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。1)宽度自适应 子元素的宽度自动适应父元素的宽度 子元素宽度设置为100%。(块元素宽度默认值为auto)2)高度自适应 元素高...原创 2019-06-22 09:22:11 · 490 阅读 · 0 评论 -
HTML常见bug的hack以及图片整合介绍
(前端面试常见问题)1.图片间隙 div中的图片间隙 bug:在块元素中插入图片时,有时图片会将块元素下方撑大三个像素。 hack:给<img>添加声明:display:block;vertical-align:middle2.css兼容问题1)表单元素行高不一致(IE,MOZ,C,O,S) BUG:表单元素行高对齐方式不一致 hac...原创 2019-06-22 09:32:10 · 1132 阅读 · 0 评论 -
HTML高级结构以及input新增类型
HTML高级结构结构主要在移动端应用广泛 <header>写网页头部区域</header> <nav>写导航区域</nav> <article>写独立版块区域</article> <aside>写与article相关联的一些板块</aside> <se...原创 2019-06-29 20:36:03 · 172 阅读 · 0 评论 -
CSS3选择器
CSS3选择器css3选择器主要分为:属性选择器和结构伪类选择器属性选择器:e[type="text"]{} 选择名字完全匹配的这个标签,eg:div[class="box"]{width:100px;}div中class等于box的宽度改为100px。e[type*=""] {} *号选择的是包含的属性值e[type^=""] {} ^号选择是以“”里面开头的...原创 2019-06-29 20:58:36 · 241 阅读 · 0 评论 -
前端常考面试题之——css篇
1.常用浏览器和内核,兼容性2.h5语义化标签以及优点3.不知高度,实现垂直居中4.360极速模式和兼容模式的区别5.走马灯marquee6.颜色哪几种表示方法 (四种)7.常见定位方式,及区别8.视口viewport,9.适配媒体查询法,meta标签10.响应式,bootstrap的栅格系统11.清除浮动12.web性能优化13.单行溢出显示省略号14.多行显示省略号...原创 2019-10-07 12:02:25 · 287 阅读 · 0 评论