[32期] 临摹多特首页

绝地灬酷狼 2022-05-15 09:20 196阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]" >  
<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]" xml:lang="zh" >  
<head>  
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  
<title>模仿多特首页</title>  
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  
<style type="text/css">  
\* \{  
margin:0;  
padding:0;  
border:0;  
text-decoration:none;  
text-align:left;  
font-size:12px;  
vertical-align:middle;  
list-style-type:none;  
\}  
.clearboth \{  
clear:both;  
\}  
body \{  
background:url(img/duote\_bj.gif) repeat-x;  
\}  
a:hover\{  
text-decoration:underline;  
\}  
.plink:hover \{  
color:\#ff9900;  
\}  
/\*头部第一横条\*/  
.head1 \{  
width:990px;  
margin:0 auto;  
\}  
.head1 a \{  
color:\#333333;  
line-height:30px;  
\}  
.head1\_1 \{  
float:left;  
\}  
.head1 a:hover \{  
color:\#ff9900;  
\}  
.head1\_2 \{  
background:url(img/duote\_06.gif) no-repeat left center;  
padding-left:20px;  
float:right;  
\}  
/\* 头部第二行\*/  
.head2\{  
width:990px;  
margin:0 auto;  
\}  
.head2 .logo \{  
float:left;  
\}  
.head2 .search\_form \{  
float:left;  
height:18px;  
margin-top:35px;  
margin-left:20px;  
background:\#fff;  
border:1px solid \#aaa;  
padding:5px;  
  
\}  
.head2 .search\_input\{  
width:300px;  
border-right:\#2px solid \#aaa;  
\}  
.head2 .search\_select \{  
height:20px;  
line-height:20px;  
padding-top:1px;  
\}  
.head2 .search\_submit \{  
background:url(img/duote\_btnbj.gif) no-repeat;  
width:85px;  
height:30px;  
margin-top:35px;  
margin-left:10px;  
font-size:16px;  
font-weight:bold;  
text-align:center;  
float:left;  
\}  
.head2 .adv\_search \{  
display:block;  
width:40px;  
float:left;  
margin-left:10px;  
margin-top:35px;  
color:\#336600;  
\}  
.head2 .adv\_search:hover \{  
color:\#333;  
\}  
.head2 .ad\_head2\{  
float:right;  
padding:10px;;  
\}  
/\*头部 第三行 导航菜单\*/  
.head3\_menu \{  
width:990px;  
margin:0 auto;  
height:37px;  
overflow:hidden;  
\}  
.head3\_menu li, .head3\_menu li a \{  
display:block;  
overflow:hidden;  
height:37px;  
width:110px;  
line-height:37px;  
text-align:center;  
font-size:14px;  
font-weight:bold;  
float:left;  
color:\#000;  
background:url(img/duoter\_03.gif) no-repeat -0px -0px;  
\}  
.head3\_menu li a:hover \{  
background:url(img/duoter\_03.gif) no-repeat -0px -37px;  
text-decoration:none;  
\}  
.head3\_menu .first\_menu \{  
background:url(img/duoter\_02.gif) no-repeat;  
\}  
.head3\_menu .first\_menu:hover \{  
background:url(img/duoter\_02.gif) no-repeat;  
\}  
.head3\_menu .last\_menu \{  
background:url(img/duote\_04.gif) no-repeat;  
\}  
.head3\_menu .last\_menu:hover \{  
background:url(img/duote\_nav04.gif) no-repeat;  
\}  
.notice \{  
width:970px;  
margin:0 auto;  
line-height:25px;  
padding-left:20px;  
background:url(img/duote\_05.gif) no-repeat left center;  
\}  
.notice a \{  
color:\#f00;  
\}  
/\*container\_middle\*/  
/\*left\*/  
.container\_middle \{  
width:990px;  
margin:0 auto;  
\}  
.middle\_left \{  
float:left;  
width:260px;  
\}  
.middle\_left\_1 \{  
width:260px;  
\}  
.middle\_left\_2 \{  
width:260px;  
margin-top:10px;  
\}  
.middle\_left\_2\_1\{  
width:260px;  
height:35px;  
background:url(img/duote\_tit\_bj1.gif) no-repeat;  
line-height:40px;  
\}  
.middle\_left\_2\_1\_1 \{  
float:left;  
font-size:14px;  
font-weight:bold;  
color:\#fff;  
margin-left:10px;  
\}  
.middle\_left\_2\_1\_2 \{  
float:right;  
color:\#fff;  
font-size:12px;  
margin-right:10px;  
\}  
.middle\_left\_2\_2\{  
border-left:1px solid \#5fbb29;  
border-right:1px solid \#5fbb29;  
border-bottom:1px solid \#5fbb29;  
height:300px;  
width:258px;  
background:\#fff;  
\}  
.middle\_left ul\{  
width:120px;  
margin-left:5px;  
margin-top:5px;  
float:left;  
\}  
.middle\_left\_2\_2\_1 \{  
border:1px solid \#ccc;  
padding:2px;  
text-align:center;  
width:115px;  
height:80px;  
line-height:80px;  
\}  
.middle\_left\_2\_2\_1:hover\{  
background:\#F8FEB1;  
\}  
.middle\_left\_2\_2\_2 \{  
text-align:center;  
font-size:14px;  
\}  
.middle\_left\_2\_2\_2 a \{  
color:\#ff9900;  
\}  
.middle\_left\_2\_3 ul \{  
width:220px;  
\}  
.middle\_left\_2\_3 ul li \{  
height:25px;  
line-height:25px;  
\}  
.middle\_left\_2\_3 ul li a\{  
color:\#333;  
\}  
.middle\_left\_2\_3 img \{  
width:20px;  
height:20px;  
margin-right:10px;  
\}  
/\*center\*/  
.middle\_center \{  
float:left;  
width:390px;  
margin-left:15px;  
\}  
.middle\_center\_title \{  
width:390px;  
height:29px;  
line-height:29px;  
\}  
.middle\_center\_title\_1 a\{  
background:url(img/duote\_12.gif) no-repeat;  
width:140px;  
height:29px;  
text-align:center;  
font-size:14px;  
color:\#fff;  
font-weight:bold;  
float:left;  
text-decoration:none;  
\}  
.middle\_center\_title\_2 a\{  
background:url(img/duote\_13.gif) no-repeat;  
width:140px;  
height:29px;  
text-align:center;  
font-size:14px;  
color:\#333;  
float:left;  
margin-left:2px;  
text-decoration:none;  
\}  
.middle\_center\_title\_3 \{  
float:right;  
\}  
.middle\_center\_title\_3 a\{  
color:\#336600;  
text-decoration:none;  
\}  
.middle\_center\_body \{  
width:390px;  
height:491px;  
border-top:7px solid \#5fbb29;  
border-left:1px solid \#5fbb29;  
border-right:1px solid \#5fbb29;  
border-bottom:1px solid \#5fbb29;  
background:\#fff;  
overflow:hidden;  
\}  
.middle\_center\_img \{  
width:140px;  
height:90px;  
text-align:center;  
float:left;  
\}  
.middle\_center\_img img \{  
margin-top:10px;  
\}  
.middle\_center\_focus \{  
float:left;  
padding-top:10px;  
width:220px;  
line-height:20px;  
\}  
.middle\_center\_focus a \{  
font-size:14px;  
color:\#34991c;  
\}  
.middle\_center\_list \{  
margin-top:25px;  
\}  
.middle\_center\_list li \{  
color:\#ff9900;  
margin-left:10px;  
clear:both;  
line-height:24px;  
\}  
.middle\_center\_list li span\{  
font-size:14px;  
margin-right:10px;  
color:\#aaa;  
float:right;  
\}  
.middle\_center\_list ul li em \{  
float:left;  
\}  
.middle\_center\_list ul li a \{  
color:\#333;  
font-size:14px;  
float:left;  
\}  
.middle\_center\_list ul li a:hover \{  
color:\#ff9900;  
text-decoration:underline;  
\}  
/\*right\*/  
.middle\_right \{  
float:left;  
width:310px;  
margin-left:15px;  
\}  
.middle\_right\_1\_title\{  
width:310px;  
height:35px;  
background:url(img/duote\_tit\_bj2.gif) no-repeat;  
\}  
.middle\_right\_1\_title span \{  
margin-left:20px;  
font-size:16px;  
font-weight:bold;  
line-height:37px;  
color:\#fff;  
\}  
.middle\_right\_1\_body \{  
height:290px;  
border-left:1px solid \#5fbb29;  
border-right:1px solid \#5fbb29;  
border-bottom:1px solid \#5fbb29;  
background:\#fff;  
\}  
.middle\_right\_1\_body ul \{  
width:280px;  
padding-top:10px;  
margin-left:10px;  
  
\}  
.middle\_right\_1\_body li \{  
border-bottom:1px dotted \#333;  
height:45px;  
padding-bottom:7px;  
\}  
.middle\_right\_1\_body \#last\{  
border:0;  
\}  
.middle\_right\_1\_body\_img \{  
width:50px;  
height:40px;  
text-align:center;  
padding-top:5px;  
padding-bottom:5px;  
float:left;  
\}  
.middle\_right\_1\_body img \{  
width:32px;  
\}  
.middle\_right\_1\_body dl \{  
float:left;  
margin-top:5px;  
color:\#333;  
line-height:20px;  
width:200px;  
height:50px;  
display:block;  
\}  
.middle\_right\_1\_body dt \{  
display:block;  
width:300px;  
\}  
.middle\_right\_1\_body dt a\{  
color:\#34991C;  
font-size:12px;  
\}  
.middle\_right\_1\_body dd span \{  
color:\#ff9900;  
font-size:12px;  
position:relative;  
top:-2px;  
\}  
.middle\_right\_1\_body\_dd\_left \{  
float:left;  
\}  
.middle\_right\_1\_body\_dd\_right \{  
float:right;  
\}  
.middle\_right\_2\_title \{  
margin-top:10px;  
\}  
.middle\_right\_2\_body \{  
border-left:1px solid \#5fbb29;  
border-right:1px solid \#5fbb29;  
border-bottom:1px solid \#5fbb29;  
width:308px;  
height:156px;  
background:\#fff;  
\}  
.middle\_right\_2\_body li \{  
padding-left:10px;  
line-height:25px;  
\}  
.middle\_right\_2\_body li span \{  
color:\#ccc;  
font-size:14px;  
padding-right:10px;  
float:right;  
\}  
.middle\_right\_2\_body li a \{  
color:\#333;  
float:left;  
\}  
</style>  
</head>  
<body>  
<div class="head1">  
<span class="head1\_1">  
<a href="\#" target="\_blank">最快最安全的软件下载站！</a>  
</span>  
<span class="head1\_2">  
<a href="\#" target="\_blank">登陆</a>  
|  
<a href="\#" target="\_blank">注册</a>  
</span>  
</div>  
<div class="clearboth"></div>  
<div class="head2">  
<a href="\#" title="多特软件园"><img class="logo" src="img/duoter\_logo.gif" alt="logo" /></a>  
<div class="search\_form">  
<input class="search\_input" type="text" name="search\_input" value="兄弟连 32期 陈文 临摹"/>  
|  
<select class="search\_select" name="search\_select">  
<option value="1"> 全部软件　</option>  
<option value="2"> 软件教程　</option>  
<option value="3"> 使用疑问　</option>  
</select>  
</div>  
<input class="search\_submit" type="submit" value=" 搜 索 " />  
<a class="adv\_search" href="\#">高级 搜索</a>  
<a class="ad\_head2" href="\#" target="\_blank"><img src="img/duote\_17\_06-04-50.gif" alt="ad" title="alt" /></a>  
</div>  
<div class="clearboth" ></div>  
<div class="head3\_menu">  
<ul>  
<li><a class="first\_menu" 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>  
<li><a href="\#" >软件教程</a></li>  
<li><a href="\#" >软件论坛</a></li>  
<li><a class="last\_menu" href="\#" >软件管家</a></li>  
</ul>  
</div>  
<div class="clearboth"></div>  
<div class="notice">  
<a href="\#">多特新浪官方微博，敬请大家关注，详情点击>></a>  
</div>  
<div class="container\_middle">  
<div class="middle\_left">  
<div class="middle\_left\_1">  
<img src="img/2011-07-10 19-00-37.jpeg" alt="ad" />  
</div>  
<div class="middle\_left\_2">  
<div class="middle\_left\_2\_1">  
<a class="middle\_left\_2\_1\_1" href="\#" >精品软件专题</a>  
<a class="middle\_left\_2\_1\_2" href="\#" >更多>></a>  
<div class="clearboth"></div>  
</div>  
<div class="middle\_left\_2\_2">  
<ul>  
<li class="middle\_left\_2\_2\_1">  
<img src="img/duote\_27\_11-06-06.gif" alt="alt" />  
</li>  
<li class="middle\_left\_2\_2\_2">  
<a href="\#">QQ空间专题</a>  
</li>  
</ul>  
<ul>  
<li class="middle\_left\_2\_2\_1">  
<img src="img/duote\_18\_13-06-57.jpg" alt="alt" />  
</li>  
<li class="middle\_left\_2\_2\_2">  
<a href="\#">91助手专题</a>  
</li>  
</ul>  
<div class="clearboth"></div>  
<div class="middle\_left\_2\_3">  
<ul>  
<li><img src="img/duote\_24\_07-52-40.gif" alt="alt" /><a class="plink" href="\#">美图秀秀拼图专题</a></li>  
<li><img src="img/duote\_25\_10-28-16.jpg" alt="alt" /><a class="plink" href="\#">QQ头像大全</a></li>  
<li><img src="img/duote\_08\_13-53-26.jpg" alt="alt" /><a class="plink" href="\#">Windows 7 教程专题</a></li>  
<li><img src="img/duote\_14\_08-34-11.jpg" alt="alt" /><a class="plink" href="\#">Photoshop 教程专题</a></li>  
<li><img src="img/duote\_14\_08-30-22.jpg" alt="alt" /><a class="plink" href="\#">Word 教程专题</a></li>  
<li><img src="img/duote\_08\_13-29-17.jpg" alt="alt" /><a class="plink" href="\#">会声会影教程专题</a></li>  
<li><img src="img/duote\_08\_13-43-22.jpg" alt="alt" /><a class="plink" href="\#">PPT 教程专题</a></li>  
</ul>  
</div>  
</div>  
</div>  
</div>  
<div class="middle\_center">  
<div class="middle\_center\_title">  
<div class="middle\_center\_title\_1" ><a href="\#">软件资讯</a></div>  
<div class="middle\_center\_title\_2"><a href="\#">最新软件推荐</a></div>  
<div class="middle\_center\_title\_3"><a href="\#">更多>></a></div>  
</div>  
<div class="clearboth"></div>  
<div class="middle\_center\_body">  
<div class="middle\_center\_img">  
<img src="img/duote\_23\_10-22-18.jpg" alt="alt"/>  
</div>  
<div class="middle\_center\_focus">  
<a href="\#">让 Windows7 变脸 Windows8 </a><br />  
Windows 8 UX Pack 2.0可以让Windows 7变脸Windows 8系统，这款美化工具完全免费。  
<a href="\#">\[详细\]</a>  
</div>  
  
</div>  
</div>  
  
  
</div>  
</body>  
</html>

[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml