ShutterPress：设计和编码照片集网站（第3天：HTML / CSS）

daique1908 daique1908 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1.7k累计阅读 1.8k平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄10年
关注
翻译 最新推荐文章于 2026-11-10 20:19:10 发布 1.7k 阅读 AI 写同款· GEO 优化 ›

今天，我们将继续通过使用HTML和CSS将ShutterPress设计从原始PSD转换为功能性网站的教程系列。 到目前为止，我们已经创建了初始站点设计并收集了编码所需的资产 。 现在，我们将实际对其进行编码，以便它可在所有主流浏览器中使用！

简介 ：第3天，HTML / CSS转换

今天就是将我们的PSD设计转换为可以正常运行HTML网站的全部内容！ 我们将逐步引导您完成标记，直到我们拥有一个在所有主要浏览器上都不错的网站。 我们将从中级的理解水平着手解决这个问题，因此，如果我们过快地跳过了任何基本步骤，请随时在下面的“评论”部分中提出任何具体问题。

特别鸣谢CodeMyConcept ，他亲切地提供了该系列当天的代码和教程！

如果您错过了本系列的前两天，请在这里查看：

好的，现在我们的目标已经明确定义，让我们开始吧！

步骤1基本文件夹结构和布局

首先，我们从为项目创建基本文件夹结构开始，我们绝对必须保持资产的结构化和组织化。

在这种情况下，一旦HTML和CSS完成，我们将需要一个带有主css文件的“ css”文件夹，一个“ images”文件夹和一个“ js”（Javascript）文件夹，以便我们可以添加滑块，lightbox和手风琴插件。 也是根文件夹中的index.html文件

t名

然后，使用“左”和“右”部分创建布局的基本HTML结构。 我们将使用包装器div来容纳所有内容并将其居中并放置其中的Left和Right容器，并在包装​​器的顶部和底部使用div来帮助我们处理圆角，同时保持布局的灵活性。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>ShutterPress</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
	<link rel="stylesheet" type="text/css" href="css/all.css" media="screen" />
</head>
<body>
<div id="wrapper">
	<div id="wrapper-top">
	</div> <!-- END WRAPPER TOP -->
	<div id="left">
		LEFFT MENU HERE
	</div> <!-- END LEFT MENU -->
	<div id="right">
		RIGHT CONTENT HERE
	</div> <!-- END RIGHT CONTENT -->
	<div id="wrapper-bottom">
	</div> <!-- END WRAPPER BOTTOM -->
</div> <!-- END WRAPPER -->
</body>
</html>

实际上，我们更喜欢在编写任何CSS之前先创建HTML，尽管有些人会同时编写HTML和CSS的一部分，然后继续进行下一部分。 我们发现首先完成整个HTML可以帮助我们提前考虑CSS以及可能需要的其他所有内容，例如Javascript或PHP。 我现在添加的只是我CSS Reset。

步骤2左侧选单HTML

因此，我们从对左侧菜单进行编码开始。 在这里，我们将需要一个h1标签，一个徽标链接以及一个菜单项的无序列表。 我们还需要在子菜单的第三个li标签上嵌套另一个无序列表，并对第二个li标签上的一些虚拟项进行相同的处理，以便稍后我们的javascript手风琴起作用。

我们还需要在链接和子菜单中添加一些“打开的”和“关闭的”类，以便我们可以控制图标和默认打开哪个子菜单，并使用活动类来突出显示当前正在查看的页面。 

<h1 class="logo"><a href="#">ShutterPress</a></h1><!-- END LOGO -->
<ul class="menu">
	<li><a href="#">Home</a></li>
	<li>
		<a class="closed" href="#">About the Studio</a>
		<ul class="sub-menu closed">
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
		</ul> <!-- END SUB MENU -->
	</li>
	<li>
		<a class="opened" href="#">Image Galleries</a>
		<ul class="sub-menu">
			<li><a class="active" href="#">4X4 Gallery</a></li>
			<li><a href="#">Portrait Gallery</a></li>
			<li><a href="subpage.html">Slider Gallery</a></li>
		</ul> <!-- END SUB MENU -->
	</li>
	<li><a href="#">Contact</a></li>
</ul> <!-- END MENU -->

现在，紧随其后的是位于底部的左侧部分中的社交图标和搜索字段。 因此，我们将为底部创建一个容器div，并为该容器内的两个部分分别创建[divs]。

对于“社交”图标，我们需要一个文本跨度和一个图标列表，每个图标都有一个类，以帮助获取正确的图标图像及其相应的悬停状态。

对于“搜索”部分，我们将创建一个表单和一个div，其中包含相应的输入，以帮助浮动它们并添加背景和图标。 这样做比将样式直接应用于输入要好得多，这样可以避免行高和文本缩进的交叉浏览问题。 

<div id="left-bottom">
<div class="social">
		<span>Social:</span>
		<ul>
			<li><a class="tumblr" href="#">tumblr</a></li>
			<li><a class="picasa" href="#">picasa</a></li>
			<li><a class="vimeo" href="#">vimeo</a></li>
			<li><a class="flickr" href="#">flickr</a></li>
			<li><a class="twitter" href="#">twitter</a></li>
			<li><a class="facebook" href="#">facebook</a></li>
			<li><a class="rss" href="#">rss</a></li>
		</ul>
	</div> <!-- END SOCIAL -->
	<div class="search">
		<form action="#" method="get">
			<fieldset>
				<div class="left">
					<input type="text" value="" />
				</div>
				<div class="right">
					<input type="submit" value="" />
				</div>
			</fieldset>
		</form>
	</div> <!-- END SEARCH -->
</div> <!-- END LEFT BOTTOM -->

这就是它在我们的浏览器中的外观以及CSS Reset

步骤3正确的内容HTML

现在，我们已经完成了左侧菜单，我们可以开始为缩略图库的“右侧”内容部分编码了。

因此，首先我们在链接内创建一个无序的图像列表，以便我们的灯箱插件可以单击它们，然后创建一个div来包含上一个和下一个按钮。 

<ul class="thumbnails">
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb1.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb2.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb3.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb4.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb5.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb6.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb7.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb8.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb9.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb10.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb11.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb12.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb13.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb14.jpg" alt="thumbnail" width="150" height="121" /></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb15.jpg" alt="thumbnail" width="150" height="121"/></a></li>
	<li><a href="#"><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/gallery/thumb16.jpg" alt="thumbnail" width="150" height="121" /></a></li>
</ul> <!-- END THUMBNAILS -->
<div class="navigation">
	<a href="#" class="prev">Previous</a>
	<a href="#" class="next">Next</a>
</div> <!-- END NAVIGATION -->

此时，我们需要开始对缩略图进行切片，并将其与HTML中的相应名称一起保存，以便显示一些内联图像。

这是我们所有HTML在Firefox中的外观

步骤4 CSS重置和包装

现在为一些样式设置字体，文本和链接颜色以及背景图像的一些常规设置 

/*------------------------------*/
/*  GENERAL RESET              */
/*----------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td, hr, button {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align: baseline;
	background:none;
}
ol, ul {list-style:none;}
h1, h2, h3, h4, h5, h6, li {line-height:100%;}
blockquote, q {quotes:none;}
q:before,
q:after {content: '';}
table {border-collapse:collapse; border-spacing:0;}
input,textarea,select{
	font:11px Arial, Helvetica, sans-serif;
	vertical-align:middle;
	padding:0;
	margin:0;
}
input:focus, textarea:focus {
	outline: none;
}

form,fieldset{border-style:none;}

html,
body {
   margin:0;
   padding:0;
   min-height:100%;
}

/*---------------------------------*/
/* GENERAL SETTINGS               */
/*-------------------------------*/
body {
      height:100%;
      font: 12px/12px "Lucida Sans", "Lucida Grande", sans-serif;
      color: #000;
      background: url('../images/bg.jpg') repeat #fff;
}
a {text-decoration:none; color: #000;}
a:hover {text-decoration:none; color: #0285da;}

然后，我们设置包装器样式，以便我们可以构建布局的基础，我们首先通过定义包装器的宽度并以边距为中心进行设置：0 auto;

对于我们先前定义的顶部和底部div，我们设置背景图像和所需的尺寸以创建顶部和底部的圆角，对于包装器，我们设置在Y轴上重复的背景图像，该图像将覆盖左右内容之间的分界线。

对于底部包装的div，我们需要设置一个clear：both; 因为一旦我浮动了我的左右容器，包装器就会崩溃，所以我们需要通过清除浮动来防止这种情况。 

/*--------------------------*/
/*     WRAPPER             */
/*------------------------*/
#wrapper-top {
	background:url("../images/content-top.jpg") no-repeat scroll center top #FFFFFF;
	height:18px;
	width:994px;
}

#wrapper {
	width: 994px;
	overflow: hidden;
	margin: 64px auto 0;
	background:url("../images/content-bg.jpg") repeat-y scroll center center #FFFFFF;
}

#wrapper-bottom {
	background:url("../images/content-bottom.jpg") no-repeat scroll center top #FFFFFF;
	height:61px;
	width:994px;
	clear: both;
}

这是我们浏览器中的结果：

步骤5左侧菜单CSS

现在我们已经准备好包装器，可以继续操作内容了：首先，我们设置Right和Left容器的宽度，以便将它们浮动到正确的位置。 

