css属性大全(基础篇)

 什么是CSS?CSS全称为CascadingStyleSheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(CascadingStylesheet)简称CSS。在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS作用:CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制,让网页按您的美工设计布局的更加美观漂亮。在初级学CSS样式的觉得好多,记不了那么多,现在我也整合了一份经常用上的CSS属性。方便大家一起学习,与交流样式开始最常见的是*号,这里的“*”号是通配符,即指,网页html中所有标签意思。在*定义的属性,一般是设置页面一些固定的属性,比喻,字体大小,也字体样式这种。从边框说起:1.border:边框边框样式的参数:solid;/*边框为实线实线边框(常用)*/none;/*无边框*/dotted;/*边框为点线*/dashed;/*边框为长短线*/double;/*边框为双线*/groo...
代码星球 代码星球·2021-02-24

css 布局,过渡

做了一个小案例,关于我们内边距的处理的,然后再加上一些过渡效果效果:具体实现重点加上这里:具体代码实现:CSS部分:<style>#container{border:2pxsolidsandybrown;width:780px;margin:0auto;overflow:hidden;margin-top:100px;}#conter{margin-right:-20px;margin-bottom:-20px;overflow:auto;}.multiple{position:relative;width:240px;height:160px;float:left;overflow:hidden;margin:020px20px0;}.yingc{background:black;width:240px;height:80px;position:absolute;bottom:-45px;z-index:1;opacity:0.7;transition:all.3slinear;/*规定以相同速度开始至结束的过渡效果*ease*(等于cubic-bezier(0,0,1,...
代码星球 代码星球·2021-02-24

动态加载JS 和 CSS

 /<scripttype="text/javascript">$(function(){varfilename='/assets/css/main.css';varfileref=document.createElement("link");fileref.setAttribute("rel","stylesheet");fileref.setAttribute("type","text/css");fileref.setAttribute("href",filename);document.getElementsByTagName("head")[0].appendChild(fileref); varfilescript=document.createElement("script");filescript.type="text/javascript";filescript.src="/assets/js/main.js";document.getElementsByTagName('body')[0].appendChild(filescript...
代码星球 代码星球·2021-02-23

00.Web大前端时代之:HTML5+CSS3入门系列~Bug反馈文章

感谢广大网友的热心提醒,现已发现如下错误:感谢“”对画布笔记系列的反馈(QQ:350223285)这个是失误,strokeStyle和stroke对应待续。。。。欢迎提出更多问题,感谢大家~...

08. Web大前端代之HTML5+CSS3入门系列 ~ QQ空间时间轴

Web大前端代之HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打在代码里面了,直接看代码就可以了,后面会说一下CSS3.0系列,这个就当一个引入吧: 简单版本:<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><metacharset="utf-8"/><styletype="text/css">body{font-size:100%;color:#7f8c97;font-family:'微软雅黑';background-color:#e9f0f5;}/*容器*/.paw-container{width:90%;margin:0auto;}/*创建一条垂直线*/#paw-time...

FontAwesome 4.4.0 中完整的585个图标样式CSS参考

做一记录,免得每次都去网上搜图标对应的class.在线版本:http://dnt.dkill.net/dnt/font/ ...

08. Web大前端时代之:HTML5+CSS3入门系列~H5 Web存储

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html ...

07. Web前端代之HTML5+CSS3入门系列~H5 地理位置

Web前端代之HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html源码:https://github.com/dunitian/LoTHTML5/tree/master/LoTHTML5/4.HTML5定位定位类型IP定位优点任何位置都可用在服务器端处理缺点不精确,一般精确到城市运算代价大,可能出错代理的时候就可能定位出错了GPS定位优点定位精准缺点定位时间长,耗电量大室内效果不好需要硬件设备支持Wi-Fi定位优点定位精准简单快捷定位可以在室内使用缺点适合大城市,WIFI接入点少的地方效果差手机定位优点定位精准简单快捷定位可以在室内使用缺点在基站较少的偏远地区效果不好自定义定位编程计算位置用户自定义输入兼容检测navigator.geolocation<scripttype="text/javascript">if(window.navigator.geolocation){alert('支持H5Geolocation');}else{alert('不支持H5Geolocation');}</...

06. Web前端代之HTML5+CSS3入门系列~HTML5 画布

Web前端代之HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html我们先看看画布的魅力:  初始画布canvas默认是宽300px,高150px;绘制步骤1.定义一个id<canvasid="canvasOne"width="300"height="300"></canvas>2.获取canvas对象varcanvasObj=document.getElementById('canvasOne');3.通过getContext获取上下文varcontext=canvasObj.getContext("2d");目前支持2d绘图4.通过javascript进行绘制context.fillStyle="red";设置样式为红色context.fillRect(125,125,50,50);在x坐标为125,y坐标为125的地方绘制一个长为50宽为50的正方形 绘制案例常见几何绘制直线绘制300*300画布的对角线beginPath()开始绘制moveTo(x,y...

05. Web前端代之HTML5+CSS3入门系列~H5 多媒体系

Web前端代之HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html1.引入概述音频文件或视频文件都可以看做是一个容器文件(类似于压缩的zip)编解码器就是读取特定的容器格式,对其中的音频与视频轨进行解码,然后实现播放解码器解码器(decoder),是一种输入模拟视频信号并将它转换为数字信号格式,以进一步压缩和传输的硬件/软件设备视频格式Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件WebM=带有VP8视频编码和Vorbis音频编码的WebM文件支持状况audio的canPlayType可以检测浏览器支持的文件格式在线检测(右击查看源码)http://dnt.dkill.net/DNT/HTML5/demo/check.html2.video逆天测试仅供参考测试浏览器:谷歌,360,火狐,Edge,IE:mp4格式的基本上都支持了,wmv格式的基本上都不支持,avi格式的火狐不支持 案例1.简单案例:<video...

04. Web前端代之HTML5+CSS3入门系列~HTML5 表单

Web前端代之HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html一、input新增类型:1.tel:输入类型用于应该包含电话号码的输入字段 2.url:用于应该包含URL地址的输入字段-提交表单时对url字段的值自动进行验证<formaction="/test.html"method="post">url:<inputtype="url"name="user_url"/><inputtype="submit"/></form> 注意:要带ftp://http://https://等等的前缀头才可以  3.email:用于e-mail地址的文本字段<formaction="/test.html"method="post">email:<inputtype="email"name="user_email"/><inputtype="submit"/></form> &n...

02.Web前端代之HTML5+CSS3入门系列~H5结构元素

Web前端代之HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html1.结构元素可以理解为语义话标记,比如:以前这么写<divid="nav"></div>现在偷懒写:<nav></nav>1.header头部区域,包含对主页的介绍<header>标签定义文档的页眉(介绍信息) 2.nav导航系列<nav>标签定义导航链接的部分。 3.section一块区域 <section>标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分  4.article文章内容或者主体内容内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自blog的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。  5.aside相关内容<aside>标签定义article以外的内容。aside的内容应该与article的内容相关 &...

01.Web大前端代之HTML5+CSS3入门系列~初识HTML5

Web大前端代之HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html文档申明<!--文档类型申明,html代表是html5的文档类型--><!DOCTYPEhtml>字符编码(UTF-8)<!--字符编码,charset="utf-8"--><metacharset="utf-8"/> 版本兼容1.省略引号:当属性值不包括<、>、=、单引号、双引号、空字符串时,属性两边的引号可以省略:<inputtype=text> 2.省略属性值具有布尔值的属性(比如:disabled,readonly)只写属性值代表true:<inputtype=checkboxchecked>...

Web大前端代之HTML5+CSS3入门系列

准备来一波新技术,待续。。。。 /Old:联系源码:https://github.com/dunitian/LoTHTML5文档下载:https://github.com/dunitian/LoTDotNet/思维导图(不断更新):图片:http://dnt.dkill.net/DNT/HTML5/index.jpg源码:http://dnt.dkill.net/DNT/HTML5/h5.zip在线文档:http://dnt.dkill.net/DNT/HTML5 00.Web大前端代之HTML5+CSS3入门系列~Bug反馈文章http://www.cnblogs.com/dunitian/p/5364426.html01.Web前端代之HTML5+CSS3入门系列~初识HTML5http://www.cnblogs.com/dunitian/p/5123530.html02.Web大前端代之HTML5+CSS3入门系列~H5结构元素http://www.cnblogs.com/dunitian/p/5123741.html03.Web大前端代之:...

CSS清除浮动8大方法

CSS清除浮动是每一位web前端工程师都要掌握的技术,也是让每一位刚入门前端工程师感到头疼的问题,下面就来讲一下CSS清除浮动的原理和各种解决方法,大家可以根据实际情况选择最佳的解决方案。  在用DIV+CSS布局时通常都会用到浮动(float)来完成页面布局,浮动(float)会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及widthheight属性。如果在布局中使用了浮动(float)而未进行合理的清除浮动,就会使页面产生错误。 这时就需要用到清除浮动的方法来解决页面产生的错误,而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。  下面总结整理8种清除浮动的方法供大家学习和参考,不同的方法可以让我们更好的了解清除浮动的原理,使用时选取最合适的一种方法即可: 1.父级div定义height<styletype="text/css">  .div1{background:#000080;border:...
代码星球 代码星球·2021-02-23
首页上一页...23456...下一页尾页