为啥logo会这么大

来源:4-2 头部header区--css

福徐贵

2020-11-16 12:28:05

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

html代码

<!DOCTYPE html>

<html lang="zh-CN">


<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>响应式布局</title>

<link rel="stylesheet" href="css/base.css">

<link rel="stylesheet" href="css/grid.css">

<link rel="stylesheet" href="css/index.css">

</head>


<body>

<header class="header-container">

<div class="container">

<div class="row">

<div class="header-logo-container col-8 col-md-3">

<a href="./index.html" class="header-logo">

<img src="img/logo.svg" alt="logo">

</a>

</div>

<div class="header-btn-container col-4 d-md-none">

<button type="button" class="btn-toggle" id="btn-toggle">

<span class="btn-toggle-bar"></span>

<span class="btn-toggle-bar"></span>

<span class="btn-toggle-bar"></span>

</button>

</div>

<nav class="header-nav-container col-md-9 d-none d-md-block">

<ul class="header-nav">

<li class="header-nav-item">

<a href="###" class="header-nav-link">手机&amp;平板</a>

</li>

<li class="header-nav-item">

<a href="###" class="header-nav-link">电视&amp;影音</a>

</li>

<li class="header-nav-item">

<a href="###" class="header-nav-link">生活家电</a>

</li>

<li class="header-nav-item">

<a href="###" class="header-nav-link">电脑/办公/存储</a>

</li>

<li class="header-nav-item">

<a href="###" class="header-nav-link">网上商城</a>

</li>

</ul>

</nav>

</div>

</div>

</header>

</body>


</html>



base.css代码

* {

box-sizing: border-box;

padding: 0;

margin: 0;

}


body {

font-size: 14px;

}


li {

list-style: none;

}


a {

font-size: 14px;

color: #363636;

text-decoration: none;

}

a:hover {

color: #1428a0;

}


img {

vertical-align: top;

width: 100%;

border: none;

}


​index.css代码

/* 布局 strat */


/* header */

.header-container {

background-color: #fff;

border-bottom: 1px solid #dadada;

}

.header-logo-container,

.header-btn-container,

.header-nav-container {

height: 64px;

}

.header-btn-container {

display: flex;

justify-content: flex-end;

align-items: center;

}


/* 布局 end */


/* 组件 strat */


/* 组件 end */


/* 内容 strat */


/* 内容 end */




写回答

1回答

好帮手慕久久

2020-11-16

同学你好,因为logo图的宽度设置成了100%,它会相对于第一个有固定宽度的父元素来计算,即相对于的是

header-logo-container,所以宽度很大:

http://img.mukewang.com/climg/5fb2109f090e3bfb06050202.jpg

可以给a标签,设置一个固定宽度,让图片相对于它计算大小,如下:

http://img.mukewang.com/climg/5fb2111309d3b05c07860160.jpg
祝学习愉快!

0

0 学习 · 6815 问题

查看课程