1
私は初心者です。私は家具についてのウェブサイトをデザインしています。しかし、私はCSSとブートストラップにいくつかの問題に直面しています。彼らは矛盾していると思う。 いくつかの内容と写真を含む表をデザインしたいと思います。彼らは別のページのこのウェブサイトを導くことができます。私はベストを尽くそうとしましたが、彼らは働きません。私のプログラムは良くないかもしれません。この不便をおかけして申し訳ありません！。テーブルの作り方を教えていただけますか？感謝万円。私はcss、html、ブートストラップに関するいくつかの問題に直面します
@charset "utf-8";
/* CSS Document */
*{
\t margin: 0;
\t padding: 0;
\t box-sizing: border-box;
}
body{
\t font-family: Arial;
\t background-color: darkgrey;
\t
}
.topnav{
\t position: relative;
\t margin: 0 auto;
\t z-index: 1;
}
.topnav .content{
\t position: absolute;
\t top: 0;
\t background: rgba(0,0,0,0.5);
\t width: 100%;
\t color: #f1f1f1;
\t padding: 20px;
\t animation-duration: 0s;
}
.topnav a{
\t float:left;
\t display: inline-block;
\t color: white;
\t text-align: center;
\t padding: 15px 15px;
\t text-decoration: none;
\t font-size: 14px;
\t margin-left: 150px;
\t
}
.topnav a:hover{
\t background-color: white;
\t color: white;
\t background: rgba(0,0,0,0.5);
}
.topnav .search-container{
\t float: right;
\t margin-right: 120px;
}
.topnav input[type=text]{
\t padding: 6px;
\t margin-top: 8px;
\t font-size: 15px;
\t border: 2px solid ghostwhite;
}
.topnav .search-container button{
\t float: right;
\t padding: 6px 10px;
\t margin-top: 8px;
\t background-color: white;
\t border: none;
\t cursor: pointer;
}
.top .search-container button:hover{
\t background-color: white;
\t color: black;
}
@media screen and (max-width: 600px){
\t .topnav .search-container {
\t \t float: none;
\t }
}
.topnav a, .top input[type=text], .topnav .search-container button {
\t float: none;
\t display: inline-block;
\t text-align: left;
\t margin: 0px;
\t padding: 14px;
}
.topnav input[type=text]{
\t border: 2px solid ghostwhite;
}
.topnav .logo{
\t float: left;
\t width: 70px;
\t height: 45px;
\t margin-right: 10px;
}
.mySlides {
\t display: none;
\t max-width: 100%;
\t
}
.slideshow-container {
\t max-width: 100%;
\t position: relative;
\t margin: 0px;
\t background-size: cover;
\t background-repeat: no-repeat;
\t background-position: center;
\t height: 100%;
}
.text{
\t color: white;
\t font-size: 50px;
\t position: absolute;
\t text-align: center;
\t
}
.hero-text{
\t text-align: center;
\t position:absolute;
\t top: 50%;
\t left: 50%;
\t color: white;
\t transform: translate(-50%, -50%);
\t background: rgb(0,0,0,0.3);
\t background-color: black;
\t opacity: 0.4;
\t z-index: 1;
}
.fade {
\t -webkit-animation-name: fade;
\t -webkit-animation-duration: 2.69s;
\t animation-name: fade;
\t animation-duration: 2.69s;
}
@-webkit-keyframes fade{
\t from{opacity: 0.5}
\t to{opacity: 1}
}
@keyframes fade{
\t from {opacity: 0.5}
\t to{opacity: 1}
}
@media only screen and (max-width: 320px){
\t .text {font-size: 30px;}
}
.container {
\t position: relative;
\t font-family: Arial;
}
.button{
\t
\t color: white;
\t background-color: black;
\t cursor: pointer;
\t display: block;
\t fontsize: 20px;
\t font-weight: 400;
\t line-height: 45px;
\t margin: 2px auto 2em;
\t max-width: 160px;
\t position: relative;
\t text-decoration: none;
\t text-transform: uppercase;
\t vertical-align: middle;
\t letter-spacing: 0;
\t box-shadow: 3px 3px 1px;
}
.button:hover,
.button:active {
\t letter-spacing: 5px;
} \t
.button:after,
.button:before{
backface-visibility: hidden;
border: 1px solid white;
bottom: 0px;
content: " ";
display: block;
margin: 0 auto;
position: relative;
transition: all 280ms ease-in-out;
width: 0;
}
.button:hover:after,
.button:hover:before{
\t backface-visibility: hidden;
\t border-color: white;
transition: width 350ms ease-in-out;
width: 70%;
}
.button :hover:before{
\t bottom: auto;
\t top: 0;
\t width: 70%;
}
.dropdown{
\t float: left;
\t overflow: hidden;
}
.dropdown .dropbtn{
\t font-size: 14px;
\t border: none;
\t outline: none;
\t color: white;
\t padding: 14px 16px;
\t background: rgba(0,0,0,0.5);
}
.topnav a:hover, .dropdown: hover .dropbtn{
\t background-color: white;
\t color: black;
}
.dropdown-content{
\t display: none;
\t position: absolute;
\t background-color: #f9f9f9;
\t width: 100%;
\t left: 0;
}
.dropdown: hover .dropdown-content{
\t display: block;
}
.contain {
\t position:relative;
\t width: 50%;
}
.image{
\t opacity: 1;
\t display: block;
\t width: 90%;
\t height: auto;
\t transition: .5s ease;
\t backface-visibility: hidden;
\t margin-top: -30px;
\t border: 2px solid black;
\t box-shadow: 3px 3px 1px;
}
.middle{
\t transition: .5s ease;
\t opacity: 0.5;
\t position: absolute;
\t top: 50%;
\t left: 33%;
\t -ms-transform: translate(-50%, -50%);
\t transform: translate(-50%, -50%);
}
.contain:hover .image{
\t opacity: 0.3;
}
.contain:hover .image{
\t opacity: 1;
}
.text-con{
\t background-color: black;
\t color: white;
\t font-size: 16px;
\t padding: 16px 32px; \t
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Quality Furnitures</title>
</head>
<body>
<div class="topnav">
\t \t \t <div class="content">
\t \t \t \t <img class="logo" src="image.css/logo.jpg">
\t \t \t \t <a href="#">HOME</a>
\t \t \t \t <a href="#">PRODUCTION</a>
<a href="#">PROJECTS</a>
\t \t \t \t <a href="#">CONTACTS</a>
\t <div class="search-container">
\t \t <input type="text" placeholder="Search..." name="search">
\t \t <buttton type="submit"><i class="fa fa-search"></i></buttton>
\t </div>
\t </div>
</div>
<div class="slideshow-container">
\t <div class="hero-text">
<h3 style="font-size: 60px"><u>Style.Luxury.Design</u></h3>
\t \t \t \t <br>
\t \t \t \t <button class="button"><strong>SHOP NOW</strong></button>
\t \t \t \t <button class="button"><strong>EXPLORE NOW</strong></button>
\t </div>
\t \t <div class="mySlides fade">
\t \t \t <div class="container">
\t \t \t \t <img src="image.css/161122_14_59_10_5DS_7049.0.jpg" style="width:100%; height:70%">
\t \t \t </div>
\t \t </div>
\t \t <div class="mySlides fade">
\t \t \t <div class="container">
\t \t \t \t <img src="image.css/top-interior-design-furniture-stores-home-decoration-ideas-designing-luxury-at-interior-design-furniture-stores-interior-design-ideas.jpg" style="width:100%; height:70%">
\t \t \t </div>
\t \t </div>
\t \t <div class="mySlides fade">
\t \t \t <div class="container">
\t \t \t <img src="image.css/luxury-furnature-stores-with-top-online-furniture-stores.jpg" style="width:100%; height: 70%">
\t \t \t </div>
\t \t </div>
\t </div>
<script>
\t var slideIndex;
\t function showSlides(){
\t \t var i;
\t \t var slides=document.getElementsByClassName("mySlides");
\t \t for (i=0; i<slides.length; i++){
\t \t \t slides[i].style.display ="none";
\t \t }
\t \t slides[slideIndex].style.display ="block";
\t \t slideIndex++;
\t \t if (slideIndex > slides.length -1){
\t \t \t slideIndex = 0;
\t \t }
\t \t setTimeout(showSlides, 5000);
\t }
\t showSlides(slideIndex =0);
\t function currentSlide(n){
\t \t showSlides(slideIndex = n);
\t }
</script>
<div class="row">
\t <div class="col-md-4">
\t \t <div class="thumbnail">
\t \t \t <div class="contain">
\t \t \t \t <img src="image.css/22staged1-master768.jpg" style="width:90%" class="image">
\t \t \t \t <br>
\t \t \t \t <div class="middle">
\t \t \t \t \t <div class="text-con">
\t \t \t \t \t \t <h2>Living Room</h2>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <button class="button">SEE MORE</button>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div> \t \t
\t
\t <div class="col-md-4">
\t \t <div class="thumbnail">
\t \t \t <div class="contain">
\t \t \t \t <img src="image.css/eva_br.jpg" style="width:90%" class="image">
\t \t \t \t <div class="middle">
\t \t \t \t \t <div class="text-con">
\t \t \t \t \t \t <h2>BedRoom</h2>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <button class="button">SEE MORE</button>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="col-md-4">
\t \t <div class="thumnail">
\t \t \t <div class="contain">
\t \t \t \t \t <img src="image.css/bathroom.jpg" style="width: 90%" class="image">
\t \t \t \t \t <div class="middle">
\t \t \t \t \t \t <div class="text-con">
\t \t \t \t \t \t \t <h2>BathRoom</h2>
\t \t \t \t \t \t \t <br>
\t \t \t \t \t \t \t <button class="button">SEE MORE</button>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t </div>
\t \t </div>
\t </div> \t
</div>
</body>
</html>
私はそれを得ました。どうもありがとうございます –
問題はありません！ –