单选框、复选框、下拉框的CSS怎么写

本文目录

• 单选框、复选框、下拉框的CSS怎么写
• HTML中鼠标悬浮时的下拉菜单用CSS怎么做
• html+css下拉菜单怎么制作
• css下拉菜单代码
• 用下拉框选择CSS的代码如何写
• CSS网页下拉列表大小怎么调整
• 这是一个css文件，可以用于下拉菜单的，求解释下每行代码答好加分

单选框、复选框、下拉框的CSS怎么写

简单的代码实现，仅供参考：

单选框：

《body》    《input type=“radio“ name=“sex“ value=“n“ /》    《input type=“radio“ name=“sex“ value=“v“ /》《/body》

复选框：

《body》    《input type=“checkbox“ value=“n“ /》    《input type=“checkbox“ value=“v“ /》《/body》

下拉框：

《body》    《select》        《option》n《/option》        《option》n《/option》        《option》n《/option》    《/select》《/body》

扩展资料：

css注意事项

1、每个标签的属性设置必须是被一对花括号包含。像下面的样子：
标签
{
属性名称：属性值;
}

2、花括号中每个属性值赋值后必须用分号隔开。分号就相当于C#和C中的分号，指示一行语句的结束，加上分号就是和网页的解释器说明这个属性的赋值已经结束了，下面开始一个新的属性的赋值。正确的格式是下面的样子：
标签
{
属性名称1：属性值;
属性名称2：属性值;
属性名称3：属性值;
}

3、关于颜色值。我们在前面的文章中，在设置style时，不论是color属性还是background-color属性，赋值时都是指定的颜色名称。这种方式在网页编程中比较不通用。比较常用的做法是赋16进制值，类似于#RRGGBB这种样式，每一位的取值都是从1到F，每两位对应一类颜色值。具体的颜色值可以在网上搜到。

4、关于字体。我们在style中的font-family中设置字体。有时候我们设置的字体可能用户电脑中没有，这时候我们可以在font-family中设置多个可选字体，用逗号分隔，这样如果前面的字体用户电脑中没有，则可以使用后面的字体进行替换。下面是个例子：
《p sytle=“font-family:serif,Cursive,Fantasy;“》

参考资料来源：百度百科：CSS

HTML中鼠标悬浮时的下拉菜单用CSS怎么做

最好是用JS做，但是非要用CSS呢，也可以。如下是我以前写的一个CSS下拉，你可以参考一下：
《html》《head》《title》《/title》《style》*{margin:0;padding:0;}ul,li{list-style-type:none;padding:0;margin:0;}#nav li a{display:block;width:100px;text-align:center;text-decoration:none;color:#ffffff;background-color:#000000;}#nav li{position:relative;margin-bottom:2px;float:left;margin-right:5px;}#nav li ul{position:absolute;left:10px;top:20px;display:none;width:100px;}#nav li:hover ul{display:block;}《/style》《/head》《body》《ul id=“nav“》《li》《a href=“#“》首页《/a》《/li》《li》《a href=“#“》关于我们《/a》《ul》《li》我们的故事《/li》《li》我们的团队《/li》《/ul》《/li》《li》《a href=“#“》我们的服务《/a》《ul》《li》网页设计《/li》《li》页面制作《/li》《li》程序开发《/li》《/ul》《/li》《li》《a href=“#“》联系我们《/a》《ul》《li》团队主力《/li》《li》团队成员《/li》《/ul》《/li》《/ul》《/body》《/html》

html+css下拉菜单怎么制作

使用HTML和CSS制作下拉菜单的方法如下：

1、编写带有div导航的html代码：

2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。

3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。

4、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。

5、制作导航css：

css下拉菜单代码

如果想仅用CSS实现的话，可以考虑把菜单标题和菜单内容放到同一个容器下，然后给这个容器做hover样式，具体请参阅下面示例代码：

HTML：

《!DOCTYPE html》
《html》
《head》
  《meta charset=’utf-8’》
《/head》
《body》
  《div class=“nav“》
    《dl class=“first“》
      《dt》PRODUCT《/dt》
      《dd》MODULAR《/dd》
      《dd》BROADLOOM《/dd》
      《dd》RESILIENT《/dd》
      《dd》RUBBER《/dd》
    《/dl》
    《dl》
      《dt》Blog《/dt》
      《dd》xxx《/dd》
      《dd》yyyy《/dd》
      《dd》zzzz《/dd》
    《/dl》
  《/div》
《/body》
《/html》

CSS：

