目录
一、更多推荐
二、网页简介
三、网页文件
四、网页效果
五、代码展示
1.html
2.CSS
3.JS
六、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+完整代码，主题涵盖30+种类型:
本实例应用html5+css3+js： 导航菜单、图片轮翻效果、鼠标滑动图片旋转特效、视频、留言表单、返回主菜单按钮、注册、登录等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
本网页实例共包含6个页面：
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
<head>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>摄影·开课吧</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="EditRegion4" -->
<link rel="stylesheet" type="text/css" href="css/index.css">
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="EditRegion5" -->
<script type="text/javascript" src="js/index.js"></script>
<!-- InstanceEndEditable -->
</head>
<body>
<!--head begin-->
<header id="head">
<div class="con">
<ul class="left">
<li><a href="#">开课吧首页</a></li>
<li><a href="#">创业微学院</a></li>
<li><a href="#">摄影微学院</a></li>
<li><a href="#">微聚</a></li>
<li><a style="color: aliceblue;" href="https://blog.csdn.net/m0_67368443/article/details/cll/1.html">论坛</a></li>
</ul>
<ul class="right">
<li><a href="#">APP下载</a></li>
<li><a href="#">播放记录</a></li>
<li><a href="register.html">登录 | 注册</a></li>
</ul>
</div>
</header>
<!--head end-->
<!--nav begin-->
<nav>
<div class="nav_in">
<ul>
<li><a href="index.html"></a></li>
<li><a href="user.html">个人中心</a></li>
<li><a href="video.html">视频播放</a></li>
<li><a href="we.html">联系我们</a></li>
</ul>
<ol>
<li id="musicIcon" class="icon"></li>
<audio id="myAudio">
<source src="audio/audio.mp3" type="audio/mpeg">
</audio>
<script>audio = document.getElementById("myAudio");
var musicIcon = document.getElementById("musicIcon");
musicIcon.addEventListener("click", function() {
if (audio.paused) {
audio.play();
musicIcon.classList.add("playing");
} else {
audio.pause();
musicIcon.classList.remove("playing");
}
});
...
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
/*清除浏览器默认样式*/
body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img {margin:0;padding:0;border:0;list-style: none;}
/*全局控制样式*/
body{font-family:"微软雅黑",Arial, Helvetica, sans-serif; font-size:14px;}
a{color:#333;text-decoration: none;}
input,textarea{outline: none;}
@font-face {
font-family: 'freshskin';
src:url('https://blog.csdn.net/m0_/article/fonts/iconfont.ttf');
}
/*head begin*/
header{
width:100%;
height: 46px;
background: #0a2536;
}
header .con{
width:1200px;
margin:0 auto;
}
header .con .left{float: left;}
header .con .right{float: right;}
header .con .left li{
float: left;
height:46px;
line-height: 46px;
margin-right:50px;
color: #fff;
cursor: pointer;
}
header .con .right li{
float: right;
height:46px;
line-height: 46px;
margin-left:50px;
color: #fff;
cursor: pointer;
}
header .con .right li a{color:#fff;}
/*head end*/
/*nav begin*/
nav{
width:100%;
height:55px;
position:absolute;
background:rgba(255,255,255,0.8);
z-index:10;
}
nav .nav_in{
width:1200px;
margin:0 auto;
}
nav ul{float: left;}
nav ul li{
float: left;
margin-right: 50px;
font-size: 18px;
height:55px;
line-height: 55px;
}
nav ul li:first-child a{
display:inline-block;
height:55px;
width:118px;
background:url(https://blog.csdn.net/m0_/article/images/LOGO.png) no-repeat center left;
}
nav .nav_in ol{
float: right;
width:300px;
height: 55px;
font-family: "freshskin";
}
nav .nav_in ol li{
float: left;
width:32px;
height:32px;
line-height: 32px;
text-align: center;
color:#333;
box-shadow: 0 0 0 1px #333 inset;
transition:box-shadow 0.5s ease 0s;
border-radius: 16px;
margin:10px 0 0 30px;
cursor: pointer;
}
nav .nav_in ol li:hover{
box-shadow: 0 0 0 16px #fff inset;
color:#333;
}
/*nav end*/
/*banner begin*/
.banner{
width:100%;
height:720px;
position: relative;
color:#fff;
overflow: hidden;
text-align: center;
}
.banner .ban{
position: absolute;
top:0;
left:50%;
transform:translate(-50%,0);
}
.banner .current{display: block;}
.banner .pic{display: none;}
.banner h3{
font-weight: normal;
padding-top:70px;
color:#fff;
opacity: 0;
font-size: 50px;
transition:all 0.5s ease-in 0s;
}
...
代码如下（节选示例）：
window.οnlοad=function(){
//顶部的焦点图切换
function hotChange(){
var current_index=0;
var timer=window.setInterval(autoChange, 3000);
var button_li=document.getElementById("button").getElementsByTagName("li");
var pic_div=document.getElementById("banner_pic").getElementsByTagName("div");
for(var i=0;i<button_li.length;i++){
button_li[i].οnmοuseοver=function(){
if(timer){
clearInterval(timer);
}
for(var j=0;j<pic_div.length;j++){
if(button_li[j]==this){
current_index=j;
button_li[j].className="current";
pic_div[j].className="current";
}else{
pic_div[j].className="pic";
button_li[j].className="but";
}
}
}
button_li[i].οnmοuseοut=function(){
timer=setInterval(autoChange,3000);
}
}
function autoChange(){
++current_index;
if (current_index==button_li.length) {
current_index=0;
}
for(var i=0;i<button_li.length;i++){
if(i==current_index){
button_li[i].className="current";
pic_div[i].className="current";
}else{
button_li[i].className="but";
pic_div[i].className="pic";
}
}
}
}
hotChange();
}
...
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
要满足使用者的要求，网页适合使用，显示出其功能美；
围绕一个统一的目标设计，强调整体的功能性；
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
发挥网络的优势，想方设法使每个使用者都参与到其中来。
到此这篇网站制作代码照片（网页加照片代码）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/bcyy/18413.html