菜鸟教程首页 





* {
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}
body {
    background: rgb(246,246,246);
    font-family: proxima-nova,Arial,sans-serif;
}
.header {
    margin-top: 17px;
    margin-bottom: 15px;
    height: 59px;
    width: 100%;
}
.logo {
    position: absolute;
    width: 50%;
    float: left;
    margin-left: 10%;
    margin-top: 0.5%;
}
.texttop {

    width:50%;
    float: right;
    margin-left: 5%;
    margin-top: 1%;
}
.texttop input {
    width:550px;
    height: 30px;
}
.clearfix{
    content: " ";
    display: table;
    clear: both;
}
.nav {
    background: #96b96d;
    height: 55px;
    width: 100%;
    
}
.nav ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}
.nav ul li {
    list-style: none;
    padding: 22px;
    margin-top: -0.3%;

}
.nav ul li a {
    text-decoration: none;
    color: #fff;
}
.nav ul li a:hover {
    background: #146C9C;
    color: black;
}
.content {
    width: 100%;
    height: 700px;
}
.content .aside {
    
    width: 30%;
    float: left;

}
.content .aside ul {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 70%;
    margin-top: 15px;
    border: 1px solid #ddd;
}
.aside ul li {
    list-style: none;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #ddd;

}
.aside ul li a {
    text-decoration: none;
    color: black;
    font-size: 16px;
}
.aside ul li a:hover {
    background: #146C9C;
    color: red;
}
.content .article {
    
    width: 54%;
    float: left;
    margin-top: 15px;
    margin-left: 15px;
    border: 1px solid #ddd;
}
.content .article .text1 {
    padding-top: 5px;
    padding-left: 5px;
}
.content .article .text1 span {
    font-size: 18px;
}
hr {
    background: #ddd;
    border: none;
    height: 1px;
}
.content .article .article0  {
    height: 600px;
    display: flex;
    flex-flow:row wrap;
    align-content: flex-start;

}
.content .article .article0 .article1 {
    box-sizing:border-box;
    background: #ddd;
    flex: 0 0 30%;
    padding:5px;
    height: 150px;
    margin:1.5%;

}
.content .article .article1 .content1 .content2 {
    float: left;
    width: 12%;
}
.content .article .article1 .content1 .content3 {
    float: left;
    width: 88%;
}
.content {
    border-bottom: 1px solid #ddd;
}
.footer {
    display: flex;
    margin-top: 150px;
    margin-bottom: 150px;
    width:100%;
    
    
    flex-flow: row wrap;
    align-content: center;
}
.footer .footer1 {
    flex:0 0 18%;
    padding:5px;
    margin:0.5%;

}






 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <div class="header clearfix">
        <div class="logo ">
            <a href="#"><img src="images/logo.jpg" ></a>
        </div>
        <div class="texttop">
            <input type="text" id="s" name="sousuo" type="post" placeholder="搜索..." autocomplete="off"/>
        </div>
    </div>
        <div class="nav clearfix">
            <ul>
                <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="#">本地书籍</a></li>
                <li><a href="#">登录</a></li>
            </ul>
        </div>
    </div>
        <div class="content clearfix">
            <div class="aside ">
                <ul>
                    <li><a href="#">HTML/CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">服务端</a></li>
                    <li><a href="#">数据库</a></li>
                    <li><a href="#">移动端</a></li>
                    <li><a href="#">XML教程</a></li>
                    <li><a href="#">ASP.NET</a></li>
                    <li><a href="#">Web Service</a></li>
                    <li><a href="#">开发工具</a></li>
                </ul>
            </div>
            <div class="article ">
                    <div class="text1">
                        <span>HTML/CSS</span>
                    </div>
                    <hr/>
                    <div class="article0">
                        <div class="article1 ">
                            <div class="title2"><span>【学习HTML】</span></div>
                            <div class="content1 clearfix">
                                <div class="content2"><img src="images/picture1.png" alt=""></div>
                                <div class="content3"><span>HTML,即超文本标记语言（Hyper Text Markup Language）</span></div>
                            </div>
                        </div>
                        <div class="article1 ">
                            <div class="title2"><span>【学习HTML】</span></div>
                            <div class="content1 clearfix">
                                <div class="content2"><img src="images/picture1.png" alt=""></div>
                                <div class="content3"><span>HTML,即超文本标记语言（Hyper Text Markup Language）</span></div>
                            </div>
                        </div>
                            <div class="article1 ">
                            <div class="title2"><span>【学习HTML】</span></div>
                            <div class="content1 clearfix">
                                <div class="content2"><img src="images/picture1.png" alt=""></div>
                                <div class="content3"><span>HTML,即超文本标记语言（Hyper Text Markup Language）</span></div>
                            </div>
                        </div>
                            <div class="article1 ">
                            <div class="title2"><span>【学习HTML】</span></div>
                            <div class="content1 clearfix">
                                <div class="content2"><img src="images/picture1.png" alt=""></div>
                                <div class="content3"><span>HTML,即超文本标记语言（Hyper Text Markup Language）</span></div>
                            </div>
                        </div>
                            <div class="article1 ">
                            <div class="title2"><span>【学习HTML】</span></div>
                            <div class="content1 clearfix">
                                <div class="content2"><img src="images/picture1.png" alt=""></div>
                                <div class="content3"><span>HTML,即超文本标记语言（Hyper Text Markup Language）</span></div>
                            </div>
                        </div>
                            <div class="article1 ">
                            <div class="title2"><span>【学习HTML】</span></div>
                            <div class="content1 clearfix">
                                <div class="content2"><img src="images/picture1.png" alt=""></div>
                                <div class="content3"><span>HTML,即超文本标记语言（Hyper Text Markup Language）</span></div>
                            </div>
                        </div>    <div class="article1 ">
                            <div class="title2"><span>【学习HTML】</span></div>
                            <div class="content1 clearfix">
                                <div class="content2"><img src="images/picture1.png" alt=""></div>
                                <div class="content3"><span>HTML,即超文本标记语言（Hyper Text Markup Language）</span></div>
                            </div>
                        </div>
                            <div class="article1 ">
                            <div class="title2"><span>【学习HTML】</span></div>
                            <div class="content1 clearfix">
                                <div class="content2"><img src="images/picture1.png" alt=""></div>
                                <div class="content3"><span>HTML,即超文本标记语言（Hyper Text Markup Language）</span></div>
                            </div>
                        </div>
                    <div/>
            </div>
        <div/>

        <div class="footer ">
            <div class="footer1">
                <div class="title3">在线实例</div>
                <div class="table">
                    <ul>
                        <li>HTML 实例 </li>
                        <li>CSS 实例 </li>
                        <li>JavaScript 实例 </li>
                        <li>Ajax 实例 </li>
                        <li>jQuery 实例 </li>
                        <li>XML 实例 </li>
                        <li>Java 实例 </li>
                    </ul>
                </div>
            </div>
            <div class="footer1">
                <div class="title3">在线实例</div>
                <div class="table">
                    <ul>
                        <li>HTML 实例 </li>
                        <li>CSS 实例 </li>
                        <li>JavaScript 实例 </li>
                        <li>Ajax 实例 </li>
                        <li>jQuery 实例 </li>
                        <li>XML 实例 </li>
                        <li>Java 实例 </li>
                    </ul>
                </div>
            </div>
            <div class="footer1">
                <div class="title3">在线实例</div>
                <div class="table">
                    <ul>
                        <li>HTML 实例 </li>
                        <li>CSS 实例 </li>
                        <li>JavaScript 实例 </li>
                        <li>Ajax 实例 </li>
                        <li>jQuery 实例 </li>
                        <li>XML 实例 </li>
                        <li>Java 实例 </li>
                    </ul>
                </div>
            </div>
            <div class="footer1">
                <div class="title3">在线实例</div>
                <div class="table">
                    <ul>
                        <li>HTML 实例 </li>
                        <li>CSS 实例 </li>
                        <li>JavaScript 实例 </li>
                        <li>Ajax 实例 </li>
                        <li>jQuery 实例 </li>
                        <li>XML 实例 </li>
                        <li>Java 实例 </li>
                    </ul>
                </div>
            </div>
            <div class="footer1">
                <div class="title3">关注微信</div>
                <div class="table">
                    <img src="images/weixin.png" alt="">
                </div>
            </div>

        </div>
</body>
</html>






 


 






            

            
posted @ 
2019-11-09 16:10 
糖爱上了盐 
阅读(159) 
评论(0) 
编辑 
收藏 
举报