body{
  background: #EAEAEA;
  font: 12px arial,’Microsoft Yahei’,sans-serif,tahoma;
}
.nav dl{
  width: 170px;
  float: left;
  font-weight: bold;
  margin-left: -80px;
}
.nav dl.first{
  margin-left: 0;
}
.nav dl dt{
  width: 92px;
  height: 33px;
  line-height: 33px;
  text-align: center;
}
.nav dl:hover dt{
  background: #9D9799;
  color: #41F24A;
}
.nav dl:hover dd{
  display: block;
}
.nav dl dd{
  width: 130px;
  height: 33px;
  line-height: 33px;
  background: #F5F5F5;
  padding: 0 20px;
  margin: 0;
  border: solid 1px #DDDDDD;
  border-bottom: solid 1px #fff;
  color: #7C7C7C;
  display: none;
}
.nav dl dd:hover{
  background: #fff;
  color: #474344;
}

效果：

代码：

用下拉框选择CSS的代码如何写

将CSS用变量写到页面中去
比如你有3个CSS
css1.css2.css3
《%
CssUrl=Request(“CssName“)
if CssUrl=““ then
CssUrl=“默认的css“
else
CssUrl=Request(“CssName“)
End if
%》
加载的时候加载默认的一个随便那个都可以了
《link id=“CssInclude“ href=“《%=CssUrl%》“ rel=“stylesheet“ type=“text/css“》
然后再下来菜单中
《form name=frm1 method=post》
《select name=“CssName“ onchange=“js:frm1.submit();“》
《option value=《%=css1地址%》 selected》css1《/option》
《!--默认css样式--》
《option value=《%=css2地址%》 》css2《/option》
《option value=《%=css3地址%》 》css3《/option》
《/select》《/form》
你是什么写的页面
asp按照我说做
如果是html
《link id=“CssInclude“ href=“默认css地址“ rel=“stylesheet“ type=“text/css“》
然后再下来菜单中
《form name=frm1 method=post》
《select name=“CssName“ onchange=“document.all.CssInclude.href=this.value;location.location.reload();“》
《option value=《%=css1地址%》 selected》css1《/option》
《!--默认css样式--》
《option value=《%=css2地址%》 》css2《/option》
《option value=《%=css3地址%》 》css3《/option》
《/select》《/form》

CSS网页下拉列表大小怎么调整

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的《style》标签中，输入css代码：select { width: 210px;}。

3、浏览器运行index.html页面，此时网页下拉列表的大小被调整为了210px。

这是一个css文件，可以用于下拉菜单的，求解释下每行代码答好加分

.menu
{position:relative;
z-index:9999999;}//div.menu处于相对位置（position），z块层在999999（一般这里意思就是最顶层了）
.menu
ul
li
a,
.menu
ul
li
a:visited
{display:block;:none;
width:79px;text-align:center;
font-size:12px;}//div.menu里面的ul里所有的a连接和该连接被点击之后的样式（display-block块显示，有无都可以），设置没有下划线（
text-decoration:none），宽79px，文字内容居中（ie-BUG内容居中），内容字体大小12px
.menu
ul
li
ul
li
a,
.menu
ul
li
ul
li
a:visited
{border:1px
solid
#fff;}//div.menu里面的ul里所有的a连接和该连接被点击之后的样式的四边为1px细白线。
.menu
ul
{list-style-type:
none;
margin:0px
auto;
width:711px;
}//ul的style为none（一般设置ul
li的style，这里的设置没有任何用处），相对位置为上下0px，左右自动适应（这是一个尝试整体居中的设置，理论上前面没有相关的设置，这里也是没有任何用处的），宽711px
.menu
ul
li
{float:left;position:relative;}//错误的css表达，float与position冲突，建议去掉position，在ie6会出现兼容问题。设置div.menu
ul
li平铺而不是竖排，位置相对。
.menu
ul
li
ul
{display:
none;}//设置div.menu
ul
li
ul的块显示为不显示（none），即是网页打开时候该块内容会隐藏========以上的内容均对所有浏览器生效============/*
specific
to
non
IE
browsers
*/
.menu
ul
li:hover
a
{
}
.menu
ul
li:hover
ul
{display:block;
position:absolute;
top:30px;
left:0;
width:105px;}
.menu
ul
li:hover
ul
li
a.hide
{}
.menu
ul
li:hover
ul
li:hover
a.hide
{}
.menu
ul
li:hover
ul
li
ul
{display:
none;}
.menu
ul
li:hover
ul
li
a
{display:block;
background:#d5f1c3;
color:#000;}
.menu
ul
li:hover
ul
li
a:hover
{background:#727373;}
.menu
ul
li:hover
ul
li:hover
ul
{display:block;
position:absolute;
left:80px;
top:0;}
.menu
ul
li:hover
ul
li:hover
ul.left
{left:-80px;}
而这些只对非ie浏览器生效，ie是没法读取li:hover的。