有效沟通问答-【官方】百战程序员_IT在线教育培训机构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
</head>
<body>
    <table cellspacing="0" border="1px" align="center" >
        <caption>个人简历表格</caption>
        <tr>
            <td colspan="11" align="center">个人简历</td>
        </tr>

        <tr>
            <td colspan="11" align="right" valign="top">流水号：###</td>
        </tr>

        <tr align="center">
            <td>*姓名</td>
            <td>hello</td>
            <td>*性别</td>
            <td>hello</td>
            <td>*生日</td>
            <td>hello</td>
            <td>*民族</td>
            <td>hello</td>
            <td colspan="3" rowspan="2" valign="top">照片</td> 
        </tr>

        <tr align="center">
            <td>*籍贯</td>
            <td>hello</td>
            <td>*身高</td>
            <td>hello</td>
            <td>*政治面貌</td>
            <td>hello</td>
            <td>*职位</td>
            <td>hello</td>
           
        </tr>

        <tr>     
        </tr>

        <tr align="center">
            <td>联系电话</td>
            <td colspan="3"></td>
            <td>昵称</td>
            <td colspan="2"></td>
            <td>个人爱好</td>
            <td colspan="3"></td>
          
        </tr>

        <tr align="center">
            <td>学校地址</td>
            <td colspan="3"></td>
            <td>*QQ</td>
            <td colspan="2"></td>
            <td>E-mail</td>
            <td colspan="3"></td>
        </tr>

        <tr>
            <td>什么方式了解？</td>
            <td colspan="10">&nbsp朋友介绍？&nbsp;网络？&nbsp;传单？&nbsp
                官网？&nbsp;？&nbsp传单？
            </td>
        
        </tr>

        <tr>
            <td rowspan="3" align="center">社会经历</td>
            <td colspan="10" rowspan="3"></td>
        </tr>

        <tr>  
        </tr>

        <tr>
        </tr>

        <tr>
            <td rowspan="3" align="center">个人经历</td>
            <td colspan="10" rowspan="3"></td>
        </tr>

        <tr>  
        </tr>

        <tr>
        </tr>

        <tr>
            <td rowspan="3" align="center">证书</td>
            <td colspan="10" rowspan="3"></td>
        </tr>

        <tr>  
        </tr>

        <tr>
        </tr>
        <tr>
            <td rowspan="3" align="center">奖项</td>
            <td colspan="10" rowspan="3"></td>
        </tr>

        <tr>  
        </tr>

        <tr>
        </tr>

    </table>
</body>
</html>

c、效果图：

WEB前端全系列/第一阶段：HTML5+CSS3模块/HTML5基础元素 242楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米</title>
  <!-- 外部引入,首选 rel为icon左上角网页图标,icon一般是16*16像素-->
    <link rel="icon" href="images/favicon.ico">
    <!--外部引入,href里全局样式-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/mi1.css">
</head>
<body>

<!--

准备工作:
1)css样式提前存好,备调用
2)页面图片下载
首先用火狐浏览器下载页面全部图片,方法:浏览器页面找空白的地方-&#45;&#45;右击查看页面信息-&#45;&#45;找标签-&#45;&#45;媒体-&#45;&#45;全选-&#45;&#45;另存为-&#45;&#45;
-->


<!--头部开始-->
<div class="header">
    <a href="#">
        <img src="images/a2a9e6db5e3c5374301827435d8595c6.jpg" alt="">
    </a>
