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

html-css011

用下拉框选择CSS的代码如何写,第1张

将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.valuelocation.location.reload()">

<option value=<%=css1地址%>selected>css1</option>

<!--默认css样式-->

<option value=<%=css2地址%>>css2</option>

<option value=<%=css3地址%>>css3</option>

</select></form>

1、打开Dreamweaver cc  2014软件,选择建立html界面,里面自动生成一些必要代码的代码格式,节省时间。

2、在body标签内输入:<div class="one">最喜欢玩游戏</div>;这是图形框的代码,以及要居中的文本内容。

3、在body标签前面位置,输入:

<style>

.one{

width:400pxheight:220pxborder:red solid 1px

}

</style>

5、输入完保存,摁F12键弹出页面,可以看到图框中的文字没有居中。

6、要想文本文字居中,先加上些代码内容。

7、然后增加内容后保存,恩F12键,跳转到页面看效果,即可看到文本居中。

css是无法去掉默认select的下拉箭头的,除非自己用div+js+css实现自定义select控件。

1、定义html中的select标签

<form> 

<a class="btn-select" id="btn_select"> 

<span class="cur-select">请选择</span> 

<select> 

<option>选项一</option> 

<option>选项二</option> 

<option>选项三</option> 

<option>选项四</option> 

<option>选项五</option> 

</select> 

</a> 

</form>

2、定义css样式:

* { 

margin: 0 

padding: 0 

body { 

padding: 50px 50px 

.btn-select { 

position: relative 

display: inline-block 

width: 150px 

height: 25px 

background-color: #f80 

font: 14px/20px "Microsoft YaHei" 

color: #fff 

.btn-select .cur-select { 

position: absolute 

display: block 

width: 150px 

height: 25px 

line-height: 25px 

background: #f80 url(ico.png) no-repeat 125px center 

text-indent: 10px 

.btn-select:hover .cur-select { 

background-color: #f90 

.btn-select select { 

position: absolute 

top: 0 

left: 0 

width: 150px 

height: 25px 

opacity: 0 

filter: alpha(opacity: 0) 

font: 14px/20px "Microsoft YaHei" 

color: #f80 

.btn-select select option { 

text-indent: 10px 

.btn-select select option:hover { 

background-color: #f80 

color: #fff 

}

3、定义点击事件JS:

var $$ = function (id) { 

return document.getElementById(id) 

window.onload = function () { 

var btnSelect = $$("btn_select") 

var curSelect = btnSelect.getElementsByTagName("span")[0] 

var oSelect = btnSelect.getElementsByTagName("select")[0] 

var aOption = btnSelect.getElementsByTagName("option") 

oSelect.onchange = function () { 

var text=oSelect.options[oSelect.selectedIndex].text 

curSelect.innerHTML = text 

}

4、最终效果: