如何使我的网站具有响应性--表格文本相互连接。
如何使我的网站具有响应性--表格文本相互连接。
提问于 2019-01-22 11:06:52
我一直在努力与我的网站，当涉及到它的反应。我有一个div部分，其中包含一个表(很棒的客户端)，当我缩小浏览器时，文本就会放在另一个表上。只发生在那部分，所以我需要你的帮助。我试着使用媒体查询，但我仍然找不出答案。有人能告诉我如何让一切都有反应吗？
P.S 我也需要帮助标题部分，并使它响应，所以如果有人有想法，让我知道。
body {
margin: 0;
padding: 0;
background: radial-gradient(80% 40%, white, #cccccc);
}
header{
overflow: hidden;
height: 450px;
display: block;
margin: 0;
}
nav {
width: 100%;
height: 50px;
background-color: rgba(192,192,192,0.3);
margin: auto;
}
.wtf {
padding-right: 50px;
position: relative;
bottom: 3px;
}
#logo {
float: left;
color: white;
font-family: 'Concert One', cursive;
padding-left: 20px;
}
p {
margin: 0;
padding: 0;
text-align: center;
}
p.highlight {
margin: 0;
position: relative;
bottom: 7px;
cursor: pointer;
}
.learnMore {
width: 13%;
margin: 0 auto;
cursor: pointer;
}
.learnMore h3:hover {
background-color: #ddd;
color: black;
}
.learnMore h3 {
border: 1px solid white;
padding: 5% 15%;
}
ul {
float:right;
}
li {
display: inline;
padding: 0 10px 0 10px;
text-align: center;
}
a {
text-decoration: none;
color: white;
font-size: 21px;
margin: 0 0 3px 0;
font-family: 'Montserrat', sans-serif;
text-align: center;
}
li a:hover {
background-color: #ddd;
color: black;
}
.image {
background-image: url('nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg');
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
font-family: 'Montserrat', sans-serif;
}
.main p,h1,h3 {
text-align: center;
position: relative;
}
.main h1 {
top: 100px;
font-size: 50px;
}
.main h3 {
top: 90px;
}
.main p {
top: 90px;
left: 210px;
text-align: center;
font-size: 20px;
}
.img1 {
width: 210px;
height: 210px;
filter: opacity(50%);
padding-left: 10px;
}
.img2 {
width: 220px;
height: 220px;
filter: opacity(50%);
padding-right: 10px;
}
.smallimg {
width: 50px;
height: 50px;
border: 3px solid black;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
padding: 3px;
color: black;
}
table {
margin: 35px 27% 35px 27%;
padding-bottom: 15px;
padding-top: 15px;
border-spacing: 15px;
}
.table1 {
margin: 10px 26% 10px 26%;
border-spacing: 5px;
}
td {
color: #595959;
font-size: 15px;
font-family: 'Montserrat', sans-serif;
text-align: center;
}
.theading {
font-size: 40px;
font-family: 'Yatra One', cursive;
text-align: left;
}
.theading2 {
font-size: 40px;
font-family: 'Yatra One', cursive;
text-align: right;
}
.alfaromeo {
font-family: 'Rubik', sans-serif;
font-size: 15px;
text-align: center;
}
.opinions {
width: 100%;
height: 450px;
background-color: rgba(255, 148, 77, 0.5);
}
.opinions h3 {
color: snow;
text-align: center;
}
.clients h1 {
margin-top: 50px;
padding-top: 40px;
text-align: center;
font-size: 35px;
font-family: 'Montserrat', sans-serif;
text-shadow: 1px 1px 3px #000000;
color: snow;
}
.clients h3 {
text-align: center;
bottom: 10px;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
}
.person1 {
width: 100px;
height: 100px;
border: 1px solid grey;
border-radius: 100%;
margin-right: 20px;
color: snow;
overflow: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}
.person2 {
width: 100px;
height: 100px;
border: 1px solid grey;
border-radius: 100%;
margin-right: 20px;
color: snow;
overflow: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
}
.clientsTable {
margin: 35px 27% 35px 27%;
position: relative;
padding-bottom: 5px;
}
.sayHello {
width: 100%;
height: 620px;
background-color: #99ccff;
}
.sayHello div {
margin: 0px 27% 0px 27%;
padding-top: 40px;
}
.sayHello p {
padding-top: 40px;
color: snow;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
}
.sayHello h3 {
color: snow;
font-family: 'Montserrat', sans-serif;
font-size: 20px;
width: 65%;
text-align: left;
float: left;
}
.sayHello table {
float: left;
border-spacing: 20px;
color: snow;
position: relative;
bottom: 20px;
overflow: hidden;
}
.sayHelloTable img {
width: 30px;
height: 30px;
border: 2px solid black;
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
padding: 3px;
background-color: snow;
}
.sayHelloTable td {
color: snow;
}
.contactForm {
border-radius: 7px;
background-color: snow;
padding: 20px;
float: right;
width: 200px;
height: 300px;
position: absolute;
left: 650px;
}
form {
width: 180px;
height: 350px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
margin-top: 6px;
margin-bottom: 16px;
resize: none;
}
label {
font: normal 12px 'Montserrat', sans-serif !important;
}
footer {
position: absolute;
color: white;
text-align: center;
width: 100%;
height: 50px;
background-color: rgba(153, 204, 255, 0.8);
border-top: 1px solid snow;
}
.copyright {
font-size: 20px;
font-family: 'Concert One', cursive;
text-align: center;
margin: 0px 27% 0px 27%;
padding-top: 10px;
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
.clientsTable {
width: 60%;
margin: 0 auto;
position: relative;
padding-bottom: 20%
}
.opinions {
width: 100%;
height: 450px;
margin: 0 auto;
position: relative;
}
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
.clientsTable td {
width: 60%;
margin: 0 auto;
padding-bottom: 20%
}
}
/* Landscape phones nad portrait tablets*/
@media (max-width: 767px) {
.clientsTable {
width: 60%;
margin: 0 auto;
padding-bottom: 20%
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Упражнение</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" integrity="sha384-+0VIRx+yz1WBcCTXBkVQYIBVNEFH1eP6Zknm16roZCyeNg2maWEpk/l/KsyFKs7G" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/fontawesome.css" integrity="sha384-jLuaxTTBR42U2qJ/pm4JRouHkEDHkVqH0T1nyQXn1mZ7Snycpf6Rl25VBNthU4z0" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Yatra+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
</head>
<body>
<header>
<div class="image">
<nav>
<div id="logo">
<h1><p class="highlight">A|Developing</p></h1>
</div>
<div class="wtf">
<ul>
<li class="current">
<a href="#">Home</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Clients</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="main">
<p>Can you build the website of my dreams?</p>
<h1>YUP, WE CAN DO THAT.</h1>
<section class="learnMore"><h3>Learn More</h3></section>
</div>
</div>
</header>
<table align="center">
<tr>
<td class="theading"><font color="black">Web <b>Development</b></font></td>
</tr>
<tr>
<td style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin. Pellentesque posuere iaculis neque, sit amet convallis neque convallis quis.
<br><br><br>
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
<td><img class="img1" src="search.png" width="150" height="150" align="right"></td>
</tr>
</table>
<table align="center" class="table1">
<tr>
<td class="theading2" colspan="2"><font color="black">Identity <b>Branding</b></font></td>
</tr>
<tr>
<td><img class="img2" src="wireless-connection-free-technology-icons-174546.png" width="150" height="150" align="right"></td>
<td style="text-align: right;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin. Pellentesque posuer e iaculis neque, sit amet convallis neque convallis quis.
<br><br><br>
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
</tr>
<br><br>
</table>
<table>
<tr>
<td rowspan="2"><img class="smallimg" src="businessman.png"></td>
<td class="alfaromeo"><b>Branding & Identity</b></td>
<td rowspan="2"><img class="smallimg" src="un-anniversaire-assez-remarqu--dans-le-monde-du-web-celui-des-20-ans--16.png"></td>
<td class="alfaromeo"><b>Web & Graphic Design</b></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</tr>
<tr>
<td rowspan="2"><img class="smallimg" src="Mobile-Smartphone-Tablet-icon.png"></td>
<td class="alfaromeo"><b>Mobile App Development</b></td>
<td rowspan="2"><img class="smallimg" src="005399d32e87304799aa0f1ae8f47159.png"></td>
<td class="alfaromeo"><b>Animations</b></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</tr>
<tr>
<td rowspan="2"><img class="smallimg" src="star-png-star-png-image-2156.png"></td>
<td class="alfaromeo"><b>UI/UX</b></td>
<td rowspan="2"><img class="smallimg" src="black-camera-logo-icon-download-4.png"></td>
<td class="alfaromeo"><b>Photography</b></td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</tr>
</table>
<div class="opinions">
<div class="clients">
<h1>Awesome</font> <b>Clients</b></h1>
<h3>See some nice things our clients said about us.</h3>
</div>
<table class="clientsTable" style="height: 50%;">
<tr>
<td style="width: 20%"><img class="person1" src="v9Y4ptj.jpg"></td>
<td style="width: 60%"><font color="snow">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</font></td>
</tr>
<tr>
<td colspan="2" style="width: 60%"><font color="snow">Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Aenean nec ullamcorper nisi, a sodales lorem.</font></td>
<td style="width: 20%"><img class="person2" src="Mityo-Pishtova-01.jpg"></td>
</tr>
</table>
</div>
<div class="sayHello">
<div>
<p>Say <b>Hello</b></p>
<br>
<h3>Don't be shy, drop us an e-mail and say hello! We are a really nice
bunch of people. :)</h3>
</div>
<table class="sayHelloTable">
<tr>
<td><img src="phone.png"></td>
<td>(416)555-0000</td>
<td><img src="e-mail-logo.png"></td>
<td>hello@adeveloping.com</td>
</tr>
<tr>
<td><img src="twitter.png"></td>
<td>@NAKATA</td>
<td><img src="facebook.png"></td>
<td>@NAKATA</td>
</tr>
<tr>
<td><img src="80-google-plus-512.png"></td>
<td>naskuuu123@gmail.com</td>
<td><img src="pinterest-logo-E994F3A9FB-seeklogo.com.png"></td>
<td>/NAKATA</td>
</tr>
</table>
<div class="contactForm">
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:50px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
<footer>
<p class="copyright">© 2019 Made by Atanas Ivanov ♦ A|Developing</p>
</footer>
</body>
</html>
回答 3
Stack Overflow用户
发布于 2019-01-22 11:42:41
我已经查过你的代码了，我想我已经解决了你的问题。在style.css中添加下面的代码，如果您面临任何问题，请在下面评论它。
.main p { display: inline-block;}Stack Overflow用户
发布于 2019-01-22 15:54:59
nav {
padding:0 10px;
width: 100%;
height: 50px;
background-color: rgba(192,192,192,0.3);
margin: auto;
display: flex;
float: left;
justify-content: space-between;
align-items: center;
}在这里，我制作了标题/主JSFiddle的版本
我希望这能让你对如何使元素做出反应有一定的了解。这个例子只是一种方法。
Stack Overflow用户
发布于 2019-01-22 16:13:55
上面的一些帖子会解决你遇到的一些布局问题，但是如果你想真正学会如何正确地制作响应性网站(而不仅仅是填补这个网站的几个漏洞)，那么在做任何其他事情之前，你都应该停止对表格数据以外的任何东西使用tables。您似乎将上面的table标记用于一般布局目的，这实际上限制了网站的总体适应性、可维护性和优化性。
要创建网格布局，您应该使用div标记和CSS而不是表，这样：
<table>
<tr>
<td>This is a grid item</td>
<td>This is another one!</td>
</tr>
</table>变成：
<div class="column">
<div class="row">This is a grid item</div>
<div class="row">This is another one!</div>
</div>并在CSS中添加如下内容：
@media (min-width: 768px) {
.column {
display: grid;
grid-template-columns: 1fr 1fr;
}
}或者，如果您需要支持旧的浏览器，您可以使用float行而不是使用css float: left/right声明。所有的常绿浏览器都支持CSS grid声明，但完全不支持IE11或更低的浏览器(IE10-11有一些支持，但它是错误的)。
当然，您可以使用CSS进行table折叠，如下所示：
@media (max-width: 767px) {
table {
display: block;
}
}但这与它相关的问题很多(特别是在优化屏幕阅读器技术时)，以及各种浏览器中的一些But。
简单地说，不要使用表格来进行布局--只将它们用于数据表(如配料表)。这是你能做的最大的优化，让你的网站真正响应。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54306924
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号