css怎么做这条边框,在线等

怎样做出边框?... 怎样做出边框? 展开
 我来答
匿名用户
2015-10-21
展开全部
是有个阴影??。。
ul{
box-shadow:0px 0px 2px #ddd;
}
悄悄de爱上
2015-10-21 · TA获得超过2050个赞
知道小有建树答主
回答量:597
采纳率:66%
帮助的人:343万
展开全部

这个样式不是select和option标签做得出来的。你说的边框部分内容的确只需要一个:

border:solid 1px #9c9c9c;

难的在于,select标签并不支持如此。我们观察下这个下拉菜单的特点:

  1. 所选中的选项在下拉选项中是没有出现的;

  2. 右边的向下箭头部分并没有select标签所生成的箭头的背景部分;

  3. 拥有包含整个下拉菜单的灰色边框;

因此,我们可以确定,这个下拉菜单是div+css+js所制作出来的。

至于具体代码,我只能写出个大概,你可以看下,样式没法跟途中的菜单一模一样,但功能是一样的。

首先是html部分,观察中可以发现,是一个div内包含了四个子div,其中有一个是隐藏的,分别是

  1. 描述选中选项的div(即途中含有右边“▼”符号的div)

  2. “所有我可见范围”选项的div(此div因为被选中,所以隐藏)

  3. “我不可见范围”

  4. “部分不可见范围”

所以我们可以写出下列html代码和css:

<div id="baseBlock">
    <div id="choosedDiv" onclick="optionChooseList()" onclick="optionChooseList()">
        <div id="choosedDivText" class="optionBlock">所有我可见范围</div>
        <div id="arrorBlock" class="optionBlock">▼</div>
    </div>
    <div id="optionDiv1" class="optionBlock" onclick="optionChosed1()" style="width: 150px;display: none;margin-left: 10px;">所有我可见范围</div>
    <div id="optionDiv2" class="optionBlock" onclick="optionChosed2()" style="width: 150px;display: none;margin-left: 10px;">我不可见范围</div>
    <div id="optionDiv3" class="optionBlock" onclick="optionChosed3()" style="width: 150px;display: none;margin-left: 10px;">部分不可见范围</div>
</div>
<style type="text/css">
    #baseBlock {
        border: 1px solid #9c9c9c;
        width: 160px;
        background-color:white;
    }
    #choosedDiv {
        margin-left: 10px;
        width: 150px;
    }
    .optionBlock {
        line-height: 25px;
        font-size: 15px;
        color: black;
        overflow: hidden;
        text-align:left;
    }
    #arrorBlock {
        width: 25px;
        line-height: 25px;
        font-size: 15px;
        color: black;
        text-align: center;
        margin-left:125px;
        margin-top:-25px;
    }
</style>

如此,先将下拉菜单的部分用display:none全部隐藏起来,方便js控制的时候改变显示状态;

然后我们需要一个值来表示我们选中了第几个选项,在js里我将这个值命名为“baseBlockNum”,并将其默认赋值为1。

接下来就是上述html中onclick调用的函数的编写。全部js代码如下:

<script type="text/javascript">
    var baseBlockNum = 1;
    function optionChooseList() {
        document.getElementById("optionDiv1").style.display = "block";
        document.getElementById("optionDiv2").style.display = "block";
        document.getElementById("optionDiv3").style.display = "block";
        document.getElementById("optionDiv" + baseBlockNum).style.display = "none";
    }
    function optionChosed1() {
        baseBlockNum = 1;
        document.getElementById("choosedDivText").innerHTML = "所有我可见的范围";
        document.getElementById("optionDiv1").style.display = "none";
        document.getElementById("optionDiv2").style.display = "none";
        document.getElementById("optionDiv3").style.display = "none";
    }
    function optionChosed2() {
        baseBlockNum = 2;
        document.getElementById("choosedDivText").innerHTML = "我不可见的范围";
        document.getElementById("optionDiv1").style.display = "none";
        document.getElementById("optionDiv2").style.display = "none";
        document.getElementById("optionDiv3").style.display = "none";
    }
    function optionChosed3() {
        baseBlockNum = 3;
        document.getElementById("choosedDivText").innerHTML = "部分不可见范围";
        document.getElementById("optionDiv1").style.display = "none";
        document.getElementById("optionDiv2").style.display = "none";
        document.getElementById("optionDiv3").style.display = "none";
    }
