css实现简洁文字引用布局效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现简洁文字引用布局效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;500;900&display=swap" rel="stylesheet"> <style> body { font-size: 16px; color: #111; background-color: #efefef; font-family: "League Spartan", sans-serif; } article { max-width: 800px; margin: 4rem auto; } .quote { margin: 4rem 1rem 1rem 8rem; padding: 1rem; border-left: 1px solid #999; } blockquote { font-size: 1.2rem; font-weight: 300; line-height: 1.6rem; position: relative; padding: 0; margin: 0; } blockquote::before { font-weight: 900; content: "\201C"; color: #a63232; font-size: 10rem; position: absolute; left: -8rem; top: 3.5rem; } figcaption { font-weight: 500; margin-top: 1rem; font-size: 1.2rem; } </style> </head> <body> <article> <figure class="quote"> <blockquote> As you read a book word by word and page by page, you participate in its creation, just as a cell.........完整代码请登录后点击上方下载按钮下载查看
网友评论0