投稿
  1. 极客之音首页
  2. 技术随笔

简单网站前端示例（html+css+js）

小半 • • 技术随笔 • 阅读 226

导读：本篇文章讲解 简单网站前端示例（html+css+js），希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

html代码

草莓协会 

	<div class="slider" id="slider">
		<!-- 轮播图大图容器 -->
		<ul>
			<li>
				<img src="images/pic01.jpg" width="1440" height="330">
			</li>
			<li>
				<img src="images/1.jpg" width="1440" height="330">
			</li>
			<li>
				<img src="images/2.jpg" width="1440" height="330">
			</li>
			<li>
				<img src="images/3.jpg" width="1440" height="330">
			</li>
		</ul>
		<!-- 轮播图大图容器 END -->
		<!-- 控制条容器 -->
		<dl></dl>
		<!-- 控制条容器 END -->
	</div>
	
	<div class="main w1003">
		<div class="news fl bor">
			<div class="news-left fl">
				
			</div>
			<div class="news-right fr">
				<div class="news-right-top">
					<p>最新快讯</p>
					<em>NEWS</em>
					<a href="#" class="more fr">查看更多</a>
				</div>
				<div class="news-list">
					<ul>
						<li>
							<h4>2012-12-12<i></i></h4>
							<h5>
								<a href="#">金华会长出席中国安全生产协会矿用产品专业委员......</a>
							</h5>
						</li>
						<li>
							<h4>2012-12-12<i></i></h4>
							<h5>
								<a href="#">金华会长出席中国安全生产协会矿用产品专业委员......</a>
							</h5>
						</li>
						<li>
							<h4>2012-12-12</h4>
							<h5>
								<a href="#">金华会长出席中国安全生产协会矿用产品专业委员......</a>
							</h5>
						</li>
						<li>
							<h4>2012-12-12</h4>
							<h5>
								<a href="#">金华会长出席中国安全生产协会矿用产品专业委员......</a>
							</h5>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="notice fr bor">
			<div class="notice-top">
				<p>通知公告</p>
				<a href="#" class="more fr">NOTICE</a>
			</div>
			<div class="notice-list">
				<ul>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="hydt fl bor">
			<div class="hydt-top">
				<p>行业动态</p>
				<a href="#" class="more fr">Industry dynamics</a>
			</div>
			<div class="notice-list hydt-list">
				<ul>
					<li>
						<a href="#">金华会长出席中国安全生产矿用产品专...</a>
						<span>2012-12-12</span>
					</li>
					<li>
						<a href="#">金华会长出席中国安全协会矿用产品专...</a>
						<span>2012-12-12</span>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
						<span>2012-12-12</span>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
						<span>2012-12-12</span>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
						<span>2012-12-12</span>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
						<span>2012-12-12</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="hydt hdxx fl bor">
			<div class="hydt-top">
				<p>行业动态</p>
				<a href="#" class="more fr">Industry dynamics</a>
			</div>
			<div class="notice-list hydt-list">
				<ul>
					<li>
						<a href="#">金华会长出席中国安全生产矿用产品专...</a>
						<span>2012-12-12</span>
					</li>
					<li>
						<a href="#">金华会长出席中国安全协会矿用产品专...</a>
						<span>2012-12-12</span>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
						<span>2012-12-12</span>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
						<span>2012-12-12</span>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
						<span>2012-12-12</span>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
						<span>2012-12-12</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="notice cpzs fr bor">
			<div class="notice-top">
				<p>通知公告</p>
				<a href="#" class="more fr">NOTICE</a>
			</div>
			<div class="notice-list">
				<ul>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
					</li>
					<li>
						<a href="#">金华会长出席中国安全生产协会矿用产品专...</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="clear"></div>
		<div class="ad-box bor">
			<img src="images/pic02.jpg" alt="">
		</div>
		
		
	</div>
	
	<script src="js/nav.js"></script>
	<script src="js/move.js"></script>
	<script src="js/slider.js"></script>
	<script>
		// 导航接口的调用
		nav(document.getElementById('nav2'));
		/* 
		 * 轮播图接口的调用
		 * 参数：
		 * slideImgWrapper: 轮播图大图容器(必传)
		 * slideDotWrapper: 轮播图控制条容器(可选)
		 * curIndex: 轮播图默认初始化索引(可选)
		 * autoPlay: 轮播图是否自动播放(可选)
		 * callback：回调函数(可选)
		 */
		slider({
			slideImgWrapper: document.getElementById('slider').getElementsByTagName('ul')[0],
			slideDotWrapper: document.getElementById('slider').getElementsByTagName('dl')[0],
			curIndex: 0,
			autoPlay: true,
			callback: function(index){
				console.log('当前切换到了第'+(index+1)+'张');
			}
		});
	</script>
</body>

css代码

index.css
/* 提取公开的样式 */
.w1003 {
width: 1003px;
margin: 0 auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
.bor {
border: 1px solid #dbdbdb;
}
.text-overflow-cut {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

html {
overflow-x: hidden;
}

/* 页面的头部 */
.header {
height: 140px;
background: url(…/images/head-bg.jpg) 665px 30px no-repeat;
}
.head-logo {
width: 420px;
height: 104px;
background: url(…/images/logo.jpg) no-repeat;
margin: 20px 0 0 32px;
}
.head-logo strong {
margin: -100px 0 0 -500px;
}

/* 导航 */
.naver {
height: 40px;
background: #2d7600;
}
.nav {
height: 100%;
}
.nav ul li {
float: left;
width: 167px;
height: 100%;
text-align: center;
line-height: 40px;
position: relative;
z-index: 99;
}
.nav ul li > a {
display: block;
color: #fff;
font-size: 14px;
}
.nav ul li:hover > a {
background: #419e07;
}
.nav ul li.selected > a {
background: #419e07;
}

.xl-nav {
position: absolute;
width: 100%;
left: 0;
top: 40px;
overflow: hidden;
display: none;
}
.xl-nav dl dd {
height: 33px;
line-height: 33px;
margin-top: 2px;
}
.xl-nav dl dd a {
display: block;
background: rgba(45, 118, 0, .8);
color: #fff;
}
.xl-nav dl dd a:hover {
background: #419e07;
}

/* 轮播图 */
.slider {
width: 100%;
height: 330px;
position: relative;
}
.slider ul {
width: 100%;
height: 100%;
position: relative;
}
.slider ul li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slider ul li.current {
z-index: 8;
}
.slider ul li img {
position: absolute;
left: 50%;
top: 0;
margin-left: -720px;
}
.slider dl {
width: 100%;
height: 14px;
position: absolute;
left: 0;
bottom: 15px;
text-align: center;
z-index: 9;
}
.slider dl dd {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
margin: 0 3px;
cursor: pointer;
}
.slider dl dd.selected {
background: #f60;
}

/* 最新快讯 */
.news {
width: 704px;
height: 275px;
margin-top: 12px;
}
.news-left {
width: 320px;
height: 240px;
margin: 18px 0 0 18px;
background: green;
}
.news-right {
width: 328px;
margin: 18px 18px 0 0;
}
.news-right-top {
height: 26px;
border-bottom: 1px solid #dbdbdb;
}
.news-right-top p {
height: 23px;
border-bottom: 4px solid #2d7600;
float: left;
font-size: 16px;
color: #252525;
padding: 0 16px 0 6px;
}
.news-right-top em {
font-family: Arial;
color: #adadad;
font-weight: bold;
line-height: 20px;
}
.more {
color: #797979;
padding: 3px 5px;
}
.more:hover {
color: #5a8509;
}

.news-list {

}
.news-list ul li {
border-bottom: 1px dotted #a9adb3;
padding: 6px 0;
}
.news-list ul li h4 {
line-height: 20px;
color: #5a8509;
background: url(…/images/icon-01.png) 0 50% no-repeat;
padding-left: 10px;
}
.news-list ul li h4 i {
display: inline-block;
width: 25px;
height: 9px;
background: url(…/images/icon-02.jpg) no-repeat;
margin-left: 6px;
}
.news-list ul li h5 {
line-height: 20px;
padding-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* 通知公告 */
.notice {
width: 282px;
height: 275px;
margin-top: 12px;
}
.notice-top {
border-bottom: 1px solid #dbdbdb;
height: 33px;
margin: 6px 6px 0;
}
.notice-top p {
height: 30px;
line-height: 30px;
border-bottom: 4px solid #2d7600;
float: left;
font-size: 16px;
color: #252525;
padding: 0 6px;
}
.notice-top .more {
line-height: 24px;
}
.notice-list {
padding: 4px 15px 0;
}
.notice-list ul li {
height: 35px;
line-height: 35px;
border-bottom: 1px dotted #a9adb3;
background: url(…/images/icon-01.png) 0 50% no-repeat;
padding-left: 10px;
}

/* 行业动态 */
.hydt {
width: 345px;
height: 275px;
margin-top: 12px;
}
.hydt-top {
height: 44px;
border-bottom: 1px solid #dbdbdb;
background: #ebf2dd;
}
.hydt-top p {
height: 41px;
line-height: 41px;
border-bottom: 4px solid #2d7600;
float: left;
font-size: 16px;
color: #252525;
padding: 0 16px;
}
.hydt-top .more {
color: #71a510;
font-weight: bold;
margin: 14px 10px 0 0;
}

.hydt-list ul li a {
display: inline-block;
width: 224px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hydt-list span {
float: right;
color: #5a8509;
}

.hdxx {
margin-left: 12px;
}

.cpzs {
background: url(…/images/product-bg.jpg) 152px 72px no-repeat;
}
.cpzs .notice-list {
width: 130px;
}
.cpzs .notice-list ul li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* 广告位 */
.ad-box {
margin-top: 12px;
}

*reset.css

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‘’;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

style.css

/*

  • custom css reset
    */
    html {
    font-family: “微软雅黑”;
    font-size: 12px;
    color: #3e3e3e;
    }

a {
color: #3e3e3e;
text-decoration: none;
}
a:hover {
color: #5a8509;
text-decoration: none;
}

ul, ol, li {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}

img {
display: block;
border: none;
}

em, i {
font-style: normal;
}

.clear {
clear: both;
}
.clearfix:after {
content: ‘’;
display: block;
width: 0;
height: 0;
visibility: hidden;
clear: both;
}

/* reset END */

js

move.js
// 缓冲运动
function move(obj, json, callback){
// 清空定时器，保证运动框架只有一个定时器在运行
// 给节点对象，添加一个timer属性
clearInterval(obj.timer);

obj.timer = setInterval(function(){
	var state = 'ready'; // 假设都到了
	
	for (var attr in json){
		var cur = parseInt(getStyle(obj, attr));
		
		// 处理速度  ->  越来越小
		var speed = (json[attr] - cur) / 8;
		
		// 对速度取整
		speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
		
		if (json[attr] != cur){ // 当前的样式没到
			state = 'stop';
		}
		
		if (attr == 'opacity'){
			// chrome, FF
			obj.style.opacity = (cur + speed)/100;
			// IE
			obj.style.filter = 'alpha(opacity: '+ (cur + speed) +')';
		} else {
			obj.style[attr] = cur + speed + 'px';
		}
		
	}
	
	if (state == 'ready'){ // 真的全到了
		clearInterval(obj.timer);
		callback && callback();
	}
	
}, 20);

}

// 获取元素的样式，兼容所有浏览器
function getStyle(obj, attr){
var res = 0;
if (window.getComputedStyle){ // chrome, FF
res = window.getComputedStyle(obj, false)[attr];
} else { // IE
res = obj.currentStyle[attr];
}
if (attr == ‘opacity’){
res *= 100;
}
return res;
}

nav.js
var nav = (function(){
// 提升变量
var aLiNodeList;

// 事件绑定
function bindEvent(){
	for (var i = 0; i < aLiNodeList.length; i++){
		// onmouseenter -> 鼠标划过事件，没有冒泡
		aLiNodeList[i].onmouseenter = function(){
			var obj = this.children[1];
			console.log(obj);
			if (!obj){
				return;
			}

// this.className = ‘selected’;
showXlNav(obj);
};
// onmouseleave -> 鼠标离开事件，没有冒泡
aLiNodeList[i].onmouseleave = function(){
var obj = this.children[1];
console.log(obj);
if (!obj){
return;
}
// this.className = ‘’;
hideXlNav(obj);
};
}
}

// 处理下拉导航的显示
function showXlNav(obj){
	obj.style.height = '';
	// 1. 让div显示
	obj.style.display = 'block';
	// 2. 获取div的实际高度
	var iHeight = obj.offsetHeight;
	// 3. 重设div的高度为 0
	obj.style.height = 0;
	// 4. 调用运动框架
	move(obj, {
		height: iHeight
	});
}

// 处理下拉导航的隐藏
function hideXlNav(obj){
	move(obj, {
		height: 0
	}, function(){
		obj.style.display = 'none';
	});
}

// 组件的入口
function init(oNav){
	// 获取导航 LI 元素节点

// var oNav = document.getElementById(‘nav’);
// var aLiNodeList = oNav.children[0].children;

// var aLiNodeList = document.querySelectorAll(’#nav > ul > li’);

	aLiNodeList = oNav.getElementsByTagName('li');
	
	console.log(aLiNodeList);
	
	bindEvent();
}

// 公开接口
return init;

})();

slider.js
/*

  • 轮播图接口

  • 参数：

  • slideImgWrapper: 轮播图大图容器(必传)

  • slideDotWrapper: 轮播图控制条容器(可选)

  • curIndex: 轮播图默认初始化索引(可选)

  • autoPlay: 轮播图是否自动播放(可选)

  • callback：回调函数(可选)
    */
    var slider = (function(){
    // 变量的提升
    var params = {};

    // 处理参数
    function setParams(option){
    params.slideImgWrapper = option.slideImgWrapper;
    params.slideDotWrapper = option.slideDotWrapper || null;
    params.curIndex = option.curIndex || 0;
    params.autoPlay = option.autoPlay || false;
    params.callback = option.callback || null;

     params.timer = null;
 
 if (!params.slideImgWrapper){

// console.error(‘参数有误，slideImgWrapper 是一个必选参数！！！’);
throw new Error(‘参数有误，slideImgWrapper 是一个必选参数！！！’);
return;
}

	// 获取必要的内部参数
	params.slideLiList = params.slideImgWrapper.children;
	params.len = params.slideLiList.length;
	
	params.curIndex = params.curIndex > params.len - 1 ? params.len - 1 : params.curIndex;
	params.curIndex = params.curIndex < 0 ? 0 : params.curIndex;
}

function slideInit(){
	// 给当前的 Li 节点加 class
	params.slideLiList[params.curIndex].className = 'current';
	// 当前的 LI 透明度重设为 1
	params.slideLiList[params.curIndex].style.opacity = 1;
	params.slideLiList[params.curIndex].style.filter = 'alpha(opacity:100)';
	// 其他的 Li 节点的透明度重设为 0
	for (var i = 0; i < params.len; i++){
		if (i != params.curIndex){
			params.slideLiList[i].style.opacity = 0;
			params.slideLiList[i].style.filter = 'alpha(opacity:0)';
		}
	}
	// 初始化轮播图控制条
	if (params.slideDotWrapper){
		var str = '';
		for (var i = 0; i < params.len; i++){
			if (i == params.curIndex){
				str += '<dd class="selected"></dd>';
			} else {
				str += '<dd></dd>'
			}
		}
		params.slideDotWrapper.innerHTML = str;
		// 获取小圆点的节点列表
		params.slideDotList = params.slideDotWrapper.children;
	}
}

function bindDotEvent(){
	if (!params.slideDotWrapper){
		return;
	}
	for (var i = 0; i < params.len; i++){
		params.slideDotList[i].index = i;
		params.slideDotList[i].onmouseenter = function(){
			if (this.index == params.curIndex){
				return;
			}
			params.curIndex = this.index;

// console.log(params.curIndex);
cutSlideState();
};
}
}

function cutSlideState(){
	for (var i = 0; i < params.len; i++){
		move(params.slideLiList[i], {opacity: 0});
		params.slideLiList[i].className = '';
	}
	move(params.slideLiList[params.curIndex], {opacity: 100}, function(){
		params.callback && params.callback(params.curIndex);
	});
	params.slideLiList[params.curIndex].className = 'current';
	
	// 切换小圆点儿的状态
	cutDotState();
}

function cutDotState(){
	if (!params.slideDotWrapper){
		return;
	}
	for (var i = 0; i < params.len; i++){
		params.slideDotList[i].className = '';
	}
	params.slideDotList[params.curIndex].className = 'selected';
}

function play(){
	if (!params.autoPlay){
		return;
	}
	params.timer = setInterval(function(){
		if (++params.curIndex > params.len - 1){
			params.curIndex = 0;
		}
		cutSlideState();
	}, 4000);
}

function stop(){
	if (!params.autoPlay){
		return;
	}
	clearInterval(params.timer);
}

function bindWrapperEvent(){
	params.slideImgWrapper.parentNode.onmouseenter = function(){
		stop();
	};
	params.slideImgWrapper.parentNode.onmouseleave = function(){
		play();
	};
}

// 组件的入口方法
function init(option){
	// 处理参数
	setParams(option);
	// 初始化
	slideInit();
	// 事件绑定
	bindDotEvent();
	// 给轮播图外层容器绑定事件
	bindWrapperEvent();
	// 播放
	play();
}

// 向外公开接口
return init;

})();

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/71777.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！