</script>

原理是:点击带“▼”的div部分时,调用optionChooseList函数,将其余的三个div全部显示,又因为以下这段代码读取baseBlockNum的值,将相对应的div进行隐藏:

document.getElementById("optionDiv" + baseBlockNum).style.display = "none";

当下拉菜单出现的时候,我们对三个下拉的div分别设置对应的函数来控制点击带“▼”的div部分的文字内容。这三个optionChosed函数重复的部分在于:当点击之后,对三个下拉的div进行隐藏。

以下是完整的代码,将其复制到记事本中保存为html格式文件打开试试:

=========================================================

<style type="text/css">
    #baseBlock {
        border: 1px solid #9c9c9c;
        width: 160px;
        background-color:white;
    }
    #choosedDiv {
        margin-left: 10px;
        width: 150px;
    }
    .optionBlock {
        line-height: 25px;
        font-size: 15px;
        color: black;
        overflow: hidden;
        text-align:left;
    }
    #arrorBlock {
        width: 25px;
        line-height: 25px;
        font-size: 15px;
        color: black;
        text-align: center;
        margin-left:125px;
        margin-top:-25px;
    }
</style>
<script type="text/javascript">
    var baseBlockNum = 1;
    function optionChooseList() {
        document.getElementById("optionDiv1").style.display = "block";
        document.getElementById("optionDiv2").style.display = "block";
        document.getElementById("optionDiv3").style.display = "block";
        document.getElementById("optionDiv" + baseBlockNum).style.display = "none";
    }
    function optionChosed1() {
        baseBlockNum = 1;
        document.getElementById("choosedDivText").innerHTML = "所有我可见的范围";
        document.getElementById("optionDiv1").style.display = "none";
        document.getElementById("optionDiv2").style.display = "none";
        document.getElementById("optionDiv3").style.display = "none";
    }
    function optionChosed2() {
        baseBlockNum = 2;
        document.getElementById("choosedDivText").innerHTML = "我不可见的范围";
        document.getElementById("optionDiv1").style.display = "none";
        document.getElementById("optionDiv2").style.display = "none";
        document.getElementById("optionDiv3").style.display = "none";
    }
    function optionChosed3() {
        baseBlockNum = 3;
        document.getElementById("choosedDivText").innerHTML = "部分不可见范围";
        document.getElementById("optionDiv1").style.display = "none";
        document.getElementById("optionDiv2").style.display = "none";
        document.getElementById("optionDiv3").style.display = "none";
    }
</script>
<div id="baseBlock">
    <div id="choosedDiv" onclick="optionChooseList()" onclick="optionChooseList()">
        <div id="choosedDivText" class="optionBlock">所有我可见范围</div>
        <div id="arrorBlock" class="optionBlock">▼</div>
    </div>
    <div id="optionDiv1" class="optionBlock" onclick="optionChosed1()" style="width: 150px;display: none;margin-left: 10px;">所有我可见范围</div>
    <div id="optionDiv2" class="optionBlock" onclick="optionChosed2()" style="width: 150px;display: none;margin-left: 10px;">我不可见范围</div>
    <div id="optionDiv3" class="optionBlock" onclick="optionChosed3()" style="width: 150px;display: none;margin-left: 10px;">部分不可见范围</div>
</div>
追问
好长啊。。辛苦了~!
不过我们老师告诉我这个作业不用JS都可以的。。要怎么做呢。。?
追答
那就不懂了。这个功能如果仅靠css实现就必须用到伪类。目测hover和active最接近。
但是css是控制不了标签中的内容的。
如果你们老师解答了,求告知。我也想学学。写了先。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
纯洁的小树
2015-10-21 · TA获得超过3386个赞
知道大有可为答主
回答量:2536
采纳率:71%
帮助的人:476万
展开全部
border:1px solid #CBCBCD;
追问
是ul的?
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2015-10-21
展开全部
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式