<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
* {
box-sizing: border-box; /*盒子宽度包含内边距和边框*/
border-radius: 5px; /*边框半径5像素（圆角）*/
}
/**根伪元素(html)*/
:root {
/**全局变量(变量以--开头)*/
--blue: #00BFFF; /*蓝色*/
--grey: #F1F1F1; /*灰色*/
--darkblue: #008CBA;/*深灰色*/
--white: #FFFFFF;
--whitegrey: #bbb;
}
body {
margin: 0;
padding: 10px;
background-color: var(--grey); /*调用全局变量（var(变量名)调用变量值）*/
font-family: "arial, helvetica, sans-serif"; /*字体系列*/
}
/**页眉样式*/
header {
color: white;
font-size: 1.5em;
padding: 12px 20px;
background-color: mediumpurple;
}
/**节样式*/
section {
display: flex; /*显示为弹性框*/
flex-wrap: wrap; /*折行*/
margin: 10px 0px;
flex-direction: column; /*弹性元素列方向分布*/
}
/**导航栏样式*/
nav {flex: 100%;} /*长度100%*/
/**导航栏内无序列表样式*/
nav ul {
list-style-type: none; /*无列表项标记（li标签前的黑色标记）*/
margin: 0;
padding: 0;
}
/**无序列表内li标签样式*/
nav ul li {
color: white;
font-size: 1.2em;
transition: .3s; /*过渡效果0.3秒（平滑的过渡样式）*/
cursor: pointer; /*指针变为手型*/
padding: 12px 10px;
margin-bottom: 10px;
background-color: var(--blue);
}
/**最后一个子元素底外边距*/
nav ul li:last-child {margin-bottom: 0;}
/**li标签悬停时样式*/
nav ul li:hover {
background-color: var(--darkblue);
/*在当前盒子周围设置阴影，形成卡片效果*/
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/**章节样式*/
article {
flex: 100%;
padding: 0px 30px;
}
/**章节内的标题样式*/
article h1 {font-size: 2em;}
/**图片样式*/
#myImg {
height: auto;
max-width: 100%;
transition: .3s;
cursor: pointer;
}
/**图片悬停时样式*/
#myImg:hover {opacity: 0.7;} /*不透明度改为0.7*/
/**图像模态样式*/
.modal {
display: none; /*无显示*/
position: fixed; /*固定于窗口*/
left: 0; /*左边位置0*/
top: 0; /*顶部位置0*/
margin: 0;
width: 100%; /*宽度100%（防止覆盖不全）*/
height: 100%; /*高度100%（防止覆盖不全）*/
max-width: 100%;
max-height: 100%;
overflow: auto; /*溢出自动（防止部分内容消失）*/
transition: .4s;
padding-top: 100px;
background-color: rgb(0, 0, 0);
background-color: rgb(0, 0, 0, 0.9);
}
/**x号样式*/
.modal span {
top: 35px;
right: 15px;
color: var(--white);
font-weight: bold;
cursor: pointer;
font-size: 3em;
transition: .6s;
position: absolute;
}
/**x号悬停时样式*/
.modal span:hover {color: var(--whitegrey);}
/**图像模态内图像样式*/
.modal .modal-content {
display: block; /*显示为块级元素*/
margin: auto; /*外边距自动（居中效果）*/
width: 100%;
height: auto;
max-width: 1500px;
transition: .6s;
}
/**图像模态内图像标题样式*/
.modal #caption {
width: 80%;
margin: auto;
color: #FFFFFF;
font-size: 1.2em;
text-align: center; /*文本居中对齐*/
max-width: 700px;
padding: 30px;
}
/**图像模态内图像、图像标题设置动画*/
.modal-content, #caption {animation: zoom .6s;}
/**动画帧*/
@keyframes zoom {
from{transform: scale(0.1);} /*动画完成0%时规模大小为自身的0.1*/
to{transform: scale(1);} /*动画完成100%时规模大小为自身*/
}
/*侧边栏悬停时样式*/
aside:hover
{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
/*侧边栏样式*/
aside {
flex: 100%;
color: white;
transition: .3s;
margin-top: 10px;
text-align: center;
padding: 10px 20px;
background-color: var(--blue);
}
/*页脚样式*/
footer {
color: white;
padding: 20px;
text-align: center;
background-color: var(--darkblue);
}
/**媒体查询（浏览器宽度 >= 600px时执行）*/
@media only screen and (min-width: 600px) {
section {flex-direction: row;} /*弹性框设置弹性元素水平方向*/
.modal .modal-content {width: 80%;}
nav {flex: 30%;}
article {flex: 70%;}
}
/**媒体查询（浏览器宽度 >= 992px时执行）*/
@media only screen and (min-width: 992px) {
article {flex: 50%;} /*长度50%*/
nav, aside {flex: 25%;}
}
</style>
</head>
<body>
<header><h1>Shanghai</h1></header> <!-- 页眉 -->
<section> <!-- 节开始 -->
<nav> <!-- 导航栏开始 -->
<ul>
<li>交通</li>
<li>文化</li>
<li>旅游</li>
<li>美食</li>
</ul>
</nav> <!-- 导航栏结束 -->
<article> <!-- 章节开始 -->
<h1>欢迎来到上海</h1>
<p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，
是中国人口第二多的城市。</p>
<img id="myImg" src="../img/shanghai.jpg" alt="上海" title="单击放大" />
<figure class="modal" id="myModal">
<span class="close">×</span>
<img id="img01" class="modal-content" />
<figcaption id="caption"></figcaption>
</figure>
</article> <!-- 章节结束 -->
<aside> <!-- 侧边栏开始 -->
<h2>历史</h2>
<p>最晚在新石器时代，上海地区已经有先民聚居。春秋时代，上海由吴国管辖，战国时代则是楚国领土 ...</p>
<h2>位置</h2>
<p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接 ...</p>
<h2>环境</h2>
<p>上海地处江南水乡，并位于长江入海口，亦不处于主要地震带上，因此如地震、洪水以及地质类灾害鲜有发生 ...</p>
</aside> <!-- 侧边栏结束 -->
</section> <!-- 节结束 -->
<footer> <!-- 页脚开始 -->
<p>请调整浏览器窗口的大小，以查看内容如何响应调整大小。</p>
</footer> <!-- 页脚结束 -->
<!-- 处理图像模态脚本 -->
<script type="text/javascript">
var modal = document.getElementById("myModal"); //获取图像模态
var modalImg = document.getElementById("img01"); //获取图像模态图像
var img = document.getElementById("myImg"); //获取源图像
var captionText = document.getElementById("caption"); //获取图像模态图像标题
//源图像注册点击事件
img.onclick = function() {
modal.style.display = "block"; //图像模态显示为块级元素
modalImg.src = img.src; //图像模态图像赋值
captionText.innerHTML = img.alt;//图像模态图像标题赋值
}
//获取x号
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none"; //重设图像模态不显示
}
</script>
</body>
</html>
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
