web网页设计实例作业 ——中国风文化传媒企业官网(6页) 简单个人网页设计作业 静态HTML文化主题网页作业
文章目录
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Fashion Hair Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->
<link href='http://fonts.useso.com/css?family=Poiret+One|Lily+Script+One|Raleway:400,300,500,600,200,700' rel='stylesheet' type='text/css'>
<!--webfont-->
<!-- dropdown -->
<script src="js/jquery.easydropdown.js"></script>
<link href="css/nav.css" rel="stylesheet" type="text/css" media="all"/>
<style type="text/css">
body,td,th {
font-family: "微软雅黑";
color: #011210;
}
a {
font-family: "微软雅黑";
}
body {
margin-left: 2px;
background-color: #FFFFFF;
}
h1,h2,h3,h4,h5,h6 {
font-family: "微软雅黑";
}
</style>
<script src="js/modernizr.custom.js"></script>
</head>
<body text="#011210">
<div class="banner-bg" id="home">
<div class="container">
<div class="header">
<div class="logo">
<a href="index.html"><FONT face="微软雅黑"><h1>名况文化传媒</h1>
<span style="color: #011210"><span><strong><span style="color: #07128C; font-style: normal; font-size: 1.1em; text-align: left; font-family: '微软雅黑'; font-weight: 300;">从此改变你的世界</span></strong></span><span style="color: #011210"><span></span></a>
</div>
<div class="top-nav">
<label 湖南赛区</h5><p>招商合作</p></div>
</div>
<div class="col-md-4 h-f">
<figure class="effect-jazz">
<img src="images/s2.jpg" alt="img25"/>
<figcaption>
<h2>报名 <span>开始</span></h2>
<p>中国少儿艺术之星大赛</p>
<a href="#">View more</a>
</figcaption>
</figure>
<div class="hf-text"><h5>开始招募</h5><p>招商合作</p></div>
</div>
<div class="col-md-4 h-f">
<figure class="effect-jazz">
<img src="images/s3.jpg" alt="img25"/>
<figcaption>
<h2>活动 <span>演出</span></h2>
<p>精品活动大赛，精彩纷呈，盛况空前</p>
<a href="#">View more</a>
</figcaption>
</figure>
<div class="hf-text"><h5>演出时间</h5><p>尽请期待</p></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!--news-->
<div class="news-section">
<div class="container">
<h3 class="tittle">企业新闻</h3>
<lable class="two"> </lable>
<h3 class="sub-text">Donec orci arcu, id massa ac</h3>
<div class="news-left">
<div class="col-md-6 col-news-right">
<div class="col-bottom">
<h4>中国旅游环球小姐大赛湖南赛区火热报名中</h4>
<p style="font-family: '微软雅黑', '宋体'">中国旅游环球小姐大赛湖南赛区火热报名中，诚招企业，共享盛会 </p>
<a href="#" class="more"> 更多</a>
</div>
<div class="col-bottom">
<h4>中国少儿艺术之星大赛 开始招募</h4>
<p style="font-family: '微软雅黑', '宋体'">“启迪艺术智慧，放飞艺术梦想”，日前，由中国少儿艺术联合会、中国国际文化传播集团、香港卫视、中国少儿艺术网等多家单位共同发起举办“少儿艺术之星”电视选拔大赛正式启动，大赛联合多家少儿专业媒体平台，百余家青少年宫、群众艺术馆、艺术学校、儿童电影、电视剧剧组等文化艺术机构，倾力打造大规模高品质的少儿艺术人才选拔工程，为小朋友们提供一个展示自己，追逐梦想的舞台!参赛不设门槛，现正接受报名中，凡年龄3--14周岁,热爱艺术的小朋友均可登录大赛官方网站或通过热线电话直接报名。 </p>
<a href="#" class="more"> 更多</a>
</div>
<div class="col-bottom">
<h4>名况文化与睿沃信息达成战略合作 </h4>
<p>长沙名况文化传媒有限公司与长沙睿沃信息科技有限公司达成战略合作伙伴关系，就互联网运营、策划进行深度合作 </p>
<a href="#" class="more"> 更多</a>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-6 col-news">
<div class="col-news-top">
<a href="#" class="date-in">
<img class="img-responsive mix-in" src="images/c1.jpg" alt="">
<div class="month-in">
<label>
<span class="day">30</span>
<span class="month">March</span>
</label>
</div>
</a>
<div class="clearfix"> </div>
</div>
<div class="col-news-top">
<a href="#" class="date-in">
<img class="img-responsive mix-in" src="images/c2.jpg" alt="">
<div class="month-in">
<label>
<span class="day">30</span>
<span class="month">Aug</span>
</label>
</div>
</a>
<div class="clearfix"> </div>
</div>
<div class="col-news-top">
<a href="#" class="date-in">
<img class="img-responsive mix-in" src="images/c3.jpg" alt="">
<div class="month-in">
<label>
<span class="day">24</span>
<span class="month">Dec</span>
</label>
</div>
</a>
<div class="clearfix"> </div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--/start-footer-section-->
<div class="footer-section">
<div class="container">
<div class="footer-grids wow bounceIn animated" data-wow-delay="0.4s">
<div class="col-md-3 footer-grid">
<h4>关于我们</h4>
<div class="border2"></div>
<p>长沙名况文化传媒有限公司一直致力于商业演出、品牌推广活动、广告策划、承接大型会议、会展以及演出全程承办、演唱会筹划组织、礼仪模特及各类艺员代理、赛事运营、舞美工程设计制作、舞台演艺等影视传媒制作服务。</p>
</div>
<div class="col-md-3 footer-grid tags">
<h4>公司地址</h4>
<div class="border2"></div>
<ul class="tag">
<li>
<p>中国.长沙.雨花区长沙大道与花侯路交汇处新华都长沙天地内</p>
<p> </p>
</li>
</ul>
</div>
<div class="col-md-3 footer-grid tweet">
<h4>联系热线</h4>
<div class="border2"></div>
<div class="icon-3-square">
<a href="#"><i class="square-3"></i></a>联系</div>
<div class="icon-text">
<p>18614888958</p>
<h5> </h5>
</div>
<div class="clearfix"></div>
<div class="icon-3-square">
<a href="#"><i class="square-3"></i></a>
联系</div>
<div class="icon-text">
<p>18900001111<a href="#"></a></p>
<h5> </h5>
</div>
<div class="clearfix"></div>
</div>
<div class="col-md-3 footer-grid flickr">
<h4>精彩影集</h4>
<div class="border2"></div>
<div class="flickr-grids">
<div class="flickr-grid">
<a href="#"><img src="images/f1.jpg" alt=" " title="team" /></a>
</div>
<div class="flickr-grid">
<a href="#"><img src="images/f2.jpg" alt=" " title="team" /></a>
</div>
<div class="flickr-grid">
<a href="#"><img src="images/f1.jpg" alt=" " title="team" /></a>
</div>
<div class="clearfix"> </div>
<div class="flickr-grid">
<a href="#"><img src="images/f3.jpg" alt=" " title="team" /></a>
</div>
<div class="flickr-grid">
<a href="#"><img src="images/f2.jpg" alt=" " title="team" /></a>
</div>
<div class="flickr-grid">
<a href="#"><img src="images/f4.jpg" alt=" " title="team" /></a>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!--//end-footer-section-->
<!--/start-copyright-section-->
<div class="copyright">
<p>Copyright © 2015.Company name All rights reserved</p>
</div>
<!--//end-copyright-section-->
<!--start-smoth-scrolling-->
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!--start-smoth-scrolling-->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
五、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
六、更多源码
PC电脑端关注我们
HTML5期末考核大作业源码* 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
