一、Html和CSS的关系 1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这...
//JerryWeb//20150602//HTML | CSS | Basic ======= HTML&CSS_Basic_01======= #html要保持语义化，即使没有css也要保持漂亮而且一目了然的结构。 em,strong 表强调 | span没有语义，设置单独的样式 | q引用 | blockquote 长文引用 | br / | address 地址 | pre 多行原文显示 table tbody tr 行 td 列 th 表头 | img alt:下载失败文本 title:提示文本 #form 表单，method:post|put 完成和后端的交互 一般form标签下有...
一、Web让广播明星黯然失色 要建立Web页面，需要创建用超文本标记语言（HyperText Markup Language，HTML）编写的文件，把它们放在一个Web服务器上二、Web服务器能做什么？Web服务器在互联网上有一份全天候的工作。 服务器就是连接到互联网的计算机。 每个服务器会存储HTML文件、图像、声音和其他类型的文件。 你在网上冲浪，单击一个链接来访问某个页面。这个单击会导致浏览器向Web服务器请求一个HTML页面三、...
html设置网页的结构内容，css设置样式，要记的标签很多，要学好无非是多练，然后看别人怎样写的代码，对比自己的，这样能更好地理解。 关于浮动，既然所有浮动必须要清除，那在设置浮动的同时，就先把清除浮动的代码写上，免得后面忘记清除浮动。设置父元素的高度height，div中最后的div元素设置clear{clear：both}，ul中在ul属性上设置overflow{overflow：hidden}是三种有效的方法 padding与margin对块元素及行内元素均适用...
学习前端有一段时间了，一直在看书上的理论知识，而实战项目却很少。师兄常说，想要知道自己的实力有多少，知识掌握了多少，最好的方法就是去实践了，实践出真知嘛。于是决定在这个假期里，主要是通过项目的实践以及理论知识的辅助来提高代码水平。首先是做几个HTML5+CSS3静态页面布局的练习，查缺补漏知识点并且总结在实践过程中遇到的一些错误。页面的设计稿主要是网络上找来了的，也尝试自己切图、测量位置、获得内容的属性等等...
1.display 中 block, inline, inline-block 的区别 1).默认情况下, block 宽度占满整个浏览器, inline 宽度等于其内容的宽度 2).每行只容纳一个 block 元素, 但可以并列容纳多个 inline 元素 3).block 元素宽、高、行高等可以更改, inline 元素宽、高、行高等不可更改 4).应用 inline-block 的元素呈现为内联对象, 周围元素保持在同一行, 但可以设置宽度和高度地块元素的属性(这样可以使用 li + inline-block 制作导航...
span标记的样式设定width属性，会发现不会产生效果。 如果设置display:block，width属性生效，但是此时的span跟div一样了。 如果设置display:inline-block，则span并列在同行，而且width属性生效。 元素display属性的常见值说明： block：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。 inline：内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行。 inline-block：将对象呈递为内联对象，但是对象的...
*{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; }通过CSS让html网页中的内容不可选原文：http://www.cnblogs.com/lr393993507/p/5231882.html
哪四種？這裏簡單進行下總結①寫在 style 標籤中<style type="text/css">這裏是css代碼... </style> ②外部引入css文件<link rel="stylesheet" href="這裏是外部css引入地址(比如：test.css)"/> ③直接用行內css屬性控制<div style="這裏是css屬性值(如：border:1px solid red;background:blue;)">這裏是內容 </div> ④這種其實是合併2個css文件 a.css文件和b.css文件在同個目錄下的同一級 在a.css文件開始導入b.css...
现在我们可以选择浏览器非常多，所以浏览器的环境也是种类繁多，同一个浏览器也是包含各种不同的版本，不同的版本之间的渲染方法也存在差异，，它们支持的 HTML5、CSS3 特性恐怕也不尽相同。这种情况于是造成Web开发者在开发网站时，要面对数量庞大的浏览器种类。如果开发时按最低标准，比如 IE6不支持的特性，我们统统不用，那就没有必要写这篇文章了；但我想这种情况极少，更多的开发，是在现代浏览器上使用它们支持的特性，而在...
译文原链接：http://codetheory.in/html5-fullscreen-background-video/前言：当网页载入时，自动播放的全屏背景视频 已经成为当前颇受欢迎的趋势。 就个人而言，我认为自动播放、质量好的视频会增加用户/客户的参与度。应该记住，视频的故事必须与品牌相关。 近年来，我们被FB和Twitter等社交网络上的大量视频所包围。 据研究由此引起了用户更多的参与。最近我不得不在一个网站上实现相同的功能，因此我决定构建一个用到 HTML5 视...
htmlpretty插件经过安装后测试，效果很棒，安装过程简要说明如下：在Sublime Text中，按下Ctrl+Shift+P调出命令面板;输入install 调出 Install Package 选项并回车;输入pretty，并在列表中选择HTML-CSS-JS Prettify后回车即可安装快捷使用方法：举例：打开一个压缩的jquery.min.js文件，按下Ctrl+Shift+H 原文：http://www.cnblogs.com/zhja/p/5144509.html
先看效果（把鼠标移上去看看）abcd 这个效果很简单，就是移动文字的位置模拟出震动的效果。 Css 1<style>2@-webkit-keyframes shake {3 0%{4 -webkit-transform:translate(2px, 2px);5 }6 25%{7 -webkit-transform:translate(-2px, -2px);8 }9 50%{ 10 -webkit-transform:translate(0px, 0px); 11 } 12 75%{ 13 -webkit-transform:translate(2px, -2px); 14 } 15 100...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">body,div{margin:0;padding:0;}#main{border:1px solid blue;width:500px;height:500px;margin:100px auto;position:rel...
有时需要在页面显示三角形，需要通过画正方形才能得到三角形，代码如下：方法一：首先需要设置边框的大小与颜色，设置边框的上右下左分别你需要哪块显示在前端即后面跟数据，如果不需要显示的话就写transparent；<style> .tr1{ width: 0; height: 0; border: 100px solid transparent; border-top-color: black; border-bottom: none; ...