0
私は自分のウェブサイトにブートストラップカルーセルを実装することにしました。コードはW3Schools websiteから取得しました。私のウェブサイトでスライドショーを適用する方法を説明しました。私のウェブサイトのアップ要素。ブートストラップカルーセルスライドショーがウェブサイトの要素とコンテンツをぼやけます
例では、Webサイトでスライドショーを適用すると、フォントの太さが太字になっていても、Merriweatherセリフのフォントが以前より軽くなります。これは私のリンクにも起こります。
もう1つは、フッターとナビゲーションバーの幅が広がることです。
私はこの問題についてより詳しく調べようとしましたが、同様の問題を抱えている人はいませんでした。ここで
WITHOUT私のウェブサイトの画像は、ブートストラップカルーセルスライドショーコードです：それはインタラクティビティを追加するため
私は本当に私のウェブサイトは、ブートストラップ、カルーセルのスライドショーを持っていると思いますが、同時にI私のコンテンツと要素が大幅に変化しないようにしてください。
この問題の解決に役立つご支援をいただければ幸いです。
これは、CSSとHTML（あなたが効果を確認したい場合は、ブートストラップカルーセルスライドショーは私のウェブサイト上の要素と内容にあり、以下のコードを実行する）
html,
body {
background-color: #09018a;
}
#container {
width: 1200px;
height: 1300px;
border: 3px solid #ffbd1e;
background-color: #FFFFFF;
position: absolute;
left: 140px;
top: 8px;
}
#nav {
width: 1200px;
height: 75px;
font-size: 1.5em;
font-weight: bold;
text-align: center;
background-color: #d7001f;
position: absolute;
top: 250px;
}
#footer {
width: 1200px;
height: 100px;
position: relative;
background-color: #d7001f;
top: 570px;
font-family: 'Merriweather', serif;
}
#footer a:hover {
color: rgb(0, 0, 255);
font-weight: bold;
}
#myCarousel {
width: 400px;
height: 300px;
position: absolute;
top: 450px;
left: 750px;
padding: 10px;
margin: 30px;
z-index: 3;
border: 3px solid #000000;
}
header img {
position: relative;
left: 500px;
}
#nav li {
display: inline;
font-family: 'Merriweather', serif;
}
#nav a {
text-decoration: none;
}
#nav a:link {
display: inline-block;
width: 200px;
color: #5c3205;
border-radius: 8px;
box-shadow: 1px 1px 2px 2px #f26522;
background-color: #e79806;
text-shadow: 3px 2px 3px #aaa;
position: relative;
top: 20px;
left: 5px;
}
#nav a:hover {
color: #ff0000;
}
#nav a:visited {
color: #5c3205;
}
p {
font-size: 18px;
}
h3 {
font-size: 15px;
}
h4 {
font-size: 15px;
font-style: italic;
}
.story1 {
width: 700px;
height: 600px;
position: relative;
left: 50px;
top: 300px;
padding: 5px;
font-family: 'Merriweather', serif;
font-weight: bold;
}
.story3 {
width: 450px;
height: 200px;
position: absolute;
right: 700px;
top: 900px;
margin-top: 20px;
font-family: 'Merriweather', serif;
font-weight: bold;
}
.story3 li {
margin-bottom: 15px;
font-size: 18px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Course Outline</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Testing.css" type="text/css">
</head>
<body>
<div id="container">
<header>
</header>
<div id="nav">
</div>
<div class="story1">
<h1>Computer Science at Tawa College</h1>
<h2>DITCS101</h2>
<p>In DITCS101 you will learn programming languages such as Python, CSS3, HTML5 and Scratch, you will also learn to use Webflow to design your website without any coding. You will be tested on these programming languages by means of doing various assesments
like using Python to construct a basic computer program for a specified task and using Notepad++ to make a prototype (like a website) to address a brief.
</p>
<h2>DITCS201</h2>
<p>In DITCS201 your knowledge of programming languages like Python, CSS3, HTML5 will be expanded and you will be taught new techniques and features that you will be utilising in various assesments. You will also be taught PHP which is a server-side
scripting language designed for web development and also MYSQL which is the world's second most used relational database management system.
</p>
<h2>DITCS301</h2>
<p>In DITCS301, your knowledge of Python, CSS3, HTML5, PHP and MYSQL will be further expanded for you to use in various assesments as well as learning JQUERY to create animations for websites.
</p>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/Person1.jpg" alt="Masterchief">
</div>
<div class="item">
<img src="images/Person2.jpg" alt="Tuna pasta bake">
</div>
<div class="item">
<img src="images/Person3.jpg" alt="Chickpea and tomato curry">
</div>
<div class="item">
<img src="images/Person4.jpg" alt="Asian beef and noodle salad">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<h2>Bootstrap Carousel Slideshow</h2>
</div>
<div class="story3">
<h2>Course booklets on E2Learn</h2>
<ul>
<li><a href="http://e2learn.school.nz/pluginfile.php/22162/mod_resource/content/0/2016%20-%20DITCS101.pdf">DITCS101 2016</a>
</li>
<li><a href="http://e2learn.school.nz/pluginfile.php/22163/mod_resource/content/0/2016%20-%20DITCS201.pdf">DITCS201 2016</a>
</li>
<li><a href="http://e2learn.school.nz/pluginfile.php/22164/mod_resource/content/0/2016%20-%20DITCS301.pdf">DITCS301 2016</a>
</li>
</ul>
</div>
<div id="footer">
<h4>Website logo by Kyle Josef, used under <a href="http://creativecommons.org/licenses/by/2.0/">CC BY</a> /Forward slash,less than sign and shield outline resized. Shield outline colour changed to yellow.
\t \t \t </h4>
</div>
</div>
</body>
</html>