css实现自适应丝带标题栏效果代码-html代码-BFW代码库

css实现自适应丝带标题栏效果代码

代码语言：html

代码描述：css实现自适应丝带标题栏效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @import url(https://fonts.googleapis.com/css?family=Crete+Round);
        	html {
        	font-size:1em;
        	background:#825582
        }
        h1,h2 {
        	font-family:'Crete Round',serif
        }
        a {
        	color:#825582;
        	text-decoration:none
        }
        .content {
        	background:#e6e2c8;
        	width:80%;
        	max-width:960px;
        	min-height:3.750em;
        	margin:2em auto;
        	padding:1.250em;
        	border-radius:.313em;
        	box-shadow:0 2px 5px 0 rgba(0,0,0,0.5);
        	line-height:1.5em;
        	color:#292929
        }
        .ribbon {
        	position:relative;
        	padding:0 .5em;
        	font-size:2.000em;
        	margin:0 0 0 -0.625em;
        	line-height:1.875em;
        	color:#e6e2c8;
        	border-radius:0 .156em .156em 0;
        	background:#7b9fc7;
        	box-shadow:-1px 2px 3px rgba(0,0,0,0.5)
        }
        .ribbon:before,.ribbon:after {
        	position:absolute;
        	content:'';
        	display:block
        }
        .ribbon:before {
        	width:.469em;
        	height:100%;
        	padding:0 0 .438em;
        	top:0;
        	left:-0.469em;
        	background:inherit;
        	border-radius:.313em 0 0 .313em
 .........完整代码请登录后点击上方下载按钮下载查看