三、美化网页元素
1、概述
有效的传递页面信息美化网页，吸引用户凸显页面主题提高用户的体验2、字体样式
font-family：字体（可以同时改变英文与中文字体）font-size：字体大小font-weight：字体粗细color：颜色<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body {font-family: "Arial Black",微软雅黑;}h1 {font-size: 30px;color: wheat;}.p1 {font-weight: bold;}</style></head><body><h1>故事介绍</h1><p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p><p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。</p><p>All it took was one glance。Now all I ask is one chance，to try to win your heart。Just give me a chance to start。I'll show you it was meant to be。To be together is our destiny。</p></body></html>
3、文本样式
颜色 单词RGB 0~F 六位RGBA A：0-1 表示透明度 文本对齐方式 text-align: 排版，居中 首行缩进 text-indent 行高 line-heightheight 装饰 text-decoration： overline、through、underline、none<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!--颜色：单词RGB 0~F 六位RGBA A:0-1 透明度text-align: 排版，居中text-indent: 2em 段落首行缩进行高与块高一致时，便可实现上下居中（p3）--><style>body {font-family: "Arial Black",微软雅黑;}h1 {font-size: 30px;color: rgba(0,255,255,0.6);text-align: center;}.p1 {font-weight: bold;text-indent: 2em;}.p3 {background-color: greenyellow;height: 56px;line-height: 56px;}.a1 {text-decoration: underline;}.a2 {text-decoration: line-through;}</style></head><body><p class="a1">下划线</p><p>正常</p><p class="a2">中划线</p><h1>故事介绍</h1><p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p><p class="p2">在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。</p><p class="p3">All it took was one glance。Now all I ask is one chance，to try to win your heart。Just give me a chance to start。I'll show you it was meant to be。To be together is our destiny。</p></body></html>
图片与文字水平居中 vertical-align: middle
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>img,span {vertical-align: middle;}</style></head><body><p><img src="image/activeN.jpg" alt=""><span>abcdefghijkl</span></p></body></html>
4、超链接伪类
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*默认颜色*/a {text-decoration: none;color: wheat;}/*鼠标悬浮状态*/a:hover {color: brown;font-size: 30px;}/*鼠标按住未释放的状态*/a:active {color: blueviolet;}/*已访问的状态*/a:visited {}/*未访问的状态*/a:link {}/*text-shadow 阴影颜色 水平偏移 垂直偏移 阴影半径*/#price {text-shadow: #171673 10px 10px 2px;}</style></head><body><a href=""><img src="image/activeN.jpg" alt="" width="200px" height="200px"></a><p><a href="">有内味儿了</a></p><p><a href="">作者：某不知名网友</a></p><p id="price">￥999.00</p></body></html>
5、列表
HTML：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>列表样式</title><link rel="stylesheet" href="css/style.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></ul></div></body></html>
CSS：
#nav {width: 300px;}.title {font-size: 20px;font-weight: bold;text-indent: 1em;line-height: 35px;background: rosybrown;}/*list-stylenone 去掉圆点circle 空心圆decimal 数字square 正方形*/ul li {height: 30px;list-style: none;}ul {background: rgba(18, 16, 18, 0.5);}a {text-decoration: none;color: #000000;}a:hover {color: orange;text-decoration: underline;}
6、背景
背景颜色背景图片<!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("image/2.jpg");/*默认是全部平铺的*/}.d1 {background-repeat: repeat-x;}.d2 {background-repeat: repeat-y;}.d3 {background-repeat: no-repeat;}</style></head><body><div class="d1">div1</div><div class="d2">div2</div><div class="d3">div3</div></body></html>
在5的基础上增加小图标
HTML无变化
CSS：
.title {font-size: 20px;font-weight: bold;text-indent: 1em;line-height: 35px;background: red url("../2.jpg") 250px 0px no-repeat;}ul li {height: 30px;list-style: none;background-image: url("../2.jpg");background-repeat: no-repeat;background-position: 210px 0px;}
7、渐变
/ 在线渐变配色网站，交互操作超方便，而且好康！
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body{background-color: #4158D0;background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);}</style></head><body>/</body></html>
四、盒子模型
1、概述
margin：外边距padding：内边距border：边框**盒子的计算方式：**margin+border+padding+内容宽度2、边框
边框颜色边框样式边框粗细<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*body的默认外边距为8*//*常见操作：h1,ul,li,a,body {margin: 0;padding: 0;text-decoration: none;}*/body {margin: 0;}#box {width: 300px;border: 2px solid red ;}h2 {font-size: 18px;background-color: wheat;line-height: 30px;/*默认外边距为14.940*/margin: 0;}form {background: #FFCC70;}div:nth-of-type(1)>input {border: 3px solid black;}div:nth-of-type(2) input {border: 3px dashed powderblue;}</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>
3、圆角边框
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;border: 1px solid black;/*左上 右上 右下 左下 顺时针*/border-radius: 50px 20px 10px 5px;/*圆圈： 圆角=半径*/border-radius: 100px;}</style></head><body><div></div></body></html>
半圆以及图片头像
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.d1 {border: 3px solid black;width: 100px;height: 100px;border-radius: 50px 50px 0 0;}/*半圆*/.d2 {border: 3px solid black;width: 100px;height: 50px;border-radius: 50px 50px 0 0;}img {/*图片为40*40*/border-radius: 20px;}</style></head><body><div class="d1"></div><br><br><div class="d2"></div><br><br><img src="image/2.jpg" alt=""></body></html>
4、盒子阴影
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div {width: 200px;height: 200px;border: 3px solid black;/*x轴 y轴 模糊半径 颜色*/box-shadow: 10px 10px 30px red;}img {border-radius: 20px;box-shadow: 10px 10px 20px yellow;}</style></head><body><div></div><br><br><img src="image/2.jpg" alt=""></body></html>
五、浮动
标准文档流：
块级元素：独占一行（h1-h6、p、div、列表…）行内元素：不独占一行（span、a、img…）行内元素可以被包含在块级元素中，反之不可以
1、display
block 块元素inline 行内元素inline-block 是块元素 但是可以内联在一行none<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div {width: 100px;height: 100px;border: 1px solid black;display: none;}span {width: 100px;height: 100px;border: 1px solid black;display: inline-block;}</style></head><body><div>块级元素</div><span>行内元素</span></body></html>
这是一种实现行内元素排列的方式，但大多数情况使用的都是float
2、float
浮动的盒子可以向左浮，也可以向右浮，直到它的外边缘碰到包含框或另一个浮动盒子为止与clean：both 搭配使用，可以既浮动又保持原有状态（块元素等）3、父级边框塌陷问题
当边框内所有元素均为浮动时，父级边框便会塌陷（是一种错误情况）
clear：
clear：right; 右侧不允许有浮动元素clear：left; 左侧不允许有浮动元素clear：both; 两侧不允许有浮动元素clear：none;
解决方案：
增加父级元素的高度
#father {border: 1px #000 solid;height: 800px;}
增加一个空的div块，清除浮动
<div class="clear"></div>.clear {clear: both;margin: 0;padding: 0;}
overflow
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.content {width: 440px;height: 300px;/*超出部分隐藏*/overflow: hidden;/*滑动滚轮*/overflow: scroll;}</style></head><body><div class="content"><img src="activeN.jpg" alt=""><p>个人介绍：劲夫劲夫，全场欢呼。 腕豪腕豪，女人哀嚎。 瑟提瑟提，女人天敌。 闪现劲夫，女人痛哭 引燃劲夫，全场欢呼 劲夫带丛刃，咏春变叶问 征服者坚毅不倒，劲夫变身洪金宝 黑切破败布甲鞋，三拳打死李连杰 破败出的早，女人跑不了 破败早点出，女人一直哭 三项一出，女人啼哭。 黑切握在手，女人直发抖。 破败出得早，女人跑不了。 巨九手里拿，女人头皮麻。 左板甲，右血手，女拳也得绕着走。</p></div></body></html>
在父类添加一个伪类 after （强力推荐）
#father:after{content: '';display: block;clear: both;}
六、定位
1、相对定位
相对定位 position：relative;
相对于原来的位置进行指定的偏移
相对定位时，元素仍在标准文档流中，原位置会被保留
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body {padding: 20px;}div {margin: 10px;padding: 5px;font-size: 12px;line-height: 25px;}/*相对定位：相对于自己原来的位置进行偏移*/#father {border: 1px solid black;}#first {border: 1px dashed #1827ff;background-color: wheat;position: relative; /*相对定位：上下左右*/top: -30px;}#second {border: 1px dashed #1827ff;background-color: #2c17ff;}#last {border: 1px dashed #1827ff;background-color: #7bffec;position: relative;top: 30px;}</style></head><body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="last">第三个盒子</div></div></body></html>
练习：
使用div和a标签进行布局页面每个超链接宽度和高度均为100px，鼠标悬停时变色
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body {margin: 50px;border: 2px solid black;width: 346px;height: 346px;}a {display: block;width: 100px;height: 100px;text-decoration: none;text-align: center;line-height: 100px;color: white;background-color: deeppink;font-size: 18px;text-align: center;border: 1px solid black;}a:hover {background-color: blue;}.d1 {display: inline-block;margin-left: 20px;margin-top: 20px;}.d2 {display: inline-block;float: right;margin-right: 20px;margin-top: 20px;}.d3 {display: inline-block;margin-left: 20px;}.d4 {display: inline-block;float: right;margin-right: 20px;}.d5 {margin-left: 122px;}</style></head><body><div class="d1"><a href="">链接1</a></div><div class="d2"><a href="">链接2</a></div><div class="d5"><a href="">链接5</a></div><div class="d3"><a href="">链接3</a></div><div class="d4"><a href="">链接4</a></div></body></html>
注：每个div均有边框，因此在计算位置时需加入边框的长度
练习：
在上题的基础上，用相对定位完成
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#box {width: 300px;height: 300px;padding: 10px;border: 2px solid red;}a {width: 100px;height: 100px;text-decoration: none;background-color: deeppink;line-height: 100px;text-align: center;display: block;color: white;}a:hover {background-color: blue;}.a2,.a4 {position: relative;left: 200px;top: -100px;}.a5 {position: relative;left: 100px;top: -300px;}</style></head><body><div id="box"><a href=""class="a1">链接1</a><a href=""class="a2">链接2</a><a href=""class="a3">链接3</a><a href=""class="a4">链接4</a><a href=""class="a5">链接5</a></div></body></html>
2、绝对定位
定位： 基于XXX定位，上下左右
若没有父级元素定位，则相对浏览器进行定位假设父级元素存在定位，我们会相对父级元素定位在父级元素范围内移动 相对于父级或浏览器的位置，进行指定的偏移绝对定位的话，它不再标准文档流中，原来的位置不会被保留
#father {border: 1px solid black;position: absolute;}#second {border: 1px dashed #1827ff;background-color: #2c17ff;position: absolute;right: 30px;top: -10px;}
3、固定定位
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>body {height: 1000px;}/*绝对定位：相对浏览器*/div:nth-of-type(1) {width: 100px;height: 100px;background: red;position: absolute;right: 0;bottom: 0;}/*fixed 固定定位*/div:nth-of-type(2) {width: 50px;height: 50px;background: #FFCC70;position: fixed;right: 0;bottom: 0;}</style></head><body><div>div1</div><div>div2</div></body></html>
4、z-index与透明度
图层
z-index：默认为0，无上限
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/style.css"></head><body><div id="content"><ul><li><img src="activeN.jpg" alt=""></li><li class="tip">不是蒜头王叭</li><li class="BG"></li><li>1月29日15:42:56</li><li>地点：米奇妙妙屋</li></ul></div></body></html>
#content {width: 440px;padding: 0;margin: 0;overflow: hidden;font-size: 14px;line-height: 25px;border: 1px solid black;}ul,li {padding: 0;margin: 0;list-style: none;}/*父级元素相对定位*/#content ul {position: relative;}.tip, .BG {position: absolute;width: 440px;top: 415px;height: 25px;}.tip {/*z-index 底层为0*/z-index: 1;color: white;}.BG {background: black;/*背景透明度*/opacity: 0.5;}