</div>
<!--头部结束-->
<!--黑色导航开始-->
<div class="black-nav">
    <div class="wrap">
        <!--左侧的无序列表-->
        <ul class="black-nav-left">
            <li><a href="#">小米商城</a><span>|</span></li>
            <li><a href="#">MIUI</a><span>|</span></li>
            <li><a href="#">loT</a><span>|</span></li>
            <li><a href="#">云服务</a><span>|</span></li>
            <li><a href="#">天星数科</a><span>|</span></li>
            <li><a href="#">有品</a><span>|</span></li>
            <li><a href="#">小爱开放平台</a><span>|</span></li>
            <li><a href="#">企业团购</a><span>|</span></li>
            <li><a href="#">资质证照</a><span>|</span></li>
            <li><a href="#">协议规则</a><span>|</span></li>
            <li>
                <a href="#">下载APP</a><span>|</span>
                <div class="download">
                    <img src="images/download.png" alt="">
                    <p>小米商城APP</p>
                </div>
                <div class="stri"></div>
            </li>
            <li><a href="#">智能生活</a><span>|</span></li>
            <li><a href="#">SelectLocation</a></li>
        </ul>
        <!--右侧的无序列表-->
        <ul class="black-nav-right">
            <li><a href="#">登录</a><span>|</span></li>
            <li><a href="#">注册</a><span>|</span></li>
            <li><a href="#">消息通知</a></li>
            <!--cart是购物车-->
            <li class="cart">
                <a href="#">购物车(0)</a>
                <div class="cart-list">
                    购物车中还没有商品,赶紧选购吧!

                </div>
            </li>
        </ul>

    </div>

</div>

<!--黑色导航结束-->
</body>
</html>

/*头部样式开始*/
.header{
    width: 100%;
    height: 120px;
    /*background-color: red ;*/
    /*溢出部分隐藏掉*/
    overflow: hidden;
    position: relative;
}
.header img{
    /*只设置高度,宽度等比例缩放*/
    height: 120px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}
/*头部样式结束*/

/*黑色导航样式开始*/
.black-nav{
    width: 100%;
    height: 40px;
    line-height: 40%;
    background-color:#333 ;
    color:#b0b0b0;
    font-size: 12px;
}
.wrap{
    width: 1226px;
    margin: 0 auto;
}
.black-nav-left{
    float: left;
}
/*整个容器右浮*/
.black-nav-right{
    float: right;
}
.black-nav li{
    float: left;
    /*是相对于download的父元素进行定位*/
    position: relative;
}
.black-nav a{
    color: #b0b0b0;
}
.black-nav a:hover{
    color: #fff;
}
.black-nav span{
    color: #424242;
    margin: 0 3.6px;
}
.cart{
    width: 120px;
    height: 40px;
    background-color: #424242;
    margin-left: 25px;
    position: relative;
}
.cart:hover{
    background-color: #fff;
}
.cart:hover a{
    color: #ff6700;
}
.cart-list{
    width: 316px;
    height: 0;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    position: absolute;
    right: 0;
    top: 40px;
    color: #424242;
   /* 隐藏溢出的文字*/
    overflow: hidden;
    transition: all .3s ;

}
/*鼠标悬停在cart,指向cart-list显示*/
.cart:hover>.cart-list{
    height: 100px;
    /*一行文字垂直居中,行高等于高*/
    line-height: 100px;

}
/*下载APP*/
.download{
    width: 124px;
    /*本身是设置了高度,因为需要实现文字溢出隐藏,故先把高度变为0*/
    height: 0;
    background-color: #fff;
    box-shadow: 0 1px 5px #aaa;
   /* 为了下载APP不自动撑开父元素宽度,进行绝对定位*/
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -62px;
    /*高度设置为0后,设置文字溢出部分隐藏*/
    overflow: hidden;
    transition: all .3s;
    position: relative;

}
.download>img{
    width: 90px;
    margin:18px auto 12px ;
}
.download>p{
    color: #333;
    font-size: 14px;
    line-height: 14px;
}
.black-nav-left>li:hover>.download{
    height: 148px;

}
.stri{
    /*绘制下三角形*/
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left:8px solid transparent;
    border-right: 8px solid transparent;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    /*元素隐藏*/
    display: none;
}
.black-nav-left>li:hover>.stri{
    display: block;
}
/*黑色导航样式结束*/

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 243楼

想问下弹性盒模型和响应式布局的区别，因为他们都在写移动端的时候用到，不知道什么时候该用什么

