搜索
四、WEB安全 04——HTML DIV CSS博客项目
统计
  • 建站日期：2015-11-11
  • 文章总数：1185 篇
  • 评论总数：0 条
  • 分类总数：38 个
  • 最后更新：4月28日

四、WEB安全 04——HTML DIV CSS博客项目

纸飞机-JAVA追梦 / / 0 评论 / 58 阅读 /0 赞
作者有点忙，还没写简介
本文阅读 4 分钟
首页 › 代码,C/C#/C++ › 正文

四、WEB安全 04——HTML DIV CSS博客项目

1、HTML DIV CSS基础项目 01——博客网站布局设计、导航栏的编写

<head>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            background: #f5f5f5;
            line-height: 1.8px;
            font-size: 14px;
            font-family: Segoe UI;
        }
    </style>
</head>


<body>
    <div id="header"></div>
    <div id="main">
        <div id="main-left"></div>
        <div id="main-right"></div>
    </div>
    <div id="footer"></div>
</body>
<head>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            background: #f5f5f5;
            line-height: 1.8px;
            font-size: 14px;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;
        }
           #header{
            background: #ffffff;
            height: 70px;
            box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
        }
        .header{
            font-size: 16px;
            width: 1048px;
            height: 70px;
            margin: 0px auto;
        }
        .nav{
            list-style: none;
        }
        .nav li{
            padding-top: 40px;
            margin-left: 15px;
            float: left;
        }
        a{
            text-decoration: none;
            color: #333333;
        }
        .nav a:hover{
            color: #337ab7;
        }
        .logo{
            padding-top: 25px;
            float: left;
        }
        .logo img{
            width: 125px;
            height: 30px;
        }
        .f1{
            padding-top: 28px;
            float: right;
        }
        .f1 input{
            height: 20px;
            border-radius: 3px;
        }
        .sub{
            width: 50px;
            height: 30px;
        }
    </style>
</head>
        
        
<body>
    <div id="header">
        <div class="header">
            <div class="logo">
                <img src="img/logo.png" />
            </div>
            <ul class="nav">
                <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 href="#">WEB安全培训</a></li>
                <li><a href="#">公开课</a></li>
            </ul>
            <form class="f1" method="get">
                <input type="text" placeholder="请输入搜索的内容"/>&nbsp;
                <input class="sub" type="submit" value="搜索" />
            </form>
        </div>
    </div>
    <div id="main">
        <div id="main-left"></div>
        <div id="main-right"></div>
    </div>
    <div id="footer"></div>
</body>

img

2、HTML DIV CSS基础项目 02——博客网站主体左边的制作

略

3、HTML DIV CSS基础项目 03——博客网站主体右边的制作

略

4、HTML DIV CSS基础项目 04——博客网站主体底部的制作

略

