企业网站制作之新闻中心制作

新闻中心制作

效果图：

思路： 很简单，不说了。

<!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 href="css/main.css" rel="stylesheet" type="text/css"><script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script><script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script><script src="js/mf-pattern/mF_YSlider.js" type="text/javascript"></script><link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css" /><script type="text/javascript">myFocus.set({id:'picBox'})</script>
</head>
<body><div class="top"><div class="top_content"><ul><li><a href="#">联系我们</a></li><li><a href="#" onclick="AddFavorite(window.location,document.title)">加入收藏</li><li><a href="#" onclick="SetHome(window.location)">设为首页</li></ul></div></div><!--top结束--><div class="wrap"><div class="logo"><div class="logo_left"><img src="data:images/logo.jpg" alt="慕课网"></div><div class="logo_right"><img src="data:images/tel.jpg" alt="服务热线"/> 24小时服务热线:<span class="tel">123-456-7890</span></div></div><!--logo结束--><div class="nav"><div class="nav_left"></div><div class="nav_mid"><div class="nav_mid_left"><ul><li><a href="#">首页</a></li><li><a href="list.html">关于慕课</a></li><li><a href="list.html">新闻动态</a></li><li><a href="list.html">课程中心</a></li><li><a href="list.html">在线课程</a></li><li><a href="list.html">人才招聘</a></li></ul></div><div class="nav_mid_right"><from action="" method="post"><input type="text" class="search_text"/></from>    </div></div><!--nav_mid结束--><div class="nav_right"></div></div><!--nav结束--><div class="ad" id="picBox"><div class="loading"><img src="data:images/loading.gif" alt="图片加载中" /></div><div class="pic"><ul><li><img src="data:images/ad2.jpg" /></li><li><img src="data:images/ad3.jpg" /></li><li><img src="data:images/ad4.jpg" /></li></ul></div></div> <!--ad结束--><div class="main"><div class="news"><div class="title"><h2 class="title_left">新闻中心</h2><span class="title_right"><a href="news.html">More&gt;&gt;</a></span></div><!--title结束--><div class="pic_news"><img src="data:images/news.jpg"/><h2><a href="news.html">520 慕女神喊你来表白！</a></h2><p>活动事件：5月20日——5月25日<br />获奖公布时间：5月26日<br/><a href="news.html">Learn More&gt;&gt;</a></p></div><!--pic_news结束--><div class="news_list"><ul><li> <span class="date">2014-06-01</span> <a href="news.html"> 【慕客访谈 用户篇】"有为屌丝"在路上 </a> </li><li> <span class="date">2014-06-01</span> <a href="news.html"> 【有奖活动】给父亲的三行书信 </a> </li><li> <span class="date">2014-05-30</span> <a href="news.html"> 【程序猿，请晒出你的童年】活动获奖公告 </a> </li><li> <span class="date">2014-05-28</span> <a href="news.html" title="aa"> 【慕客访谈】破茧成蝶——美女程序猿的蜕变历史 </a> </li></ul></div><!--news_list结束-->    </div><!--news结束--><div class="course"><div class="title"><h2 class="title_left">课程中心</h2><span class="title_right"><a href="news.html">More&gt;&gt;</a></span></div><!--title结束--><div class="course_pic"><img src="data:images/css.jpg" /><h2><a href="news.html">CSS圆角进化论</a></h2><p>CSS圆角的实现，经历了三大发展阶段：背景图片方式、CSS2.0+HTML标签模拟、CSS3.0圆角属性 )。本案例详细讲解每一种的实现方式，并对实现的优缺点进行对比分析。</p></div><!--course_pic结束--><div class="course_type"><ul><li>PHP开发</li><li>前端开发</li><li>JAVA开发</li><li>Android开发</li></ul></div></div><!--course结束--><div class="sidebar"></div><!--sidebar结束--></div><!--main结束-->   </div><!--wrap结束--></body>

