会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133331个问题

老师,pc端响应式布局和原来不一样,请问是怎么回事?

image.png


源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>米课</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/mike.css">
</head>
<body>
<!--导航开始-->
<div class="nav">
    <div class="wrap">
        <div class="logo"></div>
        <div class="search">
            <form action="">
                <input type="text" placeholder="查找课程..." class="text-input">
                <button class="iconfont">&#xe64d;</button>
            </form>
        </div>
        <div class="nav-bar">
            <ul>
                <li><a href="#" class="nav-bar-active">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">公告</a></li>
                <li><a href="#">登录</a></li>
            </ul>
        </div>
    </div>
</div>
<!--导航结束-->
</body>
</html>

css样式

/*导航开始样式*/
.nav{
    width: 100%;
    height: 66px;
    background-color: #88c5e1;
    border-bottom: 5px solid #54abd4;
    position: fixed;
    top: 0;
    left: 0;
}
.wrap{
    width: 87%;
    height: 66px;
    margin: 0 auto;
}
.logo,.search,.nav-bar{
    height: 66px;
    float: left;
}
.text-input{
    width: 100%;
    height: 40px;
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
    margin-top: 13px;
    border-radius: 2px;
    outline: none;
    padding-left: 10px;
}
.search button{
    width: 40px;
    height: 34px;
    background-color: #f5f5f5;
    position: absolute;
    right: 2px;
    top: 16px;
    color: #54abd4;
    font-weight: 900;
}
.text-input:hover{
    background-color: #ffffff;
    border-color: #54abd4;
}

.nav-bar>ul{
    float: right;
}
.nav-bar li{
    float: left;
}
.nav-bar a{
    color: #ffffff;
    padding: 10px;
    display: block;
    margin-left: 8px;
    margin-top: 12.5px;
}
.nav-bar-active{
    border-bottom: 2px solid #ffffff;
}
.nav-bar a:hover{
    border-bottom: 2px solid #ffffff;
}
/*导航开始结束*/
/*移动端开始*/
@media screen and(max-width: 768px) {
    
}
/*移动端结束*/
/*ipad开始*/
@media screen and(max-width: 992px) and(min-width: 768px) {

}
/*ipad结束*/
/*pc端开始*/
@media screen and(min-width: 992px) {
    .logo{
        width: 25%;
        background: url("../images/Brand.png") no-repeat left;
        background-size: 183px;
    }
    .search{
        width: 40%;
        position: relative;
    }
    .nav-bar{
        width: 35%;
    }
}


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

/*购物车的样式*/
.cart{
    width: 120px;
    height: 40px;
    background-color: #424242;
    margin-left: 25px;
    /*来给父元素cart价格相对定位*/
    position: relative;
}
/*点击购物车的时候会从上往下出现一个下拉框  可以利用过渡transition来实现*/
.cart-Details{
    width: 315px;
    height:0;
    background-color: #ffffff;
    /*这里是给个盒阴影*/
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    /*这个下拉框是独立的一层 要用绝对定位定过来*/
    position: absolute;
    /*相对于已经定位的父元素来定位  来给父元素:cart价格相对定位*/
    /*在父元素的正下方紧贴父元素的bottom  所以距离父元素的top的距离就是父元素的height  而右边和父元素的右边没有距离*/
    top: 40px;
    right: 0;
    /*这里的颜色是  购物车中还没有商品,赶紧选购吧! 的颜色*/
    color: #424242;
    /*没有鼠标悬停触发时 高度要为0 这样这个下拉框在没有触发时便不显示*/
    /*但是“购物车中还没有商品,赶紧选购吧!”的文字还在 所以溢出的部分需要隐藏*/
    overflow: hidden;
    /*等触发事件发生时高度出现 下拉框就会出现了*/
    /*在这里是不可以用display的 因为要实现过渡效果的话 transition对display是无效的 */
    /*display: none;*/
    transition:all 0.3s ease-in-out;
}
<li class="cart">
    <a href="#">购物车</a>
    <div class="cart-Details">
        购物车中还没有商品,赶紧选购吧!
    </div>
</li>

1635239344(1).jpg老师,白色导航部分写完了 ,但是之前写的购物车下拉框在点击后显示,这个地方被白色导航内的搜索框覆盖了,不能完整展示,这应该怎么办呀?购物车下拉框定位的父元素是购物车

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 422楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 427楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/浮动与定位 429楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/前端入门与基础知识 430楼

