Day14 HTML补充
一、认识前端
前端开发的核心语言：
- html - 超文本标记语言 结构
- css - 层叠样式表 样式
- javascript - 脚本语言 行为
<html></html> 双标记 双标签
<meta/> 标记 单标签
css的语法就是
属性名:属性值;
第一个HTML文件
<html>
<head>
<meta charset="utf-8">
<title>我是头</title>
</head>
<body>
<div style="width:100px; height:100px; background:red; border:10px solid yellow; text-align:center; line-height:100px; transition:1s;" onclick="this.style.width='400px'">我是身体</div>
</body>
</html>
a标签
<html>
<a>git</a>
</html>
二、HTML模板
第一个网页
<!DOCTYPE html>
<!-- 文档头声明 -->
<html>
<head>
<meta charset="utf-8">
<title>我是抬头</title>
</head>
<body>
我是内容
</body>
</html>
HTML5之前的文档头声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>
HTML模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>
HTML回顾
<!DOCTYPE html>
<!-- 文档头声明 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <div style="width:100px; height:100px; background:red;">随便</div> <!-- 你看不见我，只有程序员能看到我 注释的快捷键 ctrl + / div 双标签
语义：无意义 CSS的语法
属性名:属性值; -->
</body>
</html>
CSS引入方式
<!DOCTYPE html>
<!-- 文档头声明 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/1.css">
<style> </style>
</head>
<body> <!-- <div style="width:200px;height:200px;background:green;"></div> --> <div id="box1" class="cla1" style="width:500px; background:pink;"></div>
<div></div>
<div class="cla1"></div>
<div></div> <p class="cla1">我是p1</p>
<p>我是p2</p> <h2 class="cla1">我是H1</h2>
<h2>我是H2</h2>
<!--
1.行间样式的引入
写法：在标签中，写一个style的属性 比如：style="....." 在引号当中，写相应的css样式
缺点：不利于维护，不利于代码重用
优点：优先级最高 2.内部样式表的引入
写法：在head标签里，写一个style的标签，在标签中，通过选择器来控制样式
选择器？
标签名选择器
写法 ：
div {
... css的样式
} ID选择器
写法：
首先在相应标签中设置一个ID的属性
如： id="id名"
在样式表中，通过
# + id名 {
... css的样式
}
温馨小提示：
id名要以英文字母开头
id名不能重复，是唯一的 class选择器
写法：
首先在相应标签中设置一个class的属性
如：class="class名"
在样式表中，通过
. + class名 {
... css的样式
}
温馨小提示
class名以英文字母开头 优先级 标签名选择器 < class选择器 < id选择器 < 行间样式 优点：加载速度快，不需要去请求服务器
缺点：不利于代码重用 3.外部样式表的引入 写法：在head标签里，写一个link标签，用来关联一个css的文件，在css文件中，通过选择器来控制样式 温馨提示.
<link rel="stylesheet" href="css文件的路径"> 优点：利于代码重用
缺点：需要加载服务器
-->
</body>
</html>
1.css
div {
width:100px;height:100px;background:green;
}
#box1 {
width:300px;
height:350px;
background: blue;
}
.cla1 {
width:200px;
height:200px;
background: yellow;
}
前端项目目录结构
project_name |------img |------css |------js *.html
CSS基础样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:700px;
height: 500px;
/*background-color: #db7791;*/
/*background-color: rgb(219,119,145);*/
/*background-color: blue;
background-image: url("img/1.jpg");
background-repeat: no-repeat;
background-position: right bottom;*/ background: red url("img/1.jpg") no-repeat;
/*background-attachment: fixed;*/ background-size: 700px 500px; }
</style>
</head>
<body>
<div></div>
<!--
width 宽
height 高
background 背景
背景色
background-color:颜色值 英文单词 十六进制 rgb
背景图
background-image:url("图片路径")
背景图平铺
background-repeat:no-repeat repeat-x repeat-y
背景图定位
background-position:第一个值(X轴的位置) 第二个值(Y轴的位置);
第一个值: left center right 30px;
第二个值: top center bottom 100px; 复合写法
background: color image position repeat; 背景图滚动
background-attachment:fixed; 背景图尺寸
background-size:第一个值(X轴的比例) 第二个值(Y轴的比例); 温馨小提示：css3的样式 不兼容 -->
</body>
</html>
CSS基础样式border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:0px;
height:0px;
/*background: url("img/1.jpg") no-repeat;*/
/*border:10px solid yellow;*/ /*border-top-width:100px;
border-right-width:120px;
border-bottom-width:140px;
border-left-width:150px;
border-style:solid;
border-color: green;*/ /*border: 10px dotted #A100F9;*/
/*border-top:100px solid red;
border-right:100px solid yellow;
border-bottom: 100px solid green;
border-left:100px solid transparent; border-radius: 10px;*/
border-top:100px solid #ccc; border-right:100px solid transparent; border-bottom:100px solid #ccc; border-left:100px solid #ccc; border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
<!--
border 边框
复合写法
border: border-width border-style border-color; border-width 边框宽度
border-style 边框样式 solid 实线 dashed 虚线 dotted 点线 （点线IE6不认）
border-color 边框颜色 英文单词 十六进制 rgb border-radius 圆角 透明 transparent -->
</body>
</html>
CSS基础样式padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:100px;
border:1px solid red;
/*padding-top:20px;
padding-right:40px;
padding-bottom: 60px;
padding-left:80px;*/
padding:10px 20px 40px 80px;
}
</style>
</head>
<body>
<div>培训</div>
<!--
padding 内边距 内填充 padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距 padding的复合写法 padding:10px; 一个值代表 上右下左都是10px
padding:10px 20px; 两个值 第一个值代表上下 第二个值代表左右
padding:10px 20px 40px; 三个值 第一个值代表上 第二个值代表左右 第三个值代表下
padding:10px 20px 40px 80px; 4个值 第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左
-->
</body>
</html>
padding效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:466px;
height:383px;
border:10px solid #C6D8F0;
border-radius: 10px;
padding:10px 40px 80px 160px;
}
</style>
</head>
<body>
<div>
<img src="img/2.jpg" alt="">
</div>
</body>
</html>
空间大小的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:100px;
height:100px;
background: red;
border:10px solid blue;
padding:33px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS基础样式margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:100px;
height:100px;
background: red;
margin:50px 100px 150px 200px;
}
</style>
</head>
<body>
<div></div>
<!--
margin 外边距 margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距 margin的复合写法
margin:10px; 一个值代表 上右下左都是10px
margin:10px 20px; 两个值 第一个值代表上下 第二个值代表左右
margin:10px 20px 40px; 三个值 第一个值代表上 第二个值代表左右 第三个值代表下
margin:10px 20px 40px 80px; 4个值 第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左 -->
</body>
</html>
margin的小性子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 {
width:300px; background: red; /*border:1px solid #000;*/
/*overflow:hidden;*/
/*padding-top:100px;*/
}
#box2 {
width:300px;
height:200px;
background: yellow;
/*margin-top: 100px;*/
margin-bottom: 30px;
}
#box3 {
width:300px;
height:200px;
background: blue;
margin-top:30px;
}
</style>
</head>
<body> <div id="box1">
<div id="box2"></div>
<div id="box3"></div>
</div>
<!-- 标签的嵌套 确定父子级关系 1. 第一个子级的margin-top会在特定的情况下穿透父级
规避方法：
1.给父级加边框
2.给父级加overflow:hidden;
3.不要用margin-top，父级的padding-top代替
2. 兄弟关系的margin-top和margin-bottom 会叠压 -->
</body>
</html>
盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div {
width:100px;
height:100px;
border:10px solid red;
padding:40px;
margin:30px;
}*/ div {
width: 154px;
height:35px;
border:4px solid red;
padding:28px;
margin:12px;
}
</style>
</head>
<body>
<div></div>
<!--
盒模型 空间大小 ：
盒子的总宽度 ： border-left + padding-left + width + padding-right + border-right
盒子的总高度 ： border-top + padding-top + height + padding-bottom + border-bottom
位置
margin
-->
</body>
</html>
三、CSS文本样式的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size:160px;
font-family: "sans-Serif";
color:rgb(41,232,32);
}
</style>
</head>
<body>
<div>培训</div>
</body>
</html>
line-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border:1px solid red;
height:100px;
line-height: 100px;
}
</style>
</head>
<body>
<div>我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面我今天晚上吃炸酱面</div>
</body>
</html>
text-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:200px;
height:200px;
line-height: 200px;
border:1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div>培训</div>
</body>
</html>
text-indent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
border: 1px solid red;
font-size:20px;
line-height: 25px;
text-indent: 40px;
}
</style>
</head>
<body>
<div>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</div>
</body>
</html>
font-weight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size: 50px;
font-weight: bold;
}
</style>
</head>
<body>
<div>培训</div>
</body>
</html>
font-style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size:50px;
/*font-style:oblique;*/
}
em {
font-size:50px;
font-style: normal;
}
</style>
</head>
<body>
<div>培训</div>
<em>培训</em>
</body>
</html>
text-decoration
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size:50px;
text-decoration: none;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div>100元RMB</div>
<a href="###">蓝鸥科技</a>
</body>
</html>
letter-spacing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
font-size:50px;
letter-spacing: 10px;
word-spacing: 100px;
}
</style>
</head>
<body>
<div>I like html</div>
</body>
</html>
复合样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:500px;
height:500px;
background: red url("img/1.jpg") 100px 100px no-repeat;
border: 10px solid yellow;
padding:10px 20px 30px 40px ;
margin:20px 40px 80px 160px ;
font: italic bold 50px/500px "stkaiti";
}
</style>
</head>
<body>
<div>培训</div>
</body>
</html>
font-family
font-family可以取的值 宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312 宋体：SimSuncss中中文字体（font-family）的英文名称
Mac OS的一些：
华文细黑：STHeiti Light [STXihei]
华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light
Windows的一些：
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑体：SimHei
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微软雅黑体：Microsoft YaHei
装Office会生出来的一些：
隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei
四、常见标签及标签类型的转换
reset.css(去掉默认样式)
/*margin的样式初始化*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
margin:0;
} /*padding的样式初始化*/
ul,ol {
padding:0;
} /*列表的样式初始化*/
ul,ol,li {
list-style:none;
} /*font-style的样式初始化*/
em {
font-style: normal;
} /*下划线的样式初始化*/
a {
text-decoration: none;
}
块属性标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css"> </head>
<body>
<!-- 语义：你说的话到底是什么意思
权重：优先先考虑谁 title标签
写法:<title></title>
双标签
语义：网页标题
权重最大 div标签
写法：<div></div>
双标签
语义：无意义
默认样式：无 h标签
h1~h6
写法：
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
双标签
语义：标题
默认样式：font-size font-weight margin 权重 ：h1 最大 h2 次之 h3更次之 。。。。。。。
h1页面中最好不要超过一个
h2页面中最好不要超过12个
h3之后的h标签就随便了 样式初始化文件 reset.css 群组选择器 , 例 :
h1,h2,h3,h4,h5,h6{
margin:0;
} p标签
写法：<p></p>
双标签
语义：段落
默认样式：margin p标签在嵌套时不要包含块元素的标签 ul标签
写法：<ul></ul>
双标签
语义：无序列表
默认样式：margin padding-left list-style-type
li标签
写法：<li></li>
双标签
语义：列表项
默认样式：list-style-type ol标签
写法：<ol></ol>
双标签
语义：有序列表
默认样式：margin padding-left list-style-type ul,ol和li 是组合标签 ul,ol的第一层子级一定是li li的父级一定是ul或ol <ul>
<li>
<h2></h2>
</li>
</ul> <div>
<ul>
<li></li>
</ul>
</div> <ol>
<li>
<ul>
<li></li>
</ul>
</li>
</ol>
<div>
<ol>
<li></li>
</ol>
</div> dl标签
自定义列表 字典标签 dl dt dd 写法：<dl></dl>
双标签
语义：自定义列表
默认样式：margin dt
写法：<dt></dt>
双标签
语义：列表标题
默认样式：无 dd
写法：<dd></dd>
双标签
语义：列表说明
默认样式：margin-left 块标签
特性： -->
<div>我是DIV</div>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
<h5>我是h5</h5>
<h6>我是h6</h6>
<p>我是p</p>
<!-- -->
<p>
我是P1
<!-- <p>我是P2</p> -->
<!-- <div>我是DIV</div> -->
</p> <ul>
<li>我是li 1</li>
<li>我是li 2</li>
<li>我是li 3</li>
<li>我是li 4</li>
</ul> <ol>
<li>我是li 1</li>
<li>我是li 2</li>
<li>我是li 3</li>
<li>我是li 4</li>
</ol> <dl>
<dt>美女</dt>
<dd>古代用来形容女子很漂亮</dd>
<dd>打招呼</dd>
</dl>
</body>
</html>
块标签的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<style>
div {
/*border:1px solid red;*/
}
/*#box1 {
width:500px;
height:400px;
background: red;
}
#box2 {
height:100px;
background: yellow;
}*/
#box1 {
width:400px;
height:200px;
background: red;
}
#box2 {
width:200px;
height:300px;
background: yellow;
}
</style>
</head>
<body>
<!--
块属性的标签 特性：
1.默认是父级100%的宽
2.支持所有CSS样式
3.独占一行
-->
<!-- <div>1</div>
<div>2</div>
<div>3</div>
<div>4</div> -->
<!-- <div id="box1">
<div id="box2"></div>
</div> -->
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
内联属性的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<style>
img {
/*width:300px;
height:300px;*//*
padding:10px;
margin:20px;*/
border:1px solid red;
}
</style>
</head>
<body>
<!--
内联属性的标签
内联标签
特性：
1.同属性的标签排在同一排
2.内容撑开宽度
3.不支持宽高，不支持上下的padding和margin
4.代码换行被解析 间距大小取决于父级的font-size的大小 span标签
写法：<span></span>
双标签
语义：无意义
默认样式：无 strong标签
写法：<strong></strong>
双标签
语义：强调
默认样式：font-weight
权重比较高 em标签
写法：<em></em>
双标签
语义：强调
默认样式：font-style
权重比较高 a标签
写法：<a href="需要链接的网页地址" target="打开网页的方式"></a>
双标签
语义：超链接
默认样式：color text-decoration cursor
温馨提示：
href属性中
1.如果要链接一个网站地址的话，一定要加 http://
2. # 代表链接到当前页
target
_self 默认 在当前窗口打开
_blank 在新窗口打开 内联块标签
内联块属性
特性：
1.同属性的标签排在同一排
2.内容撑开宽度
3.支持所有的css的样式
4.代码换行被解析，间距大小取决于父级的font-size大小
img标签
写法：<img src="图片的路径地址" alt="图片说明">
单标签
语义：图片
默认样式：低版本浏览器中有默认的边框
温馨小提示：
1.路径地址一定要正确
2.alt属性一定要写 -->
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<div>我是div4</div>
<span>我是span1</span><span>我是span2 我比较宽</span><span>我是span3</span>
<span>我是span4</span>
<!-- <div>我是下面的DIV</div> -->
<strong>我是strong1</strong>
<strong>我是strong2</strong>
<strong>我是strong3</strong>
<strong>我是strong4</strong>
<em>我是em1</em>
<em>我是em2</em>
<em>我是em3</em>
<em>我是em4</em>
<a href="http://www.baidu.com" target="_blank">链接到百度</a>
<a href="#">我是A2</a>
<a href="#">我是A3</a>
<a href="#">我是A4</a> <img src="imgs/1.jpg" alt="机器猫">
<img src="imgs/1.jpg" alt="机器猫">
<img src="imgs/1.jpg" alt="机器猫">
</html>
标签类型的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div {
border:1px solid red;
display: inline;
width:100px;
height:100px;
}*/
span {
border:1px solid red;
height:100px;
display: block;
}
h2 {
border:1px solid red;
display: inline-block;
width:100px;
height:100px;
}
p {
border:1px solid red;
display: none;
}
</style>
</head>
<body>
<!--
标签类型的转换
显示为无：display:none; 块属性 display:block;
内联属性
内联 display:inline;
内联块 display:inline-block;
--> <div>1</div>
<div>2</div>
<span>span1</span>
<span>span2</span>
<h2>我是h2</h2>
<h2>我是h2</h2>
<p>我是p标签</p>
<div>我是DIV</div>
</body>
</html>
五、样式布局
reset.css
/*margin的样式初始化*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
margin:;
} /*padding的样式初始化*/
ul,ol {
padding:;
} /*列表的样式初始化*/
ul,ol,li {
list-style:none;
} /*font-style的样式初始化*/
em {
font-style: normal;
} /*下划线的样式初始化*/
a {
text-decoration: none;
}
/*BFC的方法*/
.clear:after{
content: "";display: block;clear: both;
}
clear {
zoom:;
}
浮动是什么
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*body {
font-size:0px;
}*/
div {
width:100px;
height:100px;
text-align: center;
line-height: 100px;
border:1px solid red;
/*display: inline-block;*/
font-size:16px;
float:right;
}
</style>
</head>
<body>
<!--
display:inline-block; 浮动
float
--> <div>我是DIV1</div>
<div>我是DIV2</div>
<div>我是DIV3</div>
<div>我是DIV4</div>
</body>
</html>
浮动的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div {
border:1px solid red;
float:left;
}*/
/*span {
width:100px;
height:100px;
border:1px solid red;
float: left;
padding:10px;
}*/
/*div {
width: 100px;
height: 100px;
background: red;
float: left;
}
span,strong {
display: inline-block;
width:40px;
height:40px;
border:1px solid yellow;
}
p {
height:50px;
width:400px;
background: pink;
}*/
div{
background: red;
overflow: hidden;
}
h2 {
margin:0;
width:300px;
height:300px;
border:1px solid black;
background: yellow;
float: left;
}
p{
height:300px;
background: blue;
}
</style>
</head>
<body>
<!--
浮动的特性
1.浮动的元素排在同一排
2.浮动的元素内容撑开宽度
3.浮动的元素支持所有的css样式
4.浮动的元素脱离文档流
5.浮动的元素提升层级半级
-->
<!-- <div>div1dfadfa</div>
<div>div2</div>
<div>div3</div>
<div>div4</div> -->
<!-- <span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span> -->
<!-- <div>div</div>
<span>span</span>
<strong>strong</strong>
<p></p> --> <div>
<h2>我是H2</h2>
</div>
<p></p>
</body>
</html>
BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div {
width:300px;
height:300px;
border:10px solid red;
font-size:24px;
overflow: hidden;
margin:0 auto;
}*/
/*div:hover{
color:blue;
text-decoration: underline;
}*/
/*div:after{
content: "我是伪类";background: red;
}*/
#box1 {
width:540px;
border:10px solid red;
margin:0 auto; /*height:108px;*/
}
span {
width:100px;
height:100px;
border:4px solid blue;
text-align: center;
line-height: 100px;
float:left;
}
.clear:after{
content: "";display: block;clear: both;
}
</style>
</head>
<body>
<!--
1.overflow 溢出
会重新计算元素的空间
hidden 溢出隐藏
auto 溢出出现滚动条
scroll 出现滚动条的位置
2.元素的居中
margin:0 auto;
3.元素的伪类
伪类：就是CSS一些元素身上的特殊属性
:hover 鼠标停留
:after 在元素内容之后插入一些内容 浮动：其实就是使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来。 BFC 就是清浮动 就是用来处理浮动元素脱离文档流的问题 1.父级也浮动
弊端：左右的margin:0 auto; 会失效；
2.父级加display:inline-block
弊端：左右的margin:0 auto; 会失效；
(如果需要让元素居中可以给父级加text-align:center)
3.给父级加高
弊端：扩展性不好
4.br标签
写法：<br/>
作用：换行
5.clear
clear 元素的某一方向不允许出现其他的浮动元素
left
right
both 推荐使用
one
温馨小提示
不符合W3C规范 违反结构 样式 行为 三者分离原则
6.伪类清浮动
:after{
content:"";display:block;clear:both;
}
温馨提示：目前主流方法。建议使用 <div id="box1" class="clear">
<span class="class1">1</span>
<span class="class2">2</span>
<span class="class3">3</span>
<span class="class4">4</span>
<span class="class5">5</span> </div>
<!-- <div>
我是DIV
<br/>
我是DIV
</div> -->
</body>
</html>
提升层级半级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 {
width:100px;
height:100px;
background: red;
float:left;
margin-right:3px;
}
#box2 {
width:200px;
height:210px;
background: yellow;
}
</style>
</head>
<body>
<div id="box1">div1</div>
<div id="box2">前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习前端学习</div>
</body>
</html>
定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:300px;
height:300px;
border:10px solid black;
position: relative;
}
span {
width:100px;
height:100px;
background: red;
text-align: center;
line-height: 100px;
font-size:40px;
position: absolute;
}
.span1{
left:100px;
}
.span2{
top:100px;
}
.span3{
right:0px;
top:100px;
}
.span4{
bottom: 0px;
left: 100px;
}
</style>
</head>
<body>
<div>
<span class="span1">1</span>
<span class="span2">2</span>
<span class="span3">3</span>
<span class="span4">4</span>
</div>
</body>
</html>
定位的属性及特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 {
width:400px;
height:400px;
border:10px solid red;
margin:0 auto;
position: relative;
/*left:300px;*/
}
#box2{
width:100px;
height:100px;
background: yellow;
position: absolute;
left:10px;
top:30px;
}
</style>
</head>
<body>
<!-- 定位： 把一个元素 按照一定的方式 定到页面的某一个位置 position 相对定位 relative
针对自己本身的位置进行定位 绝对定位 absolute
针对有定位的父级的原点进行定位，如果父级没有定位，会找父级的父级身上有没有定位，如果有，针对父级的父级的原点进行定位，以此类推，如果都没有定位，针对document进行定位
温馨小提示：
绝对定位即使没有初始值，也一定要设置值
left:0px;
top:0px; 固定定位 fixed
针对页面窗口进行定位
温馨提示：
IE6 不支持固定定位 偏移量
left
top
right
bottom
温馨提示
left top 比 right bottom 的优先级要高
-->
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
三种定位的特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1 { background: red;
position: absolute;
/*float:left;*/
}
#box2 {
width:200px;
height:200px;
background: yellow;
}
span {
width:100px;
height:100px;
background: red;
position: fixed;
left:0px;
}
.span1 {
z-index: 1;
}
.span2{
z-index: 2;
}
.span4{
z-index: 10;
}
</style>
</head>
<body>
<!--
定位的三种特性 相对定位 relative
1.不影响元素本身的特性
2.不使元素脱离文档流
3.提升层级
4.无法触发BFC
5.针对自己本身进行定位 绝对定位 absolute
1.会使元素完全脱离文档流
2.内容撑开宽度和高度
3.使元素支持所有的CSS样式
4.提升层级
z-index:数值; 定位层级设置
数值越大，层级越高
5.绝对定位要和相对定位配合使用
6.如果有定位父级，针对定位父级发生偏移，没有定位父级，针对document进行偏移
7.如果绝对定位的子级有浮动，可以省略清浮动的操作 固定定位 fixed
1.不兼容IE6
2.针对窗口进行定位
3.如果固定定位的子级有浮动，可以省略清浮动的操作
-->
<!-- <div id="box1">div1</div>
<div id="box2">div2</div> -->
<!-- <span class="span1">span1</span> --> </body>
</html>
定位和BFC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:350px;
border:10px solid #000;
position: relative;
}
span {
width:100px;
height:100px;
background: red;
text-align: center;
line-height: 100px;
font-size:40px;
float:left;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
定位的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width:400px;
height:400px;
border:4px solid #000;
background: yellow;
position: relative;
overflow: hidden;
}
span {
width:400px;
height:100px;
background: red;
position: absolute;
top:400px;
transition:0.01s;
}
div:hover span{
top:300px;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
</body>
</html>
派生选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*span {
border:1px solid red;
}*/
#box1 span {
border:1px solid red;
}
#box2 span {
display: inline-block;
width:100px;
height:100px;
background: yellow;
}
</style>
</head>
<body>
<!--
派生选择器
是由 id选择器 class选择器 标签名选择器组合而成 id选择器 10000
class选择器 100
标签名选择器 1
#box2 span 10000 + 1 10001 -->
<div id="box1">
<span>我是box1的span</span>
<span>我是box1的span</span>
<span>我是box1的span</span>
<span>我是box1的span</span>
</div>
<div id="box2">
<span>我是box2的span</span>
<span>我是box2的span</span>
<span>我是box2的span</span>
<span>我是box2的span</span>
</div>
</body>
</html>
派生选择器的小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<style>
#box1 {
width:550px;
margin:0 auto;
border:1px solid #E4AD7F;
}
#box1 li {
width:100px;
height:50px;
background: #A5EEA2;
float:left;
margin-right: 10px;
text-align: center;
line-height: 50px;
font-size:24px;
}
#box1 li a {
color:#E99B1E;
}
#box1 .cla1{
background: red;
}
#box1 .cla1 a {
color:#fff;
}/**/
/*
id 10000
class 100
div 1 #box1 li 10000 + 1
#box1 li a 10000 + 1 + 1 #box1 .cla1 10000 + 100
#box1 .cla1 a 10000 + 100 + 1
*/
</style>
</head>
<body>
<div id="box1">
<ul>
<li class="cla1">
<a href="#">导航1</a>
</li> <li>
<a href="#">导航2</a>
</li> <li>
<a href="#">导航3</a>
</li> <li>
<a href="#">导航4</a>
</li> <li>
<a href="#">导航5</a>
</li>
</ul>
</div>
</body>
</html>
六、兼容性
reset.css
/*margin的样式初始化*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
margin:;
} /*padding的样式初始化*/
ul,ol {
padding:;
} /*列表的样式初始化*/
ul,ol,li {
list-style:none;
} /*font-style的样式初始化*/
em {
font-style: normal;
} /*下划线的样式初始化*/
a {
text-decoration: none;
}
/*BFC的方法*/
.clear:after{
content: "";display: block;clear: both;
}
clear {
zoom:;
}
兼容性到底是个什么玩意
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
width:400px;
}
.left {
width:200px;
background: red;
height:300px;
float:left;
}
.right{
width: 200px;
float:right;
}
.div {
width:170px;
height:170px;
padding:15px;
background: blue;
}
</style>
</head>
<body>
<!--
兼容性：页面在不同的浏览器中可能会显示不同。 在IE6下，子级的宽度会撑开父级设置好的宽度 温馨小提示：盒模型的计算一定要精确，否则IE浏览器可能会显示不同
--> <div id="box">
<div class="left"></div>
<div class="right">
<div class="div"></div>
</div>
</div>
</body>
</html>
兼容性1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:400px;
}
.left {
background: red;
float:left;
}
.right{
background: yellow;
float:right;
}
h3{
margin:0;
height:40px;
float:left;
}
</style>
</head>
<body>
<!--
ie6中，元素浮动，如果宽度需要内容撑开，需要给里面的块元素都添加浮动才可以
-->
<div class="box">
<div class="left">
<h3>左侧</h3>
</div>
<div class="right">
<h3>右侧</h3>
</div>
</div>
</body>
</html>
兼容性2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.left {
width:100px;
height:100px;
background: red;
float:left;
}
.right {
width:200px;
height:100px;
background: blue;
/*margin-left: 100px;*/
float: left;
}
</style>
</head>
<body>
<!--
在IE6.7下 元素要通过浮动排在同一排，就需要给这行元素都加浮动
-->
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
兼容性3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
width:100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<!--
注意标签的嵌套规则
-->
<p>
<div></div>
</p>
</body>
</html>
兼容性4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
height:2px;
background: red;
overflow: hidden;
}
</style>
</head>
<body>
<!--
在IE6下元素的高度如果小于19px的时候，会被当成19px来处理
解决方法：overflow:hidden;
-->
<div class="box"></div>
</body>
</html>
兼容性5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:100px;
height:100px;
border:2px dotted red;
}
</style>
</head>
<body>
<!--
在IE6下不支持1px的dotted边框样式 解决方法：切背景平铺
-->
<div class="box"></div>
</body>
</html>
兼容性6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> .box {
background: red;
zoom:1;
}
.div {
width:200px;
height:200px;
background: blue;
margin:100px;
}
</style>
</head>
<body>
<!--
haslayout 在IE下大部分兼容性都是因为haslayout属性的触发问题，尽量触发haslayout属性，可以减少很多IE下的兼容下的问题。 在IE下父级有边框的时候，子元素的margin会失效 解决方法：触发父级的haslayout属性
-->
<div class="box">
<div class="div"></div>
</div>
</body>
</html>
兼容性7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin:0;
}
.box {
width:200px;
height: 200px;
background: red;
float:left;
margin:100px;
display: inline;
}
</style>
</head>
<body>
<!--
ie6下双边距的bug
在ie6下，块元素有浮动有横向的margin的值的时候，横向的margin的值会扩大两倍
-->
<div class="box"></div>
</body>
</html>
兼容性8
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
border:10px solid red;
float:left;
}
.box div {
width: 100px;
height: 100px;
background: red;
margin-right: 30px;
border:5px solid #000;
float:left;
display: inline;
}
</style>
</head>
<body>
<!--
margin-left 一行中左侧的第一个元素有双边距
margin-right 一行中右侧的第一个元素有双边距
-->
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
兼容性9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
margin:0;
padding:0;
list-style: none;
width:300px;
}
li {
list-style: none;
height:30px;
border:1px solid #000;
/*float:left;*/
vertical-align: top;
}
a {
width:100px;
height:30px;
float:left;
background: red;
}
span {
width:100px;
height:30px;
float: right;
background: blue;
}
</style>
</head>
<body>
<!--
在IE6,7下，li本身没有浮动，li里面的内容有浮动，li下会产生一个间隙 解决方法：
1.给li加浮动
2.给li加vertical-align:top
-->
<ul>
<li>
<a href="#"></a>
<span></span>
</li>
<li>
<a href="#"></a>
<span></span>
</li>
<li>
<a href="#"></a>
<span></span>
</li>
</ul>
</body>
</html>
兼容性10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
margin:0;
padding:0;
list-style: none;
width:300px;
}
li {
list-style: none;
height:12px;
border:1px solid #000;
overflow: hidden;
float:left;
/*vertical-align: top;*/
}
a {
width:100px;
height:12px;
float:left;
background: red;
}
span {
width:100px;
height:12px;
float: right;
background: blue;
}
</style>
</head>
<body>
<!--
在IE6,7下，li本身没有浮动，li里面的内容有浮动，li下会产生一个间隙 解决方法：
1.给li加浮动
2.给li加vertical-align:top 在IE6下最小高度的bug 和 li的间隙问题共存的时候，给li加浮动 ，vertical-align不好使
-->
<ul>
<li>
<a href="#"></a>
<span></span>
</li>
<li>
<a href="#"></a>
<span></span>
</li>
<li>
<a href="#"></a>
<span></span>
</li>
</ul>
</body>
</html>
兼容性11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
border:10px solid red;
/*float:left;*/
width:600px;
overflow: hidden;
}
.box div {
width:100px;
height:100px;
background: blue;
border:5px solid #000;
margin:20px;
float: left;
display: inline;
}
</style>
</head>
<body>
<!--
当一行子级元素宽度之和和父级的宽度相差超过3px，或者子级元素不满行的情况的时候，最后一行的子级元素的margin-bottom会失效
-->
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
兼容性12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:400px;
}
.left {
float: left;
}
.right {
float: right;
width:400px;
}
</style>
</head>
<body>
<!--
在ie6下的文字溢出bug 子元素的宽度和父级的宽度如果相差小于3px的时候，
两个浮动元素中间有注释或者内联元素，就会出现文字溢出，内联元素越多，溢出越多 解决办法：用div把注释或者内联元素包起来
-->
<div class="box">
<div class="left"></div>
<!-- 上面的是left部分 -->
<div>
<span></span>
<span></span>
</div> <div class="right">老白是个大胖子</div>
</div>
</body>
</html>
兼容性13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:200px;
height: 200px;
border:1px solid #000;
position: relative;
}
a {
position: absolute;
width:40px;
height:40px;
background: red;
right: 20px;
top:0px;
}
ul {
width: 150px;
height: 150px;
background: yellow;
margin:0 0 0 50px;
padding:0;
float: left;
display: inline;
}
</style>
</head>
<body>
<!--
在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效
解决方法：
不让浮动元素和绝对定位元素是兄弟关系，用div或者其他标签把a标签包起来
-->
<div class="box">
<ul></ul>
<div>
<a href="#"></a>
</div>
</div>
</body>
</html>
兼容性14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border:1px solid #000;
overflow: auto;
position: relative;
}
.div {
width:150px;
height: 300px;
background: red;
position: relative;
}
</style>
</head>
<body>
<!--
在IE6.7下，子级元素有相对定位，父级overflow包不住子级元素 解决方法：给父级也加相对定位
-->
<div class="box">
<div class="div"></div>
</div>
</body>
</html>
兼容性15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> .box {
width:200px;
height:200px;
border:1px solid #000;
position: relative;
}
.box span {
width:20px;
height:20px;
background: yellow;
position: absolute;
right:-1px;
bottom:-1px;
}
</style>
</head>
<body>
<!--
在IE6下，如果绝对定位的父级宽高是奇数的时候，子级元素的right和bottom值会有1px的偏差
-->
<div class="box">
<span></span>
</div>
</body>
</html>
兼容性16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
height: 2000px;
background: red;
}
.box {
width:200px;
height: 200px;
background: yellow;
position: fixed;
top:30px;
left:100px;
opacity: 0.5;
filter:alpha(opacity=50);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
兼容性17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:200px;
height:32px;
border:1px solid #000;
}
input {
width:100px;
height:30px;
border:1px solid blue;
margin:0;
padding:0;
float:left;
}
</style>
</head>
<body>
<!--
在IE6.7下 输入型的表单标签控件上下会有1px的间隙。 处理方法：给input加浮动
-->
<div class="box">
<input type="text">
</div>
</body>
</html>
兼容性18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background: #000;
}
.box {
width:400px;
height:400px;
background: url("img/1.png");
}
</style>
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('.box');
</script>
</head>
<body>
<div class="box"></div>
</body>
</html>
兼容性19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--[if ie]>
我是IE
<![endif]--> <!--[if ie 6]>
我是IE6
<![endif]--> <!--[if ie 7]>
我是IE7
<![endif]--> <!--[if ie 8]>
我是IE8
<![endif]-->
</body>
</html>
兼容性20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width:100px;
height:100px;
background: red;
background: yellow\9;
+background: black;
_background:pink;
}
</style>
</head>
<body>
<!--
css hack:
\9 ie10之前的ie浏览器解析的代码
+或者* 表示ie7包括7之前的ie浏览器
_表示 ie6包括6之前的ie浏览器
-->
<div class="box"></div>
</body>
</html>
Day14 HTML补充的更多相关文章
- day14 Python集合的补充
python_1 = ['charon','pluto','ran','charon'] linux_1 = ['ran','xuexue','ting'] p_s = set(python_1) l ...
- 【JAVA零基础入门系列】Day14 Java对象的克隆
今天要介绍一个概念,对象的克隆.本篇有一定难度,请先做好心理准备.看不懂的话可以多看两遍,还是不懂的话,可以在下方留言,我会看情况进行修改和补充. 克隆,自然就是将对象重新复制一份,那为什么要用克隆呢 ...
- os模块补充以及序列化模块
os模块补充以及序列化模块 一.os模块的补充 1.os.path.abspath 能把存在的相对路径的绝对路径显示出来 path = os.path.abspath("连达day19. ...
- MVC Core 网站开发（Ninesky） 2.1、栏目的前台显示（补充）
在2.1.栏目的前台显示中因右键没有添加视图把微软给鄙视了一下,后来有仔细研究了一下发现应该鄙视自己,其实这个功能是有的,是自己没搞清楚乱吐糟. 其实只要在NuGet中安装两个包(Microsoft. ...
- RabbitMq应用一的补充（RabbitMQ的应用场景）
直接进入正题. 一.异步处理 场景:发送手机验证码,邮件 传统古老处理方式如下图 这个流程,全部在主线程完成,注册->入库->发送邮件->发送短信,由于都在主线程,所以要等待每一步完 ...
- Android Retrofit 2.0 使用-补充篇
推荐阅读,猛戳: 1.Android MVP 实例 2.Android Retrofit 2.0使用 3.RxJava 4.RxBus 5.Android MVP+Retrofit+RxJava实践小 ...
- Android中使用ViewFlipper实现屏幕页面切换（关于坐标轴的问题已补充更改）
屏幕切换指的是在同一个Activity内屏幕间的切换,ViewFlipper继承了Framelayout类,ViewAnimator类的作用是为FrameLayout里面的View切换提供动画效果.如 ...
- 关于《Linux.NET学习手记（8）》的补充说明
早前的一两天<Linux.NET学习手记(8)>发布了,这一篇主要是讲述OWIN框架与OwinHost之间如何根据OWIN协议进行通信构成一套完整的系统.文中我们还直接学习如何直接操作OW ...
- Hexo的coney主题的一些补充说明
title: Hexo的coney主题的一些补充说明 date: 2014-12-14 14:10:44 categories: Hexo tags: [hexo,技巧] --- Coney是一个非常 ...
随机推荐
- hud1856 并查集
Problem Description Mr Wang wants some boys to help him with a project. Because the project is rathe ...
- Android 动画之RotateAnimation应用详解
android中提供了4中动画: AlphaAnimation 透明度动画效果 ScaleAnimation 缩放动画效果 TranslateAnimation 位移动画效果 RotateAnimat ...
- Linux编程---线程
首先说一下线程的概念.事实上就是运行在进程的上下文环境中的一个运行流.普通进程仅仅有一条运行流,可是线程提供了多种运行的路径并行的局面. 同一时候,线程还分为核心级线程和用户级线程.主要差别在属于核内 ...
- PHP面向对象之旅：抽象类继承抽象类(转)
可以理解为对抽象类的扩展 抽象类继承另外一个抽象类时,不用重写其中的抽象方法.抽象类中,不能重写抽象父类的抽象方法.这样的用法,可以理解为对抽象类的扩展. 下面的例子,演示了一个抽象类继承自另外一个抽 ...
- eclipse 常见问题及解决
1. Target runtime Apache Tomcat v6.0 is not defined.错误解决方法 原文:http://blog.csdn.net/xw13106209/articl ...
- [iOS 开发] app无法访问本地相册，且不显示在设置 -隐私 - 照片中
近几天在使用iOS8的Photos Framework访问本地相册时,app即不会弹出是否允许访问提示框,也无法显示在iPhone的设置-隐私-照片的访问列表中,代码如下: PHAuthorizati ...
- springmvc xml 空模板
<?xml version="1.0" encoding="UTF-8"?><!-- Bean头部 --><beans xmlns ...
- SPFA 小优化*2
/* bzoj 2763 SPFA小优化 循环队列+SLF 顺面改掉自己之前手打qeueu的坏毛病*/ #include<iostream> #include<cstring> ...
- webapp思路和rem适配极其viewport
webapp在制作时候,页面上要加入viewport标签,用来进行适配; viewport的meta标签,指的是在移动端显示的时候,viewport是多大?移动端的浏览器是屏幕宽,viewport一般 ...
- iBatis 的删除一条记录
Student.xml 设置删除参数的类型,可以是一个对象的 <delete id="delStudent" parameterClass="int" & ...