@charset "utf-8";
/* CSS Document */
* {padding: 0;margin: 0;font-size: 12px;
}
body {background-color: #F5F5F5;
}.top
{width:100%;height:27px;background: url(../images/top_bg.jpg) repeat-x;
}.top_content
{width:1000px;margin:0 auto;
}.top_content li
{list-style-image: url(../images/li_bg.gif);float: right;width:70px;line-height:27px;
}.top_content a:link,.top_content a:visited
{color:#817d7d;text-decoration:none;
}.top_content a:hover, .top_content a:active
{color:#900;text-decoration:none;
}.wrap
{width:1000px;margin:0 auto;
}.logo
{height:80px;background-color: #FFF;
}.logo_left
{width:200px;float:left;
}.logo_right
{width:300px;float:right;height:28px;margin-top:30px;color:#8E8E8E;
}.logo_right img
{vertical-align:middle;margin-right:10px;
}.tel
{font-family:"微软雅黑";font-size:16px;color:#C00;
}.nav
{height:40px;
}.nav_left
{width:10px;background:url(../images/nav_left.jpg) no-repeat;
}.nav_mid
{width:980px;background:url(../images/nav_bg.jpg) repeat-x;
}.nav_right
{width:10px;background:url(../images/nav_right.jpg) no-repeat;
}.nav_left,.nav_mid,.nav_right
{float:left;height:40px;
}.nav_mid_left,.nav_mid_right
{float:left
}.nav_mid_left
{width:680px;
}.nav_mid_right
{width:300px;
}.nav_mid_left li
{float:left;list-style-type:none;width:100px;text-align:center;line-height:40px;
}.nav_mid_left a:link,.nav_mid_left a:visited
{text-decoration:none;color:#FFF;font-size:16px;font-family:"微软雅黑";
}.nav_mid_left a:hover,.nav_mid_left a:active
{text-decoration:none; color:#FF0;font-size:16px;font-family:"微软雅黑";
}.search_text
{width:190px;height:25px;margin-top:5px;background:url(../images/search.jpg) no-repeat right center;/* background-repeat: no-repeat;background-image: url(../images/search.jpg);background-position: right center; */background-color: #FFF;padding-right: 25px;border:1px solid #FFF;
}.ad
{height:310px;overflow:hidden;
}.main
{height:250px;background-color:#FFF;
}.news
{width:340px;border:1px solid #E8E8E8;
}.course
{width:410px;border:1px solid #E8E8E8;margin:0 7px;
}.sidebar
{width:230px;background-color:#09F;
}.news,.course,.sidebar
{height:250px;float:left;
}.title
{height:35px;border-bottom:2px solid #E8E8E8;
}.title_left
{width:70%;font-family:"微软雅黑";font-size:14px;font-weight:bold;color:#786F66;float:left;line-height:35px;padding-left:20px;
}.title_right
{width:20%;float:right;line-height:35px;text-align:right;padding-right:10px;
}.title_right a
{text-decoration:none;color:#999999;
}.pic_news
{height:80px;margin-top:10px;line-height:22px;
}.pic_news img,.course_pic img
{float:left;margin:0 5px;
}.pic_news a,.course_pic a
{color:#C00;text-decoration:none;
}
.news_list
{margin-top:20px;
}.news_list li
{list-style-type:none;background:url(../images/list.jpg) no-repeat;padding-left:10px;margin:8px;border-bottom:1px dotted #CCC;
}.news_list a:link,.news_list a:visited
{text-decoration:none;color:#000;
}.news_list a:hover,.news_list a:active
{text-decoration:none;color:#F00;
}.news_list span
{color:#999;float:right;
}.course_pic
{height:120px;margin-top:10px;line-height:22px;
}.course_type
{height:37px;width:372px;background:url(../images/product_type_bg.jpg) no-repeat;margin:20px auto;
}.course_type li
{list-style-type:none;float:left;line-height:37px;margin:0 15px;text-align:center;
}

企业网站制作之新闻中心制作相关推荐

wordpress企业网站主题仿制04-wordpress企业网站产品页面新闻页面仿制
产品页面的仿制产品页面和page页面是非常类似的,唯一的区别就是:产品页面的主要内容是:显示产品的图片. 其它地方都是一模一样的. 所以,产品页面的仿制也非常的简单,点击"文件" ...
做企业网站设计制作用什么软件
我们从网络上常见到的企业网站是用什么软件制作? 网页设计从图片处理,Flash,数据库等完成,我们来看看网络上常用的软件有那些: 一.网站制作软件: 1.Microsoft FrontPage 如果你 ...
网络营销实验一企业网站专业性诊断评价
<网络营销> 实验报告实验名称企业网站专业性诊断评价实验室实验日期 3-31 网络营销实验一企业网站专业性诊断评价实验课程时间安排:在学习完第4章"网站建设能力与企业 ...
企业网站建设如何选择企业网站模板？
现在大部分企业网站都是基于企业网站模板制作,很多企业网站模板的设计和制作甚至数万块钱的定制建站更美观大气,而且对于企业来说,企业网站模板的存在,不但可以节省很大的资金,减少企业开支. 如果把建设企业网 ...
【企业网站模板】企业网站模板平台建站教程
分享一个企业网站模板平台,这个平台可以提供超60+行业的企业网站模板.企业可以用网站模板套用在自己网站上,在网站模板的基础上快速完成网站建设. ☞企业网站模板平台下面给大家分享一下在这个企业网站模板 ...
展示型企业网站的制作方案
企业展示网站前端开发建设在网站类型中属于规模最小的,它的使用者一般为事业单位.企业公司.医院.学校.组织机构等,主要是用于展示企业或单位的形象,介绍其产品和服务,能够很好的推销其产品和服务,并提供给浏 ...
网站二次开发如何防止别人打包源码_企业网站制作前需注意的几个事项
随着互联网的普及,企业网站已经成为了企业营销推广的基础,更是品牌建设中不可或缺的部分,但是网站也不能随便做.做网站之前需要注意下面几个事项,如果没有处理好,没有实施到位,那即使网站制作好后,也起不到应 ...
企业网站制作多少钱、企业网站需要多少钱、建立网站需要花多少钱
企业网站制作多少钱.企业网站需要多少钱.建立网站需要花多少钱 image.png 关于企业网站,需求是第一位的,安全是第一位的.你是做什么网站,电商网站(B2B还是B2C).行业门户.集团网站还是企业 ...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作...
web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...

企业网站制作之新闻中心制作

企业网站制作之新闻中心制作

新闻中心制作

企业网站制作之新闻中心制作相关推荐

最新文章

热门文章