<!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>

</head>

<body>

    <table border="1" width="800" height="100" align="center" bordercolor="red" cellspacing="0">  

        <tr bgcolor="orange" align="center">

            <td width="150">片名</td>

            <td>日期</td>

            <td>时间</td>

            <td>电影院</td>

            <td>票价</td>

        </tr>

        <tr align="center">

            <td rowspan="2">【国】卡拉是条狗</td>

            <td rowspan="3" align="center" height="50">3月7号</td>

            <td rowspan="6" align="center">7:30</td>

            <td rowspan="2">红楼电影院</td>

            <td>小厅:40</td>

        </tr>

        <tr align="center">

          

            

            

     

          

            <td>大厅:50</td>

           

        </tr>

        <tr align="center">

            <td>【美】碟海计中计</td>


          

        

            <td>花市电影院</td>

            <td align="center">30</td>

        </tr>

        <tr align="center">

            <td>【美】正义守望者</td>

            <td>3月8日</td>

          

           

            <td rowspan="3">华星国际影院</td>

            <td>小厅:35</td>

        </tr>

        <tr align="center">

            <td>【国】周渔的火车</td>

            <td>3月10日</td>

     

          

        

            <td>大厅:50</td>

        </tr>

        <tr align="center">

            <td>【美】冰川时代</td>

            <td>3月11日</td>

       

            

            <td>情侣座:80</td>

        </tr>

    </table>

</body>

</html>

image.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 431楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 434楼

老师对于表格而言我不太理解以下几点

1、我个人实现的时候不知道为什么外边会有两个边框的样子

我的代码如下:

 <table  border="1" cellspacing="0" align="center" width="500" height="300">

            <tr align="center">

                <td colspan="4">教员搜索</td>

            </tr>

            <tr>

                <td><label for="search">搜索类型</label></td>

                <td>

                    <select name="search" id="search">

                        <option value="title">搜索教员信息</option>

                        <option value="java">java</option>

                        <option value="web">web</option>

                    </select>

                </td>

                <td><label for="id">教员身份</label></td>

                <td><select name="id" id="id">

                    <option value="title">不限</option>

                    <option value="title">高级讲师</option>

                    <option value="title">中级讲师</option>

                </select></td>

            </tr>

            <tr>

                <td><label for="area">所在地区</label></td>

                <td><select name="area" id="area">

                    <option value="title">不限</option>

                    <option value="title">北京</option>

                    <option value="title">上海</option>

                </select></td>

                <td><label for="sex">性别</label></td>

                <td>

                    <input type="radio" name="sex" value="male">

                    <br>

                    <input type="radio" name="sex" value="female">

                </td>

            </tr>

            <tr>

                <td><label for="subject">学习科目</label></td>

                <td colspan="3">

                    <select name="subject" id="subject">

                        <option value="title">请在以下列表中选择</option>

                        <option value="title">java</option>

                        <option value="title">web</option>

                    </select>

                </td>

            </tr>

            <tr>

                <td>学习</td>

                <td colspan="3">

                    <input type="text" name="learning" placeholder="请输入要学习的内容">

                </td>

            </tr>

            <tr>

                <td>专业</td>

                <td colspan="3">

                    <input type="text" name="special" placeholder="请输入要学习的内容">

                    <input type="button" name="search" value="search">

                </td>

            </tr>

        </table>

2、我对里面的,例如<input type="button" name="search" value="search">

中的name 和value表达的含义不是很理解

3、如果想要效果是三线表这种,怎么实现呢?我的想法是利用孩子选择器把某些线加粗但是没能达到该效果,老师能帮我看一下嘛?

    <style>

        table{

            width: 500px;

            height: 150px;

        }

        table:nth-child(1){

            border-top: 2px solid black;

            border-bottom: 2px solid black ;

        }

        table:last-child{

            border-bottom: 2px solid black ;

        }

   

    </style>


  <table>

        <tr class="style">

            <td>指标一</td>

            <td>指标二</td>

            <td>指标三</td>

        </tr>

        <tr>

            <td>4</td>

            <td>6</td>

            <td>7</td>

        </tr>

        <tr>

            <td>14</td>

            <td>34</td>

            <td>23</td>

        </tr>

        <tr>

            <td>87</td>

            <td>-</td>

            <td>78</td>

        </tr>

    </table>




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

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637