模仿写个静态网页练习；无功能
Posted 小智RE0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模仿写个静态网页练习；无功能相关的知识，希望对你有一定的参考价值。
参考网页参考网页吾爱破解
原网页:
仅作为练习参考模仿,如果侵权了，请提醒我，我会马上删除
练习
练习使用代码;
模仿出的的网页效果还是相差很大的…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>吾爱破解 - LCG - LSG|安卓破解|病毒分析|www.52pojie.cn </title>
<link href="img/icon.png" rel="icon" />
<style type="text/css">
/* 清除浏览器默认 */
*{
margin: 0px;
padding: 0px;
}
/* 图片默认变为块标签*/
img{
display: block;
}
/* 超链接默认为去除下滑线且为黑色*/
a{
text-decoration: none;
color: black;
}
/* 移入标签时,显示下划线*/
a:hover{
text-decoration: underline;
}
/* 主体添加背景图*/
body{
background-image: url(img/bj.png);
}
/* 顶部栏的修饰*/
#top_box{
width: 1536px;
height: 20.8px;
background-color: #F2F2F2;
/* 需要开启相对定位*/
position: relative;
}
/* 浮动 */
.top_box_div{
float: left;
text-align: center;
line-height: 20.8px;
margin: 0px 20px;
}
/* 顶部栏最右边的链接需要定位 */
#top_box_right_one{
position: absolute;
right: 40px;
}
#top_box_right_second{
position: absolute;
right: 20px;
}
/* 带有logo的登录栏区域 */
#logo_area{
width:1500px;
height: 80px;
margin: 0px auto 10px auto ;
/* 需要开启相对定位==>为了右边的表单可以定位 */
position: relative;
}
/* logo存放 */
#logo_area_left{
width: 273px;
height: 60px;
}
/* 表单表格;这块区域需要整体右绝对定位 */
#logo_area_right{
width: 600px;
height: 40px;
position: absolute;
top: 20px;
right: 0px;
}
/* 部分表格需要调节 */
#logo_area_right_td5{
font-size: 5px;
text-align: center;
color: gray;
}
#logo_area_right_td2,#logo_area_right_td3,
#logo_area_right_td4,#logo_area_right_td6,
#logo_area_right_td7,#logo_area_right_td8
{
font-size: 15px;
}
/* 登录按钮调节 */
#logo_area_right_td7{
width: 77.25px;
}
/* 注册链接为蓝色 */
#logo_area_right_td8_a{
color: blue;
}
/* 导航栏区域 */
#dh_box{
width: 1500px;
height: 159px;
margin: auto;
background-color: white;
}
/* 导航栏顶部区域 */
#dh_box_top{
width: 1500px;
height: 40px;
background-color: #2873C2;
/* 开启相对定位 */
position: relative;
}
/* 导航栏顶部的格子 */
.dh_box_top_child{
width: 80px;
height: 40px;
float: left;
font-weight: bold;
text-align: center;
line-height: 40px;
}
/* 导航栏顶部的格子移入事件 */
.dh_box_top_child:hover{
background-color: #164DA2;
}
/* 导航栏顶部的格子超链接 */
.dh_box_top_child_a{
color: white;
}
/* 导航栏顶部超链接的移入事件 */
.dh_box_top_child_a:hover{
color: yellow;
}
/* 微信图格子定位到指定位置 */
#dh_box_top_child_right_first{
position: absolute;
top: 10px;
right: 150px;
}
/* 下拉菜单定位到微信图右边 */
#dh_box_top_child_right_second{
position: absolute;
top: 10px;
right: 50px;
}
/* 导航栏中部区域 */
.dh_box_center{
width: 1500px;
height: 69px;
}
/* 导航栏中间的三张图 */
#dh_box_center_img,#dh_box_center_img{
width: 69px;
height: 69px;
}
/* 导航栏中间区域开浮动 */
#dh_box_center_img,#dh_box_center_concat,#dh_box_center_concat_two{
float: left;
}
/* 包含 6 个超链接的小盒子 */
#dh_box_center_concat{
width: 210px;
height: 69px;
}
/* 包含最后2个超链接的小盒子 */
#dh_box_center_concat_two{
width: 60px;
height: 69px;
}
/* 导航栏中部区域包裹超链接的格子 */
.dh_box_center_child{
width: 70px;
height: 34px;
/* 开启浮动 */
float: left;
text-align: center;
line-height: 34px;
font-size: 10px;
}
/* 绿色的链接 */
.dh_box_center_child_green{
color: green;
}
/* 红色的超链接 */
.dh_box_center_child_red{
color: red;
}
/* 蓝色的超链接 */
.dh_box_center_child_blue{
color: blue;
}
/* 导航栏底部区域 */
#dh_box_bottom{
width: 1500px;
height: 50px;
background-color: #E8EFF5;
}
/* 包裹搜索框的调整 */
#dh_box_bottom_search{
width: 420px;
height: 50px;
}
/* 导航栏底部区域的搜索框大小调整 */
#dh_box_bottom_search_input{
width: 300px;
height: 30px;
margin: 10px 0px 5px 10px;
}
#dh_box_bottom_search_select{
width: 60px;
height: 30px;
}
/* 搜索按钮*/
#dh_box_bottom_search_button{
width: 30px;
height: 30px;
border-radius: 10px;
}
/* 导航栏底部开启浮动 */
#dh_box_bottom_search,.dh_box_bottom_font{
float: left;
}
/* 导航栏底部文字修饰 */
.dh_box_bottom_font{
width: 70px;
height: 50px;
text-align: center;
line-height: 50px;
}
/* 导航栏底部链接为蓝色 */
.dh_box_bottom_font_a{
color: blue;
}
/* 统计数据的两行盒子 */
#markdata_box{
width: 1500px;
height: 56px;
background-color: #EDFBFE;
margin: auto;
}
/* 统计数据的第一行与第二行 */
#markdata_box_first,#markdata_box_second{
height: 28px;
/* 开启相对定位 */
position: relative;
}
/* 设置第一行的首页图片盒子大小 */
#markdata_box_first_img{
width: 28px;
height: 28px;
}
/* 图标两边的元素修饰 */
#markdata_box_first_to,#markdata_box_first_toa1{
width: 30px;
height: 28px;
text-align: center;
line-height: 28px;
font-size: 10px;
}
/* 开启浮动 */
#markdata_box_first_img,#markdata_box_first_to,
#markdata_box_first_toa1,#markdata_box_second_img,#markdata_box_second_font{
float: left;
}
/* 统计数据的第一行,第二行右边的区域需要绝对定位 */
#markdata_box_first_toright,#markdata_box_second_toright{
position: absolute;
right: 5px;
font-size: 15px;
}
/* 统计数据的第一行,第二行右边的区域 的超链接 */
#markdata_box_first_a2,#markdata_box_second_a1{
color: #0000FF;
}
/* 设置第二行的图片盒子 */
#markdata_box_second_img{
width: 29px;
height: 28px;
}
/* 第二行的文字修饰 */
#markdata_box_second_font{
width:472px;
height: 28px;
text-align: center;
line-height: 28px;
font-size: 10px;
}
/* 表格区域 */
#table_box{
width: 1500px;
height:394px;
margin: auto;
}
#table_box_list{
width: 1500px;
}
/* 表格第一行变色 */
#table_box_firsttd{
background-color: #EFF4F6;
font-size: 10px;
}
/* 表格第二行居中 */
#table_box_secondtd{
text-align: center;
background-color: #F2F2F2;
font-size: 15px;
font-weight: bold;
}
/* 其余表格部分 */
#table_box_othertd{
height: 28px;
background-color: #EDFBFE;
font-size: 12px;
}
/* 其余表格部分移入事件 */
#table_box_othertd:hover{
background-color: deeppink;
}
/* 图片与连接浮动 */
.other_img,.other_a{
float: left;
}
/* 设置链接居中 */
.other_a{
margin: 8px 0px;
}
/* 设置底部栏 */
#bottom_box{
width: 1500px;
height: 70px;
background-color: #E8EFF5;
margin: auto;
}
/* 底部栏文字为红色 */
p{
color: #FF0000;
}
</style>
</head>
<body>
<div id="top_box">
<!-- 这里有四个超链接 -->
<div class="top_box_div"><a href="">官方bilibili</a></div>
<div class="top_box_div"><a href="">官方微博</a></div>
<!-- 注意这里的链接是红色 -->
<div class="top_box_div"><a href="" style="color: red;">官方入门教学</a></div>
<div id="top_box_right_one"><a href="">【网络诊断修复工具】</a></div>
<div id="top_box_right_second"><a href="">╬</a></div>
<!-- 关闭浮动 -->
<div style="clear: left;"></div>
</div>
<!-- 带有logo的登录栏区域 -->
<div id="logo_area">
<div id="logo_area_left">
<!-- logo图标处 -->
<img src="img/logo.png" >
</div>
<!-- 表单表格处 -->
<div id="logo_area_right">
<form action="">
<table>
<tr>
<td><a href=""><img src="img/qq_login.gif"></a></td>
<td id="logo_area_right_td2"> 账号<input name="username" placeholder="用户名/Email" ></td>
<td id="logo_area_right_td3"><input type="checkbox" value="自动登录"> 自动登录</td>
<td id="logo_area_right_td4"><a href=""> 找回密码</a></td>
</tr>
<tr>
<td id="logo_area_right_td5">只需一步 , 快速开始</td>
<td id="logo_area_right_td6"> 密码<input type="password" name="password"></td>
<td id="logo_area_right_td7"><input type="submit" value=" 登录 "></td>
<td id="logo_area_right_td8"><a id="logo_area_right_td8_a" href=""> 注册[Register]</a></td>
</tr>
</table>
</form>
</div>
</div>
<!-- 导航栏区域 总体分为上中下三个部分 -->
<div id="dh_box">
<!-- 导航栏顶部区域 -->
<div id="dh_box_top">
<div class="dh_box_top_child"><a class="dh_box_top_child_a" href="">门户</a></div>
<div class="dh_box_top_child"><a class="dh_box_top_child_a" href="">网站</a></div>
<div class="dh_box_top_child"><a class="dh_box_top_child_a" href="">新帖</a></div>
<div class="dh_box_top_child"><a class="dh_box_top_child_a" href="">搜索</a></div>
<div class="dh_box_top_child"><a class="dh_box_top_child_a" href="">专辑</a></div>
<div class="dh_box_top_child"只用table模仿一个静态页面
我升级到 Android Studio 2.3.3，一个旧的、无错误的程序现在给出错误：“片段应该是静态的......”