/*--------------------------*/
/*     LEFT MENU           */
/*------------------------*/

/* Main Menu */
#left {
	width: 235px;
	float: left;
}


/*------------------------------*/
/*   RIGHT CONTENT             */
/*----------------------------*/

/* Thumbnail Gallery Content*/
#right {
	width: 758px;
	float: right;
}

现在，我们通过为设计上的徽标，按钮和图标创建子画面图像来开始设计导航样式。

这种特殊的布局似乎不会增加高度，但是我们仍然希望保持灵活性，以防将来需要在导航中添加更多元素。

因此，我们将Left容器设置为最小高度，以便可以绝对定位左下div，而不必使用巨大的边距将其向下推，这样，即使添加了新元素，布局仍将保持其原始尺寸。

我们还将导航中的链接设置为块显示，以便可以单击整个区域而不仅仅是文本，并使用它们各自的格线添加打开和关闭背景并调整精灵的位置。

具有“已关闭”类的子菜单设置为显示： 因此只显示默认的一个。 

/*--------------------------*/
/*     LEFT MENU           */
/*------------------------*/

/* Main Menu */
#left {
	width: 235px;
	float: left;
	min-height: 615px;
	position: relative;
}

#left .logo a {
	background:url("../images/sprite.png") no-repeat scroll 0 0 transparent;
	display:block;
	height:32px;
	margin:8px auto 0;
	text-indent:-999999px;
	width:190px;
}

#left .menu {
	width: 100%;
	border-top: 1px solid #eaeaea;
	margin-top: 30px;
}

#left .menu li a {
	display: block;
	height: 35px;
	line-height: 35px;
	padding-left: 22px;
	border-bottom: 1px solid #eaeaea;
}

#left .menu li a.active {
	color: #0285DA;
	border-right: 1px solid #fff;
}

#left .menu li a.closed {
	background:url("../images/sprite.png") no-repeat scroll 46px -231px transparent;
}

#left .menu li a.opened {
	background:url("../images/sprite.png") no-repeat scroll 46px -257px transparent;
}

#left .menu li .sub-menu li a {
	padding-left: 38px;
}

#left .menu .sub-menu.closed {
	display: none;
} 

#left-bottom {
	position: absolute;
	bottom: 0;
	width: 100%;
}

对于底部的社交图标，我们使用相应的小节设置图像，并使用位置设置背景图像，对于悬停状态也是如此。 

/* Social */
#left-bottom .social {
	overflow: hidden;
	height: 34px;
	border-top: 1px solid #eaeaea;
	border-bottom: 1px solid #eaeaea;
	padding-left:25px;
}


#left-bottom .social span {
	float: left;
	line-height: 34px;
}

#left-bottom .social ul {
	float:left;
	margin:9px 0 0 10px;
}

#left-bottom .social ul li {
	float: left;
	height: 34px;
}

#left-bottom .social ul li a {
	background:url("../images/sprite.png") no-repeat scroll -5px -50px transparent;
	display:block;
	height:16px;
	width:16px;
	margin: 0 5px 0 0;
	text-indent: -999999px; 
}

#left-bottom .social ul li a:hover {
	background-position: -5px -80px;
}

#left-bottom .social ul li a.picasa {
	background-position: -26px -50px;
}

#left-bottom .social ul li a.picasa:hover {
	background-position: -26px -80px;
}

#left-bottom .social ul li a.vimeo {
	background-position: -47px -50px;
}

#left-bottom .social ul li a.vimeo:hover {
	background-position: -47px -80px; 
}

对于搜索部分，我们基本上是在浮动输入容器div并将其样式设置为输入而不是输入。 

/* Search */
#left-bottom .search {
	overflow: hidden;
	margin-top: 12px;
}

#left-bottom .search .left {
	background:url("../images/sprite.png") no-repeat scroll -5px -203px transparent;
	float:left;
	height:27px;
	margin-left:20px;
	padding: 6px 0 0 10px;
	width:158px;
}

#left-bottom .search .left input {
	border: none;
	background: transparent;
	width: 100%;
}

#left-bottom .search .right {
	background:url("../images/sprite.png") no-repeat scroll -173px -203px transparent;
	float:left;
	height:27px;
}

#left-bottom .search .right input {
	background:none repeat scroll 0 0 transparent;
	border:medium none;
	cursor:pointer;
	height:27px;
	width:27px;
}

这就是我们现在在firefox中拥有的

步骤6正确的内容CSS

在这里，我们只是浮动列表项以获得网格显示，我们添加了填充，背景色和边框来为每个缩略图创建框架，还添加了用于分隔的边距。

最后。 我们的按钮的容器div居中，两个链接都处于浮动状态。 

