📄 index.html
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>广告代码 阿里西西（ALIXIXI）CSS+XHTML代码</title>
</head>
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_variations.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
由阿里西西(ALIXIXI)http://www.alixixi.com/ 整理
来源于：http://www.cssplay.co.uk
=================================================================== */
/* common styling */
/* Set up the default font and ovrall size to include image */
body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 12px;
}
#info {font-family:font-family:"trebuchet ms", trebuchet, arial, sans-serif; font-size:1em;}
#menu {
margin:0;
padding:0;
height:32.5em;
overflow:hidden;
background:#f0f0f0;
}
#menu li {
list-style-type:none;
float:left;
display:block;
width:100%;
}
#menu li a {
display:block;
text-decoration:none;
color:#00b;
margin:0;
width:100%;
}
#menu li a span {
display:none;
color:#000;
}
#menu li a.one span {
display:block;
height:15em;
margin:0 10px;
}
#menu li a:hover {
background:#f1f1f1;
}
#menu li a:hover span {
display:block;
height:15em;
margin:0 10px;
cursor:pointer;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#808;
font-variant:small-caps;
font-size:1.5em;
border:0;
}
#menu .h3 {
margin:0 5px;
padding:0;
font-size:1.1em;
color:#00b;
}
#menu img {
margin:5px 5px 5px 0;
border:1px solid #000;
float:left;
}
.curved {
width:21em;
margin:0 auto;
}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {
font-size:1px;
display:block;
background:#88c;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
.curved .b1, .curved .b2, .curved .b3 {
height:1px;
}
.curved .b2, .curved .b3, .curved .b4 {
background:#f0f0f0;
border-left:1px solid #88c;
border-right:1px solid #88c;
}
.curved .b1 {
margin:0 4px;
background:#88c;
}
.curved .b2 {
margin:0 2px;
border-width:0 2px;
}
.curved .b3 {
margin:0 1px;
}
.curved .b4 {
height:2px;
margin:0;
}
.curved .c1 {
margin:0 5px;
background:#88c;
}
.curved .c2 {
margin:0 3px;
border-width:0 2px;
}
.curved .c3 {
margin:0 2px;
}
.curved .c4 {
height:2px;
margin: 0 1px;
}
.curved .boxcontent {
display:block;
background:transparent;
border-left:1px solid #88c;
border-right:1px solid #88c;
font-size:0.9em;
text-align:justify;
}
</style>
<body>
<div class="curved">
<b class="b1 c1"></b>
<b class="b2 c2"></b>
<b class="b3 c3"></b>
<b class="b4 c4"></b>
<div class="boxcontent">
<ul id="menu">
<li>
<a class="m5 five" href="#nogo">
<b class="h2">Paul Cézanne</b><br />
<b class="h3">(1839-1906)</b>
<span>
<img src="img/cezanne.jpg" alt="painting" title="painting" />
The French painter who exhibited little in his lifetime and pursued
his interests increasingly in artistic isolation, is regarded today
as one of the great forerunners of modern painting.
</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="h2">Henri Matisse</b><br />
<b class="h3">(1869-1954)</b>
<span>
<img src="img/matisse.jpg" alt="painting" title="painting" />
Initially planned a career as a lawyer. However, he began to paint
after an acute attack of appendicitis and then proceeded to become
a leader in many art circles.
</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="h2">William Turner</b><br />
<b class="h3">(1775-1851)</b>
<span>
<img src="img/turner.jpg" alt="painting" title="painting" />
This English painter was one of the greatest romantic interpreters
of nature in the history of Western art and is still unrivaled in
the virtuosity of his painting of light.
</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="h2">John Constable</b><br />
<b class="h3">(1776-1837)</b>
<span>
<img src="img/constable.jpg" alt="painting" title="painting" />
Tried to capture informally the effects of changing light and the
patterns of clouds moving across the country sky. He loved the
countryside, and his best work was of outdoor scenes in his native
Suffolk.
</span>
</a>
</li>
<li>
<a class="one" href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="b3"></b>
<b class="b4"></b>
<b class="h2">Claude Monet</b><br />
<b class="h3">(1840-1926)</b>
<span>
<img src="img/monet.jpg" alt="painting" title="painting" />
Monet's concern was to reflect the influence of light on a subject.
He never abandoned his Impressionist painting style until his death
in 1926 when Fauvism and Cubism were en vogue and when abstract
painting came into existence.
</span>
</a>
</li>
</ul>
</div>
<b class="b4 c4"></b>
<b class="b3 c3"></b>
<b class="b2 c2"></b>
<b class="b1 c1"></b>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -