同事们下午好!需要一些新手提示,即。大部头书。
现在我正在解析着陆页的结构。
我从一个站点下载了一个Landing page示例模板,有两个问题我看不懂:
为什么在原来的logo.png(200 部分)网站的边缘周围没有白色边框,而保存的冰箱
*.png
在格式中也有白色边框,与原始格式一样。是什么原因?当屏幕缩小时,顶部菜单究竟是如何消失的,取而代之的是出现一个带有 3 个条的按钮,其中包含一个下拉菜单。
我查看嵌套的responsive.css,它基本上减少了文本和按钮。并且下拉按钮的代码不包含在其中。我在哪里可以找到这个按钮?在 CSS 文件中还是在 JS 文件中?
这是下拉按钮代码:
<div class="container-fluid nav-bar">
<div class="navbar-header"> // код выпадающей кнопки
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html"><img src="img/logo.png" alt="" class="img-responsive logo"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> // код верхнего меню
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Домой</a></li>
<li><a href="#features">Функции</a></li>
<li><a href="#about">Описание</a></li>
<li><a href="#testimonials">Отзывы</a></li>
<li><a href="#pricing">Цены</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</div>
这是responsive.css代码:
@media (min-width: 480px) and (max-width: 767px) {
.banner h3 {
font-size: 11px;
margin-top: 105px;
}
.banner h1 {
font-size: 25px;
}
.banner p {
font-size: 14px;
margin-top: 17px;
}
.download-btn {
width: 130px;
height: 40px;
font-size: 12px;
margin-top: 30px;
}
.features-btn {
width: 130px;
height: 40px;
font-size: 12px;
margin-top: 30px;
}
h2 {
font-size: 25px;
margin-bottom: 20px;
}
.contact {
height: 900px;
}
h4 {
font-size: 12px;
margin-top: 40px;
}
.features p {
font-size: 15px;
margin-bottom: 40px;
}
.features h3 {
font-size: 20px;
}
.details p {
font-size: 14px;
margin: 20px 0;
}
.details ul li {
font-size: 14px;
}
.feature-detail h4 {
margin-top: 50px;
}
.feature-detail p {
font-size: 13px;
margin-top: 10px;
}
.pricing-slide p {
font-size: 16px;
margin-top: 35px;
margin-bottom: 20px;
}
.item h6 {
font-size: 13px;
}
.item h5 {
font-size: 12px;
}
.item img {
margin-bottom: 95px;
}
.download p {
font-size: 24px;
padding: 30px 0;
}
.download button{
margin-top: 0;
margin-bottom: 20px;
}
.contact p {
font-size: 14px;
}
.contact-heading img {
margin-bottom: 25px;
}
我在哪里可以找到这个按钮?- 在 HTML 中:
icon-bar
- 这些只是相同的 3 条纹风格化.css
。但是功能(按下时,菜单打开)是使用.js
.出现在手机上消失在桌面上——适应性,在
.css
以下设计/风格中实现:本次登陆的布局是使用框架-bootstrap进行的
您可以在htmlbook上阅读和理解布局、适应性等更多信息