5、HTML DIV CSS基础项目 05——HTML文件、CSS文件、页面展示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div id="header">
            <div class="head">
            <div class="logo">
                <img src="img/logo.png" />
            </div>
            <ul class="nav">
                <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 href="#">WEB安全培训</a></li>
                <li><a href="#">公开课</a></li>
            </ul>
            <form class="f1" method="get">
                <input type="text" placeholder="请输入搜索的内容" />&nbsp;
                <input  class="i1" type="submit" value="搜索">
            </form>
            </div>
        </div>
        <div id="main">
            <div id="main-left">
                <div class="a1">
                    <a href="#">最新文章</a>
                </div>
                <div class="artitle">
                    <div class="item-img">
                        <a href="#"><img src="img/img.png"></a>
                        <a href="#" class="a2">红队技术</a>
                    </div>
                    
                    <div class="item-list">
                    <div class="item-title">
                        <a href="#">暗月实战项目九 不出网的情况下的内网多域控渗透 </a>
                    </div>
                    <div class="item-contnet">
                        <p>项目九 是一个多域控 而且不出网的环境，是根据实际的环境改造而来。多 个域控应用在大型内网中，其中域控分有主域控，支部域控。例如一个公司在北 京有个总部办事处，广州</p>
                    </div>
                    <div class="item-data"> 
                        2021年1月15日
                    </div>
                    </div>
                </div>
                <div class="artitle">
                    <div class="item-img">
                        <a href="#"><img src="img/img.png"></a>
                        <a href="#" class="a2">红队技术</a>
                    </div>
                    
                    <div class="item-list">
                    <div class="item-title">
                        <a href="#">暗月实战项目九 不出网的情况下的内网多域控渗透 </a>
                    </div>
                    <div class="item-contnet">
                        <p>项目九 是一个多域控 而且不出网的环境，是根据实际的环境改造而来。多 个域控应用在大型内网中，其中域控分有主域控，支部域控。例如一个公司在北 京有个总部办事处，广州</p>
                    </div>
                    <div class="item-data"> 
                        2021年1月15日
                    </div>
                    </div>
                </div>
                <div class="artitle">
                    <div class="item-img">
                        <a href="#"><img src="img/img.png"></a>
                        <a href="#" class="a2">红队技术</a>
                    </div>
                    
                    <div class="item-list">
                    <div class="item-title">
                        <a href="#">暗月实战项目九 不出网的情况下的内网多域控渗透 </a>
                    </div>
                    <div class="item-contnet">
                        <p>项目九 是一个多域控 而且不出网的环境，是根据实际的环境改造而来。多 个域控应用在大型内网中，其中域控分有主域控，支部域控。例如一个公司在北 京有个总部办事处，广州</p>
                    </div>
                    <div class="item-data"> 
                        2021年1月15日
                    </div>
                    </div>
                </div>
                <div class="artitle">
                    <div class="item-img">
                        <a href="#"><img src="img/img.png"></a>
                        <a href="#" class="a2">红队技术</a>
                    </div>
                    
                    <div class="item-list">
                    <div class="item-title">
                        <a href="#">暗月实战项目九 不出网的情况下的内网多域控渗透 </a>
                    </div>
                    <div class="item-contnet">
                        <p>项目九 是一个多域控 而且不出网的环境，是根据实际的环境改造而来。多 个域控应用在大型内网中，其中域控分有主域控，支部域控。例如一个公司在北 京有个总部办事处，广州</p>
                    </div>
                    <div class="item-data"> 
                        2021年1月15日
                    </div>
                    </div>
                </div>
                
                <div class="a3">
                    <a href="#">点击查看更多</a>
                </div>
            </div>
            <div id="main-right">
                <div class="news">
                    <div class="newlist">近期文章</div>
                    <ul class="news-li">
                        <li><a href="#">暗月实战项目九 不出网的情况下的内网多域控渗透</a></li>
                        <li><a href="#">ICMP隧道反弹shell</a></li>
                        <li><a href="#">一条命令修改windows注册表</a></li>
                        <li><a href="#">xp/2003开关3389指令</a></li>
                        <li><a href="#">暗月实战项目九 不出网的情况下的内网多域控渗透</a></li>
                        <li><a href="#">xp/2003开关3389指令</a></li>
                        <li><a href="#">xp/2003开关3389指令</a></li>
                        <li><a href="#">xp/2003开关3389指令</a></li>
                        <li><a href="#">xp/2003开关3389指令</a></li>
                    </ul>
                </div>
                <div class="news">
                    <div class="newlist">文章归档</div>
                    <ul class="news-li">
                        <li><a href="#">2021年二月</a></li>
                        <li><a href="#">2021年二月</a></li>
                        <li><a href="#">2021年二月</a></li>
                        <li><a href="#">2021年二月</a></li>
                        <li><a href="#">2021年二月</a></li>
                        <li><a href="#">2021年二月</a></li>
                        <li><a href="#">2021年二月</a></li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="cls"></div>
        <div id="footer">
            <div class="footer-b">
                <div class="link">
                    <li><a href="#">暗月安全博客</a></li>
                    <li><a href="#">WEB安全培训</a></li>
                    <li><a href="#">暗月安全团队</a></li>
                    <li><a href="#">零组安全团队</a></li>
                    <li><a href="#">M9KJ博客</a></li>
                </div>
                <div class="Copyright">
                    <p>Copyright © 2018 WPCOM 版权所有 <a href="#"> 粤ICP备000000000号</a> Powered by WordPress</p>
                </div>
            </div>
        </div>
    </body>
