低配版:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东每日特价Tab切换</title>
</head>
<style>
*
{
padding: 0px;
margin: 0px;
list-style: none;
}
#container
{
margin: auto;
height: 400px;
width: 700px;
border:1px solid gray;
}
#headline
{
float: left;
}
#headline:hover #abreast2
{
background-color: red;
color:white;
}
#navigation
{
margin: 10px 10px 0px 270px;
float: left;
}
#abreast1
{
float: left;
width: 100px;
line-height: 40px;
font-weight: bold;
text-align: center;
margin: 10px 10px 0px 10px;
padding: 1px;
font-size: larger;
cursor: pointer;
}
#abreast2
{
margin: 20px 20px 10px -5px;
float: left;
width: 20px;
line-height: 20px;
text-align: center;
cursor: pointer;
border-radius: 50%;
border: 1px solid red;
color: red;
}
ul li
{
left: 200px;
float: left;
height: 40px;
line-height: 40px;
color