创建 index.html 和 script.js，连接，安装 RxJS
npm install rxjs
但是当尝试导入 Observables 时
import { Observable } from 'rxjs';
在控制台中弹出以下错误
连接 typed.js 库时出现问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Typed.js test</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
</head>
<body>
<div id="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
和js
$('document').ready(function() {
import Typed from 'typed.js-2.0.9';
var options = {
strings: ["<i>First</i> sentence.", "& a second sentence."],
typeSpeed: 40
}
var typed = new Typed("#typed", options);
});
以下是弹出的错误
这是存储所有文件的文件夹
给定以下代码
var cities = {
barcelona: {
name: "Barcelona",
color: "#F75C03",
image: "barcelona.jpeg",
description: `
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.
Nisl pretium fusce id velit. Tellus mauris a diam maecenas sed enim ut sem.
Auctor urna nunc id cursus metus aliquam eleifend. Habitasse platea dictumst quisque sagittis purus.
Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque sit.
Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris.
Ipsum nunc aliquet bibendum enim. Id neque aliquam vestibulum morbi.
Vitae purus faucibus ornare suspendisse sed nisi lacus sed.
Pulvinar neque laoreet suspendisse interdum consectetur libero id faucibus.
`
},
paris: {
name: "Paris",
color: "#73D8F4",
image: "paris.jpeg",
description: `
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quam pellentesque nec nam aliquam. Sagittis vitae et leo duis ut diam quam nulla.
Commodo elit at imperdiet dui accumsan sit.
Ac ut consequat semper viverra. At erat pellentesque adipiscing commodo elit at imperdiet dui.
Faucibus nisl tincidunt eget nullam non nisi est. Condimentum lacinia quis vel eros.
Nullam eget felis eget nunc. Dictum at tempor commodo ullamcorper a lacus vestibulum.
Ornare suspendisse sed nisi lacus. Eget est lorem ipsum dolor sit amet consectetur adipiscing elit.
Id diam vel quam elementum pulvinar etiam non quam. Sed libero enim sed faucibus turpis in eu.
Tempor commodo ullamcorper a lacus vestibulum sed arcu non.
`
},
rome: {
name: "Rome",
color: "#8E001C",
image: "rome.jpeg",
description: `
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Orci porta non pulvinar neque laoreet suspendisse interdum consectetur.
Enim nec dui nunc mattis.
Dictumst quisque sagittis purus sit amet volutpat consequat.
Tortor vitae purus faucibus ornare suspendisse sed nisi lacus.
Turpis cursus in hac habitasse platea dictumst quisque sagittis.
Et ligula ullamcorper malesuada proin. Donec massa sapien faucibus et.
Sapien pellentesque habitant morbi tristique. A diam sollicitudin tempor id eu nisl.
Proin sagittis nisl rhoncus mattis rhoncus. Mauris a diam maecenas sed enim ut.
Sed elementum tempus egestas sed sed risus.
Auctor augue mauris augue neque gravida in fermentum et sollicitudin.
`
},
london: {
name: "London",
color: "#1F487E",
image: "london.jpeg",
description: `
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Id porta nibh venenatis cras sed felis eget velit aliquet.
Aliquam ultrices sagittis orci a scelerisque purus.
Mauris pharetra et ultrices neque ornare aenean euismod elementum.
Commodo nulla facilisi nullam vehicula ipsum a arcu.
Volutpat ac tincidunt vitae semper quis lectus nulla. Purus in massa tempor nec feugiat.
Ac ut consequat semper viverra nam libero. At urna condimentum mattis pellentesque id nibh.
Maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum.
Lectus nulla at volutpat diam ut venenatis tellus in. Integer feugiat scelerisque varius morbi.
A lacus vestibulum sed arcu.
`
},
}
var header = document.querySelector("h1");
var main = document.querySelector(".main");
var img = document.querySelector("img");
var txt = document.querySelector("p");
header.textContent = cities.barcelona.name;
main.style.backgroundColor = cities.barcelona.color;
img.src = `img/${cities.barcelona.image}`;
txt.textContent = cities.barcelona.description;
如何使它在调用函数和传递参数时，程序以相同的方式工作？
function placeData( city ) {
header.textContent = toString(cities.city.name);
main.style.backgroundColor = cities.city.color;
img.src = `img/${cities.city.image}`;
txt.textContent = cities.city.description;
}
placeData("rome");
如何在 CSS 中制作重叠边框？
网站示例（导航框）。
所有元素都必须border有 2px，但由于元素彼此靠近，因此它们之间有 4px：
* {
margin: 0;
padding: 0;
}
body {
padding: 50px 100px;
background-color: #262626;
}
nav {
width: 100%;
height: 100px;
display: flex;
}
.div1,
.div3 {
flex-basis: 100px;
height: 100px;
background-color: #44B3E2;
margin: 0;
padding: 0;
flex-direction: row;
}
.div2 {
flex: 1;
height: 100px;
background-color: #5EE244;
flex-direction: row;
}
.div1,
.div2,
.div3 {
border: 2px solid white;
}
.div1:hover,
.div2:hover,
.div3:hover {
border-color: red;
}<nav>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</nav>
你好，我有以下代码：
.about-me-block {
width: auto;
height: 600px;
background-color: #CAF7E2;
padding: 0 10%;
}
.profile-block {
width: auto;
height: 300px;
background-color: #456990;
}
.profile-image {
width: 300px;
height: 300px;
background-color: #F45B69;
display: inline-block;
float: left;
}
.profile-text {
width: 200px;
height: 200px;
background-color: #E4FDE1;
display: inline-block;
}<div class="about-me-block">
<div class="profile-block">
<div class="profile-image"></div>
<div class="profile-text"></div>
</div>
</div>如何在profile-text不使用填充的情况下水平居中对齐？我尝试了帮助vertical-align，但没有奏效。
有以下代码：
footer {
width: auto;
background-color: #444;
padding: 10px;
}
.footer {
position: relative;
overflow: hidden;
height: 70px;
}
.footer ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
float: left;
height: 70px;
}
.footer ul li {
position: relative;
left: -50%;
float: left;
margin: 0 40px;
}
.footer ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-family: 'Nunito', sans-serif;
transition: color 0.3s ease-out;
text-transform: uppercase;
font-size: 16px;
}
.footer ul li a:hover {
color: #15C3DB;
}
.rightsFooter {
display: block;
text-align: center;
color: white;
font-family: 'Nunito', sans-serif;
padding-top: 10px;
font-size: 16px;
}
/* from 641px to 833px */
@media (min-width: 641px) and (max-width: 833px) {
.footer ul li a {
font-size: 13px;
}
.rightsFooter {
font-size: 13px;
}
}
/* from 401px to 640px */
@media (min-width: 401px) and (max-width: 640px) {
.footer {
padding-bottom: 57%;
}
.footer ul li {
float: none;
text-align: center;
}
.footer ul li a {
font-size: 13px;
}
.rightsFooter {
font-size: 13px;
}
}<footer>
<div class="footer">
<ul>
<li><a href="#">contact</a></li>
<li><a href="#">faq</a></li>
<li><a href="#">story</a></li>
<li><a href="#">charity</a></li>
<li><a href="#">shop</a></li>
</ul>
</div>
<p class="rightsFooter">© 2018 BlazRobar. All Rights Reserved</p>
</footer>在 640 像素ul处，它呈现水平形状，但随着屏幕进一步缩小，它会滑到下方<p class="rightsFooter">© 2018 BlazRobar. All Rights Reserved</p>
如何解决？
大家好！我正在布置布局，出现以下问题：如何将 3 个 square排成一行，以便div在background-image调整浏览器窗口大小时，它们也会改变大小，但保持正方形并排成一排？
我是这样做的，但是，当浏览器窗口发生变化时，第二张图片会在其左侧留下一个小空间。
.wrapper {
width: calc(100% / 3);
background-color: aqua;
float: left;
}
.imagesLineLINK {
padding-top: 50%;
padding-bottom: 50%;
background-color: #5B0FA1;
background-image: url(right-arrow.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 13%;
}
.bridgeIMG {
padding-top: 50%;
padding-bottom: 50%;
background-image: url(bridge.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.girlIMG {
padding-top: 50%;
padding-bottom: 50%;
background-image: url(girl.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}<div class="wrapper">
<div class="imagesLineLINK"></div>
</div>
<div class="wrapper">
<div class="bridgeIMG"></div>
</div>
<div class="wrapper">
<div class="girlIMG"></div>
</div>怎么修？还有其他选择吗？