Índice
Relatório de experimento básico de tecnologia front-end da Web
Tópico experimental: Lista para implementar navegação simples em sites
Processo experimental e resultados:
Relatório de experimento básico de tecnologia front-end da Web
Tópico experimental: Lista para implementar navegação simples em sites
Objetivo do experimento: familiarizar-se com as tags relevantes das páginas da web de implementação de lista
Conteúdo do experimento:
Projeto 1 Design de navegação simples no site
1. Visite o site http://www.hao123.com . Algumas capturas de tela da página são mostradas na Figura 1-3-4.
Figura 1-3-4 Captura de tela de alguns links do hao123
2. Use uma combinação de parágrafos ou listas não ordenadas e hiperlinks para implementar a navegação no site da Web. O efeito de página é mostrado na Figura 1-3-5.
Figura 1-3-5 Diagrama de efeitos de duas maneiras de implementar a navegação no site
3. Defina o atributo href do hiperlink e o título do hiperlink de acordo com a URL mostrada na Tabela 1-3-1.
Tabela 1-3-1 Tabela de informações do link de navegação na primeira linha da página da web
| número de série |
Nome do site |
URL |
| 1 |
Baidu |
http://www.baidu.com/ |
| 2 |
Sina |
http://www.sina.com.cn/ |
| 3 |
Tencent |
http://www.qq.com/ |
| 4 |
Sohu |
http://www.sohu.com/ |
| 5 |
NetEase |
http://www.163.com/ |
| 6 |
canção do vale |
http://www.google.com.hk/ |
4. O efeito de página quando nenhum estilo é usado é mostrado na Figura 1-3-6.
Figura 1-3-6 Página de entrada de navegação quando estilos não são usados
Projeto 2 Introdução ao curso de design para calouros
1. Programação para implementar a página de introdução do curso para calouros, o efeito é mostrado na Figura 1-3-7.
Figura 1-3-7 Página de introdução ao curso para calouros
O conteúdo correspondente do marcador usado na Figura 1-3-7 é o seguinte.
Inglês básico, inglês avançado, leituras selecionadas de jornais e periódicos, audiovisual, inglês falado, redação em inglês, teoria e prática da tradução, teoria da linguagem, introdução à linguística, história literária e leituras selecionadas de obras literárias nos principais países de língua inglesa, condições nacionais dos principais países de língua inglesa, etc.
retornar
Introdução ao Curso "Matemática Avançada" Com o rápido desenvolvimento da ciência e da tecnologia , a matemática está se tornando cada vez mais um meio e ferramenta importante para a pesquisa científica em diversas disciplinas. A matemática avançada é a base da matemática moderna . É um curso obrigatório para estudantes com especialização em ciências, economia e gestão. É também o curso mais utilizado em ciência e tecnologia modernas, gestão econômica e humanidades. Portanto, aprender bem este curso é crucial para o desenvolvimento futuro dos alunos. Este curso é o primeiro curso básico importante de matemática que os alunos aprendem depois de entrar na faculdade. Através do ensino deste curso , os alunos podem dominar as ideias e métodos para lidar com problemas matemáticos , cultivar a capacidade de pensamento científico dos alunos e estabelecer uma boa base para o estudo dos cursos subsequentes.
retornar
O curso universitário de física, que tem como conteúdo os fundamentos da física, é um importante curso básico geral e obrigatório para alunos com especialização em ciências e engenharia. Os cursos universitários de física não apenas estabelecem a base física necessária para os alunos, mas também desempenham um papel importante que não pode ser substituído por outros cursos no cultivo da visão de mundo científica dos alunos, melhorando a capacidade dos alunos de analisar e resolver problemas e cultivar o espírito de exploração dos alunos. e consciência da inovação.
retornar
Treinamento de desenvolvimento extracurricular um
1. Projete a página da Web de acordo com os seguintes requisitos, conforme mostrado na Figura 1-3-8. Os requisitos são os seguintes:
(1) O título da página é: “Exposição de Cenários de Guilin”.
Figura 1-3-8 Exposição de Cenários de Guilin
Treinamento de desenvolvimento extracurricular 2
2. Crie a página “Introdução às Universidades Famosas da China”, conforme mostrado na Figura 1-3-9.
(1) O título da página é "Introdução às Universidades Famosas da China".
(2) Insira 7 hiperlinks universitários na marca de texto de rolagem, respectivamente:
Universidade de Tsinghua ( Universidade de Tsinghua );
Universidade de Pequim ( Universidade de Pequim );
Universidade Jiao Tong de Xangai ( portal chinês da página inicial da Universidade Jiao Tong de Xangai );
Universidade Fudan ( http://www.fudan.edu.cn/index.html );
Universidade de Nanjing ( Universidade de Nanjing );
Universidade Xi'an Jiaotong ( Universidade Xi'an Jiaotong );
Instituto de Tecnologia de Harbin (http://www.hit.edu.cn/).
Figura 1-3-9 Introdução às famosas universidades da China
Processo experimental e resultados:
Projeto 1: Projete uma navegação simples no site
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>http://www.hao123.com访问网站</title>
<style type="text/css">
#d1{
margin-top: 100px;
margin-left: 250px;
border-style: solid;
border-color: rgb(158, 204, 95);
height: 245px;
width: 780px;
background: rgb(254, 254, 251);
float: inherit;
}
hr{border:1px dashed #55ff7f;width: 98%;}
p{font-family: 宋体;}
#p1{color: #33CC33;}
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: black;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
a:active {
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="d1">
<p> <a href="https://www.baidu.com/">百 度</a> <a href="https://www.sina.com.cn/">新 浪</a> <a href="https://qzone.qq.com/">腾讯·QQ空间</a> 搜 狐 <a href="http://www.netease.com/">网 易</a> <a href="http://www.google.cn/">谷 歌</a></p>
<p> 凤 凰 网 新浪微博 新 华 网 人 民 网 中国移动 CNTV</p>
<p> 人 人 网 开 心 网 赛 尔 号 汽车之家 4399游戏 太平洋电脑</p>
<hr >
<p> 东方财富 58 同 城 中 彩 网 淘 宝 网 湖南卫视 智联招聘</p>
<p> 工商银行 凡客诚品 中关村在线 苏宁易购 易 车 网 去哪儿网</p>
<p id="p1"> 京东商城 国美电器 美 团 网 卓越亚马逊 唯 品 会 世纪佳缘</p>
</div>
</body>
</html>
captura de tela:
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网站导航</title>
<style type="text/css">
#hr1 {
color: rgb(99, 161, 255);
}
p {
text-align: center;
}
ul {
list-style-type: none;
margin: 0 auto;
position: relative;
left: 370px;
}
li {
float: left;
margin: 23px;
}
</style>
</head>
<body>
使用段落标记和超链接实现网页导航
<p><a href="http://www.baidu.com/">百度</a>
<a href="http://www.sina.com.cn/">新浪</a>
<a href="http://www.163.com/">网易</a>
<a href="http://www.qq.com/">腾讯</a>
<a href="http://www.sohu.com/">搜狐</a>
<a href="http://www.google.com.hk/">360搜索</a></li< /p>
<hr id="hr1">
利用无序列表实现水平导航条
<ul>
<li><a href="http://www.baidu.com/">百度</a></li>
<li><a href="http://www.sina.com.cn/">新浪</a></li>
<li><a href="http://www.163.com/">网易</a></li>
<li><a href="http://www.qq.com/">腾讯</a></li>
<li><a href="http://www.sohu.com/">搜狐</a></li>
<li><a href="http://www.google.com.hk/">360搜索</a></li>
</ul>
</body>
</html>
captura de tela:
Projeto 2: Curso de Introdução ao Design para calouros
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>专业课程导航</title>
</head>
<body>
<h3 align="center"><a name="softwere">专业课程导航</a></h3>
专业课程导航
<ul>
<li><a href="#english">英语</a></li>
<li><a href="#gaoshu">高数</a></li>
<li><a href="#dxwl">大学物理</a></li>
</ul>
<h4><a name="english">英语</a></h4>
<p> 基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、主要英语国家文学史及文学作品选读、主要英语国家国情等。<a href="#softwere">返回</a></p>
<h4><a name="gaoshu">高数</a></h4>
<p> 《高等数学》课程介绍随着科学技术的迅猛发展数学正日益成为各学科进行科学研究的重要手段和工具。高等数学是近代数学的基础是理科各专业和经济管理专业类学生的必修课也是在现代科学技术、经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课程是学生进入大学后学习的第一门重要的数学基础课。通过本课程的教学使学生掌握处理数学问题的思想和方法培养学生科学思维能力同时为后续课程的学习奠定良好的基础。<a href="#softwere">返回</a></p>
<h4><a name="dxwl">大学物理</a></h4>
<p> 以物理学基础为内容的大学物理课程，是理工科个专业学生一门重要的通识性的必修基础课。大学物理课程既为学生打好必要的物理基础，又在培养学生科学的世界观，增强学生分析问题和解决问题的能力，培养学生的探索精神、创新意识等方面，具有其他课程不能替代的重要作用。
<a href="#softwere">返回</a>
</p>
</body>
</html>
captura de tela:
Treinamento de desenvolvimento extracurricular um
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桂林风景展览</title>
<style type="text/css">
img {
width: 100px;
height: 100px;
border: 0;
}
h3 {
color: red;
}
ul {
list-style-type: none;
position: relative;
left: 345px;
text-align: center;
}
li {
float: left;
margin: 12px;
}
</style>
</head>
<body>
<h3 align="center">桂林风景展览</h3>
<ul>
<li><a href="shiyan4_3_1.html"><img src="image31.jpg"><br>桂林风景1<br></a></li>
<li><a href="shiyan4_3_2.html"><img src="image32.jpg"><br>桂林风景2<br></a></li>
<li><a href="shiyan4_3_3.html"><img src="image33.jpg"><br>桂林风景3<br></a></li>
<li><a href="shiyan4_3_4.html"><img src="image34.jpg"><br>桂林风景4<br></a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桂林风景1</title>
<style type="text/css">
body {
background-color: #7FFFD4;
}
img {
height: 350px;
width: 450px;
margin-left: 400px;
margin-top: 90px;
border: #000000;
border-style: groove;
border-width: 3px;
}
</style>
</head>
<body>
<img src="image31.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桂林风景2</title>
<style type="text/css">
body {
background-color: #7FFFD4;
}
img {
height: 350px;
width: 450px;
margin-left: 400px;
margin-top: 90px;
border: #000000;
border-style: groove;
border-width: 3px;
}
</style>
</head>
<body>
<img src="image32.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桂林风景3</title>
<style type="text/css">
body {
background-color: #7FFFD4;
}
img {
height: 350px;
width: 450px;
margin-left: 400px;
margin-top: 90px;
border: #000000;
border-style: groove;
border-width: 3px;
}
</style>
</head>
<body>
<img src="image33.jpg">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桂林风景4</title>
<style type="text/css">
body {
background-color: #7FFFD4;
}
img {
height: 350px;
width: 450px;
margin-left: 400px;
margin-top: 90px;
border: #000000;
border-style: groove;
border-width: 3px;
}
</style>
</head>
<body>
<img src="image34.jpg">
</body>
</html>
captura de tela:
Treinamento de desenvolvimento extracurricular 2
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中国名牌大学简介</title>
</head>
<body>
<h3 align="center">中国名牌大学简介</h3>
<hr color="gainsboro">
<marquee><a href="http://www.tsinghua.edu.cn/">清华大学</a> <a href="http://www.pku.edu.cn/">北京大学</a> <a
href="http://www.sjtu.edu.cn/">上海交通大学</a> <a
href="http://www.fudan.edu.cn/index.html">复旦大学</a> <a
href="http://www.nju.edu.cn/">南京大学</a> <a href="http://www.xjtu.edu.cn/">西安交通大学</a> <a
href="http://www.hit.edu.cn/">哈尔滨工业大学</a></marquee>
<hr color="gainsboro">
</body>
</html>
captura de tela:
