span标签：重点要突出的字，使用span套起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#titel{
font-size: 50px;
}
</style>
</head>
<body>
欢迎学习<span id="titel">java</span>
</body>
</html>
---------------------------------------------------------
字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
font-family:字体
font-size:字体大小
font-weight字体的粗细
color：字体颜色
-->
<style>
body{
font-family:"Lucida Fax",楷体;
color: #bd1d1d;
}
h1{
font-size: 50em;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>元泱境界</h1>
<p class="p1">
包含平行的天地两界。魁拔前72年两界首次接触。天界 [2]更为文明，时间流速慢于地界。其居民自称天神，行事遵从理性思维。天神分为镜、朴、泱、焰、尘五系（对应五行，每系有一位主神）和至高神“元”。“元点”是天界的能量核心。
地界已知有十一国，分别为神圣树国（辉妖）、风国（基斯卡人）、龙国（龙族）、商国（默拓人）、兽国（兽族）、翼国（翼族）、雪国（萨库人）、夜国（雾妖）、海国（粼妖）、沙国（格洛莫赫人）和虫国（蛰族），前十国共同组成神圣联盟。
</p >
<p>
脉是一种振动，是万物的组成。人体有十二脉门，通过脉门引动空气中的脉可以形成脉术。
曲境是平行空间间的通道。纹耀则是曲境的碎片，多种多样，既代表持有者社会地位，又可在其使用脉术时增幅力量。
</p>
<p>
I offer you the loyalty of a man who has never been loyal.
I offer you explanations of yourself, theories about yourself, authentic and surprising news of yourself.
I can give you my loneliness, my darkness, the hunger of my heart. I am trying to bribe you with uncertainty, with danger, with defeat.
</p>
</body>
</html>
--------------------------------------------------------
文本样式
1.颜色 color rgb rgba
2.文本对齐方式 text-align=center
3.首行缩进 text indent:2em
4.行高 lin -height :单行文字上下居中！ lin-height=height
5.装饰 text decoration:
6.文本图片水平对齐：vertical-align：middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：
单词
RGB 0-F
RGBA A:0-1
text-align:排版居中
text-indent：段落首行缩进
行高，和块的高度一致，就可以上下居中
height: 300px;
line-height: 300px
-->
<style>
h1{
color: rgb(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: #5832de;
height: 300px;
line-height: 300px;
}
.L1{
/*下线 */
text-decoration: underline;
}
.L2{
/* 中线*/
text-decoration:line-through ;
}
.L3{
/*上线*/
text-decoration: overline;
}
</style>
</head>
<body>
<p class="L1">1122333</p>
<p class="L2">1122333</p>
<p class="L3">1122333</p>
<h1>故事介绍</h1>
<p class="p1">
是一种振动，是万物的组成。人体有十二脉门，通过脉门引动空气中的脉可以形成脉术。
</p>
<p>
曲境是平行空间间的通道。纹耀则是曲境的碎片，多种多样，既代表持有者社会地位，又可在其使用脉术时增
</p>
<p class="p3">
I offer you the loyalty of a man who has never been loyal.
</p>
</body>
</html>
---------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
颜色：
单词
RGB 0-F
RGBA A:0-1
text-align:排版居中
text-indent：段落首行缩进
行高，和块的高度一致，就可以上下居中
height: 300px;
line-height: 300px
-->
<style>
h1{
color: rgb(0,255,255,0.9);
text-align: center;
}
.p1{
text-indent: 2em;
}
.p3{
background: #5832de;
height: 300px;
line-height: 300px;
}
.L1{
/*下线 */
text-decoration: underline;
}
.L2{
/* 中线*/
text-decoration:line-through ;
}
.L3{
/*上线*/
text-decoration: overline;
}
</style>
</head>
<body>
<p class="L1">1122333</p>
<p class="L2">1122333</p>
<p class="L3">1122333</p>
<h1>故事介绍</h1>
<p class="p1">
是一种振动，是万物的组成。人体有十二脉门，通过脉门引动空气中的脉可以形成脉术。
</p>
<p>
曲境是平行空间间的通道。纹耀则是曲境的碎片，多种多样，既代表持有者社会地位，又可在其使用脉术时增
</p>
<p class="p3">
I offer you the loyalty of a man who has never been loyal.
</p>
</body>
</html>
-------------------------------------------------
阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
/*默认的颜色*/
text-decoration: none;
color: #000;
}
/*鼠标悬浮的状态*/
a:hover{
color: orange;
font-size: 50px;
}
/*鼠标按住未释放*/
a:active{
color:#5fce5b;
}
#price{
text-shadow:#5fce5b 10px 0px 2px;
}
</style>
</head>
<body>
<a href="#">
<img src="images/4.jpeg" alt="">
</a>
<p>
<a href="">码出搞效：java开发手册</a>
</p>
<p>
<a href=""> 作者：古今</a>
</p>
<p id="price">
￥99
</p>
</body>
</html>
-------------------------------------
列表
#nav{
width: 200px;
background:darkgrey ;
}
.title{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background: #bd1d1d;
}
/* ul li
none去掉圆点
circle 空心圆
decimal有序列表
*/
/*ul{*/
/* background:darkgrey ;*/
/*}*/
ul li{
height:30px ;
list-style:none;
text-indent:1em ;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/style.css" rel="stylesheet"type="text/css">
</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<ul>
<li>
<a href="#">图书</a>
<a href="#">音像</a>
<a href="#">数字商品</a>
</li>
<li>
<a href="#">家用电器</a>
<a href="#">手机</a>
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a>
<a href="#">办公</a>
</li>
<li>
<a href="#">家居</a>
<a href="#">家装</a>
<a href="#">厨具</a>
</li>
<li>
<a href="#">服饰鞋帽</a>
<a href="#">个性化妆</a>
</li>
<li>
<a href="#">礼品箱包</a>
<a href="#">钟表</a>
<a href="#">珠宝</a>
</li>
<li>
<a href="#">食品饮料</a>
<a href="#">保健食品</a>
</li>
<li>
<a href="#">彩票</a>
<a href="#">旅行</a>
<a href="#">充值</a>
<a href="#">票务</a>
</li>
</ul>
</div>
</body>
</html>
---------------------------------------------------------
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 1000px;
height: 700px;
border: 1px solid red;
/*默认是全部平铺*/
background-image: url("images/4.jpeg");
}
.div1{
background-repeat:repeat-x ;
}
.div2{
background-repeat:repeat-y ;
}
.div3{
background-repeat:no-repeat ;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"> </div>
<div class="div3"></div>
</body>
</html>
----------------------------------------------------------
渐变地址：推荐Grabient
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 径向渐变，圆形渐变 -->
<style>
body{
/*background-color: #0093E9;*/
background-image: linear-gradient(302deg, #0093E9 0%, #80D0C7 100%);
}
</style>
</head>
<body>
哈哈哈
</body>
</html>
-----------------------------------------------------------------------
盒子模型
margin:外边距
padding：内边距
border：边框
边框
1.边框的粗细
2.边框的样式
3.边框的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*总有一个默认的外边距margin=0*/
body{
margin: 0;
padding: 0;
text-decoration: none;
}
/*粗细 ，样式，颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color:blue ;
line-height:30px ;
margin: 0;
color: white;
}
form{
background: #5fce5b;
}
div:nth-of-type(1) input{
border: 3px solid black;
}
div:nth-of-type(2) input{
border: 3px solid powderblue;
}
div:nth-of-type(3) input{
border: 3px solid green;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
-----------------------------------------------------------
盒子大小
margin+border+padding+内容宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外边距的妙用：居中.
margin: 0 auto;-->
<style>
/*粗细 ，样式，颜色*/
#box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
}
h2{
font-size: 16px;
background-color:blue ;
line-height:30px ;
margin: 0 1px;
color: white;
}
form{
background: #5fce5b;
}
form{
background: #5fce5b;
}
div:nth-of-type(1){
padding: 10px 2px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名:</span>
<input type="text">
</div>
<div>
<span>密码:</span>
<input type="text">
</div>
<div>
<span>邮箱:</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
-------------------------------------------------------------
圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid red;
/*左上 右上 右下 左下*/
border-radius: 10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
-------------------------------------------------------
盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 居中要求：块元素，块元素有固定的宽度 margin-->
<style>
img{
border-radius: 50px;
box-shadow:10px 10px 100px yellow ;
}
</style>
</head>
<body>
<div style="width: 500px;display:block;text-align: center;">
<img src="images/4.jpeg" alt="">
</div>
</body>
</html>
----------------------------------------------------------
copy网站推荐：源码之家，模版之家，飞冰，门户网站模版之家
登录系统，
做网页不要造轮子，要用轮子，用前人已经造好的，不要从零开始
成为copy大师 p16
----------------------------------------------------------------------------
浮动
标准文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- block 块元素
inline 行内元素
inline-block 是块元素，但是可以内联，在一行
noone
-->
<style>div{
width: 100px;
height: 100px;
border: 1px solid red;
display:none;
}span{
width: 100px;
height: 100px;
border: 1px solid red;
display: inline-block;
}
</style>
</head>
<body>
<div>div块内元素</div>
<span>span行内元素</span>
</body>
</html>
-----------------------------------------------
父级边框塌陷的问题
clear:right;右侧不允许有浮动元素
clear：left;左侧不允许有浮动元素
clear：both；两侧不允许有浮动元素
clear:none;不运行浮动
解决方案：
1.增加父级元素的高度
#father{
border:1px # 000 solid;
height:800px
}
2.增加一个空的div标签，清除浮动
<div class ="clear"></div>
.clear{
clear:both;
margin:0;
padding:0;
}.
3.overflow
在父类中增加一个 overflow：hidden
4.父类添加一个伪类 ：after
#father:after{
content:'';
display:block;
clear:both
}
总结面试题：小结 （必考题）
1.浮动元素后面增加空div
简单，代码中尽量避免空的div
2.设置父元素的高度
简单，元素假设有固定的高度，就会被限制
3.overflow
简单，下拉的一些场景避免使用
4.父类添加一个伪类：after(推荐)
写法稍微复杂一点，但是没有副作用，推荐使用
对比：
display：方向不可以控制
float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷问题
1968
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
