[Итоговое задание на веб-страницу] Используйте HTML+CSS, чтобы создать красивый и простой официальный сайт школы.
✍️ Об авторе: Технический блоггер, который любит превращать логическое мышление в код. 💂 Домашняя страница автора: 【Домашняя страница——🚀Получите больше исходных кодов высокого качества]
🎓 Итоговое домашнее задание по веб-интерфейсу: 【📚Изысканные практические кейсы дипломных проектов (1000 комплектов) 】
🧡 Интересные способы для программистов признаться：【💌Создание HTML-страницы с признанием ко Дню святого Валентина в Китае (110 комплектов) 】
🌎супер крутоEchartsИсходный код визуализации на большом экране：【🔰 Большой экран echarts отображает визуализацию платформы больших данных (150 комплектов) 】
🎁 Бесплатное и практическое руководство по обучению веб-интерфейсу: 【📂Видеоуроки по изучению веб-интерфейса с нуля до продвинутого уровня. Обмен сухой информацией 120G]
🥇 Об авторе: он работал инженером по исследованиям и разработкам, руководителем технической группы и директором по обучению. Дважды в 2016 и 2020 годах он выигрывал десятку лучших блог-звезд года CSDN; Десять лет льда едва ли могут охладить горячую кровь; прошло много лет, все изменилось, изменились люди. Однако исследование и стремление к технологиям никогда не прекращаются. 💪Настаивайте на оригинальности, стремитесь делиться, оставайтесь верными первоначальному замыслу и продолжайте опираться на прошлое!
1. 👨🎓Название сайта
🏫 Веб-дизайн кампуса, создание веб-страниц школьных классов, официальный веб-сайт школы, новые книги и другой дизайн и производство веб-сайтов.
<hr>
2. ✍️Описание сайта
🏷️Задание по статическому веб-дизайну HTML выполнено с использованием Dreamweaver с использованием макета DIV+CSS. На домашней странице используется CSS для более насыщенного макета с яркими и насыщенными цветами. Цвет фона верхней области навигации и нижней области составляет 100 % ширины, а ширина основной области содержимого –
🏅 В комплект качественного 💯 веб-дизайна должен входить (специфику можно определить по личным требованиям)
- Страница разделена на четыре части: заголовок, панель навигации по меню (желательно раскрывающееся), средний раздел контента и нижний колонтитул.
- Все страницы связаны между собой гиперссылками, ведущими на страницы третьего уровня, состоящие из 5-10 страниц.
- Единый макет стиля страницы отображается нормально и не загроможден, с использованием технологии Div+Css.
- Меню красивое и привлекательное, а вторичное меню может нормально всплывать и переходить.
- Требуются специальные эффекты JS, такие как переключение по расписанию и ручное переключение каруселей изображений.
- На странице присутствуют мультимедийные элементы, такие как gif, видео, музыка, а также использование технологии форм.
- Страница свежая, красивая, щедрая и разная. .
- Мы должны не только иметь возможность предоставлять контент, запрашиваемый пользователями,,Это также должно быть хорошо продумано、Красивый интерфейс、Элегантная цветовая гамма、Разнообразные формы выражения и другие требования。<hr>
3. 📚Представление сайта
📔Вёрстка сайта:Планируется принять нынешнее основное направление、Совместимость со всеми основными браузерами、Отображение стабильной плавающей структуры макета веб-страницы.
📓Процедуры на сайте:Планируйте внедрение новейших языков веб-программирования.HTML5+CSS3+JSЯзык программирования завершает функциональный дизайн сайта.。и убедитеськод сайт совместим со всеми основными браузерами, представленными в настоящее время на рынке, и обеспечивает эффект просмотра веб-сайта сразу после его открытия.
📘Материалы сайта:Планируйте собирать красивые фотоматериалы со всех основных платформ.,И тщательно выбирайте изображения, соответствующие стилю веб-страницы.,Затем используйте PS, чтобы сделать изображения, подходящие по размеру веб-странице.
📒Файлы сайта:Типы системных файлов веб-сайта включают в себя：htmlФайл структуры веб-страницы、CSS-файл стиля веб-страницы、Файл спецэффектов веб-страницы js、файлы изображений веб-страниц изображений;
📙Редактирование веб-страницы:Рабочий код веб-страницы прост,Можно использовать любойHTMLпрограммное обеспечение для редактирования（нравиться：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ Подождите, пока запустится любое программное обеспечение для редактирования HTML, измените его и т. д.).
в:
(1) Файл 📜html содержит: index.html — домашнюю страницу, а остальные HTML — второстепенные страницы;
(2) 📑 Файл css содержит: css все стили страницы, прокрутку текста, усиление изображения и т. д.;
(3) 📄 Файл js включает в себя: js для реализации динамических эффектов карусели, отправки форм, событий кликов и т. д. (код js используется на отдельных веб-страницах).
4. 🌐Демонстрация сайта
<hr>
5. ⚙️Код сайта
🧱HTML-код структуры
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/js.js" type="text/javascript" ></script>
<title>Колледж столетия Пекинского университета почты и телекоммуникаций</title>
</head>
<style>
.wai {
position: relative;
}
.chuang {
position: absolute;
background-color: rgba(240, 248, 255, 0.259);
width: 100px;
top: 70px;
display: none;
}
</style>
<body>
<div id="heard">
<div class="heard_top">
<a href="#">EN</a>
<a href="#">китайский</a>
<a href="#">зарегистрироваться</a>
<a href="#">Авторизоваться</a>
</div>
<div class="heard_bottom">
<div class="logo">
<img src="picture/logo.png" alt="">
</div>
<div class="title_list">
<a href="#" id="dangqian">первая страница</a>
<div class="wai">
<a href="#">быстрый путь</a>
<div class="chuang">
<a href="">Партийно-строительная работа.</a>
<a href="">Идеологическое и политическое образование</a>
<a href="">Преподавание естественных наук и исследования</a>
<a href="">Групповое обучение онлайн</a>
<a href="">Прием и трудоустройство</a>
<a href="">Книжная интеллектуальная платформа</a>
</div>
</div>
<div class="wai">
<a href="#">Управление по академическим вопросам</a>
<div class="chuang">
<a href="">важные документы</a>
<a href="">Важные события</a>
</div>
</div>
<div class="wai">
<a href="#">фото кампуса</a>
<div class="chuang">
<a href="">Иллюстрированный век</a>
<a href="">аудиовизуальный век</a>
</div>
</div>
<div class="wai">
<a href="#">Связаться с нами</a>
<div class="chuang">
<a href="">Телефонсписок</a>
<a href="">Карта расположения школы</a>
<a href="">карта кампуса</a>
</div>
</div>
</div>
</div>
</div>
<!-- Изображение карусели начинается -->
<div id="boxhdp">
<ul id="img">
<li class="current">
<img src="picture/11.jpg">
</li>
<li>
<img src="picture/22.jpg"></li>
<li>
<img src="picture/33.jpg"></li>
</ul>
<ul id="li">
<li class="on"></li>
<li></li>
<li></li>
</ul>
<div style="clear: both;"></div>
<div class="an" id="an">
<a href="javascript:;" id="prev">
<img src="http://www.ylcp.shop/files/files/1650802251646/images/l.png" alt="">
</a>
<a href="javascript:;" id="next" class="an-a2">
<img src="http://www.ylcp.shop/files/files/1650802251646/images/r.png" alt="">
</a>
</div>
</div>
<!-- Конец карусели -->
<div class="biaoti">
<p>Профиль школы</p>
<img src="picture/shudian_xuexiao.png" alt="">
</div>
<div class="aboutwe">
<div class="aboutwe_left">
<img src="picture/school.jpg" alt="">
</div>
<div class="aboutwe_right">
<p>Колледж столетия Пекинского университета почты и телекоммуникаций</p>
<p>Мингде вдохновляет и применяет то, чему научился.</p>
<div class="clear">
<div class="cleartop"></div>
<div class="clearbottom"></div>
</div>
<p>Колледж столетия Пекинского университета почты и телекоммуникаций — это общеобразовательный университет с дневным обучением, утвержденный Министерством образования.。 2005Год4луна,В феврале 2008 г. Министерство образования согласилось создать колледж Century Пекинского университета почты и телекоммуникаций;,Быть официально признанным и одобренным для участия в IELTS（IELTS）Глобальная система признания（GRS）</p>
<div class="liaojie">узнать больше</div>
</div>
</div>
<div class="biaoti">
<p>новости кампуса</p>
<img src="picture/xinwenzixun.png" alt="">
</div>
<div class="aboutwe">
<div class="aboutwe_left_two">
<img src="picture/stu.jpg" alt="">
</div>
<div class="aboutwe_right_two">
<ul>
<li>колледж2021-2022学Год图书馆图书采购项目中标公告
</li>
<li>Профилактика и контроль эпидемий,В ходе надзора и проверки
<img src="picture/gengduo.png" alt="">
</li>
<li>колледж2021-2022学Год图书馆图书采购项目Уведомление о тендере
<img src="picture/gengduo.png" alt="">
</li>
<li>о2021Год国庆节放假安排的通知
<img src="picture/gengduo.png" alt="">
</li>
<li>Советы по безопасности на летних каникулах
<img src="picture/gengduo.png" alt="">
</li>
<li>колледж行知楼技防建设项目流标公告
<img src="picture/gengduo.png" alt="">
</li>
<li>колледж学生公寓消防建设项目中标公告
<img src="picture/gengduo.png" alt="">
</li>
</ul>
</div>
</div>
<div class="biaoti">
<p id="mao">быстрый путь</p>
<img src="picture/ly_kuaisutongdao.png" alt="">
</div>
<div class="aboutwe">
<ul class="kuaisulist">
<li>
<img src="picture/dangjian-2.png" alt="">
<p>Партийно-строительная работа.</p>
</li>
<li>
<img src="picture/dangjian_dangzhangdanggui.png" alt="">
<p>Идеологическое и политическое образование</p>
</li>
<li>
<img src="picture/w_jiaoxue.png" alt="">
<p>научные исследования</p>
</li>
<li>
<img src="picture/tuanxuequantidahui.png" alt="">
<p>Групповое обучение онлайн</p>
</li>
<li>
<img src="picture/zhaoshengkuaixun-2.png" alt="">
<p>Прием и трудоустройство</p>
</li>
<li>
<img src="picture/shudian_xuexiao.png" alt="">
<p>Книжная интеллектуальная платформа</p>
</li>
<li>
<img src="picture/xinwenzixun.png" alt="">
<p>Единый информационный портал</p>
</li>
<li>
<img src="picture/shenfenrenzheng.png" alt="">
<p>Единая аутентификация личности</p>
</li>
<li>
<img src="picture/zhaorencai.png" alt="">
<p>Представление талантов</p>
</li>
<li>
<img src="picture/zhaobiaobiangeng.png" alt="">
<p>Уведомление о тендере</p>
</li>
</ul>
</div>
<div class="movies">
<img class="imgbottom" src="picture/wallhaven-6opwjq_2560x1080.png" alt="">
<div class="movies_text">
<p class="text1">Мин Де、вдохновляющий</p>
<p class="text2">Учиться усердно、Для использования </p>
<div id="lijiguankan" class="liaojie">Смотреть сейчас</div>
</div>
</div>
<div id="footer" style="margin-top: 85px;">
<div class="footerin">
<div class="schoo">
<ul style="position: relative;top: 75px;">
<li>Колледж столетия Пекинского университета почты и телекоммуникаций
<div class="clearlists">
<div class="claone"></div>
<div class="clatwo"></div>
</div>
</li>
<li>Контактный адрес：Город Канчжуан, уезд Яньцин, город Пекин</li>
<li>Почтовый индекс：102101</li>
<li></li>
</ul>
</div>
<div class="footer_left">
<div class="footer_left_one onelist">
<ul>
<li>Быстрые ссылки
<div class="clearlists">
</div>
</li>
<li>Строительство национальных образцовых высших профессиональных колледжей</li>
<li>Государственный бюджет и окончательные отчеты</li>
<li>Министерство образования Китайской Народной Республики</li>
<li>Китайская сеть высшего профессионального и высшего образования</li>
</ul>
</div>
<div class="footer_left_one">
<ul id="lianxiwomen">
<li>Связаться с нами
<div class="clearlists">
</div>
</li>
<li>
<img src="picture/weixin.png" alt=""> Вичат
</li>
<li>
<img src="picture/QQ.png" alt=""> QQ
</li>
<li>
<img src="picture/weibo.png" alt=""> Вейбо
</li>
<li>
<img src="picture/shouye.png" alt=""> Телефон
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="gundong">
<marquee id="laba" behavior="scroll" direction="">
<p>更多信息请Связаться с нами</p>
</marquee>
</div>
</body>
<script>
var moni = document.getElementsByClassName('wai')
var moni1 = document.getElementsByClassName('chuang')
for (let i = 0; i < moni.length; i++) {
moni[i].onmouseover = function() {
console.log(123);
moni1[i].style.display = 'block'
}
moni[i].onmouseout = function() {
console.log(123);
moni1[i].style.display = 'none'
}
}
let a = document.getElementsByClassName('liaojie')[0];
a.onmouseover = function() {
let x = 0
a.style.backgroundImage = "linear-gradient(to right, #413757 5% , #C6B9E9)"
clearInterval(x)
let time = 5
x = setInterval(function() {
time = time + 1.5
if (time >= 100) {
clearInterval(x)
} else {
a.style.backgroundImage = `linear-gradient(to right, #413757 ${time}% , #C6B9E9)`
}
}, 0.01)
}
a.onmouseout = function() {
let y = 0
clearInterval(y)
let time = 100
y = setInterval(function() {
time = time - 1.5
if (time <= 5) {
clearInterval(y)
} else {
a.style.backgroundImage = `linear-gradient(to right, #413757 ${time}% , #C6B9E9)`
}
}, 0.01)
}
let xxx = document.getElementsByClassName('liaojie')[1];
xxx.onmouseover = function() {
let x = 0
xxx.style.backgroundImage = "linear-gradient(to right, #413757 5% , #C6B9E9)"
clearInterval(x)
let time = 5
x = setInterval(function() {
time = time + 1.5
if (time >= 100) {
clearInterval(x)
} else {
xxx.style.backgroundImage = `linear-gradient(to right, #413757 ${time}% , #C6B9E9)`
}
}, 0.01)
}
xxx.onmouseout = function() {
let y = 0
clearInterval(y)
let time = 100
y = setInterval(function() {
time = time - 1.5
if (time <= 5) {
clearInterval(y)
} else {
xxx.style.backgroundImage = `linear-gradient(to right, #413757 ${time}% , #C6B9E9)`
}
}, 0.01)
}
function watchWindowSize() {
undefined
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
if (w <= 1000) {
document.getElementsByClassName('imgbottom')[0].style.height = "400px"
} else {
document.getElementsByClassName('imgbottom')[0].style.height = "auto"
}
}
window.addEventListener("resize", watchWindowSize);
watchWindowSize();
hdp({
li: "li", //Значение по умолчанию: li; по умолчанию обернуто li;
boxid: "boxhdp", //самый внешний элемент div id
imgid: "img", //Идентификатор вне картинки
optid: "li", //выбираем внешний идентификатор
an: "an", //Идентификаторы левой и правой кнопок, используемые для перемещения вверх, чтобы показать и скрыть
prev: "prev", //идентификатор стрелки влево
next: "next", //идентификатор стрелки вправо
ms: 4000 //Сколько миллисекунд переключать один,
})
</script>
</html>💒Код стиля CSS
.banner {
width: 1000px;
margin: 0 auto;
}
.banner img {
width: 1000px;
margin-top: 100px;
}
.aboutwe {
position: relative;
width: 1000px;
margin: 0 auto;
margin-top: 20px;
display: flex;
}
.aboutwe_left {
width: 400px;
height: 400px;
background-color: sandybrown;
margin-left: 70px;
overflow: hidden;
}
.aboutwe_left img {
width: 400px;
}
.aboutwe_left img:hover {
width: 420px;
margin-left: -10px;
margin-top: -10px;
}
.aboutwe_right {
height: 400px;
width: 400px;
margin-left: 60px;
}
.aboutwe_right p:nth-child(1) {
font-size: 20px;
height: 30px;
width: 200px;
line-height: 30px;
color: #999999;
margin-top: 20px;
}
.aboutwe_right p:nth-child(2) {
font-size: 50px;
height: 100px;
width: 400px;
line-height: 100px;
margin-top: 30px;
background-image: -webkit-linear-gradient(bottom, rgb(255, 255, 255), #ae95e3, #413757);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.clear {
height: 4px;
width: 100%;
display: flex;
}
.cleartop {
width: 100px;
height: 4px;
background-color: #413757;
}
.clearbottom {
height: 1px;
width: 300px;
background-color: #C6B9E9;
margin-top: 3px;
}
.aboutwe_right p:nth-child(4) {
color: #999999;
margin-top: 50px;
font-size: 15px;
}
.liaojie {
height: 50px;
width: 200px;
/* background: -webkit-linear-gradient(right,rgb(255, 255, 255),#ae95e3,#413757); */
background-image: linear-gradient(to right, #413757 5%, #C6B9E9);
line-height: 50px;
text-align: center;
color: #fff;
margin-top: 30px;
}
.biaoti {
position: relative;
height: 100px;
width: 1000px;
margin: 0 auto;
margin-top: 70px;
}
.biaoti p {
text-align: center;
font-size: 35px;
color: #413757;
}
.biaoti img {
display: block;
height: 30px;
width: 30px;
margin: 0 auto;
margin-top: 10px;
}
.aboutwe_left_two {
width: 400px;
height: 270px;
background-color: sandybrown;
margin-left: 70px;
overflow: hidden;
}
.aboutwe_left_two img {
width: 400px;
}
.aboutwe_left_two img:hover {
width: 420px;
margin-left: -10px;
margin-top: -10px;
}
.aboutwe_right_two {
height: 270px;
width: 400px;
margin-left: 60px;
}
.aboutwe_right_two ul li {
height: 35px;
width: 100%;
list-style: none;
}
.aboutwe_right_two ul li:nth-child(1) {
height: 55px;
width: 100%;
line-height: 60px;
list-style: none;
}
.aboutwe_right_two ul li:not(:first-child) {
font-size: 14px;
height: 35px;
width: 100%;
line-height: 35px;
list-style: none;
color: #626262;
border-bottom: 1px solid #999999;
position: relative;
}
.aboutwe_right_two ul li:not(:first-child) img {
height: 17px;
top: 9px;
position: absolute;
right: 0px;
}
.aboutwe_right_two ul li:not(:first-child):hover {
background-color: #413757;
color: #fff;
}
.kuaisulist {
width: 1000px;
display: flex;
list-style: none;
}
.kuaisulist li {
width: 100px;
height: 100px;
/* background-color: aqua; */
text-align: center;
line-height: 30px;
font-size: 13px;
}
.kuaisulist li:hover {
background-color: #C6B9E9;
color: #fff;
}
.kuaisulist li img {
width: 60px;
}
.movies {
width: 100%;
height: 400px;
position: relative;
overflow: hidden;
margin-top: 50px;
}
.imgbottom {
width: 100%;
position: absolute;
z-index: -99999;
top: 0px;
left: 0px;
}
.movies_text {
position: relative;
width: 900px;
height: 370px;
margin: 0 auto;
padding-top: 30px;
padding-left: 50px;
padding-right: 50px;
}
.text1 {
height: 60px;
width: 200px;
font-size: 40px;
line-height: 60px;
color: #fff;
border-left: 5px solid #fff;
padding-left: 20px;
}
.text2 {
height: 60px;
width: 200px;
font-size: 40px;
line-height: 60px;
color: #fff;
border-left: 5px solid #fff;
padding-left: 20px;
margin-left: 100px;
}
#lijiguankan {
position: absolute;
bottom: 60px;
right: 50px;
}<hr>
6. 🥇 Как сделать обучение не слепым
Первый、Учиться с целями,Будь то чтение книг, газет, занятия или различные офлайн-мероприятия.
Прежде всего, вы должны уточнить, каковы ваши цели обучения, какие проблемы вы хотите решить и каких целей вы хотите достичь.
второй、Обучение требует создания системы личных знаний.
Существует бесконечное количество знаний, которые можно изучить, и существует так много книг. Когда мы наслаждаемся этим, мы не должны тонуть в морской воде и терять себя. В процессе обучения мы обнаружим, что каждая точка знаний имеет свои границы и основу. Мы должны уметь обобщать и организовывать знания.
третий、Как только вы это выучите, используйте это
Иногда мы чувствуем, что в конце дня мы многому научились, поэтому мы должны связать эти знания с реальной работой и жизнью. Знания и практика тесно связаны друг с другом. Любить учиться — это хорошо, но ценны только те, кто умеет учиться.
💂【Как получить】
хранилище исходного кода облака кода gitee-Welcome Star: https://gitee.com/zhanyuqiu2022/my-app
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
Идеальная интеграция Cursor и DeepSeek API
DeepSeek V3 снижает затраты на обучение больших моделей
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
Cloud Native｜Практика: установка Dashbaord для K8s, графика неплохая
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
Центр конфигурации————Накос
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
[Зона легкого облачного игрового сервера] Управление игровыми архивами
