提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
前言
工作室入门考核
一、目标技术
Html、css,（行块级、flex布局），使用Js实现导航栏页面跳转
二、html
1.首页
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="All.css">
<link rel="stylesheet" href="Home.css">
<script src="Change.js"></script>
</head>
<body>
<div class="header">
<!-- 导航栏 -->
<div>
<ul class="nav">
<li> <a href="#" id="HomeLink">网站首页</a></li>
<li> <a href="#" id="LandScapeLink">风景名胜</a></li>
<li> <a href="#" id="CultureLink">传统文化</a></li>
<li> <a href="#" id="loginLink">登录|注册</a></li>
</ul>
</div>
</div>
<!-- 主体 -->
<main>
<!-- 成都简介 -->
<div class="div1">
<h2>成都简介</h2>
<div class="div-content">
<div class="text1">
<div class="div-passage1">
成都，位于四川省中部，是四川省省会、副省级城市，中国首批国家历史文化名城之一，是西南地区重要的中心城市。成都是古蜀文明的重要发源地，“天府之国”的中心，有着世界罕见的3000年城址不迁、2500年城名不改的历史特征。前316年，秦灭蜀，始设蜀郡并成都县。前311年，仿秦制重建城垣，为有文献记载的城市规划与建设之始，迄今已有2300多年。
</div>
<div class="div-passage1">
汉因织锦业发达专设锦官管理，故有“锦官城”“锦城”之称，五代后蜀时遍种芙蓉，故别称“芙蓉城”“蓉城”，简称“蓉”。1921年始设市政筹备处，1928年正式设市。
</div>
<div class="div-passage1">
成都市是国务院批复确定的国家重要的高新技术产业基地，商贸物流中心和综合交通枢纽、西部地区重要的中心城市；是重要的电子信息产城市：是重要的电子信息产业</div>
</div>
<img src="./images/成都简介.jpeg" class="imgc1">
</div>
</div>
<!-- -->
<div class="div2">
<h2>成都美景</h2>
<div class="div-content2">
<div class="b1">
<img src="./images/都江堰.jpg" alt="">
<div class="b1-text">
都江堰是位于中国四川省成都市的一座古代水利工程，始建于战国时期，由秦国蜀郡太守李冰父子主持修建。它以无坝引水为特色，有效控制了岷江洪水，灌溉了成都平原，被誉为“世界水利文化的鼻祖”。至今仍然在发挥着重要作用。
</div>
</div>
<div class="b1">
<img src="./images/大熊猫.jpg" alt="">
<div class=" b1-text">
成都大熊猫基地是世界著名的大熊猫迁地保护、科研繁育、科普教育和文化旅游基地，被誉为“国宝的自然天堂，我们的世外桃源”。基地成功攻克了大熊猫人工饲养、繁殖育幼、疾病防控等技术难题，建立了全球最大的大熊猫人工繁育迁地保护种群，数量达244只。
</div>
</div>
<div class="b1">
<img src="./images/天府广场.jpg" alt="">
<div class="b1-text">
成都天府广场位于四川省成都市中心，是中国西部最大的城市中心广场之一。天府广场不仅是成都的经济、文化和商业中心，也是交通枢纽地带。广场中央矗立着毛泽东雕像，象征着党的生日和他的出生日期。广场四周高楼林立，绿草茵茵，是成都市民休闲娱乐的重要场所。
</div>
</div>
</div>
</div>
</main>
<!-- 底部 -->
<footer>
<p> 世界这么大，我想去看看 </p>
<p>联系我们 234455677889</p>
</footer>
</body>
</html>
2.风景
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LandScape</title>
<link rel="stylesheet" href="All.css">
<link rel="stylesheet" href="LandScape.css">
<script src="Change.js"></script>
</head>
<body>
<!-- 头部 -->
<div class="header">
<!-- 导航栏 -->
<div>
<ul class="nav">
<li> <a href="#" id="HomeLink">网站首页</a></li>
<li> <a href="#" id="LandScapeLink">风景名胜</a></li>
<li> <a href="#" id="CultureLink">传统文化</a></li>
<li> <a href="#" id="loginLink">登录|注册</a></li>
</ul>
</div>
</div>
<!-- 主体 -->
<main>
<div class="div">
<div class="text">
<h2>文殊院</h2>
<div>
文殊院是成都市内保存最为完整的佛教寺庙，拥有二百余间房屋，总建筑面积约1.16万平方米，现有僧人六十多人，是四川省佛教协会所在地
。寺庙的建筑属于典型川西平原古建筑风格，大多数建筑在康熙、嘉庆、道光年间重建或改建。中轴线上依次分布着天王殿、观音殿、大雄宝殿、说法堂、藏经楼等五重殿宇，两庑配以钟鼓楼、禅堂、观堂、客堂、斋堂、戒堂、念佛堂及各职事寮房，形成闭锁式的四合结构
。寺内供奉着大小三百余尊佛像，包括钢铁铸造、脱纱、木雕、石刻、泥塑等多种材质，具有很高的文物价值和艺术价值
。
</div>
</div>
<img src="./images/文殊院.png" alt="" class="img1">
</div>
<div class="div">
<img src="./images/杜甫草堂.jpg" alt="" class="img">
<div class="text">
<h2>杜甫草堂</h2>
<div>
杜甫草堂位于四川成都市浣花溪畔，是中国唐代伟大现实主义诗人杜甫流寓成都时的故居，也是一座备受赞誉的旅游景区
。草堂的建筑格局古朴典雅，修建于明朝和清朝时期，具有独特的“混合式”中国古典园林特点。主要有大廨、诗史堂和工部祠三座纪念性建筑物，坐落在中轴线上，通过回廊相连，形成幽深宁静的景观
。草堂占地近300亩，园内绿树成荫，景色宜人，有香楠林、梅苑、兰园以及翠竹苍松等各种植物，与建筑相得益彰，构成美丽的画卷
。2001年，草堂在施工中发现了唐代灰炕和唐代民居遗址，出土了大量陶瓷器皿、建筑构件以及墙基、水井、水沟、灶台等民居遗存，为杜甫草堂的历史沿革提供了实物佐证
。
</div>
</div>
</div>
<div class="div">
<div class="text">
<h2>
东安湖体育公园
</h2>
<div> 东安湖体育公园位于四川省成都市龙泉驿区，是成都大运会开幕式及重要项目比赛场地
。公园由户外总坪和“一场三馆”构成，户外总坪包括足球场、篮球场等运动场所和室外停车场等配套设施
。“一场三馆”包括主体育场、多功能体育馆、游泳跳水馆及小球馆
。主体育场馆为圆形设计，透光屋顶上艺术呈现了代表古蜀文化精髓的太阳神鸟图案，承载于一个极具科技感和未来感的“飞碟”样式的建筑之上
。三馆采用银色铝制元素构成的百叶幕墙，银色铝百叶朝幕墙中心方向逐渐翻转打开，展现出内部不同功能空间的形态及颜色
。每座建筑都有自己的颜色代码，便于访客在场地及体育馆内辨认方位
。东安湖体育公园不仅是体育赛事的举办地，也是市民休闲娱乐的好去处。</div>
</div>
<img src="./images/东安湖体育公园" alt="" class="img">
</div>
</main>
<!-- 底部 -->
<footer>
<p> 世界这么大，我想去看看 </p>
<p>联系我们 234455677889</p>
</footer>
</body>
</html>
3.传统文化
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Culture</title>
<link rel="stylesheet" href="All.css">
<link rel="stylesheet" href="Culture.css">
<script src="Change.js"></script>
</head>
<body>
<div class="header">
<!-- 导航栏 -->
<div>
<ul class="nav">
<li> <a href="#" id="HomeLink">网站首页</a></li>
<li> <a href="#" id="LandScapeLink">风景名胜</a></li>
<li> <a href="#" id="CultureLink">传统文化</a></li>
<li> <a href="#" id="loginLink">登录|注册</a></li>
</ul>
</div>
</div>
<!-- 主体部分 -->
<main class="main">
<div class="box">
<h2>川剧</h2>
<text>
川剧是中国西南部影响最大的地方剧种，流行于四川省、重庆市及云南、贵州、湖北省部分地区。它主要有高腔、胡琴、弹戏、昆曲、灯调五种声腔，是明末清初以来中国戏曲声腔剧种演变历史的一个缩影。川剧以变脸、喷火等特技著称，具有深厚的传统文化底蕴
。
</text>
<img src="./images/川剧.jpeg">
</div>
<div class="box">
<h2>瓷胎竹编</h2>
<text> 瓷胎竹编是成都地区独特的传统手工艺品，起源于清代中叶，当时主要用做贡品。瓷胎竹编产品技艺独特，以精细见长，具有“精选料、特细丝、紧贴胎、密藏头、五彩图”的技艺特色。瓷胎竹编工艺繁复，全凭双手和一把刀进行手工编织，让根根竹丝依胎成形，紧贴瓷面，所有接头之处都做到藏而不露
。</text>
<img src="./images/瓷胎竹编.jpeg">
</div>
<div class="box">
<h2>
成都糖画
</h2>
<text> 成都糖画俗称“倒糖饼儿”，是成都地区独特的一种民间工艺。成都糖画历史悠久，以熔糖为原料，它在发展过程中不断吸收皮影、剪纸等民间艺术的表现手法，逐渐形成以块面、线条为造型特点的民间特种造型艺术。成都糖画多以花鸟鱼虫、飞禽走兽及戏剧人物为题材，其成品既是甜美的糖食，又是可供观赏的艺术品
。</text>
<img src="./images/糖画.webp">
</div>
<div class="box">
<h2>蜀锦</h2>
<text>
蜀锦是中国四川生产彩锦，已有两千年的历史。蜀锦织品经纬比例恰当，图案清晰，色彩丰富，花型饱满，工艺精美。蜀锦分为经锦和纬锦两大类，以多重彩经起花的蜀锦为经锦，以多重彩纬起花的蜀锦为纬锦，其中经锦工艺是蜀锦独有的
。
</text>
<img src="./images/蜀锦.jfif">
</div>
</main>
<!-- 底部 -->
<footer>
<p> 世界这么大，我想去看看 </p>
<p>联系我们 234455677889</p>
</footer>
</body>
</html>
4.登录
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="All.css">
<link rel="stylesheet" href="login.css">
<script src="Change.js"></script>
</head>
<body>
<div class="header">
<!-- 导航栏 -->
<div>
<ul class="nav">
<li> <a href="#" id="HomeLink">网站首页</a></li>
<li> <a href="#" id="LandScapeLink">风景名胜</a></li>
<li> <a href="#" id="CultureLink">传统文化</a></li>
<li> <a href="#" id="loginLink">登录|注册</a></li>
</ul>
</div>
</div>
<!-- 主体部分 -->
<main class="main">
<div class="div1">
<img src="./images/成都简介.jpeg" class="leftimg">
</div>
<article class="article">
<form>
<p class="form-p">使用手机号注册</p>
<input type="text" name="username" placeholder="昵称" class="form-input"><br>
<input type="tel" name="tel" placeholder="请输入你的手机号码" required class="form-input"><br>
<input type="text" name="captcha" placeholder="短信验证码" required class="form-check"> 请输入验证码<br>
<input type="password" name="password" placeholder="密码" required class="form-input"><br>
<input type="password" name="checkpassword" placeholder="确认密码" required class="form-input"><br>
<input type="button" name="login" value="登录" class="form-button ">
</form>
</article>
</main>
<!-- 底部 -->
<footer>
<p> 世界这么大，我想去看看 </p>
<p>联系我们 234455677889</p>
</footer>
</body>
</html>
三.Css
1.总体
代码如下：
* {
/* 清除原有样式 */
margin: 0;
padding: 0;
}
body {
width: 2000px;
background-color: white;
font-family: '华文楷体';
}
.header {
background-image: url('./images/img-head.png');
background-size: cover;
min-height: 500px;
height: 20vh;
/* 使用视口高度单位 */
width: 100%;
position: relative;
/* 使用相对和绝对定位，实现导航栏位于背景图底部 */
}
.nav {
position: absolute;
/* 使用相对和绝对定位，实现导航栏位于背景图底部 */
bottom: 0;
/* 定位到背景图底部 */
width: 100%;
background-color: rgba(255, 255, 255, 0.6);
/* 白色背景，透明度为0.6 */
display: flex;
/* 使用Flexbox布局 */
justify-content: space-around;
/* 主轴方向实现菜单项均分且与边缘也有间距 */
align-items: center;
/* 交叉轴方向居中对齐 */
list-style: none;
/* 去除列表项符号 */
margin: 0;
/* 去除默认外边距 */
height: 40px;
/* color: white; */
/* 这里定义颜色没用 ，仅对nav直接子类的文本有用*/
font-size: large;
}
.nav li {
display: flex;
/* 确保li是flex容器,才能保证a的文字也居中 */
flex-grow: 1;
/* 设置flex项目每个子项的增长值相同，则平均分 */
position: relative;
/* 相对定位，用于绝对定位分隔线 */
justify-content: center;
/* 水平居中 */
}
/* 菜单项分隔线样式 */
.nav li:not(:first-child)::before {
content: '';
/* 伪元素内容为空 */
position: absolute;
/* 绝对定位 */
left: 0;
/* 左边界与导航项左边界对齐 */
top: 50%;
/* 上边界与导航项上边界对齐，垂直居中 */
width: 2px;
/* 宽度为1像素 */
height: 100%;
/* 高度为导航项高度的100% */
background-color: #FCF4E9;
/* 分隔线颜色 */
opacity: 0.6;
/* 分隔线透明度 */
transform: translateY(-50%);
/* 垂直居中 */
}
/* 鼠标悬停时的样式 */
.nav li:hover {
background-color: rgba(255, 255, 255, 0.726);
/* 鼠标悬停时背景透明度变为0.85 */
height: 100%;
}
.nav li a {
color: #ad4646;
font-weight: bold;
font-size: larger;
font-family: '微软雅黑';
}
.nav a:hover {
text-decoration: underline;
background-color: rgb(254, 251, 247);
color: rgb(241, 111, 96);
}
footer {
background-color: #EBAF67;
padding: 20px 0;
text-align: center;
bottom: 0;
font-size: large;
color: #ffffff;
}
2.首页
代码如下：
main {
background-color: #fff5e7ea;
/* font-family: '华文楷体'; */
display: flex;
flex-direction: column;
/* 子元素成都简介和美景垂直排布 */
}
.div1,
.div2 {
margin: 30px;
flex: 1;
padding: 10px;
display: flex;
/* 启用flex布局 */
flex-direction: column;
font-size: xx-large;
/* 首行四字简介满行 */
}
.div1 h2,
.div2 h2 {
padding: 10px 40px;
flex: 1;
font-size: xx-large;
}
.div-content {
display: flex;
}
.text1 {
flex: 1;
/* 占据一半空间 */
display: flex;
/* 启用flex布局 */
flex-direction: column;
/* 两段文字垂直排列 */
}
.div-passage1 {
flex: 1;
font-size: x-large;
color: rgb(32, 19, 19);
padding: 10px 40px;
}
.imgc1 {
padding: 0 40px 0 50px;
flex: 1;
height: 400px;
}
/* 第二部分 */
.div-content2 {
flex: 1;
display: flex;
justify-content: space-around;
padding: 10px 40px;
width: 100%;
}
.b1 {
flex: 1;
}
.b1 img {
padding: 10px 10px;
width: 550px;
height: 300px;
}
.b1-text {
font-size: x-large;
padding: 10px 70px 0 10px;
}
3.风景
代码如下：
main {
background-color: #fff5e7ea;
/* font-family: '华文楷体'; */
display: flex;
padding: 20px;
flex-direction: column;
}
.div {
flex: 1;
display: flex;
height: 800px;
}
.text {
flex: 1;
font-size: x-large;
padding: 30px 30px;
}
.text h2 {
padding: 0 40px 40px 0;
}
.text div {
font-size: larger;
}
.img {
/* flex: 1; */
padding: 30px 50px 70px 50px;
height: 500px;
width: 700px;
}
.img1 {
/* flex: 1; */
padding: 40px 50px 70px 50px;
height: 450px;
width: 700px;
}
4.传统文化
代码如下：
main {
background-color: #fff5e7ea;
/* font-family: '华文楷体'; */
display: flex;
flex-direction: column;
padding: 40px 30px;
}
.box {
font-size: x-large;
flex: 1;
padding: 30px;
display: flex;
flex-direction: column;
/* align-items: center; 这会让包括文字在内的子元素都在水平方向上居中 */
}
text {
font-size: larger;
padding: 20px;
}
.box img {
height: 400px;
width: 600px;
margin-top: 20px;
/* 在图片和文字之间添加一些间距 */
display: block;
/* 使图片作为块级元素，这样可以应用 margin: auto; */
margin-left: auto;
margin-right: auto;
/* 水平方向上自动调整左右外边距，实现居中 */
}
5.登录
代码如下：
/* 主体部分 */
.main {
display: flex;
justify-content: space-between;
background-color: #fff5e7ea;
min-height: 700px;
/* position: relative; */
/* 父元素设置为相对定位，以便子元素aside可以绝对定位在其内部 */
/* width: 100%; */
}
.div1,
.article {
flex: 1;
padding: 50px;
/* width: 800px; */
height: 100%;
}
.div1 img {
padding: 10px 0 0 40px;
width: 85%;
height: auto;
}
.article {
display: flex;
flex-direction: column;
/* 交叉轴方向从上到下 */
align-items: center;
width: 50%;
height: 100%;
}
.article form {
width: 100%;
font-size: large;
}
.form-p {
margin: 10px;
font-size: large;
}
.form-input {
height: 25px;
width: 70%;
padding: 15px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 8px;
/* 圆角 */
font-size: large;
}
.form-check {
height: 25px;
width: 50%;
padding: 15px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: large;
}
.form-button {
height: 50px;
width: 60%;
padding: 15px 20px;
background: #ffd198;
color: rgb(255, 254, 254);
border: none;
border-radius: 8px;
font-size: large;
/* cursor: pointer; */
}
footer {
background-color: #EBAF67;
padding: 20px 0;
text-align: center;
bottom: 0;
font-size: large;
color: #ffffff;
}
四、
代码如下：
document.addEventListener('DOMContentLoaded', function () {
//跳转首页
const HomeLink = document.getElementById('HomeLink');
HomeLink.addEventListener('click', function (e) {
e.preventDefault(); // 阻止默认的链接跳转行为
const HomeUrl = 'home.html'; // 登录页面的URL
window.open(HomeUrl, '_self'); // 在新标签页中打开登录页面
});
//风景
const LandScapeLink = document.getElementById('LandScapeLink');
LandScapeLink.addEventListener('click', function (e) {
e.preventDefault(); // 阻止默认的链接跳转行为
const LandScapeUrl = 'LandScape.html'; // 登录页面的URL
window.open(LandScapeUrl, '_self'); // 在新标签页中打开登录页面
});
//文化
const CultureLink = document.getElementById('CultureLink');
CultureLink.addEventListener('click', function (e) {
e.preventDefault(); // 阻止默认的链接跳转行为
const CultureUrl = 'Culture.html'; // 登录页面的URL
window.open(CultureUrl, '_self'); // 在新标签页中打开登录页面
});
//登录
const loginLink = document.getElementById('loginLink');
loginLink.addEventListener('click', function (e) {
e.preventDefault(); // 阻止默认的链接跳转行为
const loginUrl = 'login.html'; // 登录页面的URL
window.open(loginUrl, '_self'); // 在新标签页中打开登录页面
});
});
// document.addEventListener('DOMContentLoaded', function () {
// const navLinks = document.querySelectorAll('nav li a');
// navLinks.forEach(link => {
// link.addEventListener('click', function (e) {
// e.preventDefault(); // 阻止默认的链接跳转行为
// const target = this.getAttribute('data-target');
// showSection(target);
// });
// });
// function showSection(target) {
// // 隐藏所有section
// document.querySelectorAll('section').forEach(section => {
// section.style.display = 'none';
// });
// // 显示目标section
// const sectionToShow = document.querySelector(target);
// sectionToShow.style.display = 'block';
// }
// });
总结
提示：
1.flex好用！！但是使用后子元素的float等无效。
2.不知道为啥首页的h2怎么设置都不能大一点。。。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
