[32期] 临摹多特首页

tubaluer

浏览: 1444032 次

最近访客更多访客>>

anlinko

u012363178

sunddenly

tao8565

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1987)

社区版块

存档分类

2012-01 ( 244)
2011-12 ( 185)
2011-11 ( 131)
更多存档...

<!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" 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>