<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=div, initial-scale=1.0">
<title>Document</title>
<style>
/*
block块元素
inline 行内元素
inline-block 是块元素但是可以内联，在一行
none
*/
.title{
width: 1000px;
height: 50px;
border:2px solid black;
display:inline-block;
}
#first{
display: inline-block;
}
#second{
display: inline-block;
}
#third{
display: inline-block;
}
#fourth{
display: inline-block;
}
/*
:visited用来表示访问过的链接,只能修改链接的颜色
*/
a:visited{
color: red;
}
/*
：hover用来表示鼠标移入的状态
*/
a:hover{
color:aqua;
}
#one{
float: left;
}
#two{
float: right;
}
#three{
float:inline-end;
clear:right;
}
</style>
</head>
<body>
<div class="title">
<ul>
<li id="first"> <a href="https://www.baidu.com" target="_blank">baidu</a> </li>
<li id="second"> <a href="https://www.pintia.cn" target="_blank">pta</a> </li>
<li id="third"> <a href="https://www.jd.com/" target="_blank">jingdong</a> </li>
<li id="fourth"> <a href="https://uland.taobao.com" target="_blank">taobao</a> </li>
</ul>
</div>
<div class="picture">
<img width="100" id="one" src="./hm.jpg" alt="黄敏">
<img width="100" id="two" src="./mm.jpg" alt="敏敏">
<img width="100" id="three" src="./hz.jpg" alt="合照">
</div>
</body>
</html>
扫一扫
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