</html>
*{
                padding: 0px;
                margin: 0px;
            }
            body{
                font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;
                background: #f5f5f5;
                line-height: 1.8;
                font-size:14px;
                color: #333;
            }
            
            #header{
                background: #ffffff;
                height: 70px;
                box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
            }
            .head{
                font-size: 16px;
                width: 1024px;
                margin: 0px auto;
            }
            .nav{
                list-style: none;
            }
            .nav li{
                padding-top: 20px;
                margin-left: 15px;
                float:left
            }
            a{
                text-decoration: none;
                color: #333333;
            }
            .nav a:hover{
                color:#337ab7;
            }
            .logo{
                padding-top: 20px;
                float:left;
            }
            .logo img{
                width: 120px;
                height: 30px;
            }
            .f1{
                padding-top:20px;
                float:right;
            }
            .f1 input{
                height: 25px;
                border-radius: 3px;
            }
            .i1{
                width: 50px;
                height: 30px;
            }
            #main{
                
                width: 1024px;
                margin: 0px auto;
                margin-top:15px;
                
            }
            #main-left{
                float: left;
                width: 750px;
                background: #fff;
            }
            .a1{
                font-size: 16px;
                padding:10px 0px 10px 0px;
                margin-left: 10px;
                border-bottom: 2px solid #337ab7;
                width: 70px;
            }
            .artitle{
                height: 180px;
                padding-top:15px;
                border-top:1px solid #efefef ;
            }
            .a1 a{
                color: #337ab7;
            }
            .item-img img{
                width: 200px;
                height: 128px;
            }
            .item-list{
                
                width: 450px;
            }
            .item-img,.item-list{
                float:left
            }
            .item-title{
                font-size: 18px;
            }
            .item-title a:hover{
                color: #3ca5f6;
            }
            .item-contnet{
                margin-top: 10px;
                font-size: 14px;
                color: #666;
            }
            .item-data{
                margin-top: 30px;
                font-size: 13px;
                color: #999;
            }
            .a2{
                font-size: 12px;
                color: #ffffff;
                background: #000;
                background: rgba(0,0,0,.6);
                padding: 5px 6px;
                position: relative;
                left: -190px;
                top:-110px;
            }
            .a2:hover{
                background: #337ab7;
            }
            #main-right{
                float: left;
                
            }
            .news{
                width: 250px;
                background: #FFFFFF;
            }
            .newlist{
                height: 25px;
                font-size: 16px;
                border-left: 3px solid #08c;
                padding-left: 10px;
                
            }
            #main-right{
                margin-left: 10px;
                
            }
            .news{
                padding: 10px 0px 15px 10px;
                margin-bottom: 20px;
            }
            .news-li{
                
                list-style:square inside url(../img/a.png);
                overflow: hidden;
                
            }
            
            .news-li a{
                color: #666;
            }
            .news-li a:hover{
                color:#3ca5f6;
            }
            .news-li li{
                margin-top: 10px;
            }
            .a3 a{
                display: block;
                padding: 10px 0px;
                text-align: center;
                border: 1px solid #e5e5e5;
                color: #999;
                border-radius: 3px;
            }
            .a3 a:hover{
                border: 1px solid #3ca5f6;
                color: #3ca5f6;
                
            }
            #footer{
                margin-top: 20px;
                padding: 35px;
                padding-left:0px;
                background:#2d3237;
                color: #5f676f;
            }
            .cls{
                clear: both;
            }
            .footer-b{
                width: 1024px;
                margin: 0px auto;
            }
            .link{
                list-style: none;
            }
            .link li{
                margin-left: 15px;
                float: left;
            }
            .link a,.Copyright a{
                color: #76818c;
            }
            .link a:hover,.Copyright a:hover{
                color: #b3c0ce;
            }
            .Copyright{
                padding-top:10px;
                margin-left: 12px;
                font-size: 12px;
                clear: left;
            }

img

2021年7月8日

本文为互联网自动采集或经作者授权后发布，本文观点不代表立场，若侵权下架请联系我们删帖处理！文章出自：https://blog.csdn.net/qq_45555226/article/details/118580077
-- 展开阅读全文 --
KillDefender 的 Beacon 对象文件 PoC 实现
« 上一篇 02-09
Web安全—逻辑越权漏洞（BAC）
下一篇 » 03-13

随机推荐

80.网络安全渗透测试—[SQL注入篇19]—[Oracle+JSP-9种报错注入]

Weblogic漏洞检测工具：WeblogicScan

mybatis中如何防止sql注入和传参

【网络安全】文件上传绕过思路

发表评论

成为第一个评论的人

热门文章

1
Go语言实现MSF免杀上线、思路可转换自己生成马进行绕过免杀！
1.3k 阅读 ，
2
免杀 编译shellcode进行绕过杀软操作！
1.1k 阅读 ，
3
远控免杀系列文章与工具
1k 阅读 ，
4
WEBSEC-信息收集--第一篇
920 阅读 ，

标签TAG

最近回复

我要留言