WEB前端全系列/第一阶段：HTML5+CSS3模块/响应式项目 244楼

为什么这里用的i标签而不是p标签，

不加href的a标签和p标签和去掉倾斜的i标签可以混用吗，使用会有什么不一样吗

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 245楼

这个图标引不进来

WEB前端全系列/第一阶段：HTML5+CSS3模块/响应式项目 246楼

老师你好，我想问一下那个表格与表单的区别，为什么在写html代码的时候是表单标签包含表格而不是表格包含表单

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 247楼

这个input为什么不放在form里？

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 248楼

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 249楼

老师，白色导航的下拉列表中图片外为什么要包裹一个div

WEB前端全系列/第一阶段：HTML5+CSS3模块/商城官网项目 250楼

<input type="radio" name="sex" value="1">男<input type="radio" name="sex" value="0">女

</form>

name标签一致才会有单选效果，是因为把这两个input放入了同一个name里面然后形成了一个整体是这样吗？这样才实现的单选效果是吧？

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 251楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米</title>
    <link rel="icon" href="小米images/favicon.ico">
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/mi.css">
</head>
<body>
<!--头部开始-->
<div class="header">
    <a href="#">
        <img src="小米images/a2a9e6db5e3c5374301827435d8595c6.jpg" alt="">
    </a>
</div>
<!--头部结束-->
<!--黑色导航部分开始-->
<div class="black-nav">
    <div class="black-nav-left">
        <ul>
            <li>
                <a href="#">小米商城</a>
            </li>
            <li>
                <a href="#">MIUI</a>
            </li>
            <li>
                <a href="#">loT</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="#">下载app</a>
            </li>
            <li>
                <a href="#">智能生活</a>
            </li>
            <li>
                <a href="#">select Location</a>
            </li>
        </ul>
    </div>
    <div class="black-nav-right">
        <ul>
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li><a href="#">消息通知</a></li>
            <li><a href="#">购物车</a></li>
        </ul>
    </div>

</div>
<!--黑色导航部分结束-->
</body>
</html>

/*头部样式开始*/
.header{
    width: 100%;
    height: 120px;
    background: red;
    overflow: hidden;
    position: relative;
}
.header img{
    height: 120px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
/*头部样式结束*/
/*黑色导航开始*/
.black-nav{
    width: 100%;
    height: 40px;
    background:#b0b0b0;
}
.black-nav-left{
    margin-left: 100px;
    width: 789px;
}
.black-nav-right{
    margin-left: 100px;
}
.black-nav-left a,.black-nav-right a{
    color: white;
    float: left;
    font-size: 12px;
    padding: 3px;
    line-height: 40px;
}
/*黑色导航结束*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td
{margin: 0;padding: 0;}
body{text-align: center;font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;}
li{ list-style: none;}
a{text-decoration: none;}
img{border: none;}

为什么注册登录哪里设置了margin-left但是没有生效呢

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 252楼

老师请问当鼠标悬停的时候，想让他的父元素的兄弟元素生效该怎么写呢。

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS3新特性 253楼

问题描述：

学习到了响应式布局，自己敲代码练习不知道哪里出了问题

没有放效果图，因为浏览器没有任何变化

问：为何没有任何变化捏？是哪里写错了吗？呜呜~

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 表示移动端设备优先 -->
    <title>Document</title>
    <style>
    
    @media screen and (min-weight: 768px) {
        body{
            background-color: red;
        }
    }
    @media screen and (min-width: 768px) and (max: width 992px){
        body{
            background-color: green;
        }
    }
    @media screen and (min-width: 992px){
        body{
            background-color: blue;
        }
    }
 
    </style>
</head>
<body>
    
</body>
</html>

WEB前端全系列/第一阶段：HTML5+CSS3模块/CSS盒子模型 254楼

视频里所讲的 value=1 value=0 跟 value=male value=female 有什么区别？不太理解这个value 什么意思有何用？

WEB前端全系列/第一阶段：HTML5+CSS3模块/表单 255楼

同学您好