<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>example 03影评</title>
<style>
nav{
width:1000px;
margin:0 auto;
}
figure img{
float:left;
}
figure ol{
float:left;
margin:0 20px;
}
figure ul{
list-style:none;
float:left;
width:800px;
text-indent: 2em;
line-height: 2em;
margin:0 20px;
}
/***
没有学布局和适配,所以只能用float。
因此产生了一个bug,当浏览器窗口过小的时候会乱掉。
***/
summary{
line-height: 2em;
color:blue;
}
summary:hover{
text-decoration:underline;
cursor:pointer;
}
aside{
position:fixed;
right:100px;
bottom: 20%;
}
</style>
</head>
<body>
<header>
<a name="top"><h1 align="center">ahui的第一个影评网站</h1></a>
<!-- 点击top锚点可以返回顶端 -->
<hr />
</header>
<nav>
<a href="#one"><img src="img/一出好戏.jpg" title="一出好戏"/></a>
<a href="#two"><img src="img/初恋那点小事儿.jpg" title="初恋那点小事儿"/></a>
<a href="#three"><img src="img/小森林%20夏秋篇.jpg" title="小森林 夏秋篇"/></a>
<!-- 点击图片可以跳转到相应的影评 -->
</nav>
<hr />
<article>
<figure>
<a name="one"><img src="img/一出好戏.jpg"></a>
<ol>
<figcaption><h2>“一出好戏”影评</h2></figcaption>
<li><p>与世孤绝的荒岛群像，物竞天择的社会缩影。</p></li>
<li><p>没想到，<mark>黄渤</mark>真的拍了个<b>“蝇王”式的反乌托邦寓言</b>；无论票房口碑如何，这样的尝试已然足够攒脸。</p></li>
<li><p>那场<b>倒置船戏</b>挺魔幻，有种集体着魔的快感，<mark>曾剑</mark>的摄影很加分。</p></li>
<li><p>的确，这样一部电影，在华语影坛还不曾出现过同类。</p></li>
<ul>
<details>
<summary>评分</summary>
<li>豆瓣评分:<meter min="0" max="10" value="7.1">7.1分</meter>  7.1分</li>
<li>猫眼评分:<meter min="0" max="10" value="8.2">8.2分</meter>  8.2分</li>
</details>
</ul>
</ol>
</figure>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><hr />
<!--
没有学布局和适配,所以只能用br换行。
因此产生了一个bug,当浏览器窗口过小的时候会乱序。
-->
<figure>
<a name="two"><img src="img/初恋那点小事儿.jpg"></a>
<ul>
<figcaption><h2>“初恋那点小事儿”影评</h2></figcaption>
<li><p>你有几个最佳损友，她们陪你分享你心里的小秘密。你在初中小心翼翼的喜欢一个男孩子，<b>你收集关于他的一切消息</b>，你在你们共同上学需要走的小巷口左顾右盼，<b>你记住他的每一句话</b>，你为他做了让自己可以变得<mark>更好更美的所有事情</mark>，那些好长好长的岁月里你<mark>只是想让他看你一眼而已</mark>。</p></li>
<ul>
<details>
<summary>评分</summary>
<li>豆瓣评分:<meter min="0" max="10" value="8.3">8.3分</meter>  8.3分</li>
<li>猫眼评分:<meter min="0" max="10" value="8.8">8.8分</meter>  8.8分</li>
</details>
</ul>
</ul>
</figure>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><hr />
<figure>
<a name="three"><img src="img/小森林%20夏秋篇.jpg"></a>
<ul>
<figcaption><h2>“初恋那点小事儿”影评</h2></figcaption>
<li><p>那些<mark>静得只能听见呼吸的日子里</mark>，你明白<b>孤独即生活</b>。</p></li>
<ul>
<details>
<summary>评分</summary>
<li>豆瓣评分:<meter min="0" max="10" value="9.0">9.0分</meter>  9.0分</li>
<li>猫眼评分:<meter min="0" max="10" value="7.1">7.1分</meter>  7.1分</li>
</details>
</ul>
</ul>
</figure>
</article>
<aside>
<a href="#top"><img src="img/back-to-top-1500.jpg" width="200px"></a>
<!--
这里为了省事儿，直接用了一个图片back to top。
图片无透明度所以会遮挡分割线。
好像是插入不了PSD格式的图片。
如果用盒子圆角边框或者调背景透明度会不会好一点？
-->
</aside>
</body>
</html>
上两张效果图
另外怎么在CSDN写代码把颜色标出来呀？
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
