您的位置：首页 > 运维架构 > 网站架构

网站首页设计

2016-12-25 15:06 369 查看
 小效果图



html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML+CSS实战</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="header">
<div class="top">
<div class="wp">
<div class="z">
<span>
<a href="">设为首页</a>
</span>
<span>
<a href="">收藏本站</a>
</span>
</div>
<div class="y">
<span>2015年5月1日</span>
<span class="mr_0">多云16℃/30℃</span>
</div>
</div>
</div>
<div class="wp">
<div class="logos">
<div class="logo z">
<h1><a href="index.html"><img src="images/logo.jpg" alt="HTML+CSS实战"/></a></h1>
</div>
<div class="dianhua y">
<span>客服热线：400-000-000</span>
</div>
<div class="sousuo y">
<form action="index.html" method="get">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="s_z z"></td>
<td class="s_c z">
<input type="text" name="text" id="s_c_txt"/>
</td>
<td class="s_y z">
<button type="submit" name="submit"></button>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div class="nav">
<div class="wp">
<ul>
<li class="a">
<a href="index.html">网站首页</a>
</li>
<li>
<a href="index.html">公司简介</a>
</li>
<li>
<a href="index.html">业务描述</a>
</li>
<li>
<a href="index.html">服务范围</a>
</li>
<li>
<a href="index.html">产品中心</a>
</li>
<li>
<a href="index.html">人才管理</a>
</li>
<li>
<a href="index.html">在线留言</a>
</li>
<li>
<a href="index.html">联系我们</a>
</li>
</ul>
</div>
</div>
</div>
<div class="center">
<div class="wp">
<div class="ad">
<img src="images/ad.jpg" alt=""/>
</div>
<div class="jianjie z">
<div class="tit">
<img src="images/jianjie.jpg" alt=""/>
<span><a href="">More</a></span>
</div>
<div class="jj_c">
<img src="images/jianjie_img.jpg" alt=""/>
<p>
麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！
</p>
<p>
什么都不会没关系，想跳槽想加薪都可以，提升自己更不在话下。 只要你愿意，绝对为你找到一份相当靠谱的工作！成就你，我能行！
</p>
<p>
那么多的梦想，你不想实现？买的起大奔的人会天天挤公交吗？ 想成为成功人士，脑袋里必须要有知识。一切不以要付出为目的的梦想都是耍流氓！ LPS系统、每周直播课、学习作业快速批改、保就业、班主任助教全程跟踪。 你看，离你完成梦想的道路是不是近了很多。
</p>
</div>
</div>
<div class="xinwen z">
<div class="tit">
<img src="images/xinwen.jpg" alt=""/>
<span><a href="">More</a></span>
</div>
<div class="xw_c">
<ul>
<li class="a">
<a href="">
<img src="images/list_img.jpg" alt=""/>
<h3>Web前端开发之HTML+CSS基础入门</h3>
<p>麦子学院朱朝兵老师带领大家从HTML语法，基本结构到CSS入门DIV+Css布局,通俗易懂  ... ...</p>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
<li>
<a href="">
<h3>Web前端开发之HTML+CSS基础入门</h3>
<span>2015-05-15</span>
</a>
</li>
</ul>
</div>
</div>
<div class="chanpin z">
<div class="tit">
<img src="images/chanpin.jpg" alt=""/>
<span><a href="">More</a></span>
</div>
<div class="cp_c">
<ul>
<li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
<li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
<li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
<li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
<li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
<li class="mr_0"><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
<li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
<li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
<li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
<li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
<li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
<li class="mr_0"><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="cl"></div>
<div class="footer">
<div class="wp">
<div class="footer_top">
<span class="z">
<a href="">关于我们</a>    |    <a href="">联系我们</a>    |    <a href="">加入我们</a>    |    <a href="">给我留言</a>
</span>
<span class="y">
© 2015 麦子学院版权所有 ICP证:蜀ICP备13000000号-1
</span>
</div>
<div class="footer_bottom">
<p>
友情连接：<a href="http://www.maiziedu.com" target="_blank">麦子学院</a><a href="http://www.dz7.com.cn" target="_blank">DZ起点网</a><a href="http://www.maiziedu.com" target="_blank">麦子学院</a><a href="http://www.maiziedu.com" target="_blank">教育部</a><a href="http://www.maiziedu.com" target="_blank">新闻网</a>
</p>
</div>
</div>
</div>

</body>
</html>


css

