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; ...
<!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=utf-8"/><title>无标题文档</title><style type="text/css">
*{ margin:0px; padding:0px;}#menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}ul{ list-style...
方法一 ：使用弹性布局 方法二 ：CSS3 transform 属性父级元素定位子集元素加属性：position: absolute; top: 50%; transform: translateY(-50%);方法三： 使用伪元素和vertical-align: middle;.parent:after {content: ‘ ‘;height: 100%;vertical-align: middle;width: 0;}child {display: inline-block;vertical-align: middle;} 原文：https://www.cnblogs.com/SallyShan/p/11588386.html
一、HTML<meta>标签使用该标签描述网页的具体摘要信息，包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能和服务的详细描述等。<meta>标签描述的内容并不显示，其目的是方便浏览器解析或利于搜索引擎搜索，它采用“名称/值”对的方式描述摘要信息。1）文档内容类型，字符编码信息<meta http-equiv="Content-Type content="text/html; charset=gb2312"/> >名称：Content-Type(文档内容类型) >值：text/html; cha...