目录
一、更多推荐
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业模板案例、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
5000+完整代码，主题涵盖30+种类型。关注作者，点赞收藏博文，获取更多源码，Thanks！
二、网页简介
本实例以“摄影”为主题设计，本实例为html+css+js代码。系统文件种类包含：html结构文件、css网页样式文件，js网页样式文件，div+css左右布局、表格等实例，案例比较简单，供大家参考。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
三、网页效果
提示：以下是本篇文章正文内容，下面案例供参考:
四、代码展示
1.HTML
代码如下（节选示例）：
<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=utf-8" />
<title>艺术摄影,婚纱摄影,纪实摄影,儿童摄影,摄影器材</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>
<body>
<div class="wrap clearfix">
<!-- left nav start -->
<div class="index_left fl">
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="nav">
<ul>
<li id="nav_01"><a href="index.html">网站首页</a></li>
<li><a href="list.html">新闻中心</a></li>
<li><a href="show.html">作品展示</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="">客户留言</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</div>
<div class="tel">
<ul>
<li><a href="">设为首页</a></li>
<li><a href="">加入收藏</a></li>
<li class="tel_con">电话：400-000-0000</li>
</ul>
</div>
</div>
<!-- left nav end-->
<div class="index_right fr">
<div class="banner"><img src="images/banner.jpg" /></div>
<div class="main">
<!--服务项目 start-->
<div class="index_obj">
<div class="title">服务项目 / Service Project</div>
<div class="index_obj_img clearfix">
<ul>
<li><img src="images/objpic01.jpg" height="200" /><a href=""><span>儿童摄影</span></a></li>
<li><img src="images/objpic03.jpg" height="200" /><a href=""><span>婚纱摄影</span></a></li>
<li class="no_mar"><img src="images/objpic04.jpg" height="200" /><a href=""><span>创意摄影</span></a></li>
</ul>
</div>
</div>
<!--服务项目 end-->
<!--关于我们 start-->
<div class="index_about">
<div class="title">关于我们 / About Us</div>
<div class="index_about_con"> 文摄影 Photography 一词是源于希腊语 φω phos（光线）和 γραφι graphis（绘画、绘图）或γραφη graphê，两字一起的意思是“以光线绘图”。是指使用某种专门设备进行影像记录的过程，一般我们使用机械照相机或者数码照相机进行摄影。有时摄影也会被称为照相，也就是通过物体所反射的光线使感光介质曝光的过程。有人说过的一句精辟的语言：摄影家的能力是把日常生活中稍纵即逝的平凡事物转化为不朽的视觉图像。 <br />
摄影是一门随着传统摄影技术的形成和发展而产生的摄影应用科学，它以摄影光学、摄影化学和电子技术为基础，在长期实践中形成了独特的拍摄体系。 <br />
一般简称的摄影，即是用照相机，映像在底片，冲印底片成为单一相片，一张张作永久保存。但相片的影像是不动、无声，仅供人观赏其人物、意境，进而体会其涵义。 今天世界上仍存留最早的一张照片可以追溯至1827年，出自法国人约瑟夫·尼埃普斯之手。 </div>
</div>
<!--关于我们 end-->
<!--产品展示 start-->
<div class="index_show">
<div class="title">作品展示 / Work Display</div>
<div class="projects-holder clearfix">
<div class="col-md-4 col-sm-6 fl">
<div class="project-item"> <img src="images/showpic01.jpg" height="218">
<div class="project-hover">
<div class="inside">
<h5><a href="#">纪实摄影</a></h5>
<p>摄影是一门随着传统摄影技术的形成和发展而产生的摄影应用科学，它以摄影光学、摄影化学和电子技术为基础，在长期实践中形成了独特的拍摄体系。摄影是一门随着传统摄影技术的形成和发展而产生的摄影应用科学，它以摄影光学、摄影化学和电子技术为基础，在长期实践中形成了独特的拍摄体系特的拍摄体系。独特的拍摄体系。</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 fl">
<div class="project-item"> <img src="images/showpic02.jpg" height="218">
<div class="project-hover">
<div class="inside">
<h5><a href="#">艺术摄影</a></h5>
<p>摄影是一门随着传统摄影技术的形成和发展而产生的摄影应用科学，它以摄影光学、摄影化学和电子技术为基础，在长期实践中形成了独特的拍摄体系。</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 fl">
<div class="project-item"> <img src="images/showpic03.jpg" height="218">
<div class="project-hover">
<div class="inside">
<h5><a href="#">纪实摄影</a></h5>
<p>摄影是一门随着传统摄影技术的形成和发展而产生的摄影应用科学，它以摄影光学、摄影化学和电子技术为基础，在长期实践中形成了独特的拍摄体系。</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 fl">
<div class="project-item"> <img src="images/showpic04.jpg" height="218">
<div class="project-hover">
<div class="inside">
<h5><a href="#">摄影器材</a></h5>
<p>摄影是一门随着传统摄影技术的形成和发展而产生的摄影应用科学，它以摄影光学、摄影化学和电子技术为基础，在长期实践中形成了独特的拍摄体系。</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 fl">
<div class="project-item"> <img src="images/showpic05.jpg" height="218">
<div class="project-hover">
<div class="inside">
<h5><a href="#">婚纱摄影</a></h5>
<p>摄影是一门随着传统摄影技术的形成和发展而产生的摄影应用科学，它以摄影光学、摄影化学和电子技术为基础，在长期实践中形成了独特的拍摄体系。</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 fl">
<div class="project-item"> <img src="images/showpic06.jpg" height="218">
<div class="project-hover">
<div class="inside">
<h5><a href="#">婚纱摄影</a></h5>
<p>摄影是一门随着传统摄影技术的形成和发展而产生的摄影应用科学，它以摄影光学、摄影化学和电子技术为基础，在长期实践中形成了独特的拍摄体系。</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--产品展示 end-->
<!--资讯中心 start-->
<div class="index_news">
<div class="title">资讯中心 / Information Center</div>
<ul>
<li class="clearfix mar_b">
<div class="index_news_img fl"><img src="images/showpic06.jpg" height="270" /></div>
<div class="index_news_list fr">
<h4>中国"美丽玉溪"新天地杯旅游摄影大展</h4>
<div class="news_desc">1899年，英国举办了法国印象派绘画的首次展览。绘画主义派摄影家罗宾森在其影响下，提出“软调摄影比尖锐摄影更优美”的审美标准，提倡“软调”摄影。该流派是绘画印象派在摄影艺术领域中的反映。</div>
......
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
body { margin: 0px; padding: 0px; font-size: 14px; font-family: "微软雅黑"; }
/*万能清除浮动开始*/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-table; } /* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.fl { float: left; }
.fr { float: right; }
ul { list-style: none; overflow: hidden; margin: 0px; padding: 0px; }
a { color: #fff; text-decoration: none; }
img { border: none; }
/*左边部分 导航*/
.index_left { width:22%; height: 100%; position: fixed; background: #5f6d7e; }
.logo img { width:100%;}
#nav_01 { background: #495461; }
.nav { text-align: center;height:300px; overflow:hidden; }
.nav ul li { height: 50px; line-height: 50px; overflow:hidden;}
.nav ul li:hover { background: #495461;/* opacity:0.2;*/ }
/*右边部分*/
.index_right {width:78%; }
.banner img ,.banner_n img{ width:100%; }
.tel { margin-left:8px; font-size:12px; margin-top:10px; margin-bottom:10px;}
.tel ul li{ float:left; padding:0px 8px;}
.tel a{ color:#b3b5b8;}
.tel a:hover{ color:#fff;}
.tel_con { color:#b3b5b8; font-size:14px;}
.main { width:96%;padding:0 2%;}
/*服务项目*/
.index_obj_img .no_mar , .showpic .no_mar{ margin-right:0px;}
.index_obj ul li a{ color:#333;}
.index_obj ul li span{ display:block; text-align:center; padding:10px 0px; background:#f1f1f1;}
.index_obj ul li span:hover{ background:#e1e1e1;}
.index_obj_img img{ width:100%;}
.index_obj_img ul li{ float:left; margin-right:12px; width:32.4%;}
/*关于我们*/
.index_about , .index_show ,.index_news ,.index_obj{ padding-top: 40px; }
.title { font-size: 18px; border-bottom: 1px solid #CCC; padding-bottom: 20px; margin-bottom: 20px; }
.index_about_con { line-height:34px; text-indent:2em;}
/*产品展示*/
/*------ projects ------ */
.projects-holder { margin-right: 0; margin-left: 0;}
.projects-holder .col-md-4, .projects-holder .col-md-4 { padding-right: 3px; padding-left: 3px; }
.col-sm-6{ width:32.4%;}
.project-item {width:100%;margin-bottom:5px; overflow: hidden; position: relative; }
.project-item img { width:100%; display: block; }
.project-item:hover .project-hover { top: 0; opacity: 1; visibility: visible; }
.project-hover { position: absolute; width: 100%; height: 100%; top: 40px; left: 0; background: rgba(0, 0, 0, 0.9); opacity: 0; visibility: 0; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -ms-transition: all 200ms linear; -o-transition: all 200ms linear; transition: all 200ms linear; }
.project-hover .inside { position: absolute; width: 100%; left: 0; bottom: 0; padding:30px 1px;}
.project-hover h5 { font-size: 14px; margin-bottom: 10px; height:20px; line-height:20px; overflow:hidden;}
.project-hover h5 a { color: white; }
.project-hover p { color: white; font-size: 12px; height:140px;line-height: 20px; overflow:hidden;}
/*资讯中心*/
.index_news ul li{}
.index_news_img{ width:37%;}
.index_news_img img{ width:100%; height:270px;}
.index_news_list{/* width:540px;*/ width:61%; padding-left:2%;}
.index_news_list h4{ font-size:20px; font-weight:normal;}
.news_desc{ color:#666; height:90px;line-height:28px; overflow:hidden;}
.index_news_list ul{ height:92px; overflow:hidden;}
.index_news_list ul li{ height:30px; line-height:30px; overflow:hidden; background:url(/moban/xy/21/84/images/li.png) no-repeat left; padding-left:14px;}
.mar_b{ margin-bottom:40px;}
.index_news_list a{ color:#000;}
.index_news_list ul li a:hover{ color:#5f6d7e;}
.link{ margin:20px 0px;}
.link a{ color:#333;}
/*footer*/
.footer{ text-align:center; line-height:38px; border-top:2px solid #e1e1e1; padding-top:10px;margin-bottom:20px;}
.footerwby a{ color:#333;}
/*二级页面*/
/*show*/
.show_fenl .no_mar{ margin-left:0px;}
.show_right{ width:78%;}
.locat{ font-size:18px;margin:40px 0px; padding-bottom:30px; border-bottom:1px solid #e1e1e1;}
.locat a ,.show_fenl a{ color:#333;}
.locat a:hover{ color:#5f6d7e;}
.show_fenl { text-align:right; }
.show_fenl ul li{float:left; background:#5f6d7e; margin:10px; padding:10px;}
.show_fenl ul li a{ font-size:16px; color:#fff;}
.show_fenl ul li a:hover{ text-decoration:underline;}
.showpic{ margin:30px 0px;}
.showpic ul li{ float:left; width:32.4%; margin-right:12px; margin-bottom:12px;}
.showpic ul li img{ width:100%; height:218px;}
.showpic ul li span{ display:block; color:#333; text-align:center; background:#f1f1f1; padding:10px 0px;}
.showpic ul li span:hover{background:#e1e1e1;}
/*分页*/
.Page{width:100%; text-align:center; padding:30px 0px;}
.Page a{display:inline-block;width:65px;background:#ffffff;height:48px; vertical-align:middle; line-height:48px; font-size:14px; border:1px solid #e5e5e5; margin-left:-1px; float:left;text-decoration:none; color:#333; outline:none;}
.Page a:hover{ background:#5f6d7e; color:#FFF;background-repeat:no-repeat; }
.Page span{display:inline-block;min-width:45px; padding:0 10px;background:#ffffff;height:48px; vertical-align:middle; line-height:48px; font-size:14px; border:1px solid #e5e5e5; margin-left:-1px;float:left;}
.Page span.current{ background:#5f6d7e; color:#FFF}
......
3.JS
/*! jQuery v1.8.2 jquery.com | jquery.org/license */
(function(a,b){function G(a){var b=F[a]={};return p.each(a.split(s),function(a,c){b[c]=!0}),b}function J(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(I,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:+d+""===d?+d:H.test(d)?p.parseJSON(d):d}catch(f){}p.data(a,c,d)}else d=b}return d}function K(a){var b;for(b in a){if(b==="data"&&p.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function ba(){return!1}function bb(){return!0}function bh(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function bi(a,b){do a=a[b];while(a&&a.nodeType!==1);return a}function bj(a,b,c){b=b||0;if(p.isFunction(b))return p.grep(a,function(a,d){var e=!!b.call(a,d,a);return e===c});if(b.nodeType)return p.grep(a,function(a,d){return a===b===c});if(typeof b=="string"){var d=p.grep(a,function(a){return a.nodeType===1});if(be.test(b))return p.filter(b,d,!c);b=p.filter(b,d)}return p.grep(a,function(a,d){return p.inArray(a,b)>=0===c})}function bk(a){var b=bl.split("|"),c=a.createDocumentFragment();if(c.createElement)while(b.length)c.createElement(b.pop());return c}function bC(a,b){return a.getElementsByTagName(b)[0]||a.appendChild(a.ownerDocument.createElement(b))}function bD(a,b){if(b.nodeType!==1||!p.hasData(a))return;var c,d,e,f=p._data(a),g=p._data(b,f),h=f.events;if(h){delete g.handle,g.events={};for(c in h)for(d=0,e=h[c].length;d<e;d++)p.event.add(b,c,h[c][d])}g.data&&(g.data=p.extend({},g.data))}function bE(a,b){var c;if(b.nodeType!==1)return;b.clearAttributes&&b.clearAttributes(),b.mergeAttributes&&b.mergeAttributes(a),c=b.nodeName.toLowerCase(),c==="object"?(b.parentNode&&(b.outerHTML=a.outerHTML),p.support.html5Clone&&a.innerHTML&&!p.trim(b.innerHTML)&&(b.innerHTML=a.innerHTML)):c==="input"&&bv.test(a.type)?(b.defaultChecked=b.checked=a.checked,b.value!==a.value&&(b.value=a.value)):c==="option"?b.selected=a.defaultSelected:c==="input"||c==="textarea"?b.defaultValue=a.defaultValue:c==="script"&&b.text!==a.text&&(b.text=a.text),b.removeAttribute(p.expando)}function bF(a){return typeof a.getElementsByTagName!="undefined"?a.getElementsByTagName("*"):typeof a.querySelectorAll!="undefined"?a.querySelectorAll("*"):[]}function bG(a){bv.test(a.type)&&(a.defaultChecked=a.checked)}function bY(a,b){if(b in a)return b;var c=b.charAt(0).toUpperCase()+b.slice(1),d=b,e=bW.length;while(e--){b=bW[e]+c;if(b in a)return b}return d}function bZ(a,b){return a=b||a,p.css(a,"display")==="none"||!p.contains(a.ownerDocument,a)}function b$(a,b){var c,d,e=[],f=0,g=a.length;for(;f<g;f++){c=a[f];if(!c.style)continue;e[f]=p._data(c,"olddisplay"),b?(!e[f]&&c.style.display==="none"&&(c.style.display=""),c.style.display===""&&bZ(c)&&(e[f]=p._data(c,"olddisplay",cc(c.nodeName)))):(d=bH(c,"display"),!e[f]&&d!=="none"&&p._data(c,"olddisplay",d))}for(f=0;f<g;f++){c=a[f];if(!c.style)continue;if(!b||c.style.display==="none"||c.style.display==="")c.style.display=b?e[f]||"":"none"}return a}function b_(a,b,c){var d=bP.exec(b);return d?Math.max(0,d[1]-(c||0))+(d[2]||"px"):b}function ca(a,b,c,d){var e=c===(d?"border":"content")?4:b==="width"?1:0,f=0;for(;e<4;e+=2)c==="margin"&&(f+=p.css(a,c+bV[e],!0)),d?(c==="content"&&(f-=parseFloat(bH(a,"padding"+bV[e]))||0),c!=="margin"&&(f-=parseFloat(bH(a,"border"+bV[e]+"Width"))||0)):(f+=parseFloat(bH(a,"padding"+bV[e]))||0,c!=="padding"&&(f+=parseFloat(bH(a,"border"+bV[e]+"Width"))||0));return f}function cb(a,b,c){var d=b==="width"?a.offsetWidth:a.offsetHeight,e=!0,f=p.support.boxSizing&&p.css(a,"boxSizing")==="border-box";if(d<=0||d==null){d=bH(a,b);if(d<0||d==null)d=a.style[b];if(bQ.test(d))return d;e=f&&(p.support.boxSizingReliable||d===a.style[b]),d=parseFloat(d)||0}return d+ca(a,b,c||(f?"border":"content"),e)+"px"}function cc(a){if(bS[a])return bS[a];var b=p("<"+a+">").appendTo(e.body),c=b.css("display");b.remove();if(c==="none"||c===""){bI=e.body.appendChild(bI||p.extend(e.createElement("iframe"),{frameBorder:0,width:0,height:0}));if(!bJ||!bI.createElement)bJ=(bI.contentWindow||bI.contentDocument).document,bJ.write("<!doctype html><html><body>"),bJ.close();b=bJ.body.appendChild(bJ.createElement(a)),c=bH(b,"display")
......
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
标签：Web,网页,index,height,width,return,js,margin,摄影 From： https://blog.csdn.net/d321654987123/article/details/144653895