<div class="bgc">
<div class="bgc-con">
<div class="bgc-con-top">
<ul>
<li class="fl"><span>Chat</span></li>
<li class="fr">
<a href="#" class="red"></a>
<a href="#" class="green"></a>
<a href="#" class="yellow"></a>
<a href="#" class="blue"></a>
</li>
</ul>
</div>
<div class="bgc-con-bot">
<ul>
<li class="list-first fl">
<div class="list-left fl">
<p class="p1">PrivocY and Support</p>
<p class="p2">Qet Immediote Support</p>
</div>
<div class="list-right fr">
<a href="#"><p></p></a>
</div>
</li>
<li class="list-second fr color_pur">
<p>Good Day!</p>
</li>
<li class="list-third fr color_pur">
<p>I'm looking for gift editions of<br>
the Horry Potter Books.Do you <br>
hove them?</p>
</li>
<li class="list-fourth fl">
<p>Good Day!</p>
</li>
<li class="list-fifth fr">
<p>we hove 3 populor gift aditions <br>
of the Horry Potter books.which <br>
one would you like?</p>
<a href="#" class="greens"></a>
<a href="#" class="reds"></a>
<a href="#" class="purples"></a>
</li>
<li class="touxiang fl">
<a href="#">SML</a>
</li>
<li class="sixth fr color_pur">
<p>I think the middle one is the <br>
one I was loking for.</p>
</li>
<li class="seventh fr color_pur">
<p>can you odd it to the cart please?</p>
</li>
<li class="eigth fr">
<a href="#" class="leftone1 fl"><p></p></a>
<a href="#" class="lefttwo fl"><p>write a message...</p></a>
<a href="#" class="leftone2 fr"><p></p></a>
</li>
</ul>
</div>
</div>
</div>
body,
button,
dd,
dl,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
input,
li,
ol,
p,
td,
textarea,
th,
ul {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
line-height: 1.5;
font-size: 14px;
color: #333;
}
a {
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
/* 解决图片间隙问题 */
img {
vertical-align: middle;
}
/* 万能的清浮动样式 */
.clearfix::before,
.clearfix::after {
content: "";
}
.clearfix::after{
clear: both;
}
/* 左浮动 */
.fl {
float: left;
}
/* 右浮动 */
.fr {
float: right;
}
.w {
width: 1200px;
margin: 0 auto;
}
.bgc-con {
width: 300px;
height: 800px;
background-color: #eee8dc;
border-radius: 20px;
}
.bgc-con-top {
width: 300px;
height: 100px;
}
.bgc-con-top li {
margin-top: 20px;
}
.bgc-con-top li span {
line-height: 50px;
font-size: 20px;
font-weight: bold;
color: #7f6a61;
margin-left: 15px;
}
.bgc-con-top li.fr{
position: relative;
background-color:#fcf8f5;
margin-right: 10px;
width: 55px;
height: 55px;
border-radius: 50%;
}
.bgc-con-top li.fr a{
display: block;
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
}
.red {
background-color: red;
top: 18px;
left: 18px;
}
.green {
background-color: green;
top: 18px;
left: 32px;
}
.yellow {
background-color: yellow;
top: 32px;
left: 18px;
}
.blue {
background-color: blue;
top: 32px;
left: 32px;
}
/* */
.bgc-con-bot {
width: 280px;
height: 690px;
margin: 0 10px;
background-color: #e1d3c6;
border-radius: 20px;
padding-top: 10px;
}
.list-first{
width: 270px;
height: 65px;
background-color: #efe8e2;
border-radius: 20px;
margin: 0 5px;
}
.list-left {
margin: 12px;
}
.list-left .p1 {
font-weight: bold;
color: #908277;
}
.list-left .p2 {
color: #bdafa6;
}
.list-right a {
position: relative;
display: block;
width: 40px;
height: 40px;
background-color: #fcf8f5;
border-radius: 50%;
margin: 10px;
}
.list-right p {
position: absolute;
top: 14px;
left: 13px;
width: 10px;
height: 10px;
border-top: 2px solid #908277;
border-right: 2px solid #908277;
transform: rotate(45deg);
}
.color_pur {
background-color: #9083b8;
color: #d1caef;
font-size: 10px;
}
.list-second {
width: 112px;
height: 40px;
border-radius: 50px 60px 0 50px;
text-align: center;
line-height: 40px;
margin: 70px 5px 0 0;
}
.list-third {
width: 220px;
height: 78px;
margin-top: 5px;
border-radius: 20px 20px 0 20px;
margin-right: 5px;
}
.list-third p {
text-align: left;
margin: 10px 20px;
}
.list-fourth,
.list-fifth {
background-color: #fdf8f5;
font-size: 10px;
color: #7f6a61;
}
.list-fourth {
width: 112px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 7px 0 0 50px;
border-radius: 60px 50px 60px 0;
}
.list-fifth {
width: 224px;
height: 196px;
margin-right: 5px;
margin-top: 5px;
border-radius: 20px 20px 20px 0;
}
.list-fifth p {
margin: 19px 19px 10px 19px;
}
.list-fifth a {
display: inline-block;
width: 54px;
height: 92px;
border-radius: 10px 3px 3px 10px;
}
.list-fifth .greens {
background-color: #598d5b;
margin-left: 18px;
}
.list-fifth .reds {
background-color: #e06665;
margin: 0 10px;
}
.list-fifth .purples {
background-color: #766498;
}
.touxiang {
width: 45px;
height: 45px;
background-color: #fdf7f7;
border-radius: 50%;
line-height: 45px;
text-align: center;
margin: -44px 4px;
}
.touxiang a{
color: #766498;
}
.sixth,
.seventh {
border-radius: 20px 20px 0 20px;
margin-top: 5px;
margin-right: 5px;
}
.sixth {
width: 209px;
height: 57px;
}
.sixth p {
margin: 10px 20px;
}
.seventh {
width: 224px;
height: 43px;
}
.seventh p {
margin: 12px 15px;
}
.eigth {
width: 270px;
height: 52px;
margin: 10px 5px;
}
.eigth .leftone1,
.eigth .leftone2 {
position: relative;
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
}
.eigth .leftone1 {
background-color: #fdf8f5;
}
.eigth .leftone2 {
background-color: #f05f64;
}
.eigth .leftone1 p,
.eigth .leftone2 p {
position: absolute;
width: 12px;
height: 12px;
transform: rotate(45deg);
}
.eigth .leftone1 p {
bottom: 18px;
right: 18px;
border-bottom: 2px solid #7f6a61;;
border-left: 2px solid #7f6a61;;
}
.eigth .leftone2 p {
top: 18px;
left: 18px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
.lefttwo {
width: 160px;
height: 50px;
background-color: #fcf8f5;
margin: 0 5px;
border-radius: 50px;
font-size: 10px;
}
.lefttwo p {
margin: 16px;
color: #7f6a61;
}