下拉列表项2-24编程练习(为什么我默认选中的颜色也是不一样的,它的是蓝色我都是灰色呢) 感谢!

下拉列表项2-24编程练习(为什么我默认选中的颜色也是不一样的,它的是蓝色我都是灰色呢) 感谢!

<!DOCTYPE html>

<html>

<head>

    <title>表单</title>

<meta charset="utf-8">

</head>

<body>

 <!-- 在此完成相关任务 -->

 <form>

下拉菜单:<br/>

    <select>

        <option value="1">熊猫</option>

        <option value="2">猫</option>

        <option value="3">狗</option>

        <option value="4">猪</option>

        <option value="5">猴子</option>

    </select> <br/><br/><br/>

列表:<br>

     <select size="3" name="Fruits">

        <option value="apple">苹果</option>

        <option value="banana" selected>香蕉</option>

        <option value="pear">梨</option>

    </select>

下拉菜单项:

    <select multiple size="5" name="Animal">

        <option value="Panda">熊猫</option>

        <option value="Cat">猫</option>

        <option value="Dog" selected>狗</option>

        <option value="Pig">猪</option>

        <option value="Monkey">猴子</option>

    </select>

    列表项:

    <select multiple size="5" name="Fruits2">

        <option value="apple">苹果</option>

        <option value="banana" selected>香蕉</option>

        <option value="pear">梨</option>

        <option value="Orange">橙子</option>

        <option value="peach" selected>桃</option>

    </select>

 </form>

</body>

</html>

http://img1.sycdn.imooc.com//climg/5ddd50dc09915da004710319.jpghttp://img1.sycdn.imooc.com//climg/5ddd51110946892405200267.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

同学你好,可以通过空格符&nbsp;来实现:

http://img1.sycdn.imooc.com//climg/5dde22fa09e53a9b11290108.jpg

http://img1.sycdn.imooc.com//climg/5dde22f10962c1c604560134.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • bao_ 提问者 #1
    还有别的方法实现吗
    2019-11-28 17:31:38
好帮手慕粉 2019-11-27 15:05:52

同学你好,下拉菜单默认是底部对齐,所以第一个高度很小,上面有很多空间很正常。效果图只是给大家展示要实现怎么样的菜单,后面的两个菜单只是给大家展示列表中要显示的内容,不需要去做:

http://img1.sycdn.imooc.com//climg/5dde1ff409f6a18305290397.jpg

本题实现的效果参考如下代码:

http://img1.sycdn.imooc.com//climg/5dde201209b2ecc105380302.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 bao_ #1
    为什么我设置右外边距不行呢 没有效果我想两个下拉选项框有点间距
    2019-11-27 15:11:43
好帮手慕粉 2019-11-27 11:43:35

同学你好,同学实现的效果是正确的。

1、默认选中的颜色不一样是同学没有点击,如果点击的话就跟示例图一样了:

http://img1.sycdn.imooc.com//climg/5dddef71095f09c605660184.jpg

2、列表没有与下方紧挨着是受到了后面布局的影响,我们先把后面的注释掉看一下:

http://img1.sycdn.imooc.com//climg/5dddf00e09a595ec04400242.jpg

同学不用太在意这个,代码是对的就可以了。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 bao_ #1
    不...............没有办法和原例题一样嘛???还有第一个列表与第二个列表之间的间隙怎么整
    2019-11-27 14:48:38
  • 提问者 bao_ #2
    代码没有达到我想要的效果呢 ~亲
    2019-11-27 14:49:46
  • 提问者 bao_ #3
    这个怎么和远例图一样呢
    2019-11-27 14:50:18
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师