前端（05）

作者: 周肸 | 来源:发表于2018-08-12 19:33 被阅读0次

我的FE
【转】个人前端工程师开发工具记录
闭包
去哪儿网前端架构师司徒正美：如何挑选适合的前端框架？
前端（05）
前端05
前端05
任务2-web 相关知识了解
python Flask中返回图片流给前端展示
js的执行机制

作业 :

1.开班信息

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>开班信息</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                font: 12px/1 宋体;
            }
            .outer{
                width: 300px;   
                margin: 50px auto;
            }
            .title{
                border-top: 2px #019e8b solid;
                height: 36px;
                background-color: #f5f5f5;
                line-height: 36px;
                padding: 0px 22px 0px 16px;
            }
            .title a{
                float: right;
                color: red;
            }
            .title h3{
                font: 16px/36px "微软雅黑";
            }
            .content{
                border: 1px solid #deddd9;
                padding: 0px 28px 0px 20px;
            }
            .content a{
                color: black;
                text-decoration: none;
                font-size: 12px;
            }
            .content a:hover{
                color: red;
                text-decoration: underline;
            }
            .content h3{
                margin-top: 14px;
                margin-bottom: 16px;
            }
            .content .right{
                float: right;
            }
            .content ul{
                list-style: none;
                border-bottom: 1px dashed #deddd9;
            }
            .content .no-border{
                border: none;
            }
            .content .redfont{
                color: red;
                font-weight: bold;
            }
            .content li{
                margin-bottom: 15px;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="title">
                <a href="#">18年面授开班计划</a>
                <h3>近期开班</h3>
            </div>
            <div class="content">
                <h3><a href="#">人工智能+Python-高薪就业班</a></h3>
                <ul>
                    <li>
                        <a class="right" href="#"><span class="redfont">预约报名</span></a>
                        <a href="#">开班时间：<span class="redfont">2018-04-26</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span class="redfont">无座，名额爆满</span></a>
                        <a href="#">开班时间：<span class="redfont">2018-03-23</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2018-01-23</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2017-12-20</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2017-11-18</span></a>
                    </li>
                </ul>
                <h3><a href="#">Android开发+测试-高薪就业班</a></h3>
                <ul>
                    <li>
                        <a class="right" href="#"><span class="redfont">预约报名</span></a>
                        <a href="#">开班时间：<span class="redfont">2018-04-26</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2018-03-23</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2018-01-23</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2017-12-20</span></a>
                    </li>
                </ul>
                <h3><a href="#">大数据软件开发-青芒工作室</a></h3>
                <ul class="no-border">
                    <li>
                        <a class="right" href="#"><span class="redfont">预约报名</span></a>
                        <a href="#">开班时间：<span class="redfont">2018-04-26</span></a>
                    </li>
                    <li>
                        <a class="right" href="#"><span>开班盛况</span></a>
                        <a href="#">开班时间：<span>2018-01-23</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </body>
    </html>

2.导航栏

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>导航栏</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .i{
                border: 1px black solid;
                list-style: none;
                width: 958px;
                margin: 48px auto;
                height: 40px;
    
            }
            .i li {
                margin-top:6px;
                margin-left: 10px;
                float: left;
    
            }
            .i a {
                margin: 14px;
                text-align: center;
                padding: 10px;
                text-decoration: none;
                color: #333;
                font-family: "微软雅黑";
    
    
            }
            .i a:hover{
                color: red
            }
        </style>
    </head>
    <body>
        <ul class="i">
            <li><a href="#">首页</a><li><li>|</li>
            
            <li><a href="#">网站建设</a><li><li>|</li>
            
            <li><a href="#">程序开发</a><li><li>|</li>
            
            <li><a href="#">网络营销</a><li><li>|</li>
            
            <li><a href="#">企业VI</a><li><li>|</li>
            
            <li><a href="#">案例展示</a><li><li>|</li>
            
            <li><a href="#">联系我们</a></li><li></li>
        </ul>
    </body>
    </html>

3.导航条

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>导航条</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .nav{
                list-style: none;
                background-color: #6495ed;
                width: 1000px;
                margin: 50px auto;
                overflow: hidden;
            }
            .nav li{
                float: left;
                width: 12.5%;
            }
            .nav a{
                display: block;
                width: 100%;
                text-align: center;
                padding: 5px 0;
                text-decoration: none;
                color: white;
                font-weight: bold;
            }
            .nav a:hover{
                background-color: #cc0000;
            }
        </style>
    </head>
    <body>
        <!-- 创建导航条的结构 -->
        <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="#">关于</a></li>
        </ul>
    </body>
    </html>

4.翻页

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>翻页</title>
        <style type="text/css">
            .clearfix:after{
                content: "";
                display: block;
                clear: both;
            }
            .clearfix{
                zoom: 1;
            }
            .i{
                width: 960px;
                height: 42px;
                border: 1px solid #d1d1dd;
                margin: 0 auto;
            }
            .l{
                width: 550px;
                margin: 0 auto;
            }
            .l li{
                list-style: none;
            }
            .l li a{
                float: left;
                display: block;
                text-decoration: none;
                font: 12px '雅黑';
                color: black;
                padding: 5px 10px;
                margin-left: 8px;
                background: gold;
                margin-top: -8px;
            }
            .l li a:hover{
                background: red;
            }                   
    
        </style>
    </head>
    <body>
        <div class="i">
            <div class="l">
                <ul class="clearfix">
                    <li><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li>
                        <a href="#" style="background: none;">...</a>
                    </li>
                    <li><a href="#">17</a></li>
                    <li><a href="#">18</a></li>
                    <li><a href="#">19</a></li>
                    <li><a href="#">20</a></li>
                    <li><a href="#">下一页</a></li>
                </ul>
            </div>
        </div>
    </body>
    </html>

学习

1.高度塌陷

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>高度塌陷</title>
        <style type="text/css">
            .box1{
                border: 10px red solid;
                /*
                根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的
                当开启元素的BFC以后，元素将会具有如下的特性：
                1.父元素的垂直外边距不会和子元素重叠 
                2.开启BFC的元素不会被浮动元素所覆盖
                3.开启BFC的元素可以包含浮动的子元素
                如何开启元素的BFC
                    1.设置元素浮动
                    2.设置元素绝对定位
                    3.设置元素为inline-block
                    4.将元素的overflow设置为一个非visible的值
                */
                overflow: hidden;
                /*
                zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍
                zoom:1表示不放大元素，但是通过该样式可以开启hasLayout
                zoom这个样式，只在IE中支持，其他浏览器都不支持
                */
                zoom: 1;
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            }
            .box3{
                height: 100px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1">
        <div class="box2"></div>
        </div>
        <div class="box3"></div>
    </body>
    </html>

2.解决高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>解决高度塌陷</title>
    <style type="text/css">
      .box1{
              border: 1px solid red;
            }
       .box2{
                width: 100px;
                height: 100px;
                background-color: blue;
                float: left;
            }
/*
解决高度塌陷方案二：
    可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
    然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
    使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构
*/
      .clear{
            clear: both;
            }
    </style>
</head>
<body>
        <div class="box1">
        <div class="box2"></div>
        <div class="clear"></div>
        </div>
</body>
</html>

我的FE
浅谈我对前端的理解前端是做什么的其实05年之前的网站开发很少有前端的这个概念，05年之前我们统称为网页设计师（...
【转】个人前端工程师开发工具记录
@yyman0012015-05-04 16:15字数 3363阅读 2058 个人前端工程师开发工具记录前端工...
闭包
title: 闭包date: 2018-05-27 23:00:00tags: 闭包categories: 前端 ...
去哪儿网前端架构师司徒正美：如何挑选适合的前端框架？
http://www.csdn.net/article/2015-05-11/2824656 选择前端框架应综合考...
前端（05）
作业 : 1.开班信息 2.导航栏 3.导航条 4.翻页学习 1.高度塌陷 2.解决高度塌陷
前端05
内联元素的盒模型可以设置水平方向的内边距和边框也支持水平方向的外边距但不支持垂直的外边距内联元素不支持宽和高 v...
前端05
任务2-web 相关知识了解
**2016/05/02 ** 问题前端是做什么的？互联网职位有哪些常见的简称(如PM…)前端负责页面呈现和交互功...
python Flask中返回图片流给前端展示
python Flask中返回图片流给前端展示 DHogan 2017-05-16 14:50:48 20440 ...
js的执行机制
title: js的执行机制date: 2019-04-09 21:05:57categories: 前端tags...