/*------------------------------*/
/*   RIGHT CONTENT             */
/*----------------------------*/

/* Thumbnail Gallery Content*/
#right {
	width: 758px;
	float: right;
}

#right .thumbnails {
	overflow: hidden;
	padding:10px 0 0 32px;
}

#right .thumbnails li {
	float: left;
	margin: 0 21px 18px 0;
}

#right .thumbnails li a {
	border: 1px solid #eaeaea;
	padding: 2px;
	background: #f2f2f2;
	display: block;
}

#right .navigation {
    margin: -10px auto 0;
    overflow: hidden;
    width: 50px;
}

#right .navigation a {
	background:url("../images/sprite.png") no-repeat scroll 0 0 transparent;
	display:block;
	float:left;
	height:21px;
	text-indent:-999999px;
	width:21px;
}

#right .navigation .prev {
	background-position: -159px -75px;
	margin: 0 8px 0 0;
}

#right .navigation .next {
	background-position: -186px -75px;
}

这是我们在Firefox中完成的第一页！

步骤7第二页HTML

转到子页面，我们要做的是复制index.html并将其命名为subpage.html或inner.html之类的东西，然后我们取出#right容器中的所有内容，并开始构建滑块画廊所需的html。以及下面的3个模块。

我们需要一个div来保存我的幻灯片的整个标记，一个将要作为幻灯片的图像列表，并且我们还将使用3个不同版本的图像，以便稍后可以使用jQuery Cycle插件看到一些操作。

我们还将设置一个空白div，该div将绝对位于图像的顶部，以用作框架，以防万一需要在CMS中实现此布局以获取一些动态内容。 如果发生这种情况，我们可以添加任何图像，而无需事先手工加工圆角和阴影。

最后，对于幻灯片，我们需要创建一个导航div，其中包含用于“上一个”和“下一个”画廊导航的几个链接。 

<div id="gallery-holder">
	<ul class="slideshow">
		<li><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/slideshow/slide1.jpg" alt="slideshow 1" width="719" height="442" /></li>
		<li><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/slideshow/slide2.jpg" alt="slideshow 2" width="719" height="442" /></li>
		<li><img src="http://webdesigntutsplus.s3.amazonaws.com/136_ShutterPress/code_phase/images/slideshow/slide3.jpg" alt="slideshow 3" width="719" height="442" /></li>
	</ul> <!-- END SLIDESHOW -->
	<div class="slideshow-frame"></div>
	<div class="navigation">
		<a href="#" class="prev">Previous</a>
		<a href="#" class="next">Next</a>
	</div> <!-- END GALLERY NAVIGATION -->
</div> <!-- END GALLERY HOLDER -->

我们的最后一个内容块在自己的容器中设置了3个模块，每个模块本身就是一个div，我将对其进行浮动，因此它们彼此相邻。 里面有标题的h2标签和文本的段落。 

<div id="modules-holder">
	<div class="module">
		<h2 class="module-one">Module One</h2>
		<p>Sed korem sit feugiat erat at ante vestibulum auctor. Cras rhoncus diam et sem gravida sagittis. Ut tempor sapien in neque ultrices varius. Lorem ipsum text.</p>
	</div>
	<div class="module">
		<h2 class="module-two">Module Two</h2>
		<p>Pellentesque lacinia, augue vel venenatis commodo, ante neque tempor augue, semper rhoncus diam justo in ante. Aliquam in ultrices eleifend libero, in sit amen consectetur velit quis.</p>
	</div>
	<div class="module">
		<h2 class="module-three">Module Three</h2>
		<p>Suspendisse porta sem vel enim molestie suscipit elementum leo porta. Cras lorem lectus, viverra sit amet semper quis, vehicula quis velit.</p>
	</div>
</div> <!-- END MODULES HOLDER -->

步骤8第二页CSS

在这种特殊的设计中，获取幻灯片的框架有些棘手，所以我们要做的是：

我们将图层命名为“ Shape 90”，并将填充降至0％。 然后，右键单击名为“ 1720729_high”的图层，选择释放裁剪蒙版，然后隐藏该图层。

回到图层“ Shape 90”并将不透明度设置为50％。 右键单击该图层并进行复制，选择两个“ Shape 90”图层并将其合并。

现在，您可以将框架另存为单独的透明.png，只需在角落添加一些白色背景即可覆盖背面的图像。

我们设置模块的尺寸并浮动它们以使其内联； 之后，我们将样式和精灵一起设置为图标的背景图像。

我们将滑块上的列表项设置为以下位置：绝对； 与ul有关，这样它们将折叠起来并看起来像一张图像，这样我们就可以获得布局的真实外观，我们将在整体准备就绪后添加功能。

