css样式综合
2018-01-11 16:31 看看乖哦 阅读(199) 评论(0) 编辑 收藏 举报2018,1,11
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #a{ width:800px; height:800px; background-color:#0F0} #b{ width:600px; height:600px; background-color:#93F; margin:100px 100px 100px 100px; float:left} #c{ width:400px; height:400px; background-color:#00C; margin:100px 100px 100px 100px;} #d{ width: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{ width:600px; height:130px; border:5px color:#03C; left:750px; bottom:470px; position:fixed; } #b{ width: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{ width: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); width:100px; height:100px; } #d { font-family:"微软雅黑" ; color:#333; width:400px; height:60px; background-color:#e9e9e9; float:left; text-decoration:overline; } .e {width: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>
视觉效果