html+css基本页面
Mr.Lv2019-06-13 13:00:32261<!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=gb2312" />
<title>html+css基本页面</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; color:#464646;}
a{ text-decoration:none;}
ul li{ list-style:none;}
.clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}
/*.clear样式的作用是清除浮动*/
.all{ width:1024px; margin:0 auto;}
.top{ background:#404040; display:table; width:100%;}
.top ul{ float:right; margin-right:30px;}
.top ul li{ float: left; margin:0px 10px;}
.top ul li a{ display:block; color:#c2c2c2; line-height:30px; margin:10px 0px; width:75px; text-align:center;}
.top ul li a.a_hover{background:url(images/topa_bg.png) no-repeat;}
.top ul li a:hover{background:url(images/topa_bg.png) no-repeat;}
.header{ background:url(images/menu_bg.jpg) repeat-x;}
.logo img{ display:block; margin:0px auto; padding-top:20px;}
.menu{ display:table; margin:0 auto;}
.menu ul li{ float:left; position:relative;}
.menu ul li.li_line{ width:2px; background:url(images/li_linebg.png) no-repeat; height:44px;}
.menu ul li a{ display:block; line-height:44px; width:150px; text-align:center; color:#000; font-size:14px;}
.menu ul li a.menua_hover{ background:url(images/menua_hover.png) no-repeat; color:#fff;}
.menu ul li a:hover{ background:url(images/menua_hover.png) no-repeat; color:#fff;}
.menu ul li:hover ul{ display:table;}
.menu ul li ul{ position:absolute; width:350px; padding-left:30px; left:15px; background:#001126; display:none;}
.menu ul li ul li{ float:left;}
.menu ul li ul li a{ width:80px; line-height:24px; color:#fff; font-size:12px;}
.menu ul li ul li a:hover{ background:none; color:#246477;}
.main{ padding:20px; background:url(images/bottombg.jpg); height:183px;}
.news{ float:left; width:220px; margin:0px 20px;}
.news dl dd{ float:left; color:#464646; font-size:14px; font-weight:bold; line-height:24px;}
.news dl dt{ float:right; line-height:24px; background:url(images/newsdd_bg.jpg) no-repeat left center; padding-left:6px;}
.news ul li{ line-height:22px;}
.news ul li a{ background:url(images/newa_bg.jpg) no-repeat left center; padding-left:10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width:210px; display:block;}
.about{ width:305px; display:table; margin:0px 20px; float:left;}
.about img{ float:left; margin:20px;}
.about img.view{ margin:5px 0px 0px 0px;}
.about h3{ line-height:24px; margin-top:20px; color:#4380ab; font-size:16px; }
.about span{ line-height:20px; display:block;}
.pro{ width:320px; float:left; border:1px solid #d7d7d7; display:table;}
.pro ul{ float:left;}
.pro ul.pro_ulview{ width:254px;}
.pro ul.pro_ulview li{ float:left; background:none; width:157px; margin-right:10px;}
.pro ul.pro_ulview li a.more{ margin:10px 0px 0px 20px; display:block;}
.pro ul img.view{ margin-top:40px; }
.pro ul img{ float:none; display:block;}
.pro ul strong{ display:table; line-height:30px; margin-left:20px;}
.pro ul span.view{ width:140px; display:block; margin-left:20px;}
.pro ul li{ width:33px; height:112px; background:url(images/pro_libg.jpg);}
.footer_logo{ float:left; margin:20px;}
.footer_menu{ float:left; margin:5px 0px 0px 70px;}
.footer_menu ul li{ float:left; width:102px; line-height:30px; text-align:center;}
.footer_menu ul li.fli_line{ width:1px; background:url(images/fli_linebg.png) no-repeat; height:30px;}
.footer_menu ul.bq{ margin-left:38px;}
.footer_menu ul span{ line-height:22px; margin-right:10px; color:#7d7d7d;}
.select{ float:right; margin-top:20px;}
</style>
</head>
<body>
<div class="all">
<div class="top">
<ul>
<li><a href="#" class="a_hover">头部示例1</a></li>
<li><a href="#">头部示例2</a></li>
<li><a href="#">头部示例3</a></li>
<li><a href="#">头部示例4</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="logo" />
</div>
<div class="menu">
<ul>
<li class="li_line"></li>
<li>
<a href="#" class="menua_hover">菜单1</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li class="li_line"></li>
<li><a href="#">菜单2</a>
<ul>
<li><a href="#">二级菜单1</a></li>
<li><a href="#">二级菜单2</a></li>
<li><a href="#">二级菜单3</a></li>
<li><a href="#">二级菜单4</a></li>
</ul>
</li>
<li class="li_line"></li>
<li><a href="#">菜单3</a></li>
<li class="li_line"></li>
<li><a href="#">菜单4</a></li>
<li class="li_line"></li>
<li><a href="#">菜单5</a></li>
<li class="li_line"></li>
<li><a href="#">菜单6</a></li>
<li class="li_line"></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div>
<img src="images/banner.jpg" alt="banner" />
</div>
<div class="clear"></div>
<div class="main">
<div class="news">
<dl>
<dd>NEWS</dd>
<dt>more</dt>
</dl>
<div class="clear"></div>
<ul>
<li><a href="#">新闻示例1新闻示例1新闻示例1新闻示例1</a></li>
<li><a href="#">新闻示例2新闻示例2新闻示例2新闻示例</a></li>
<li><a href="#">新闻示例3新闻示例3新闻示例3新闻示例</a></li>
<li><a href="#">新闻示例4新闻示例4新闻示例4新闻示例</a></li>
</ul>
</div>
<div class="about">
<img src="images/about.png" alt="about" />
<h3>ABOUT</h3>
<span>关于我们关于我们关于我们关于我们关于我们关于我们</span>
<a href="#"><img src="images/about_view.png" alt="view" class="view"/></a>
</div>
<div class="pro">
<ul class="pro_ulview">
<li>
<strong>产品<span>案例1</span></strong>
<span class="view">产品简介产品简介产品简介产品简介产品简介产品简介产品简介产品简介</span>
<a href="#" class="more"><img src="images/about_view.png" alt="view"/></a>
</li>
<img src="images/pro_img.png" alt="pro" class="view"/>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</div>
<div class="clear"></div>
<div class="footer_logo"><img src="images/footer_logo.png" alt="footer_logo" /></div>
<div class="footer_menu">
<ul>
<li><a href="#">首页</a></li>
<li class="fli_line"></li>
<li><a href="#">关于我们</a></li>
<li class="fli_line"></li>
<li><a href="#">产品中心</a></li>
</ul>
<div class="clear"></div>
<ul class="bq"><span>版权所有@某某网站</span><span>联系电话:01234567890</span></ul>
</div>
<div class="select"><img src="images/select.jpg" alt="select" /></div>
</div>
</div>
</body>
</html>
