http://www.bootcss.com/p/websafecolors/ 配色 web 安全色
url与web服务器的交互过程
浏览器接收到ｕｒｌ在本体查询缓存，查询域名ip发出请求，建立链接 如果有发给服务器,服务器确认网如果没有更新资源返回消息，如果有返回消息，浏览器发送请求接收文件，解析对加载的资源进行语法解析
后缀名：告诉操作系统这是什莫东西，与文件之间是没有直接的关系。
* 后缀名仅仅决定了文件的打开方式
* 真正决定文本类型的是文件的内容
重语义化原则 ： 尽量用语义重的标签 如 <strong> <em> <ins><del> 等，少用<span> <div> 无语义标签
重语义 搜索引擎建立良好沟通，方便于爬虫。方便其他设备解析，以以意义的方式来渲染网页，增强可读性
atom ctrl+\隐藏树 ctrl+/ 注释 可以鼠标框选在注释 按两次注释取消注释
ctrl+m 标签之间跳转
学习标签：https://developer.mozilla.org/zh-CN/docs/Web/HTM
特殊字符  ： 空格 <： < >： >
块元素可以设置宽高的 <div> <li> <p> <ul><ol><h1>
行内元素设置宽高不起所用 <strong> <em> <span> <ins> <del>
特殊的行内元素 <img /> <input /> <td>是可以设置宽高的
选择器 id选择器 标签选择器 类选择器 通配选择器 后代选择器 交集选择器
优先级：!important>id > class > 标签 > 继承 > 浏览器的默认属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css样式</title>
<style media="screen">
/*类选择器 差异化设计*/
.color-gg{
color: blue;
}
.font-siz{
font-size: 50px;
}
/*标签选择器 通用化设计*/
h1{
color: rgb(37, 178, 219);
font-size: 20px;
}
/*id选择器 id 名称必须在当前页内唯一 */
#color-yy{
color: red ;
}
/*通配选择器 遍及所有 */
*{
font-style: italic;
}
/*后代选择器 空格隔开 其后边的标签必须是之前标签的后代*/
/*后代选择器是 从右向左寻找的 先找到p然后再找p */
div p{
color: #e28921;
}
p span{
color: rgb(30, 221, 2);
}
div p.color-gg{
color:rgb(210, 193, 40);
}
/*交集选择器 不同的样式再去单独设定 */
h2,strong{
color: rgb(49, 228, 155);
}
</style>
</head>
<body>
<h1>is h1</h1>
<p class="color-gg font-siz">有木有</p>
<h1 id ="color-yy">is h1</h1>
<h1 class="color-gg">is h1</h1>
<div class="">
<p class ="color-gg">我天</p>
<p>这是div里的p元素</p>
</div>
<p>这是body的p元素 <span>我是p里的span</span> </p>
<strong>strong</strong>
<h2>h2</h2>
</body>
</html>
要点 hr 水平线
http://www.cnblogs.com/glj1203/archive/2011/11/23/2260434.html
要点 a
/*关于a a:lijnk 未被访问 a:active 未被选择的链接 a:visites 以访问的链接 a:hover 当有鼠标悬停在链接上 */
a:link{
color:rgb(88, 166, 195);
text-decoration: none;
}
a:visited{
color: rgb(127, 78, 230);
text-decoration: none;
}
a:hover{
color: rgb(66, 221, 98);
text-decoration: underline;
}
a:active{
color:rgb(88, 166, 195);
text-decoration: none;
}
/*有顺序*/
css属性
http://www.css88.com/book/css/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css 属性</title>
<style media="screen">
p{
/*字体样式 字体样式可以添加多种 逗号隔开 依次查询使用其能读懂的 可以用unicode编码*/
font-family: "黑体";
/*字体大小*/
font-size: 20px;
/*字体是否倾斜*/
font-style: italic;
/*字体是否加粗*/
font-weight: bolder normal;
}
.p2{
/*font:font-style font-weight font-size font-family;*/
font: bolder 10px "楷书";
/*首行缩进 一般用em 相对单位*/
text-indent: 2em;
/*white-space
空白符处理 normal 默认 空格空行无效 满行自动换行 pre预格式化 按文档的书写格式保留空格 空行 nowrap 空格空行无效
，强制文本不能换行，除非遇到换行标记。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。 没啥用*/
white-space: pre;
/*word-wrap
属性允许长单词或 URL 地址换行到下一行normal
normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行,几乎得到了浏览器的支持。*/
}
.p3{
background-color: rgb(136, 236, 12);
height: 110px;
/*字体间距 字体间留白 可负值 默认值normal*/
letter-spacing: 2.7px;
/*单词间距 英文单词 可负值 默认值 normal*/
word-spacing: 10.1px;
/*行间距 行行 之间的距离 ｐｘ ｅｍ ％ 与因子（不加后缀） 实际工作像素最多 默认normal */
/*line-height =height: 则垂直居中*/
line-height: 110px;
/*水平居中 right left center */
text-align: center;
}
.p4{
/*文本装饰 上画线：overline ;下划线:underline; 删除线line-through;
可同时赋予多个值 */
text-decoration: line-through overline underline;
}
span{
background-color: rgb(152, 56, 167);
/*垂直对齐方式 适用于行内元素*/
vertical-align: middle;
}
</style>
</head>
<body>
<p>p１ 字体定义，可单独定义字体样式， 大小，粗细与倾斜</p>
<p class ="p2" >p2 简便式字体定义 <br>一次性定义 weight style 默认值 normal no</p>
<p class="p3"> 设置一下字体间距 hello word omg 我的行间距比较大</p>
<p class="p4">p4 我类</p>
<span>我是ｓｐａｎ得</span>
</body>
</html>
背景设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景</title>
<style media="screen">
.div1{
background-color: rgb(50, 200, 83);
color: rgb(232, 231, 78);
width:400px;
height: 400px;
}
.div2{
/*如果小默认平铺 如果大默认左上角开始*/
background-image: url("./timg6.jpeg");
/*平铺 可以设定x,y*/
background-repeat: repeat-x;
/*图片固定*/
background-attachment: fixed;
width: 400px;
height: 400px;
}
.div3{
width:400px;
height: 400px;
background-color: rgb(53, 198, 198);
background-image: url("./timg6.jpeg");
/*设置背景图片的位置 left right top bottom center */
background-position: -800px 472px;
}
.div4{
/*综合写法 background: color image repeat position attachement;*/
/*同名覆盖 不同名叠加*/
background: rgb(213, 78, 114) url()
}
</style>
</head>
<body>
<div class="div1">
北京天安门
</div>
<div class="div2">
</div>
<div class="div3">
</div>
<div class="div4">
</div>
</body>
</html>
行高
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>line-height_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
/*设置div 宽度*/
.test div{width:300px;margin:15px 0;border:1px solid #000;}
/*设置ｐ 字体大小*/
.test p{margin:0;font-size:30px;}
.fixed div{line-height:20px;}
.percentage div{line-height:130%;}
.gene div{line-height:1.5;}
</style>
</head>
<body>
<ul class="test">
<li class="fixed">
<strong>固定数值方式：</strong> - {line-height:20px;}
<div><p>使用固定数值的方式定义line-height，如设置行高为18px类似这样的固定数值，可能会引发文字重叠的现象。</p></div>
</li>
<li class="percentage">
<strong>百分比方式：</strong> - {line-height:130%;}
<div>
如果是这种情况
<p>使用百分比的方式定义line-height，与使用固定数值方式一样，也可能会引发文字重叠的现象。</p>
</div>
</li>
<li class="gene">
<strong>因子方式：</strong> - {line-height:1.5;}
<div>
如果是这种情况
<p>使用因子方式定义line-height是非常安全的方式，将可以避免文字重叠的现象。</p>
</div>
</li>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>line-height_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
/*设置div 宽度*/
.test div{width:300px;margin:15px 0;border:1px solid #000;}
/*设置ｐ 字体大小*/
.test p{margin:0;font-size:30px;}
.fixed div{line-height:20px;}
.percentage div{line-height:130%;}
.gene div{line-height:1.5;}
</style>
</head>
<body>
<ul class="test">
<li class="fixed">
<strong>固定数值方式：</strong> - {line-height:20px;}
<div><p>使用固定数值的方式定义line-height，如设置行高为18px类似这样的固定数值，可能会引发文字重叠的现象。</p></div>
</li>
<li class="percentage">
<strong>百分比方式：</strong> - {line-height:130%;}
<div>
如果是这种情况
<p>使用百分比的方式定义line-height，与使用固定数值方式一样，也可能会引发文字重叠的现象。</p>
</div>
</li>
<li class="gene">
<strong>因子方式：</strong> - {line-height:1.5;}
<div>
如果是这种情况
<p>使用因子方式定义line-height是非常安全的方式，将可以避免文字重叠的现象。</p>
</div>
</li>盒子模型
width = border-left + padding-left +width +padding-right +border-right
height = border-top + padding-top +height +padding-bottom+border-bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子３</title>
<style media="screen">
*{
/*默认内外边距清除*/
margin: 0px;
padding: 0px;
}
.div1{
width: 500px;
height: 100px;
background-color: rgb(228, 227, 62);
/*padding margin border 综合设置 顺序 上右下左
一个值 表示四个方向的值 两个值 表示 上下 左右 四个方向的值
三个值 表示 上 右 下 左（和右同样大小） 四个值 表示分别对４个方向设值
*/
/*padding用来填充（泡沫）不会放内容， 修改后会影响盒子的大小 背景包括padding 的背景颜色*/
padding-top: 100px;
padding-bottom: 100px;
/*边框（盒子的纸壳） 颜色color 宽度width 样式 style 分别分 上 右 下 左
之后的设置会覆盖之前的设置
*/
border: 10px solid rgb(14, 56, 184);
border-color: rgb(69, 223, 219) rgb(29, 170, 6) rgb(235, 165, 221) rgb(92, 85, 90);
border-top-width: 20px;
border-top-color: rgb(232, 113, 67);
border-top-style: dotted;
border-right: 1px rgb(63, 217, 166) solid;
}
.div2,.div3{
border: 10px solid red;
width: 100px;
height: 300px;
}
/*上下外边距合并*/
.div2{
margin-bottom: 20px;
margin: 0px auto;
}
.div3{
margin-top: 50px;
}
/*左右外边距不会合并 是叠加的*/
img{
width: 300px;
height: 300px;
}
.img1{
margin-right: 50px;
}
.img2{
margin-left: 200px;
}
/*内嵌套元素 上外边距合并问题margin*/
/*父元素加边框 border 父元素加填充 padding*/
/*auto 对于上下不起作用
实现水平居中 可以加margin-top 也可用 padding-top 填充的值+父元素高度 ＝ 子元素高度*2 */
.div4{
height: 450px;
width: 800px;
background-color: rgb(26, 189, 226);
padding-top: 1px;
padding-top:150px
}
.div5{
height: 300px;
width: 400px;
background-color: rgb(108, 214, 34);
/*margin: 100px auto;*/
margin:0px auto;
}
</style>
</head>
<body>
<!-- 块级元素默认元素是父元素的宽度 -->
<!-- 放进的内容不会超出其宽度 溢出只会在下方溢出 -->
<div class="div1"><p>
大的房间里克拉的四开发离开家离开的大的房间里克拉的四开发
离开家离开的大的房间里克拉的四开发离开家离开的大的房间里克拉的四开发离开家离开的大
的房间里克拉的四开发离开家离开的大的房间里克拉的四开发离大的房间里克拉的四开发离开家离开的
大的房间里克拉的四开发离开家离开的大的房间里克拉的四开发离开家离开的大的房间里克拉
的四开发离开家离开的开家离开的
</p></div>
<!-- 编写顺序 有上到下 由左向右 有外向内 -->
<div class="div2">
</div>
<div class="div3">
</div>
<img src="./dd.jpg" alt="" class="img1">
<img src="./dd.jpg" alt="" class="img2">
<div class="div4">
<div class="div5">
</div>
</div>
</body>
</html>
浮动与定位
float{left,right,none}
1.浮动脱离标准流，不占位置，会影响标准流，浮动的元素排列位置跟上一个元素有关．上一个元素有浮动，则此元素与上一个元素的顶部对齐，如果上一个元素没有浮动，则此元素与上一元素底部对齐
２．父盒子中若有子级浮动，其他子集也要浮动
３．浮动后，元素具有行内块元素特性
４．div子集元素如果都浮动了，且div没有设置height那末div 高为０
清除浮动
１．直接给父盒子设置行高
２．clear{left ,right,both} 清除左，右，或所有
３．overflow{atuo(超过部分显示滚动条),scroll(超出部分显示滚动条),hidden(超出部分隐藏)}
４．伪对象清除
div::after,div::before{//标签的最后 最前 添加内容
content:"";//没有content,after before是没有意义的
height:0;//高 0
display: block;//设置成块元素
visibility:hidden;//隐藏元素 但占据该有的位置（display:none 隐藏元素 设置为其他属性还原）
clear:both;//清除浮动
}
position{state,relative,absoulte,fixed}
１．static 默认盒子 静态
２．relative 相对于本身的位置的移动 相对定位
３．absolute 绝对定位（脱离标准流） 相对于最近的一个祖先元素进行偏移 写absolute定位时
其后要加偏移的属性｛top right bottom left ｝
４．fixed 固定 他是相对于当前可是窗口的 不会随滚动条移动 （脱离标准流）
对页面的制作
图标的多种方式显示 有的时候你需要现世一个图形或图片，你可以选择用标签，边框去改造替代，有时你可以以图片的直接插图，图片设置为背景用margin padding去移动或填充，页面的制作有很多思路．
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