/*通用样式*/
*{ margin: 0;padding: 0 }
body{ font: 14px/24px 'Microsoft YaHei', '宋体’.'"Helvetica Neue", Helvetica, Arial, sans-serif'' }
.wp{ width: 960px;margin: 0 auto; }
.z{ float: left;}
.y{ float: right;}
.cl{ clear: both; }
.mr_0{ margin: 0 }
img{ border: none }

.top{
width: 100%;
height: 24px;
line-height: 24px;
background: #303030;
color: #d8d8d8;
}
.top span{
margin-right: 15px;
}
.top span.mr_0{
margin: 0;
}
.top a{
color: #d8d8d8;
text-decoration: none;
}
.top a:hover{
color: #f60;
}
/*LOGOS*/
.logos{
height: 59px;
margin: 15px 0;
}
/*搜索*/
.sousuo{
width: 330px;
height: 41px;
margin-top: 8px;
}
.sousuo td{
height: 41px;
}
.s_z{
width: 6px;
background: url("../images/s_z.jpg") no-repeat;
}
.s_c{
width: 240px;
background: url("../images/s_c.jpg") repeat-x;
}
.s_y{
width:78px;
background: url("../images/s_r.jpg") no-repeat;
}
.s_c input{
height: 35px;
line-height: 35px;
border: none;
margin-top: 2px;
width: 200px;
}
.s_y button{
width: 78px;
height: 41px;
background: none;
border: 0;
cursor: pointer;
}
.dianhua{
height: 59px;
line-height: 59px;
margin-left: 15px;
}
.dianhua span{
font-size: 26px;
color: darkred;
}
/*导航*/
.nav{
height: 39px;
width: 100%;
background: url("../images/nav_bg.jpg") repeat-x;
}
.nav li{
list-style: none;
float: left;
line-height: 39px;
padding: 0 28px;
}
.nav li.a , .nav li:hover{
background: url("../images/nav_hover.jpg") repeat-x;
}
.nav a{
color: #fff;
font-size: 16px;
text-decoration: none;
}
/*center*/
.ad{
margin-bottom: 10px;
}
.tit{
padding-bottom: 8px;
border-bottom: 1px solid darkred;
position: relative;
margin-bottom: 10px;
}
.tit span {
position: absolute;
right: 0;
bottom: 0;
}
.tit a {
color: darkred;
text-decoration: none;
}
.jianjie{
width: 540px;
height: 360px;
margin-right: 20px;
}
.jj_c img{
float: left;
margin: 0 10px 10px 0;
}
.jj_c p{
color: #616161;
text-indent: 24px;
}
.xinwen{
width: 400px;
height: 360px;
}
.chanpin{
width: 100%;
height: 300px;
}
.xw_c{

}
.xw_c li{
list-style: none;
height: 24px;
line-height: 24px;
position: relative;
padding-left: 15px;
margin-bottom: 6px;
background: url("../images/list_bg.jpg") no-repeat center left;
}
.xw_c li.a{
background: none;
padding: 0;
height: 76px;
}
.xw_c li img{
float: left;
margin: 0 10px 10px 0;
}
.xw_c span{
position: absolute;
right: 0;
bottom: 0;
font-size: 12px;
color: #888888;
}
.xw_c h3{
font-weight: normal;
font-size: 14px;
}
.xw_c a{
color: #616161;
text-decoration: none;

}
.xw_c p{
font-size: 12px;
color: #888;
text-indent: 24px;
}
.cp_c{

}
.cp_c li{
float: left;
list-style: none;
margin: 0 10px 10px 0;
width: 151px;
height: 96px;
overflow: hidden;
position: relative;
}
.cp_c span{
display: none;
position: absolute;
bottom: 0;
left: 0;
font-size: 14px;
height: 20px;
width: 131px;
padding: 0 10px;
color: #fff;
background: darkred;
overflow: hidden;
}
.cp_c li a:hover span{
display: block;
}
.cp_c li img{
float: left;
}
.cp_c li.mr_0{
margin-right: 0;
}
/*footer*/
.footer{
height: 103px;
width: 100%;
background: url("../images/footer_bg.jpg") repeat-x;
}
.footer_top{
height: 80px;
line-height: 80px;
color: #fff;
}
.footer_top .z{
font-size: 16px;
}
.footer_top a{
color: #fff;
text-decoration: none;
}
.footer_bottom p{
color: #f60;
}
.footer_bottom a{
color: #888;
text-decoration: none;
margin-right: 10px;
}
.footer_bottom a:hover{
color: #f60;
}

大效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航