<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>20220305</title>
</head>
<body>
<!--伪类-->
<style type="text/css">
a{
text-decoration: none;
}
a:link{
color: blue;
}
a:visited{
color: indianred;
}
a:hover{
color: black;
font-size: 50px;
}
a:active{
color: pink;
}
</style>
<a href="http://www.4399.com" target="_blank">4399</a>
<a href="http://www.7k7k.com" target="_blank">7k7k</a>
<a href="http://www.2345.com" target="_blank">2345</a>
<a href="http://www.baidu.com" target="_blank">baidu</a>
<!--背景-->
<!--<style type="text/css">
#mydiv{
width: 2000px;
height: 1000px;
background-color: greenyellow;
background-image: url(img/huoying.jpg);/*图片的地址*/
background-repeat: no-repeat;
}
</style>-->
<!--京东的导航菜单-->
<!--列表
有序的:ol,默认是数字排列,通过type=“A”可以改变展示的类型
无序的:ul,默认展示是实心圆
内容的封装都使用li进行封装
li默认是一个块级标签,默认是占一行的,----》行内的标签,display
-->
<style type="text/css">
li{
list-style: none;
display: inline;/*将块级标签转换为行内的标签*/
padding: 10px;
font-size: 30px;
}
.jiacu{
font-weight: 900;
}
a:
</style>
<h3>你心中的女神</h3>
<ol type="A">
<li>
<a href="#" class="jiacu">刘亦菲</a>
</li>
<li>
<a href="#">鞠婧祎</a>
</li>
<li>
<a href="#">景甜</a>
</li>
</ol>
<!--<ul type="square">
<li>刘亦菲</li>
<li>鞠婧祎</li>
<li>景甜</li>
</ul>-->
<style type="text/css">
#mydiv{
border: 2px solid;
width: 50px;
height: 50px;
border-color:red yellow blue pink;/*顺序上右下左,值不够,则看对面*/
border-style:dashed dotted inset groove;
}
</style>
<div id="mydiv">
</div>
<hr /><hr /><hr />
<style>
div {
background-color: lightblue;
width: 200px;
height: 200px;
border: 10px solid blue;
padding: 25px;
margin: 50px;
border-radius: 100px;
box-shadow: 20px 40px 10px greenyellow , 40px 80px 30px lightblue;
}
</style>
<h2>盒子模型演示</h2>
<p>CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p>
<div>这里是盒子内的实际内容。有 25px 内间距,50px 外间距、10px 蓝色边框。</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>