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

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 100%;
            height: 60px;
            line-height: 60px;
            background-color: #666;
        }

        .nav ul {
            width: 1000px;
            margin: 0 auto;
        }

        .nav ul li {
            list-style: none;
            float: left;
            padding: 0 20px;
        }
       
        .nav ul::after {
            content: "";
            margin: 0 auto;
            display: block;
            clear: both;
        }
        .nav ul li a {
            text-decoration: none;
            font-size: 20px;
            color: #b0b0b0;

        }

        .nav ul li:hover {
            background-color: #222;
        }
    </style>
</head>
<body>
    <div class="nav">
        <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>
        </ul>
        <p>hahah</p>
    </div>
</body>

image.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/浮动与定位 166楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 167楼

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

        body{

            background-color: #f5f5f5;

        }

        .exhibit{

            width: 1226px;

            height: 628px;

            margin: 0 auto;

            /* background-color: aqua; */

        }

        .left{

            float: left;

            width: 234px;

            height: 614px;

            /* background-color: black; */

        }

        .right{

            float: right;

            width: 992px;

            height: 614px;

            /* background-color: #fff; */

        }

        .box{

            float: left;

            width: 234px;

            height: 300px;

            padding: 20 auto;

            margin-bottom: 14px;

            margin-left: 14px;

            background-color: #fff;

            text-align: center;

        }

        .sal{

            height: 160px;

            width:160px;

            margin-top: 20px;

        }

        .ex{

            height: 614px;

            width: 234px;

        }

        .title{

            margin: 0 10px 2px;

            font-size: 14px;

            font-weight: 400;

            color: #333;

            text-align: center;


        }

        .desc{

            margin: 0 10px 10px;

            height: 18px;

            font-size: 12px;

            color: #b0b0b0;

            text-overflow: ellipsis;

            white-space: nowrap;

            text-align: center;

            overflow: hidden;

        }

        .price{

            margin: 0 10px 14px;

            text-align: center;

            color: #ff6700;

        }


    </style>

</head>

<body>

    <div class="exhibit">

        <div class="left">

            <img src="./images/1.webp" alt="1" class="ex">

        </div>

        <div class="right">

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>


            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

            <div class="box">

                <img src="./images/2.webp" alt="1" class="sal">

                <h3 class="title">Redmi Note 11 5G</h3>

                <p class="desc">5000mAh大电量</p>

                <p class="price">1119元</p>

            </div>

        </div>

    </div>

</body>

</html>

image.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 169楼

<style>
        body {
            background-color: #f1f1f1;
        }

        .phone {
            width: 1300px;
            height: 680px;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 680px;
            margin-top: 10px;
            background-color: pink;
        }

        .right {
            float: right;
            width: 1050px;
        }

        .item {
            width: 250px;
            height: 335px;
            float: left;
            margin-left: 10px;
            background-color: rgb(215, 212, 212);
            margin-top: 10px;
            text-align: center;
        }
        .left img {
            width: 234px;
            height: 680px;
        }
        .right img {
            width: 220px;
            height: 220px;
        }
    </style>

</head>

<body>
    <div class="phone">
        <div class="left">
            <img src="./images/1.webp">
        </div>
        <div class="right">
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
            <div class="item">
                <img src="./images/2.webp">
                <h3>黑鲨4S</h3>
                <p>磁动力升降肩键</p>
            </div>
        </div>
    </div>
</body>

image.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 170楼

<style>
        .box {
            width: 300px;
            height: 300px;
        }

        .left {
            float: left;
            width: 100px;
            height: 300px;
            background-color: rgb(209, 106, 106);
        }

        .right {
            float: right;
            width: 200px;
            height: 150px;
        }

        .top {
            float: top;
            width: 200px;
            height: 150px;
            background-color: skyblue;
        }

        .bottom {
            float: bottom;
            width: 200px;
            height: 150px;
        }

        .b-left {
            float: left;
            width: 100px;
            height: 150px;
            background-color: blue;
        }
        .b-right {
            float: right;
            width: 100px;
            height: 150px;
            background-color: rgb(44, 191, 183);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div class="top"></div>
            <div class="bottom">
                <div class="b-left"></div>
                <div class="b-right"></div>
            </div>
        </div>
    </div>
</body>

image.png

WEB前端全系列/第一阶段:HTML5+CSS3模块/初识CSS 171楼

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

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模块/表单 173楼

<body>
    <table align="center">
        <tr>
            <td align="right">姓名:</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td align="right">密码:</td>
            <td>
                <input type="password">
            </td>
        </tr>
        <tr>
            <td align="right">确认密码:</td>
            <td>
                <input type="password">
            </td>
        </tr>
        <tr>
            <td align="right">密码提示问题:</td>
            <td>
                <select name="" id="">
                    <option value="">请选择一个问题</option>
                    <option value="">问题1-----</option>
                    <option value="">问题2-----</option>
                    <option value="">问题3-----</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right">密码提示答案:</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td align="right">性别:</td>
            <td>
                <input type="radio" name="sex" value="男">男
                <input type="radio" name="sex" value="女">女
            </td>
        </tr>
        <tr>
            <td align="right">年龄:</td>
            <td>
                <input type="number" min="1" max="150">
            </td>
        </tr>
        <tr>
            <td align="right">籍贯:</td>
            <td>
                <select name="" id="">  
                    <option value="">请选择</option>
                    <option value="">甘肃</option>
                    <option value="">江苏</option>
                    <option value="">陕西</option>
                </select>省/直辖市
                <select name="" id="">请选择
                    <option value="">兰州</option>
                    <option value="">苏州</option>
                    <option value="">宝鸡</option>
                </select>市
            </td>
        </tr>
        <tr>
            <td align="right">爱好:</td>
            <td>
                <input type="checkbox" name="love" value="上网">上网
                <input type="checkbox" name="love" value="看电影">看电影
                <input type="checkbox" name="love" value="学习">学习

            </td>
        </tr>
        <tr>
            <td align="right">个人介绍:</td>
            <td>
                <textarea cols="30" rows="5"></textarea>
            </td>
        </tr>
        <tr>
            <td align="right">上传头像:</td>
            <td>
                <input type="file">
            </td>
        </tr>
        <tr align="center">
            <td colspan="2">
                <input type="submit" value="确认提交">
                <input type="reset" value="重新输入">
            </td>
        </tr>
    </table>
</body>

按钮想生效,不得用form把整个表格放到里面去吗,

为啥只有我提交的代码时黑白的~~~

image.png

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

<body>
    <table border="1" cellspacing="0" align="center" width="500" height="300">
        <tr align="center">
            <td colspan="4">教员搜索</td>
        </tr>
        <tr>
            <td>搜索类型</td>
            <td>
                <select>
                    <option value="title">搜索教员信息</option>
                    <option value="java">JAVA</option>
                    <option value="web">WEB</option>
                    <option value="python">pythone</option>
                </select>
            </td>
            <td>教员身份</td>
            <td>
                <select name="" id="">
                    <option value="title">不限</option>
                    <option value="gj">高级讲师</option>
                    <option value="zj">中级讲师</option>
                    <option value="cj">初级讲师</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td>
                <select name="" id="">
                    <option value="title">不限</option>
                    <option value="beijing">北京</option>
                    <option value="shanghai">上海</option>
                    <option value="xian">苏州</option>
                </select>
            </td>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" value="男">男
                <br />
                <input type="radio" name="sex" value="女">女
            </td>
        </tr>
        <tr>
            <td>学习科目</td>
            <td colspan="3">
                <select name="" id="">
                    <option value="title">请在以下列表中选择</option>
                    <option value="beijing">java</option>
                    <option value="shanghai">web</option>
                    <option value="xian">python</option>
                </select>
            </td>

        </tr>
        <tr>
            <td>学习</td>
            <td colspan="3">
                <input type="text" placeholder="请输入要学习的内容"> 
            </td>
        </tr>
        <tr>
            <td>专业</td>
            <td colspan="3">
                <input type="search" placeholder="请输入要学习的内容"> 
                <button>搜索</button>
            </td>
        </tr>
    </table>
</body>

image.png

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

    <table border="1" width="300px" height="300px" align="center">
        <tr>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td rowspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <!-- <td></td> -->
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
    </table>
    
    
    <table align="center" width="500px" height="400px">
        <tr bgcolor="pink">
            <th rowspan="2">酒店</th>
            <th>海外酒店</th>
            <th>团购</th>
        </tr>
        <tr bgcolor="pink">
            <!-- <th></th> -->
            <th>特价酒店</th>
            <th>民宿.客栈</th>
        </tr>
        <tr bgcolor="blue">
            <th rowspan="2">机票</th>
            <th>火车票</th>
            <th>抢票</th>
        </tr>
        <tr bgcolor="blue">
            <!-- <th></th> -->
            <th>特价机票</th>
            <th>专车</th>
        </tr>
        <tr bgcolor="green">
            <th rowspan="2">旅游</th>
            <th>目的地攻略</th>
            <th>邮轮旅游</th>
        </tr>
        <tr bgcolor="green">
            <!-- <th></th> -->
            <th>周边游</th>
            <th>定制旅游</th>
        </tr>
        <tr bgcolor="yellow">
            <th>景点玩乐</th>
            <th>美食林</th>
            <th>购物外汇</th>
        </tr>
        <tr bgcolor="yellow">
            <th>礼品卡</th>
            <th>WiFi电话</th>
            <th>保险签证</th>
        </tr>
    </table>

表格实操.png


WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 176楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/浮动与定位 177楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS常用属性 179楼
WEB前端全系列/第一阶段:HTML5+CSS3模块/HTML5基础元素 180楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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