web note
web note
html note
列表
ul 无序列表
ol 有序列表 并且可以通过 type 来定义列表序号的形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>list</title>
</head>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
<ol type="1">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ol type="A">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
<ol type="I">
<li>html</li>
<li>css</li>
<li>javascript</li>
</ol>
</body>
</html>
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<style type="text/css">
table,td,td{border: 1px solid silver;}
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小杰</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小红</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>
图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片</title>
</head>
<body>
<img src="../image/computer.jpg" alt="computer" title="computer">
<img src="../image/dome.png" alt="dome" title="dome">
<img src="../image/Tqqj2.jpg" alt="tqqj" title="tqqj">
</body>
</html>
超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接</title>
</head>
<body>
<!--锚节点 跳转到本页面的任意位置-->
<a href="#runoob">菜鸟编程</a><br>
<a href="#inside">内部链接</a><br>
<a href="#text">文本</a><br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
<div id="runoob">
<a href="https://www.runoob.com" target="_blank"><img src="../image/runoob-logo.png" alt="菜鸟编程" title="菜鸟编程"></a>
<br>
<a href="https://www.runoob.com" target="_blank">菜鸟编程——学的不仅是技术，更是梦想！</a>
<!-- target 默认为从当前页面打开链接，就是_self
_blank 从新页面打开链接 --最重要的
_parent 从父窗口打开链接
_top 在顶层窗口打开链接
-->
</div>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
<!--超链接分为外部链接和内部链接-->
<div id="inside">
<a href="../html/表格.html" target="_parent">内部链接</a>
</div>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
...<br>
<div id="text">
<p>文本</p>
</div>
</body>
</html>
表单
如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。
例如：手机注册，话费充值，用户登陆等界面
数据传输有两种方式，一种是get ，明文，所有人都可以看见，不安全；
另一种是post， 暗文，看不见，安全
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form method="post" action="index.php">
昵称：<input type="text"><br>
密码：<input type="password"><br>
邮箱：<input type="email">
<select>
<option>qq.com</option>
<option selected>gmail.com</option>
<option>yahoo.com</option>
</select><br>
<!--name需要一样， value不能一样-->
性别：<input type="radio" name="gender" value="男" checked>男
<input type="radio" name="gender" value="女">女
爱好：<input type="checkbox" name="hobby" value="travel">旅游
<input type="checkbox" name="hobby" value="photo">摄影
<input type="checkbox" name="hobby" value="sport">运动
<br>
个人简介：
<br>
<textarea rows="5" cols="20">请介绍一下你自己</textarea>
<br>
上传个人照片：
<br>
<input type="file">
<br>
<hr>
<input type="submit" value="立即注册">
</form>
</body>
</html>
框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>框架</title>
</head>
<body>
<iframe src="https://www.runoob.com" width="500" height="200"></iframe>
<br>
<iframe src="http://www.tqqj.top" width="500" height="200"></iframe>
</body>
</html>
css note
css的四种引入方式
<!DOCTYPE html>
<html>
<!--一般最常用的是外部样式表-->
<!--想要在一个页面引入CSS，共有以下三种方式。
外部样式表
内部样式表
行内样式表-->
<head>
<meta charset="uft-8">
<title></title>
<!--外部样式表定义在link标签内-->
<link rel="stylesheet" type="text/css" href="../css/01css.css">
<!--内部样式表定义在<head>里的<style>标签内-->
<style type="text/css">
div{color: aqua;}
</style>
</head>
<body>
<!--行内样式表-->
<div style="color: aqua;">绿叶学习网</div>
</body>
</html>
第四种引入方式是@import，不常用，不需要了解
css选择器
<!DOCTYPE html>
<html>
<!--最实用的5种选择器
元素选择器
id选择器：id相当于一个人的身份证，全国唯一
class选择器：class相当于一个人的姓名，全国不唯一
后代选择器
群组选择器-->
<head>
<meta charset="utf-8">
<title></title>
<!--元素选择器，最前面的是元素-->
<!--id选择器，最前面的是 # 加 id -->
<!--class选择器，最前面的是 .class-->
<style>
div{color: aqua;}
#lover{color: aquamarine;}
.lei{color: blueviolet;}
#father1 div{color: black;}
#father2 span{color: blue;}
h1,.ko,#oops{color: aliceblue;}
</style>
<!--父元素和后代元素必须要用空格隔开，从而表示选中某个元素内部的后代元素-->
<!--对于群组选择器，两个选择器之间必须要用英文逗号（，）隔开，不然群组选择器就无法生效-->
</head>
<body>
<h1>Hello, css</h1>
<div id="oops">hello!</div>
<div class="ko">goooooood!</div>
<div>I love css!</div>
<div id="lover">I love css2!</div>
<p class="lei">I love css3!</p>
<span class="lei">I love css3 too!</span>
<div id="father1">
<div>Aaaaa</div>
<p>sssss</p>
</div>
<div id="father2">
<div>hello</div>
<span>afaf</span>
</div>
</body>
</html>
字体样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体样式</title>
<!--在实际开发中，一般只会用到bold这一个-->
<!--有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果-->
<style type="text/css">
#div1{font-family: 'Courier New'; font-weight: lighter; color: aqua;}
#div2{font-family: 'Franklin Gothic Medium';font-weight: bold;}
#div3{font-family: 'Gill Sans';font-size: 200px; font-style: italic;}
/*这是css的注释*/
p{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: aqua;
}
</style>
</head>
<body>
<div id="div1">hello</div>
<div id="div2">hello</div>
<div id="div3">hello</div>
<p>“有规划的人生叫蓝图，没规划的人生叫拼图。”</p>
</body>
</html>
文本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本样式</title>
<style type="text/css">
#pp p{
font-size: 14px;
text-indent: 28px;
text-align: center;
text-decoration: underline;
}
#s{
text-decoration: overline;
}
#ss{
text-decoration: line-through;
}
a{
text-decoration:none;
}
#ass{
text-transform: uppercase;
}
#p1 p{
line-height: 15px;
letter-spacing: 0px;
}
#p2 p{
line-height: 20px;
letter-spacing: 3px;
}
#p3 p{
line-height: 25px;
letter-spacing: 5px;
}
#p4 p{
word-spacing: 30px;
}
</style>
</head>
<body>
<div id="pp">
<h3>爱莲说</h3>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
<span id="s">顶划线</span>
<span id="ss">delete</span>
<a href="https://www.baidu.com" target="_blank">去掉下划线的百度</a>
<br>
<hr>
<p id="ass">hello</p>
<div id="p1">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
<div id="p2">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
<div id="p3">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
<div id="p4">
<p>Rome is was't built in a day.</p>
</div>
</body>
</html>
边框样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框样式</title>
<!--想要为一个元素定义边框样式，必须要同时设置border-width、border-style、border color这三个属性才会有效果-->
<style type="text/css">
div{
width: 100px;
height: 30px;
}
#div1{border: 1px dashed red;}
#div2{border: 1px solid red;}
img{
/*border-width: 2px;
border-style: solid;
border-color: red;*/
border:1px solid red;/*简写，等价于上面的三行代码*/
border-top: 5px dashed blue;
border-left: 5px solid wheat;
border-bottom: 0px;
}
</style>
</head>
<body>
<div id="div1"></div><br>
<div id="div2"></div><br>
<img src="../image/runoob-logo.png" alt="runoob" title="runoob">
</body>
</html>
列表样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
ol{list-style-type:lower-roman;}
ul{list-style-type: none;}
#ul1 ul{
list-style-image: url(../image/ba.png);
}
</style>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div id="ul1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>
小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{list-style-type: none;}
a{text-decoration: none; color: pink;}
div{
width: 180px;
height: auto;
background-color: aquamarine;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="https://www.baidu.com" target="_blank">Top1：百度</a></li>
<li><a href="https://www.taobao.com" target="_blank">Top2：淘宝</a></li>
<li><a href="https://www.weibo.com" target="_blank">Top3：新浪</a></li>
<li><a href="https://www.163.com" target="_blank">Top4：网易</a></li>
<li><a href="https://www.sohu.com" target="_blank">Top5：搜狐</a></li>
</ul>
</div>
</body>
</html>
表格样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格样式</title>
<style type="text/css">
table,th,td{border: 1px solid red;}
table{
caption-side: bottom;
/*border-collapse: collapse; 合并边框*/
border-spacing: 8px;
}
</style>
</head>
<body>
<table>
<caption>表头</caption>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>表身1</td>
<td>表身2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表尾1</td>
<td>表尾2</td>
</tr>
</tfoot>
</table>
</body>
</html>
图片样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片样式</title>
<style type="text/css">
div{
width: 300px;
height: 80px;
border: 1px solid silver;
}
.div1{text-align: left;}
.div2{text-align: center;}
.div3{text-align: right;}
img{width: 60px; height: 60px;}
#img1{vertical-align: top;}
#img2{vertical-align: middle;}
#img3{vertical-align: bottom;}
#img4{vertical-align: baseline;}
</style>
</head>
<body>
<div class="div1">
<img src="../image/computer.jpg" alt="">
</div>
<div class="div2">
<img src="../image/computer.jpg" alt="">
</div>
<div class="div3">
<img src="../image/computer.jpg" alt="">
</div>
<br>
电脑<img id="img1" src="../image/Tqqj2.jpg" alt=""> 电脑(top)
<hr>
电脑<img id="img2" src="../image/Tqqj2.jpg" alt=""> 电脑(middle)
<hr>
电脑<img id="img3" src="../image/Tqqj2.jpg" alt=""> 电脑(bottom)
<hr>
电脑<img id="img4" src="../image/Tqqj2.jpg" alt=""> 电脑(baseline)
</body>
</html>
小demo—float 实现文字环绕图片
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title></title>
<style type="text/css">
img{float: right;}
p{
font-family: fantasy;
font-size: 12px;
}
div{width: 500px;height: 150px;}
</style>
<body>
<div>
<img src="../image/dome.png" alt="">
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻。莲之爱，同予者何人？牡丹之爱，宜乎众矣！</p>
</div>
</body>
</html>
背景样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景样式</title>
<style type="text/css">
div{
width: 100px;
height: 60px;
}
#div1{background-color: hotpink;}
#div2{background-color: #87CEFA;}
p{
color: white;
background-color: hotpink;
}
.divv{background-image: url(../image/ba.png);
background-repeat: repeat-y;}
</style>
</head>
<body>
<div id="div1">背景颜色为：hotpink</div>
<div id="div2">背景颜色为：#87CEFA</div>
<p>文本颜色为white，背景颜色为hotpink</p>
<div class="divv"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 3000px;
height: 12000px;
border:1px solid red;
background-image: url(../image/Tqqj2.jpg);
background-repeat: no-repeat;
background-position: center right;
background-attachment: fixed;
/*fixed 图片固定不动 scroll 图片随着元素滚动*/
}
</style>
<body>
<div></div>
</body>
</html>
讲一张图片铺满整个页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100%;
height: 100%;
background-image:url(../image/Tqqj2.jpg);
background-size: 100% 100%;
position: absolute;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
超链接样式
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>超链接样式</title>
<style type="text/css">
/*定义这四个伪类，必须按照link、visited、hover、active的顺序进行，不然浏览器可能无法正常显示这四种样式。请记住，这四种样式定义顺序不能改变。*/
a{text-decoration: none;}
a:link{color: red;}
a:visited{color: purple;}
a:hover{color: yellow;}
a:active{color:blue}
div{
width: 200px;
height: 100px;
color: red;
line-height: 50px;
background-color: yellow;
text-align: center;
}
div:hover{background-color: aqua;
width: 100px;
}/* hover可以用在任何元素上
:hover伪类应用非常广泛，任何一个网站都会大量用到它，我们要好好掌握。*/
img:hover{border: 3px solid red;}
#1{cursor: default;}
#2{cursor: url(../image/ba.png),pointer;}
</style>
<body>
<a href="https://www.taobao.com" target="_blank">淘宝</a>
<div>aaaaaaaaaaaaa</div>
<div id="1"></div>
<div id="2"></div>
<br>
<img src="../image/Tqqj2.jpg" alt="">
</body>
</html>
盒子模型
每个元素都看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。记住，所有的元素都可以视为一个盒子。
- 内容区(content)
内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。
内容区是盒子模型必备的组成部分，其他的三部分都是可选的。内容区有三个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。
在这里注意一点，width和height这两个属性是针对内容区content而言的，并不包括padding部分。当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方法。 - 内边距(padding)
指的是内容区和边框之间的空间，可以看成是内容区的背景区域。
关于内边距的属性有五种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上四个方向的简写内边距属性padding。
使用这五种属性可以指定内容区与各方向边框之间的距离。 - 外边距(margin)
指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。
外边距的属性也有五种，即margin-top、margin-bottom、margin-left、margin-right以及综合了以上四个方向的简写外边距属性margin。
同时，CSS允许给外边距属性指定负数值，当外边距为负值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果，这就是传说中的“负margin技术”。 - 边框(border)
在CSS盒子模型中，边框跟我们之前学过的边框是一样的。边框属性有border-width、border-style、border-color以及综合了三类属性的简写边框属性border。
其中，border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。
border-width:1px;borde-style:solid;border-color:gray;等价于border:1px solid gray;。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
div{
display: inline-block; /*将块元素转换为inline-block元素*/
padding: 40px 80px;
margin: 200px;
border:1px solid red;
background-color: #FFDEAD;
}
</style>
</head>
<body>
<div>学习网络安全</div>
</body>
</html>
padding和margin的区别在于：padding体现的是元素的“内部结构”，而margin体现的是元素之间的相互关系。
padding: 20px --意思是上下左右四个方向都是20px
padding: 20px 40px --意思是上下方向为20px，左右方向为40px
padding: 20px 40px 60px 80px --意思是按顺时针方向（上、 右、下、左）分别赋值
margin 当存在父元素是是相对于父元素而言的
当既有父元素，也有兄弟元素时，该元素会先看看四个方向有没有兄弟元素存在。如果该方向有兄弟元素，则这个方向的margin就是相对于兄弟元素而言。如果该方向没有兄弟元素，则这个方向的margin就是相对于父元素而言。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">
#father{
display: inline-block;
border: 1px solid blue;
}
#son{
display: inline-block;
padding: 20px;
margin-top: 20px;
margin-right: 40px;
margin-bottom: 60px;
margin-left: 80px;
border: 1px solid red;
background-color: #FFDEAD;
}
.brother{
height: 50px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div id="father">
<div class="brother"></div>
<div id="son">绿叶学习网</div>
<div class="brother"></div>
</div>
</body>
</html>
浮动布局
什么叫“文档流”？简单来说，就是指元素在页面中出现的先后顺序。那什么叫“正常文档流”呢？正常文档流，又称为“普通文档流”或“普通流”，也就是W3C标准所说的“normal flow”。我们先来看一下正常文档流的简单定义：“正常文档流，将一个页面从上到下分为一行一行的，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。”也就是说，正常文档流指的就是默认情况下页面元素的布局情况。
由于div、p、hr都是块元素，因此独占一行。而span、i、img都是行内元素，因此如果两个行内元素相邻，就会位于同一行，并且从左到右排列。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正常文档流</title>
<style type="text/css">
#father{
width: 300px;
background-color: #0C6A9D;
border: 1px solid silver;
}
#father div{
text-align: center;
padding: 10px;
margin: 15px;
}
#son1{
background-color: hotpink;
float: left;
}
#son2{
background-color: #FCD568;
float: right;
}
.clear{
clear: both; /*清除因其他元素的浮动布局而给别的元素带来的影响*/
}
</style>
</head>
<body>
<div id="father">
<div id="son1">box 1</div>
<div id="son2">box 2</div>
<div class="clear"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动布局</title>
<style type="text/css">
#father{
border: 2px solid red;
}
#son1{
height: 100px;
background-color: aquamarine;
margin: 10px;
}
#son2{
height: 400px;
width: 67%;
background-color: azure;
float: left;
margin: 10px;
}
#son3{
height: 400px;
width: 30%;
background-color: bisque;
float: right;
margin: 10px;
}
#son4{
height: 100px;
background-color: blueviolet;
margin: 10px;
}
.clear{clear: both;}
</style>
</head>
<body>
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
<div id="son3"></div>
<div id="son4"></div>
<div class="clear"></div>
</div>
</body>
</html>
定位布局
CSS定位使你可以将一个元素精确地放在页面上你指定的地方。结合使用定位和浮动，能够创建多种高级而精确的布局。其中，布局定位共有四种方式。
- 固定定位（fixed）
- 相对定位（relative）
- 绝对定位（absolute）
- 静态定位（static）
这四种方式都是通过position属性来实现的
固定定位（fixed）
position:fixed;是结合top、bottom、left和right这四个属性一起使用的，其中position:fixed;使得元素成为固定定位元素，接着使用top、bottom、left和right这四个属性来设置元素相对浏览器的位置。top、bottom、left和right这四个属性不一定全部都用到，一般只会用到其中两个。注意，这四个值的参考对象是浏览器的四条边。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位布局</title>
<style type="text/css">
#first{
width: 120px;
height: 1800px;
border: 1px solid gray;
line-height: 600px;
background-color: #B7F1FF;
}
#second{
position: fixed;
top: 30px;
left: 160px;
width: 60px;
height: 60px;
border: 1px solid silver;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="first">无定位的div元素</div>
<div id="second">有定位的div元素</div>
</body>
</html>
相对定位（relative）
在CSS中，我们可以使用position:relative;来实现相对定位。所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>相对定位</title>
<style type="text/css">
#father{
margin-top: 30px;
margin-left: 30px;
border: 1px solid silver;
background-color: lightskyblue;
}
#father div{
width: 100px;
height: 60px;
margin: 10px;
background-color: hotpink;
color: white;
border: 1px solid white;
}
#son2{
position: relative;
top: 20px;
left: 40px;
}
</style>
<body>
<div id="father">
<div id="son1">第一个无相对定位的元素</div>
<div id="son2">相对定位的div元素</div>
<div id="son3">第二个无相对定位的元素</div>
</div>
</body>
</html>
绝对定位（absolute）
position:absolute;是结合top、bottom、left和right这四个属性一起使用的，其中position:absolute;使得元素成为绝对定位元素，接着使用top、bottom、left和right这四个属性来设置元素相对浏览器的位置。top、bottom、left和right这四个属性不一定全部都用到，一般只会用到其中两个。默认情况下，这四个值的参考对象是浏览器的四条边。
对于前面三种定位方式，我们现在可以总结了：默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>相对定位</title>
<style type="text/css">
#father{
padding: 15px;
border: 1px solid silver;
background-color: #0C6A9D;
}
#father div{
padding: 10px;
}
#son1{
background-color: #FCD568;
}
#son2{
background-color: hotpink;
position: absolute;
top:20px;
right: 40px;
}
#son3{
background-color: lightskyblue;
}
</style>
<body>
<div id="father">
<div id="son1">第一个无相对定位的元素</div>
<div id="son2">绝对定位的div元素</div>
<div id="son3">第二个无相对定位的元素</div>
</div>
</body>
</html>
静态定位（static）
在默认情况下，也就是元素没有指定position属性时，这个元素就是静态定位的。也就是说元素position属性的默认值是static。一般情况下我们使用不到position:static，不过有时候使用JavaScript来控制元素定位时，如果想要使得元素从其他定位方式变成静态定位，就需要使用position:static来实现。
End
至此，html和css 的入门学习已经完成。
下面我将实战两个项目：
- 学习写一个百度首页
- 写一个自己的博客
完成这两件事情之后，我会进一步学习javascript的入门学习
当然，打ctf 需要的就只是入门知识就可以了，但是我却在学习的过程中感受到了写前端网页的乐趣。
看到别人那特别好看酷炫的网页，心生羡慕啊；
所以可能我会在学习完javascript入门知识，PHP以及python后进一步学习他们的进阶知识吧：）
我回来了：）
花费了三个小时，终于把百度页面做好了，当然只是一个小页面，学到了很多知识，遇到了很多不懂的地方
下面直接上代码吧！
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg">
<style type="text/css">
*{
margin: 0;
}
#topcol{
display: inline-block;
width: 100%;
height: 60px;
}
a{
text-decoration: none;
color: black;
font: 13px Arial,sans-serif;
margin:19px 24px 0px 0px;
text-align: center;
}
span{
font: 13px Arial,sans-serif;
}
a:hover{
color: blue;
}
#left{
margin:19px 24px 0px 0px;
padding:0px 0px 0px 24px;
float: left;
}
#right{
margin:19px 24px 0px 0px;
float: right;
}
#img{
position: relative;
text-align: center;
}
#pic{
margin: 0px 100px;
}
#sousuo{
text-align: center;
}
#border{
display: inline-block;
width: 540px;
height: 39px;
}
input{
width: 540px;
height: 36px;
border: 1px solid #3385ff;
}
button{
position: relative;
border: none;
outline: none;
box-sizing: content-box;
color: #FFFFFF;
background: #3385ff;
width: 100px;
height: 35px;
border-bottom: 3px solid #3385ff;
font-weight: 500;
font-size: medium;
}
button:hover{
background: #1069f0;
}
.clear{clear: both;}
</style>
</html>
<body>
<div id="topcol">
<div id="left">
<a href="http://news.baidu.com" target="_blank">新闻</a>
<a href="https://www.hao123.com?src=from_pc_logon" target="_blank">hao123</a>
<a href="http://map.baidu.com" target="_blank">地图</a>
<a href="http://tieba.baidu.com/" target="_blank">贴吧</a>
<a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a>
<a href="http://image.baidu.com/" target="_blank"> 图片</a>
<a href="https://pan.baidu.com?from=1026962h" target="_blank">网盘</a>
<a href="http://www.baidu.com/more/">更多</a>
</div>
<div id="right">
<a href="https://weather.com/zh-CN/weather/today/l/CHXX0008:1:CH" target="_blank">天气</a>
<span>设置</span>
</div>
<div class="clear"></div>
</div>
<div id="img">
<img class="pic" width="270" height="129" src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</div>
<br>
<div id="sousuo">
<from class="from">
<div id="border">
<input type="text">
</div>
<button onclick="alert('你百度到了空气！：） -----来自tqqj')">百度一下</button>
</from>
</div>
</body>web note的更多相关文章
- 第05章-构建Spring Web应用程序
1. Spring MVC起步 1.1 跟踪Spring MVC的请求 前端控制器DispatcherServlet 请求旅程的第一站是Spring的DispatcherServlet.与大多数基于J ...
- quartz.net 时间表达式----- Cron表达式详解
序言 Cron表达式:就是用简单的xxoo符号按照一定的规则,就能把各种时间维度表达的淋漓尽致,无所不在其中,然后在用来做任务调度(定时服务)的quart.net中所认知执行,可想而知这是多么的天衣无 ...
- ASP.NET MVC中简单使用Autofac
项目中引入Autofac的目的是为了实现控制反转,即IoC,Inversion of Control.控制反转可以有效的降低类之间的相互依赖关系,增加架构的弹性,降低软件复杂度. 示例代码: IPro ...
- (转)HttpHandler与HttpModule的理解与应用
神秘的HttpHandler与HttpModule 大学时候我是从拖控件开始学习 asp.net的,对.net的很多类库对象都不是很了解.所以看到大家写一些个性的asp.net名词,就感觉asp.ne ...
- Linking Containers Together
Linking Containers Together In the Using Docker section we touched on connecting to a service runnin ...
- 第五节: Quartz.Net五大构件之Trigger的四大触发类
一. WithSimpleSchedule(ISimpleTrigger) 1. 用途:时.分.秒上的轮询(和timer类似),实际开发中,该场景占绝大多数. 2. 轮询的种类:永远轮询和限定次数轮询 ...
- URL 重写
转载自:http://www.cnblogs.com/knowledgesea/archive/2012/10/08/2715350.html 一. 为了页面更有利于seo优化,url重写程序需要做出 ...
- python 注释xml的元素
use xml.dom.minidom 注释xml元素和去除xml注释. code is: #!/usr/bin/env python from xml.dom import minidom impo ...
- 第九节: 利用RemoteScheduler实现Sheduler的远程控制 第八节: Quartz.Net五大构件之SimpleThreadPool及其四种配置方案 第六节: 六类Calander处理六种不同的时间场景 第五节: Quartz.Net五大构件之Trigger的四大触发类 第三节: Quartz.Net五大构件之Scheduler(创建、封装、基本方法等)和Job(创建、关联
第九节: 利用RemoteScheduler实现Sheduler的远程控制 一. RemoteScheduler远程控制 1. 背景: 在A服务器上部署了一个Scheduler,我们想在B服务器上 ...
随机推荐
- 【C++】近期C++特性进阶学习总结（一）
前言 C++的特性多的数不胜数,语言标准也很多,所以不定期对近期所学的C++知识进行总结,是对自身知识体系检查的良好机会,顺便锻炼一下写博客的文笔 三/五/零之法则 三之法则:如果某个类需要用户定义的 ...
- Python语言编程基础
Python 技能目标 理解编程基本原理和思想 掌握python语言的基础语法 能够使用python进行基本的开发工作 熟练使用项目开发IDE:eclipse,PyDev 能够使用Python开发简单 ...
- 04.python语法入门--基本数据类型
# python是一门解释型的.强类型的.动态语言# 一:数字类型# 1.1 整型int:记录人的年龄.等级.号码.个数# age = 18# print(type(age))# 1.2 浮点数 ...
- 基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台
1.板卡概述 板卡由我公司自主研发,基于6UCPCI架构,处理板包含双片TI DSP TMS320C6678芯片:一片Xilinx公司FPGA XC7K420T-1FFG1156 芯片:六个千兆网口( ...
- Solution -「LOCAL」过河
\(\mathcal{Description}\) 一段坐标轴 \([0,L]\),从 \(0\) 出发,每次可以 \(+a\) 或 \(-b\),但不能越出 \([0,L]\).求可达的整点数. ...
- MySQL 5.7 基于GTID主从复制+并行复制+半同步复制
环境准备 IP HOSTNAME SERVICE SYSTEM 192.168.131.129 mysql-master1 mysql CentOS7.6 192.168.131.130 mysql- ...
- MySQL基于GTID的组复制（MGR）
环境准备 IP 主机名 操作系统 192.168.131.129 mgr-node1 CentOS7.6 192.168.131.130 mgr-node2 CentOS7.6 192.168.131 ...
- Redis 源码简洁剖析 13 - RDB 文件
RDB 是什么 RDB 文件格式 Header Body DB Selector AUX Fields Key-Value Footer 编码算法说明 Length 编码 String 编码 Scor ...
- 使用java程序完成大量文件目录拷贝工作
java程序完成目录拷贝工作 背景描述:我目录有140多个,每个目录里面都有一个src目录.我现在想要所有的src目录移动到同一个目录中. package com.util.cp; import ja ...
- python-通过configparser模块读取后缀为 .ini 的配置文件信息
前言 一般为了方便会将路径,连接信息等写到配置文件(通常会将这些信息写到yaml,ini....配置文件)中,configparser模块读取后缀为 .ini 的配置文件信息 配置文件格式 #存在 c ...