HTML新手 - 视频和表格干扰 [英] HTML novice - video and table interfering
问题描述
<！DOCTYPE html>我不擅长解释这种病，只是让你们看看自己。
< html>
< head>
< style>
* {font-family：Arial，Helvetica，sans-serif;}
body {margin：0;}
$ b ul {
list- style-type：none;
保证金：0;
padding：0;
overflow：hidden;
背景颜色：＃333;
位置：固定;
top：0;
宽度：100％;
}
li {
float：left;
border-right：1px solid #bbb;
li：last-child {border-right：none;}
li a {
display：block;
padding：14px 16px;
颜色：白色;
text-align：center;
text-decoration：none;
}
li a：hover：not（.active）{
background-color：＃111;
}
.active {
background-color：＃808080;
border：1px纯黑色;
}
table，td，th {border：1px solid black;}
table {
border-collapse：collapse;
宽度：50％;
}
th {
text-align：center;
height：25px;
颜色：白色;
背景颜色：＃808080;
}
tr：hover {background-color：＃f5f5f5}
td {text-align：left;}
th ，td {
padding：15px;
text-align：left;
border-bottom：1px solid #ddd;
}
< / style>
< / head>
< body>
< ul>
< li>< a href =＃home\home.html>主页< / a>< / li>
< li>< a href =＃profile \profile.html>个人资料< / a>< / li>
< li>< a href =＃about>关于< / a>< / li>
< li>< a href =＃matches>匹配< / a>< / li>
< li>< a href =＃highlights>亮点< / a>< / li>
< li>< a href =＃setup>安装< / a>< / li>
< li>< a href =＃shop>商店< / a>< / li>
< li style =float：right>< a class =activehref =＃contact>联络< / a>< / li>
< / ul>< br>
< hr>
< video width =200height500autoplay loop>
< source src =promo.mp4type =video / mp4
< / video>
< hr>< br>
< div style =overflow-x：auto;>
< table align =right>
< tr>
< th>名称< / th>
th Birth< th>
国籍< / th>
< th>团队< / th>
< th>角色< / th>
< th> Rank< / th>
赢得总奖金< / th>
Game（s）< / th>
过去的团队< / th>
< / tr>
< tr>
< td> qwerty< / td>
< td> wqert< / td>
< td> wqer< / td>
< td> wqer< / td>
< td> qwer< / td>
< td> qwer< / td>
< td> qwer< / td>
< td> qwer< / td>
< td> qwer< / td>
< / tr>
< / table>
< / div>
< / body>
< / html>
我相信很多新手在预期的错误，不要太苛刻:)
我意识到视频不会出现在您的终端，但也许使用您自己的随机mp4？
谢谢不管。
我将您的代码转换为下面的小提琴来试用。 b
$ b
https://jsfiddle.net/fmmnsw04/1/
$ b 更新：而不是水平线<
< div> 代替，因为您可以更好地控制边距，颜色和宽度等外观。 我认为导致布局问题的一种风格是ul的位置：fixed;
I更新小提琴，使视频和表格并排出现。下面是演示该需求解决方案的部分：
.datawrapper {
display：table;
宽度：100％;
border-top：2px纯黑色;
border-bottom：2px纯黑色;
margin：10px 0;
}
.videodata，
.tabledata {
float：left;
vertical-align：bottom;
}
.videodata {
width：40％;
}
.videodata video {
vertical-align：bottom;
}
.tabledata {
width：60％;
overflow-x：auto;
}
< div class =datawrapper>
< div class =videodata>
< video width =100％controls =controls>
< source src =https://www.w3schools.com/html/mov_bbb.mp4type =video / mp4>
< source src =https://www.w3schools.com/html/mov_bbb.oggtype =video / ogg>您的
浏览器不支持HTML5视频。
< / video>
< / div>
< div class =tabledata>
< table>
< / table>
< / div>
< / div>
So im making my very first website for myself. I want a mp4 video with a table just off to the right hand side of the video. I've got them each working seperately but dont work together.
i.e when the video code is in place the table just disapears. Im not good at explaining this so ill just let you guys have a look for yourself.
<!DOCTYPE html>
<html>
<head>
<style>
*{font-family: Arial, Helvetica, sans-serif;}
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li:last-child {border-right: none;}
li a {
display: block;
padding: 14px 16px;
color: white;
text-align: center;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #808080;
border: 1px solid black;
}
table, td, th {border: 1px solid black;}
table {
border-collapse: collapse;
width: 50%;
}
th {
text-align: center;
height: 25px;
color:white;
background-color: #808080;
}
tr:hover {background-color: #f5f5f5}
td{text-align: left;}
th, td {
padding:15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home\home.html">Home</a></li>
<li><a href="#profile\profile.html">Profile</a></li>
<li><a href="#about">About</a></li>
<li><a href="#matches">Matches</a></li>
<li><a href="#highlights">Highlights</a></li>
<li><a href="#setup">Setup</a></li>
<li><a href="#shop">Shop</a></li>
<li style="float:right"><a class="active" href="#contact">Contact</a></li>
</ul><br>
<hr>
<video width="200" height"500" autoplay loop>
<source src="promo.mp4" type="video/mp4"
</video>
<hr><br>
<div style="overflow-x:auto;">
<table align="right">
<tr>
<th>Name</th>
<th>Birth</th>
<th>Nationality</th>
<th>Team</th>
<th>Role</th>
<th>Rank</th>
<th>Total Winnings</th>
<th>Game(s)</th>
<th>Past Teams</th>
</tr>
<tr>
<td>qwerty</td>
<td>wqert</td>
<td>wqer</td>
<td>wqer</td>
<td>qwer</td>
<td>qwer</td>
<td>qwer</td>
<td>qwer</td>
<td>qwer</td>
</tr>
</table>
</div>
</body>
</html>
Im sure theres alot of rookie mistakes in there which is expected, dont be too harsh :) I realise that the video wont show up on your end but maybe use a random mp4 of your own? Thanks regardless.
I transformed your code into the fiddle below to try it out.
https://jsfiddle.net/fmmnsw04/1/
UPDATE: Rather than a horizontal rule <hr /> tag I would use a <div> with a top and bottom border instead because you'll have better control over appearance like margins, colors, and widths.
I think one of one of the styles that was contributing to the layout problems was that the ul had position:fixed;
I updated the fiddle so the video and table appear side by side. Here is the portion that demonstrates a solution for that requirement:
.datawrapper {
display: table;
width: 100%;
border-top: 2px solid black;
border-bottom: 2px solid black;
margin: 10px 0;
}
.videodata,
.tabledata {
float: left;
vertical-align: bottom;
}
.videodata {
width: 40%;
}
.videodata video {
vertical-align: bottom;
}
.tabledata {
width: 60%;
overflow-x: auto;
}
<div class="datawrapper">
<div class="videodata">
<video width="100%" controls="controls">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> Your
browser does not support HTML5 video.
</video>
</div>
<div class="tabledata">
<table>
</table>
</div>
</div>
这篇关于HTML新手 - 视频和表格干扰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
