2018,1,11
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#a{ 800px;
height:800px;
background-color:#0F0}
#b{ 600px;
height:600px;
background-color:#93F;
margin:100px 100px 100px 100px;
float:left}
#c{ 400px;
height:400px;
background-color:#00C;
margin:100px 100px 100px 100px;}
#d{ 200px;
height:200px;
background-color:#C09;
margin:100px 100px 100px 100px;
float:left}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c">
<div id="d">
<a href="Untitled-1.html" style="text-decoration:none">黑色</a>
</div>
</div>
</div>
</div>
</body>
</html>
视觉效果
代码：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度一下</title>
<style type="text/css">
*{
margin:0px;
padding:0px;}
#a{ 600px;
height:130px;
border:5px color:#03C;
left:750px;
bottom:470px;
position:fixed;
}
#b{
0px;
height:0px;
border-top:100px solid #00C;
boeder-bottom:100px solid white;
border-left:100px solid white;
border-right:100px solid white;
background-position:left:0px;
background-position:top:0;
}
#c{
0px;
height:0px;
border-top:5px solid #00C;
boeder-bottom:5px solid transparent;
border-left:5px solid #03C;
border-right:5px solid transparent;
background-position:left:0px;
background-position:top:0;
transform:rotate(315deg);
100px;
height:100px;
}
#d
{
font-family:"微软雅黑" ;
color:#333;
400px;
height:60px;
background-color:#e9e9e9;
float:left;
text-decoration:overline;
}
.e
{99px;
height:60px;
background-color:#e9e9e9;
float:left;
text-align:center;
line-height:60px;
vertical-align:middle;
border-right:1px solid #FFF;
}
.e:hover{ cursor:pointer;
background-color:#b6b9bb;
border-top: solid #F39;}
li{list-style:none;}
</style>
</head>
<body>
<div>
<img id="a" src="../图片/%7}FWJ@4__V(HZV4(EPDW]6.png" />
</div>
<div id="b">
<div id="c" >
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="d">
<ul>
<li class="e">春节</li>
<li class="e">元宵</li>
<li class="e">中秋</li>
<li class="e" style="border-raght:opx">国庆</li>
</ul>
</div>
<img src="../图片/u=384237296,3477468577&fm=27&gp=0.jpg"/>
<img src="../图片/u=384237296,3477468577&fm=27&gp=0.jpg"/>
<img src="../图片/u=384237296,3477468577&fm=27&gp=0.jpg"/>
<div>
宽350px 高100px
</div>
<div>
边框实线2px
</div>
<div>
边框颜色 #60F
</div>
<div>
水平居中
</div>
<div>
字体微软雅黑
</div>
<div>
字号14px
</div>
<div>
外边距上20px 下300px
</div>
<div>
外层：高100px 宽50px
</div>
<div>
距离左边框320px 上边框上衣2px
</div>
<div>
高50px 宽50px 内边框2px 实线 颜色#60F 旋转45°
</div>
<div>
背景色白色 上2px 左边框0px 上边框0px 外边框0px
</div>
视觉效果
