效果预览
HTML源码
点击查看HTML代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>资源分享站 - 软件 网站 书籍文档 学习资料</title> <link href="css/index.css" rel="stylesheet" type="text/css"> </head> <body> <header> <div class="box-logo"> <a href="#" alt="资源分享站" class="logo"> <div class="img-logo-box img-logo" style="background: url(images/LOGO.png) no-repeat;background-size: 100% auto;"> </div> <div class="img-logo-box text-logo"> 萌狼工作室 </div> </a> </div> </header> </body> </html>
CSS源码
点击查看CSS代码
:root{ --font-main-color:black; --background-color:snow; --shadow-color:rgba(0,0,0,0.1); } *{ margin: 0; padding: 0; } a{ color:var(--font-main-color); text-decoration: none; } header{ margin: 0; padding: 0; width:100%; } header .box-logo{ width: 100%; display: flex; /*背景颜色*/ background-color: var(--background-color); /*阴影*/ box-shadow: 1px 1px 1px 1px var(--shadow-color); } header .logo{ margin: 0; padding: 0.25em; height: 100%; font-size: 1.5em; } header .logo .img-logo-box{ /*LOGO和文字在一行*/ display: inline-block; /*LOGO和文字上下居中，实现对齐*/ vertical-align:middle; } /*默认*/ @media (min-width: 767px){ header .logo .img-logo{ height: 1.5em; width: 1.5em; } header .logo .text-logo{ font-size: 1.3em; } } /* 横向放置的手机和竖向放置的平板之间的分辨率 */ @media (max-width: 767px) { header .logo .img-logo{ height: 1.2em; width: 1.2em; } header .logo .text-logo{ font-size: 1em; } } /* 横向放置的手机及分辨率更小的设备 */ @media (max-width: 480px) { header .logo .img-logo{ height: 1em; width: 1em; } header .logo .text-logo{ font-size: 0.8em; } }
关键点说明
1.【前提】父元素使用 display:flex;
2.【关键】为了让图片和文字在一行，需要使用display:inline-block;
3.【重点】vertical-align:middle;实现文字和图片对齐
4.【注意】我的图片，并不是一个
div里面，设置的背景；文字也用了一个div装起来的。
关键点说明
1.【前提】父元素使用 display:flex;
2.【关键】为了让图片和文字在一行，需要使用display:inline-block;
3.【重点】vertical-align:middle;实现文字和图片对齐
4.【注意】我的图片，并不是一个div里面，设置的背景；文字也用了一个div装起来的。