上一个和下一个按钮的位置也绝对正确，因此我们可以使它们垂直居中。 

/* Slideshow Gallery Content*/
#gallery-holder {
	position: relative;
	width: 719px;
	margin:20px auto 0;
	height: 442px;
}

#gallery-holder .slideshow-frame {
	background:url("../images/slideshow-frame.png") no-repeat scroll 0 0 transparent;
	height:442px;
	position:absolute;
	top:0;
	left: 0;
	width:719px;
	z-index: 10;
}

#gallery-holder .slideshow li {
	height:442px;
	position:absolute;
	top:0;
	width:719px
}

#gallery-holder .navigation a {
	height:92px;
	left:0;
	margin-top:-44px;
	position:absolute;
	top:50%;
	width:47px;
	z-index:15;
}

#gallery-holder .navigation a.prev {
	background-position:-6px -103px;
	margin-top:-44px;
}

#gallery-holder .navigation a.next {
	background-position:-65px -103px;
	left:auto;
	right:0;
}

#modules-holder {
	overflow: hidden;
	margin-top: 24px;
	margin-left: 20px;
}

#modules-holder .module {
	float: left;
	width: 204px;
	margin-right: 40px;
}

#modules-holder .module h2 {
	font-size:18px;
	font-weight:normal;
	margin-bottom:5px;
	padding-left:25px;
}

#modules-holder .module h2.module-one {
	background:url("../images/sprite.png") no-repeat scroll -128px -170px transparent;
}

#modules-holder .module h2.module-two {
	background:url("../images/sprite.png") no-repeat scroll -128px -140px transparent;
}

#modules-holder .module h2.module-three {
	background:url("../images/sprite.png") no-repeat scroll -128px -110px transparent;
}

#modules-holder .module p {
	color: #6a6a6a;
	line-height: 15px;
}

完成所有这些之后，我们可以看到模块标题上带有Museo字体，而不是网络安全字体，因此我们需要使用@ font-face进行设置。 因此，我们通过Font Squirrel（http://www.fontsquirrel.com/fontface/generator）来运行字体，并将字体放置在Project根目录中其各自的fonts文件夹中，并使用正确的设置在常规设置中设置CSS字体的路径。 

/*---------------------------------*/
/* GENERAL SETTINGS  */
/*-------------------------------*/
body {
      height:100%;
      font: 12px/12px "Lucida Sans", "Lucida Grande", sans-serif;
      color: #000;
      background: url('../images/bg.jpg') repeat #fff;
}
a {text-decoration:none; color: #000;}
a:hover {text-decoration:none; color: #0285da;}


@font-face {
    font-family: 'Museo700';
    src: url('../fonts/museo700-regular-webfont.eot');
    src: url('../fonts/museo700-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/museo700-regular-webfont.woff') format('woff'),
         url('../fonts/museo700-regular-webfont.ttf') format('truetype'),
         url('../fonts/museo700-regular-webfont.svg#Museo700') format('svg');
    font-weight: normal;
    font-style: normal;
}

因此，我们现在需要做的就是将字体系列设置为我们的h2标签，现在第二页已完成。 

#modules-holder .module h2 {
	font-family:'Museo700';
	font-size:18px;
	font-weight:normal;
	margin-bottom:5px;
	padding-left:25px;
}

步骤9 jQuery Magic

现在为项目添加一些功能和动画，我们将使用两个插件：幻灯片的jQuery Cycle（ http://jquery.malsup.com/cycle/ ）和prettyPhoto的灯箱图库（ http：// www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ ），然后为菜单手风琴创建一个自定义函数。

确保下载了prettyPhoto插件并将必要的资源复制到它们各自的文件夹（“ js”文件夹中的javascript，样式表到“ css”文件夹等），可以从Github链接到Cycle插件，并且可以链接到jQuery来自Google API。

我们还将在JS文件夹中创建一个main.js文件，可以在其中放置自定义函数和插件配置。

因此，我们在html文件的标题中引用样式表 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>ShutterPress</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" ></meta>
	<link rel="stylesheet" type="text/css" href="css/all.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css" media="screen" />
</head>

我们还在文档底部恰好在html标记之前引用了javascript文件。 

</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</html>

现在，我们返回到缩略图列表，并设置具有rel属性的链接，以使灯箱画廊正常工作。 我们还有指向占位符500x500图片的链接，因此我们可以在灯箱上显示一些内容 

<li><a href="images/500X500.gif" rel="prettyPhoto[gallery]"><img src="images/gallery/thumb1.jpg" alt="thumbnail" width="150" height="121" /></a></li>

最后，我们转到main.js文件并开始配置我们的插件。 确保阅读了插件的文档，以便准确了解它们的工作方式以及自定义它们的选项。

对于我们的手风琴，我们需要设置一个click函数，以检查链接是否具有“打开”或“关闭”类。 如果已“关闭”，则它将打开相应的子菜单，然后折叠所有其他子菜单并更改链接的类，以便显示右侧的图标。 如果被单击的对象具有“打开”类，则将其关闭并更改图标。 

$(document).ready(function() {

	//prettyPhoto LIGHTBOX
	$("a[rel^='prettyPhoto']").prettyPhoto();


	//MENU ACCORDION
	$('#left .menu li a').click(function(){
		if ( $(this).hasClass('closed') ) {
			$(this).toggleClass('opened closed');
			$(this).parent().siblings().find('.sub-menu').slideUp();
			$(this).parent().siblings().find('a.opened').toggleClass('opened closed');
			$(this).next().slideDown();
			return false;	
		} else if ( $(this).hasClass('opened') ){
			$(this).toggleClass('opened closed');
			$(this).next().slideUp();
			return false;
		}
	})
	

	//SLIDER GALLERY	
	$('.slideshow').cycle({
		fx: 'fade',
		next: '#gallery-holder .navigation a.next',
		prev: '#gallery-holder .navigation a.prev'
	});
});

第三天结束 ：复习

现在，我们有一个100％完成的项目，其中包含可运行的画廊和子菜单动画。 请享用！

在我们的教程系列的最后一天，我们将引导您完成如何仅使用几次快速编辑就可以创建此模板的自定义变体的方法。 从深色，低俗的风格到现代的金属效果，您都不想错过最后一天！

哦! 我们在本教程的第一天就提到了这一点，但是如果您有兴趣在ThemeForest上提供此模板的WordPress版本，请在评论部分告诉我！

编码积分

本系列此阶段的编码和教程全部由CodeMyConcept提供，CodeMyConcept为设计师提供了广泛的编码服务-从PSD> HTML转换到电子邮件模板和WordPress主题转换。 在CodeMyConcept.com上查看他们的网站！

翻译自: https://webdesign.tutsplus.com/articles/shutterpress-design-code-a-photo-portfolio-site-day-3-htmlcss--webdesign-2839

标签
#列表 #html #css #web #js
#ViewUI
飞飞CMS仿迅播电影网模板+手机模板(非网络流传版)整站源码+VIP采集插件+修复频道 立即下载

相关推荐

movieLens电影数据集ml-100k的配图，在电影网站上爬取的

本人花2天时间学习简单http协议然后写了个破代码在imdb上爬取了MovieLens数据集的配图，由于MovieLens中的数据集链接已失效，所以只能根据imdb网站的搜索引擎慢慢爬取图片。希望对毕设为推荐系统的童鞋有些许作用。。。

ShutterPress：设计和编码照片作品集网站（第2天：切片和代码准备）

我是以照片为中心的网站设计的忠实拥护者...今天，我很高兴推出一个针对摄影师，插画家和其他视觉创意的新“完整网站”教程。 在第一天，我们使用一些特殊的技巧和技术在Photoshop中设计了模板。 今天，在第2天，我们将完成最后的设计阶段，然后为编码阶段做一些“飞行前”准备，我们将在第3天中详细介绍。在第4天，我们将展示您如何使用相同的原始HTML创建三个完全不同的网站。 简介 ：第二天，“...

Web design 教程小屋 435

jQuery+shutter.js圆角百叶窗图片轮播代码

这是一款基于shutter.js制作多种幻灯片轮播切换特效，jQuery圆角百叶窗图片轮播代码。

找不到好看的电影就看《IMDB排名前500电影》

IMDB排名前500电影  IMDB网站可能是目前互联网上最为权威、系统、全面的电影资料网站，它所特有的电影评分系统深受影迷的欢迎，注册的用户可以给任何一部影片打分并加以评述，而网站又会根据影片所得平均分、选票的数目等计算得出影片的加权平均分并以此进行TOP250（最佳250部影片）和Bottom100（最差100部影片）的排行。由于影片资料的更新和所得评分的不断变化，

rub00001的专栏 2万+

YOLO详解

本文参考知乎 https://zhuanlan.zhihu.com/p/25236464 1. YOLO的创新点 YOLO将物体检测作为回归问题求解。基于一个单独的end-to-end网络，完成从原始图像的输入到物体位置和类别的输出。 从网络设计上，YOLO与two steps的目标检测方法如RCNN、Fast RCNN和Faster RCNN的区别如下： YOLO训练和检测均是在一个单独网...

UnknownPlayer的博客 9953

Microapp 接入vite子应用

MicroApp接入vite版本，干货满满，手把手步骤说明，加上报错说明，赶紧上车！

outsider76557的博客 4660

带旋转的百叶窗（Shutter）

带旋转的百叶窗（Shutter）示例HTMLCSSJS 示例 HTML <div></div> CSS body { margin: 0; padding: 0; background-color: #000000; } JS /*global TweenLite,TweenMax,TimelineMax,Power0,Power2,Power4,Back,Bounc...

知屋安砖 1188

Windows 10/11一键搞定HDF5文件查看：HDFView 3.4.1免配置安装指南（附中文路径避坑技巧）

本文详细介绍了HDFView 3.4.1在Windows 10/11上的免配置安装方法及中文路径优化技巧。作为HDF5文件查看的专业工具，HDFView 3.4.1简化了安装流程，提升了科研数据处理效率，特别适合遥感、气象等领域的研究人员使用。

qsc9012345的博客 1146

prettyPhoto 的使用

“You can also open galleries using the API, just pass arrays to the open function.” api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg']; a...

xdy2008 821

labview设置工业摄像头外部触发

使用labview对海康MV-CA013-GM相机设置外部触发。 一、硬件部分 1、硬件引脚定义 2、触发模式设置 相机的触发模式分为两种，一种是内触发模式、另外一种是外触发模式。 3、接线图 信号线的地要跟给信号的设备共地。信号线给高电平时触发拍照。 二、软件部分 1、创建vision acquisition 2、选择使用的摄像头。 3、选择模式。 4、在Acquisition Control中设置这些选项。 5、设置保存图片路径 设置保存路径和保存图片的格式。点击完成即可 参考：https:/

qq_43493715的博客 5665

安卓游戏存档修改全攻略：以《英雄迷宫冒险》为例（附避坑指南）

本文详细介绍了安卓游戏存档修改的全过程，以《英雄迷宫冒险》为例，涵盖基础认知、工具选择、实战修改及风险控制。通过十六进制编辑和UTF-8编码解析，玩家可以修改金钱、角色属性和物品数量等数据，同时提供了避坑指南和伦理考量，帮助玩家在享受修改乐趣的同时保持游戏体验的平衡。

weixin_29209801的博客 392

Failed to load module script：服务器回的是 text/html

当模块脚本（<script type="module">）请求的资源返回 200 状态但 Content-Type 为 text/html 时，浏览器因严格 MIME 检查而拒绝加载，报错“Expected a JavaScript-or-Wasm module script but received text/html”。该问题常见于缺失的 chunk 被服务器错误返回 index.html。与经典脚本不同，模块脚本始终强制检查 MIME 类型，即使状态码成功也无效。import() 的拒绝仅提示 Fai

qq_40822000的博客 175

Hcaptcha验证码破解深度解析：从环境检测到n值算法的攻防实战

本文深入解析Hcaptcha验证码的攻防技术，从环境检测到n值算法的全面突破策略。详细介绍了浏览器指纹模拟、图像识别工程化解决方案及协议层逆向分析，为安全研究人员提供高效破解Hcaptcha的实战指南。

weixin_42563415的博客 375

GPT Image 2 出的 UI 图如何转成 HTML 和可编辑 Figma

AI 生成的 UI 图，本身只是起点。用 Codex 或 Claude Code 把它变成 HTML，就有了能演示的页面；用 html.to.design 把 HTML 导回 Figma，就有了能沉淀的设计源文件；用 Codia 直接把图转成 Figma，则适合只要设计稿、追求速度的场景。三条链路互相补充，组合起来就形成了"图、代码、设计稿"之间的闭环。同时也要清楚它的边界：单张位图缺少精确数值，像素级还原目前还做不到稳定；图里的文字和图标需要人工把关。

JEECG官方博客 231

解决群晖NAS无法拉取docker镜像问题

在2024-06-01日以前，使用SSH登录后是可以直接拉取docker镜像的；但是之后当我们使用SSH登录上群晖NAS，使用【sudo -i】切换到超管拉取镜像会提示报错【error pulling image configuration: Get "https://production.cloudflare.docker.com/registry-v2/docker/registry/v2/blobs/sha256/cf/cff6b68a194a672fd337d8728bfb252071012cce6

提供C#相关开发 、云计算、运维测试、网络安全相关技术分享与服务，有意向可联系。 2万+

Hermes Agent 桌面版安装部署完全指南：一步步安装自进化Agent智能体

是由开发的开源自主 AI 智能体（MIT 协议）。它不是绑定在集成编辑器上的编码助手，也不是围绕单一 API 的聊天机器人封装——它是一个越用越强大的自主智能体，拥有独一无二的闭环学习系统特性说明自主技能创建在复杂任务后自动生成可复用的 Skills（技能）技能自我改进使用过程中持续优化已有技能持久化记忆跨会话记住你的项目、偏好和解决方案用户画像建模通过 Honcho 方言式推理，逐步构建对你的深度理解20+ 平台接入。

大模型与Agent智能体 7763

开源项目推荐：2027 高考志愿填报指北｜开源单页 HTML 高报资料工具书

高考志愿填报信息量大、维度多，考生与家长往往面临资料零散、信息不对称、优质内容收费门槛高等问题。《2027 高考志愿填报指北》是雪人老师开源的高报笔记资料汇编，将 683 篇、280.5 万字的原创笔记整合为单页 HTML 电子书，覆盖专业、院校、城市、填报攻略四大板块。支持左侧折叠导航、快速跳转、浏览器原生 A4 打印，可在线阅读也可本地保存使用，采用 CC BY-NC 4.0 协议开源，非商业场景可自由传播改编，是高考志愿填报阶段实用的免费参考工具书。关键词：高考志愿填报；高报资料；开源电子书；

Admans的专栏 304

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf：最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版，包括SDIO 接口的外设，SDIO 接口官方协议等。

网页 HTML 基础入门：从基本结构到表单实战

HTML 是网页开发的第一步，掌握基本结构、常用标签、超链接、图片和表单后，就可以独立写出简单的静态页面。先熟悉 HTML 基本结构，养成规范书写习惯。练习常用标签，尤其是链接、图片和表单。遇到不熟悉的标签，随时查阅 W3School 手册。掌握 HTML 之后，可以继续学习 CSS 美化页面，以及 JavaScript 实现交互，逐步进入完整的前端开发领域。

TAOZE123的博客 355

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用，资源的后缀为tar.gz格式的压缩包

纯静态HTML项目文件打包成war包

纯静态HTML项目文件打包成war包

bjzhang75的博客 215

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册，内含HL7和ASTM)

一个简单的js javascript+html字幕浮动窗口

【代码】一个简单的js javascript+html字幕浮动窗口。

大话程序员 23

HTML 转 Word API：HTML 与 URL 输入、DOCX 输出和版式核对

HTML 转 Word API 可把 HTML 正文或公开网页转为可编辑的 DOCX。请求用 type 指定输入类型，用 content 传正文或地址。可选择公开链接或归属当前应用的私有文件引用。

DevOpenClub 专栏 256

【教学类-150-03】20261108蝴蝶连连看html（一页2个版面、3个版面）

【教学类-150-03】20261108蝴蝶连连看html（一页2个版面、3个版面）

reasonsummer的博客 153

用VBA调用Python脚本抽取Word文档表格HTML

本文通过使用VBA调用Python脚本抽取Word文档中的表格的等价HTML表结构代码，演示了VBA调用Python脚本以及获取Python节本输出的方法。

yivifu的专栏 184

OpenCode v2.2 Artifacts 实战：让 Agent 交付可预览 HTML、插件存储与发布治理

OpenCode v2.2.4 新增实验性的 Artifacts 能力，Agent 可以创建、读取、更新、删除并预览 HTML 或静态制品。本文从启用配置、四类核心工具、本地 Provider、插件存储、版本化更新、预览验收到安全与发布治理，给出一套把“代码生成”升级为“可查看、可验收、可追溯交付”的团队实践。

jerry764的博客 427

INP实战：单文件HTML全量重绘拖到226ms

单文件 HTML 工作台实测：一次点击全量重建 7 个模块，1000 条时 JS 侧 226ms 掉出 INP 良好区间。读完能拿到 DOM 节点账、写放大倍数、七源串行 59.7s→8.8s 的并发改造对比与 6 个优化修法。

Dai_sir_man的博客 206

Nginx出向代理实战系列：安全部门只允许开放点对点SNAT、目标用CDN导致IP动态变化怎么办，网络通却返回HTML踩坑复盘

本文复盘了一次复杂的Nginx出向代理实战：面对CDN动态IP、安全策略限制及七层请求不规范三大难题，通过网络层放宽（支持域名解析）、应用层收紧（硬编码location+白名单逻辑）实现安全隔离；针对“通而不畅”问题，补全Host透传、标准Header与HTTPS配置，最终解决CDN返回HTML而非JSON的典型七层瓶颈。核心启示：网络通≠业务通，外网代理必须满足CDN鉴权要求，安全与业务需在约束中寻找最优解。

个人站点：https://www.heimajinpai.cn/ 510
上一篇： html 全屏渐变色_快速提示：将图像用作全屏仿渐变背景
下一篇： tuts4you 注册_设计和开发完整的网站（Tuts + Mini系列，第3页）
点赞 0
评论 0
书签 书签 0
daique1908
daique1908
博客等级 码龄10年 29粉丝 0原创
+ 关注
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值