# CSS基础2
5. 文本阴影和超链接伪类
5.1 文本阴影
/* text_shadow :阴影颜色 水平偏移 垂直偏移 阴影半径 */
5.2 超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*默认状态*/
a{
text-decoration: none;
color: darkmagenta;
}
/*鼠标悬浮的状态*/
a:hover{
color: cyan;
font-size: 60px;
}
/* 鼠标按住为释放的状态
*/
a:active{
color: brown;
font-size: 50px;
}
</style>
</head>
<body>
<a href="#">
<img src="1.jpg" alt="xjj" height="50"width="50" >
</a>
<p>
<a href="#"> 辛晶晶 </a>
</p>
<p>
<a href="#"> 性别女 年龄21 </a>
</p>
</body>
</html>
6.列表
列表的一些方法
/*
list-style :
list-style: none; 去掉原点
list-style: circle;空心圆
list-style: decimal; 数字
list-style: square; 正方形
*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="ml.css">
</head>
<body>
<div id="ml">
<h1>全部商品类</h1>
<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> </li>
<li><a href="#">服装鞋橱</a> <a href="#">化妆</a> </li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a> </li>
<li><a href="#">彩票</a> <a href="#">旅行</a> </li>
</ul>
</div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3pHX4w7m-1589540573866)(C:\Users\磊酱嘤~1\AppData\Local\Temp\1589512524120.png)]
7.背景
<!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("1.jpg") ;
/*默认是平铺的*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6qckniTG-1589540573868)(C:\Users\磊酱嘤~1\AppData\Local\Temp\1589534910964.png)]
8.盒子模型及边框的使用
/*<!-- border 边框:粗细,样式,颜色-->*/
样式
例如 border: 3px dashed blue ; 虚线
border: 1px solid red; 实线
ma
/*body总有一个默认的外边距 margin:*/
/*外边距的作用 margin 使其居中 auto */
/*内边距 padding*/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AsgH6uKo-1589540573872)(C:\Users\磊酱嘤~1\AppData\Local\Temp\1589536609788.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
/*body总有一个默认的外边距 margin:*/
margin: 0 ;
padding: 0;
text-decoration: none;
}
/*<!-- border 边框:粗细,样式,颜色-->*/
#box {
width: 300px;
border: 1px solid red;
}
form{
background: #ffa4d0;
}
/*结构选择器 nth-of-type*/
div:nth-of-type(1) {
border: 3px solid black ;
}
div:nth-of-type(2){
border: 3px dashed blue ;
}
div:nth-of-type(3){
border: 3px solid rebeccapurple;
}
h2{
background: rosybrown;
line-height: 100px;
color: red;
}
</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>!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sH5QgV1M-1589540573875)(C:\Users\磊酱嘤~1\AppData\Local\Temp\1589536516902.png)]
9.浮动
块级元素:独占一行
h1-h6 p div 列表
行内元素:不独占一行
span a img strong...
行内元素可以被包含在 块级元素里面
9.1 display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px ;
height: 100px;
border: 1px solid rosybrown ;
}
span{
width: 100px;
height: 100px;
border: 1px dashed red;
}
</style>
</head>
<body>
<div>div元素 块元素</div>
<span>span 标签 行内元素</span>
</body>
</html>
以上代码的运行效果如图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ZQ7QI5m-1589540573877)(C:\Users\磊酱嘤~1\AppData\Local\Temp\1589537642897.png)]
给行内元素span设置 dispaly后的效果如图
/*<
使用 display block 将其变成块元素
display inline 使其变成行内元素
display inline-block 使其变成两种元素
display none 使其消失
*/
9.2 float
10.定位
10.1相对定位
position: relative ; /* 相对定位:上 ,下, 左, 右*/、
相对于原来的位置进行移动
是反着来的
top: 5px; 距离上5厘米 向下移动五厘米
left: 20px; 向右移动20厘米
bottom: 15px;
10.2绝对定位
定位:基于XXX定位,上下左右
1.没有父级元素定位的前提下 基于浏览器页面定位
2.假设父级元素存在定位,通常会相对于父级元素定位
3.在父级元素范围内移动
相对于父级和浏览器的位置 进行指定偏移。 它不在标准文档流
position: absolute
<!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: rosybrown;
position: absolute;
right: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<div>div1</div>
<div>DIV2</div>
</body>
</html>
10.3固定定位 fixed
div:nth-of-type(2){
width: 50px;
height: 50px;
background: blue;
position: fixed;
right: 300px;
bottom 300px ;
ute;
right: 100px;
bottom: 100px;
}
10.3固定定位 fixed
div:nth-of-type(2){
width: 50px;
height: 50px;
background: blue;
position: fixed;
right: 300px;
bottom 300px ;