本文介绍了HTML和CSS用于网页美化的基本技术，包括span标签的应用，字体样式，文本样式如颜色、对齐、首行缩进、行高和装饰，以及超链接伪类和文本阴影的设置。还涉及背景图像、渐变、盒子模型、边框、圆角边框和阴影的使用，以及浮动和清除浮动的概念，展示了如何通过这些技术来改善网页的视觉效果。
目录
4.行高 (单行文字上下居中 ：line-height=height)
1美化网页元素
span标签
重点要突出的字，使用span样式括起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#title1{
font-size:50px;
}
</style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>字体样式
font
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* font-family：字体
font-size:字体大小
font-weight：字体粗细
color:字体颜色
*/
body{
color:saddlebrown;
font-family: "Arial Black",楷体;
}
h1{
font-size: 50px;
}
.p1{
font-weight:bold;
}
</style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。
在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。
因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。
村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。 [1]
</p>
<p>We get old and get used to each other. We think alike. We read each othersminds. We know what the other wants without asking. Sometimes we irritate eachother a little bit. Maybe sometimes take each other for granted. But once in awhile,like today, I meditate on it and realise how lucky I am to share my life with thegreatest woman I ever met.</p>
</body>
</html>文本样式
line-height
1.颜色
color rgb rgba
2.文本对齐方式
text-align=center水平居中
3首行缩进
text-indent=2em
4.行高 (单行文字上下居中 ：line-height=height)
line-height=
5.装饰
text-decoration
6.文本图片水平对齐
<p>
<img src="images/1.jpg" alt="">
<span>sadsadsadsadsa</span>
</p> /*水平对齐有参照物 ：a，b*/
img,span{
vertical-align: middle;
}
补充：.p1 img,span{}可指定p1下的img和span
7.超链接伪类和文本阴影
1.超链接伪类
/*鼠标悬浮的颜色*/
a:hover{
color: orange;
}- a:link - 正常，未访问过的链接 - a:visited - 用户已访问过的链接 - a:hover - 当用户鼠标放在链接上时 - a:active - 链接被点击的那一刻
正常情况下 a:hover 基本就用这个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认的颜色*/
a{
text-decoration: none;
color: #000000;
}
/*鼠标悬浮的状态*/
a:hover{
color: orange;
font-size: 50px ;
}
/*鼠标按住未释放的变得状态 ,(只需要记住他)*/
a:active{
color: green;
}
a:link{
color: blueviolet;
}
a:visited{
color: red;
}
<head/>
2.阴影
/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
text-shadow: #3cc7f5 10px 10px 2px;
}8.列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式</title>
<link rel="stylesheet" href="css/style.css" 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></li>
</ul>
</div>
</body>
</html>#nav{
width: 300px;
background: gray;
}
.title{
font-size: 18px;
font-weight: bolder;
text-indent: 1em;
line-height: 30px;
background: red;
}
/*ul li
list-style:none ;可以去掉圆点或数字
circle:空心圆
decimal：有序数字
square:正方形
*/
ul{
background: gray;
}
ul li{
line-height: 30px;
list-style:none;
text-indent: 1em;
}
a{
text-decoration: none;
font-size: 14px;
color: black;
}
a:hover{
color: orange;
text-decoration: underline;
}
9.背景图像应用及渐变
背景图片
背景颜色
<!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/a.jpg") ;
/* 默认是全部平铺的*/
}
.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> 
渐变
background-color: #FFFFFF;
background: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
10.盒子模型及边框使用
margin：外边距
padding：内边距
border：边框
边框
1.边框的粗细
2.边框的样式
3.边框的颜色
/*经常注意body还有个外边距，要把它设置为0，初始化常见操作*/
/*h1,ul,li,a,body{*/
/* padding: 0;*/
/* margin: 0;*/
/* text-decoration: none;*/
/*}*/
/*border：粗细，样式，颜色*/
#box{
width: 300px;
border:1px solid red ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外边距的妙用:居中元素-->
<style>
/*border：粗细，样式，颜色*/
#box{
width: 300px;
border:1px solid red ;
padding: 0 0 0 0;
margin: 0 auto;
}
form{
background: #3cbda6;
}
/*margin: 0上下左右
margin:0 1px 上下 左右
margin: 0 1px 2px 3px 上 右 下 左 顺时针
*/
h2 {
font-size: 16px;
background-color: #3cbda6;
line-height: 30px;
color: white;
margin: 0;
}
input {
border: 1px solid black;
}
div:nth-of-type(1) {
border: 1px solid orange;
padding: 10px;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登陆</h2>
<form action="#">
<div>
<span>用户名</span>
<input type="text">
</div>
<div>
<span>密码</span>
<input type="password">
</div>
<div>
<span>邮箱</span>
<input type="email">
</div>
</form>
</div>
</body>
</html>div:nth-of-type(1)选中的是每个父类下的第一个div
但是id选择器优先级高
id选择器的属性会覆盖其他的属性
盒子的计算方式：你这个元素到底有多大
等于=（margin+border+padding+内容） 的大小
11.圆角边框及阴影
1.圆角边框
圆圈：圆角=半径 半径为内容宽度的一半
讲的时候不该带入边距的，border=1px的时候，border-radius=半径即可为圆；
当border=10px的时候 border-radius=半径+10才是圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* border-radius:左上 右上 右下 左下*/
div{
width: 100px;
height: 100px;
border: 10px solid red;
border-radius:100px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 50px;
height:50px;
margin: 30px;
background: red;
border-radius: 50px 0px 0px 0px;
}
img{
border: 10px solid red;
padding: 20px;
width: 150px;
height: 150px;
border-radius:180px ;
}
</style>
</head>
<body>
<div>
</div>
<img src="images/a.jpg">
</body>
</html>2.阴影
margin：0px auto；居中前提
在想居中的元素里写一个display：block；
在外面套一个div设置宽度就可以了
1.设置img宽度2.img设置为 display:block;3.img不一定要包在div标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--margin ： 0 auto 居中
要求：块元素，块元素有固定的宽度
-->
<style>
div[class="squre"]{
width: 100px;
height: 100px;
border: 10px solid red;
box-shadow:10px 10px 1px yellow ;
margin-top: 30px;
}
img{
width: 100px;
height: 100px;
border-radius: 50px;
box-shadow:10px 10px 100px yellow ;
margin: 0px auto;
display: block;
}
</style>
</head>
<body>
<img src="images/a.jpg" alt="">
<div class="squre">
</div>
</body>
</html>
12.display 和浮动
块级元素：独占一行
div h1-h6 p < ul > <li> </li> </ul>
行内元素 不独占一行
span a img strong ......
行内元素不可以包含块级元素，反之块级元素可以包含行内元素
display
：1.block 块元素
2.inline 行内元素
3.inline -block 是块元素，但是可以内联，可以在一行！
4.none消失
浮动加清除浮动
浮动就是贴着边框或者块浮上去
float：right清除浮动就是相当于块元素独占一行的浮动
clear:both清楚两端浮动
/*clear:right:右侧不允许有浮动元素，假设有 会自动跳行 clear：left:左侧不允许有浮动元素，假设有 会自动跳行 clear:both: 两侧不允许有浮动元素，假设有 会自动跳行 clear:none */
13.父级边框塌陷的问题
方法二：网页最末端，添加一个（原生）div > div进行：若有左右浮动，则在下行显示， 因为div没有浮动 > > 所以(父级div)边框将（包裹它），它又是最末尾元素，故解决了塌陷
可以这么理解，clear:both是另外启一行不浮动，最后的div包裹在父级div中，自然显示在图片下面，可以 试着在最后的div里加点文字方便理解
3.overleft
首先，这确实是BFC（Block fomatting context 块级格式化上下文）渲染的结果。
导致这种结果的原因如下：
BFC的定义：
BFC是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的规则（只列出需要的）：
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时，浮动元素也参与计算。
哪些元素会产生BFC（只列出需要的）：
- overflow不为visible
- 当你为一个元素添加overflow属性为hidden时，这个元素就会产生自己的BFC。
- 根据规则2，在计算BFC的高度时，浮动元素的高度也要参与计算，即父元素不会忽略自己里面的浮动元素的高度，如果你的父元素的高度设置的auto的话，那么它的高度就会等于浮动元素的高度（假设这个BFC里面只有一个浮动元素）。
- 规则2也是为了保证规则1的所述，即BFC就是页面上的一个隔离的独立容器，容器里面的子元素不应该影响到外面的元素，如果父元素不计算浮动元素的高度而是坍塌的话，那么浮动元素就会影响到其后面的元素，所以它需要规则3来保证这么一个行为。
- 当然，你可以说我就选择坍塌，然后把多余的浮动元素裁剪掉，这样也不影响后面的元素，难道不行吗？当然可以，所以才有了规则3明确表示我们采取的措施就是计算浮动元素的高度来不影响后面的元素。
- 最后，这并没有违背overflow: hidden;的功能，它的裁剪的功能依旧存在，只是说现在它的高度被自动设置成了能够包含浮动元素的高度罢了（如果height: auto; ）。所以如果你显示的声明父元素的高度，那么浮动元素超出的部分也是会被裁剪掉的，这跟违背hidden的本意没有任何关联。
4.在父级添加一个伪类
市面上最认可的一个解决方案
在父类里
/*第四种方法*/
#father:after{
content: "";
display: block;
clear:both;
}
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="father">
<div class="layer01"><img src="images/a.jpg" alt=""></div>
<div class="layer02"><img src="images/b.png" alt=""></div>
<div class="layer03"><img src="images/c.png" alt=""></div>
<div class="layer04">
浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边碰到边框或者，其他的块。
</div>
<span class="span" >图片下方的文字</span>
</div>
</body>
</html>div{
margin: 10px;
padding: 5px;
}
#father{
width: auto;
border: 1px #000 solid;
}
.span{
border: 1px solid red;
margin: 0;
padding: 0;
display: block;
clear: both;
text-align: center;
color: #006600;
}
/*第四种方法*/
#father:after{
content: '';
display: block;
clear:both;
}
.layer01{
border: 1px #f00 dashed;
display:inline-block ;
float: left;
}
.layer02{
border: 1px #00f dashed;
display:inline-block ;
float: left;
}
.layer03{
border: 1px #060 dashed;
display:inline-block ;
float: right;
}
/*clear:right:右侧不允许有浮动元素，假设有 会自动跳行
clear：left:左侧不允许有浮动元素，假设有 会自动跳行
clear:both: 两侧不允许有浮动元素，假设有 会自动跳行
clear:none
*/
.layer04{
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display:inline-block ;
float: right;
}
/*怎加一个空的div标签，清除浮动*/
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
