参考网页参考网页吾爱破解
原网页:
仅作为练习参考模仿,如果侵权了，请提醒我，我会马上删除
练习使用代码;
模仿出的的网页效果还是相差很大的…
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>吾爱破解 - LCG - LSG|安卓破解|病毒分析|www.52pojie </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=""> 找回密码本文发布于:2024-02-04 06:19:47，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170700896853044.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
