#html #css #navigation #html5-video #selection
#HTML #css #навигация #html5-видео #выбор
Вопрос:
Привет всем, поэтому я надеюсь, что вы сможете мне помочь еще раз. У меня возникли несколько проблем с моей веб-страницей, которую я пытаюсь создать прямо сейчас. проблема в том, что я вообще не могу заставить панель навигации работать, flex-direction: row; и я не могу понять, что я делаю не так, когда пытаюсь ее вставить, и я не смог заставить ее работать. Вторая вещь, которая не работает правильно, — это три видео в контейнере в стороне, они ничего не воспроизводят, они загружают видео, затем для них ничего не появляется, не уверен, пропустил ли я шаг или что-то в этом роде. Последняя проблема, с которой я сталкиваюсь, находится в главном контейнере в разделе form_elements для предпоследнего элемента формы, который я пытаюсь сделать выпадающим списком на время в часах и минутах с 30-минутными интервалами с 10 утра до 9 вечера, и эта часть, похоже, работает, но один разЯ дал двум элементам выбора метки на каждом из них в течение нескольких часов и минут, когда он начал вести себя странно и прыгнул в верхнюю часть моей формы, и снова я не знаю, почему он так себя ведет. Если бы вы, ребята, могли помочь понять, почему это происходит и как их исправить, я был бы очень признателен.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment 3</title>
<meta name="description" content="This is the assignment 3 web page showcasing what we have learned in COMP1223 the so far.">
<meta name="keywords" content="Assignment 3, HTML5, CSS, flexbox, grid, form, image mapping, position fixed, nav">
<meta name="author" content="Jessica">
<link href="test2.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Sansita Swashed:wght@300amp;display=swap" rel="stylesheet">
<link href="normalize.css" rel="stylesheet">
</head>
<body>
<div class="grid-container">
<!--Create the navigation menu for the page inside the header-->
<div class="grid_item" id="grid_nav_container">
<header class="grid_nav_item" id="nav_menu">
<nav>
<ul>
<li>
<a href="#intro">Introduction</a>
</li>
<li>
<a href="#aside_container">Hobbies</a>
</li>
<li>
<a href="#application">Application Form</a>
</li>
<li>
<a href="#form_elements">Form Elements</a>
</li>
<li>
<a href="#tutorial">Video Tutorial</a>
</li>
<li>
<a href="#image_mapping">Image Mapping</a>
</li>
</ul>
</nav>
</header>
</div>
<!--Create the header for the greeting and introduction along with a link to the tutorial video.-->
<div class="grid_item" id="intro">
<br>
<br>
<h1>Welcome to my assignment 3 web page</h1>
<p>Hello welcome to my page I hope you enjoy taking a look around and seeing some of the things I have learned this semester put into action. On this page you will see examples of background-image, application forms,HTML5 videos, HTML5 forms
elements, grid, flexbox, image-mapping and a short tutorial video by me covering..... Click on the link below if you’d like to start with that tutorial on....</p>
<br>
<p><a href="#tutorial" id="t_link">Watch the ......tutorial </a></p>
</div>
<!--Create an aside to hold my hobbies videos-->
<aside class="grid_item" id="aside_container">
<div class="grid_aside_item" id="dogs">
<h3>My Hobbies</h3>
<h4>Playing with my dogs</h4>
<video width="500" height="300" controls>
<source src="/public_html/labs/assignment/assignment3/videos/VID_20180423_185827.mp4" type="video/mp4">
Video of me playing with my dog. Your browser does not support the video tag
</video>
</div>
<div class="grid_aside_item" id="snowboarding">
<br>
<h4>Snowboarding</h4>
<video width="500" height="300" controls>
<source src="/public_html/labs/assignment/assignment3/videos/pexels-justin-l-5526230.mp4" type="video/mp4">
Video of snowboarding. Your browser does not support the video tag.
</video>
</div>
<div class="grid_aside_item" id="gaming">
<br>
<h4>Gaming</h4>
<video width="500" height="300" controls>
<source src="/public_html/labs/assignment/assignment3/videos/production ID_4151217.mp4" type="video/mp4">
Video of someone gaming. Your browser does not support the video tag.
</video>
</div>
</aside>
<!-- Use main as a 2nd grid container for the application form and form element grid cells-->
<main class="grid_item" id="main_container">
<!--Create section containing application form-->
<section class="grid-main-item" id="application">
<form method="get">
<fieldset>
<legend>Application Form</legend>
<table>
<tr>
<th><label for="fname">Full Name:</label></th>
<td><input type="text" id="fname" name="fname" size="40" required></td>>
</tr>
<tr>
<th><label for="email">Email:</label></th>
<td><input type="email" id="email" name="email" size="30" required></td>
</tr>
<tr>
<th><label for="gender">Gender:</label></th>
<td>
<input type="radio" id="gender" name="gender" value="male">Male
<input type="radio" id="gender" name="gender" value="female">Female
<input type="radio" id="gender" name="gender" value="other">Other
</td>
</tr>
<tr>
<th><label for="skills">Skills:</label></th>
<td>
<input type="checkbox" id="skills" name="skills" value="bash">BASH
<input type="checkbox" id="skills" name="skills" value="htmlamp;css">HTMLamp;CSS
<input type="checkbox" id="skills" name="skills" value="c ">C
<input type="checkbox" id="skills" name="skills" value="javascript">JavaScript
</td>
</tr>
<tr>
<th><label for="post">Post Applying For:</label></th>
<td>
<input type="radio" id="post" name="post" value="jrdeveloper" required>Jr.Developer
<input type="radio" id="post" name="post" value="softwaredeveloper" required>Software Developer
<input type="radio" id="post" name="post" value="teamleader" required>Team Leader
<input type="radio" id="post" name="post" value="projectmanager" required>Project Manager
</td>
</tr>
<tr>
<th><label for="résumé">Upload Résumé:</label></th>
<td>
<input type="file" id="résumé" name="résumé" accept=".doc, .docx, .pdf">
</td>
</tr>
<tr>
<th><label for="type_résumé">Paste Your Résumé</label></th>
<td>
<textarea id="type_résumé" name="type_résumé" rows="5" cols="50"></textarea>
</td>
</tr>
<tr>
<th><label for="notify_me"></label></th>
<td>
<input type="checkbox" name="notify_me" id="notify_me" value="notify">Notify me of status via email
</td>
</tr>
<tr>
<th><label for="terms"></label></th>
<td><input type="radio" name="terms" id="terms" value="terms" required>I agree to the terms amp; conditions</td>
</tr>
<tr>
<td><button type="submit" value="Submit">Submit</button></td>
<td><button type="reset" value="Reset">Reset</button></td>
</tr>
</table>
</fieldset>
</form>
</section>
<!--Create a section to contain form elements -->
<section class="grid_main_item" id="form_elements">
<form>
<fieldset>
<legend>HTML5 Form Elements</legend>
<table>
<tr>
<th><label for="title">Title:</label></th>
<td><input type="text" list="titles" size="42" required placeholder="Please select an option or enter your own." />
<datalist id="titles">
<option>Mr.</option>
<option>Mrs.</option>
<option>Miss</option>
<option>Sir</option>
</datalist>
</td>
<th class="req">*</th>
</tr>
<tr>
<th><label for="name">Name:</label></th>
<td><input type="text" name="name" id="name" size="40" required pattern="[A-Za-Z]{40}" placeholder="John Doe" </td>
<th class="req">*</th>
</tr>
<tr>
<th><label for="tel">Phone Number:</label></th>
<td><input type="tel" name="tel" id="tel" pattern="[0-9]" placeholder="647-123-4156"></td>
<th>(optional)</th>
</tr>
<tr>
<th><label for="email">Email:</label></th>
<td><input type="email" name="email" id="email" size="25" placeholder="john.doe@example.com" pattern="[a-z0-9._% -] @[a-z0-9.-] .[a-z]{2,}$" </td>
</tr>
<tr>
<th><label for="website">Your Website:</label></th>
<td><input type="url" name="website" id="website" pattern="https?://. " placeholder="https://www.example.com"></td>
<th>(optional)</th>
</tr>
<tr>
<th><label for="nr_items">Nr. of items to order</label></th>
<td><select name="nr_items" id="nr_items" required>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</td>
<th class="req">*</th>
</tr>
<tr>
<th><label for="length">Length</label></th>
<td><input type="range" name="length" id="length" min="0" max="100" step="10" required></td>
<th class="req">*</th>
</tr>
<tr>
<th><label for="delivdate">Delivery Date</label></th>
<td><input type="date" name="delivdate" id="delivdate" min="2020-12-16"></td>
</tr>
<tr>
<th><label for="delivtime">Choose A Delivery Time:</label></th>
<label for="hr">hr</label>
<select name="delivtime" id="hr">
<option>10</option>
<option>11</option>
<option>12</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
<label for="minute">min</label>
<select name="delivtime" id="min">
<option>30</option>
<option>00</option>
</select>
<th>Delivery window 10am-9pm</th>
</tr>
<tr>
<th><label for="itemcolour">Item Colour:</label></th>
<td><input type="color" name="itemcolour" id="itemcolour" value="#FF0000" </td>
</tr>
</table>
</fieldset>
</form>
</section>
</main>
<article class="grid_item" id="tutorial">
<h3>Flexbox 5 Minute Tutorial</h3>
<iframe src="" height="300" width="500" title="Iframe Example"></iframe>
</article>
<footer class="grid_item" id="image_mapping">
<img src="C:/Users/jessi/Desktop/images/youtuber-2838945_1920.jpg" alt="Home desk" usemap="#imgmap">
<map name="imgmap">
<area shape="rect" coords="566,204,1262,884" href="https://en.wikipedia.org/wiki/Computer">
<area shape="circle" coords="170,432,70" href="https://en.wikipedia.org/wiki/Lens">
<area shape="circle" coords="418,258,72" href="https://en.wikipedia.org/wiki/Coffee">
<area shape="rect" coords="1346,686,1570,892" href="https://en.wikipedia.org/wiki/Camera">
<area shape="rect" coords="1360,452,1681,638" href="https://en.wikipedia.org/wiki/https://en.wikipedia.org/wiki/Pouch">
<area shape="rect" coords="1856,648,1832,924" href="https://en.wikipedia.org/wiki/Pen">
<area shape="rect" coords="1634,648,1832,924" href="https://en.wikipedia.org/wiki/Paper">
<area shape="circle" coords="1446,258,106" href="https://en.wikipedia.org/wiki/Plant">
<area shape="poly" coords="138,7336,376,516,410,544,200,746,478,668,546,906,474,948,242,1020,158,762" href="https://en.wikipedia.org/wiki/Clapperboard">
</map>
</footer>
</div>
</body>
</html>
CSS
body {
margin: 0;
background-color: #000000;
}
.grid-container {
display: grid;
grid-template-areas: "navc navc navc" "int int int" "as . ." "as ar ma" ". . ma" "im im im";
grid-template-rows: 150px, repeat(5, 500px);
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 50px;
grid-column-gap: 50px;
padding: 10px;
margin: 0;
max-width: 100%;
}
#intro {
font-size: 185%;
grid-area: int;
background-image: url('C:/Users/jessi/Desktop/images/coding-1841550_1920.jpg');
color: #BFFCF9;
margin: 0px;
;
text-align: center;
}
#tutorial {
grid-area: ar;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
background-color: #FFF3FA;
border-radius: 75px;
padding: 20px;
width: 1fr;
height: 1fr;
padding-bottom: 50px;
}
#image_mapping {
grid-area: im;
}
#main_container {
grid-area: ma;
display: grid;
grid-template-areas: "app" "frm";
grid-template-rows: 500px 500px;
grid-template-columns: 1fr;
grid-row-gap: 50px;
text-align: center;
}
#application {
grid-area: app;
font-size: 90%;
background-color: #D3FBD8;
border-radius: 75px;
padding: 20px;
width: 1fr;
height: 1fr;
padding-top: 50px;
}
#form_elements {
grid-area: frm;
font-size: 100%;
background-color: #ED5E93;
border-radius: 75px;
padding: 20px;
width: 1fr;
height: 1fr;
padding-top: 50px;
}
#aside_container {
grid-area: as;
display: grid;
grid-template-areas: "dog" "snwbrd" "gmng";
grid-template-rows: repeat(3, 500px);
grid-template-columns: 1fr;
text-align: center;
grid-row-gap: 50px;
}
#dogs {
grid-area: dog;
background-color: #ED5E93;
border-radius: 75px;
padding: 20px;
width: 1fr;
height: 1fr;
}
#snowboarding {
grid-area: snwbrd;
background-color: #D3FBD8;
border-radius: 75px;
padding: 20px;
width: 1fr;
height: 1fr;
}
#gaming {
grid-area: gmng;
background-color: #ED5E93;
border-radius: 75px;
padding: 20px;
width: 1fr;
height: 1fr;
}
#req {
color: #ff0000;
}
#grid_nav_container {
grid-area: navc;
display: grid;
grid-template-rows: 150px;
grid-template-columns: 1fr;
grid-template-areas: "nav nav nav";
}
#nav_menu {
grid-area: nav;
background-color: #00C9C8;
color: #000000;
border-radius: 75px;
padding: 20px;
width: 1fr;
height: 1fr;
display:flex
}
#nav_menu a {
text-decoration: none;
flex-direction: row;
}
Комментарии:
1. Если вашей учетной записи более 3 лет, вы уже должны знать, что нужно сосредоточиться только на одном вопросе для каждого вопроса.
2. Извините, учетная запись старая, но она активно публиковалась только последние несколько месяцев, пока я учился в школе. Я пытался научить себя программировать и все такое, но никогда не мог найти достаточно времени, чтобы сосредоточиться на этом. сейчас я в школе, и это то, что я делаю почти каждый день, поэтому я публикую здесь гораздо больше вопросов. Я не думал о том, что ограничение на один вопрос больше не повторится.
Ответ №1:
Смотрите Этот пример из mozilla.org работает:
<video controls
src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
width="620">
Sorry, your browser doesn't support embedded videos,
but don't worry, you can <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
and watch it with your favorite video player!
</video>
Если вы видите сообщение типа «Не найдено видео с совместимым форматом и MIME«
проблема не в вашем коде, а в том, что ваш сервер не возвращает правильный mime-тип или видеофайл
см. раздел Правильная настройка типов MIME сервера
Комментарии:
1. Нет, я не получаю эту ошибку. И приведенный выше пример не сработал, я переместил src изнутри внутрь
<source><video>, как у них есть выше, и ничего. Вначале я получаю колесо загрузки, затем оно просто черное, а элементы управления не выбираются.2. можете дать мне ссылку на эту страницу сайта? чтобы увидеть
3. У меня он еще не запущен на сервере. Нужно загрузить его в мою школу, когда я его закончу. Но для этого сервера требуется информация для входа
4. убедитесь, что файл mp4 существует и что к нему можно получить доступ с помощью браузера, затем убедитесь, что сервер возвращает правильный тип mime