移动端css按钮样式,按钮的css样式

如何在移动端实现纯css的自定义布局

在移动端实现纯css的自定义布局的方法：

1、html5主页面

!doctype html

html lang="en"

head

meta charset="UTF-8"

meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/

titlehtml5 移动端单页面布局/title

/head

body

!--页面主体部分--

div class="main"

section class="curr"

img src="pp_1x.png" alt=""

/section

section class="hide"

img src="css3.jpg" alt=""

/section

section class="hide"

img src="hra.png" alt=""

/section

section class="hide"

img src="company-info_1x.png" alt=""

/section

/div

!--页面菜单按钮--

div class="menu"

ul

li class="curr"Html5/li

liCss3/li

liJavascript/li

liAbout/li

/ul

/div

script src="js/zepto.js"/script

/body

/html

2、css编写的样式：

style

/*初始化css*/

*{ margin:0; padding: 0;}

li{ list-style-type: none;}

img{ max-width: 100%; display: block; margin: 0 auto 5px auto;}

html,body{ width: 100%; height: 100%; background: #e4e4e4;

-webkit-tap-highlight-color: rgba(88,44,22,0.9);

-webkit-touch-callout: none;

-webkit-user-select: none;

}

/*主体页面样式*/

.main{ width: 100%; height: auto; position: relative;}

.main section{ width: 100%; height: auto; position:absolute; left: 0; top:0; }

.main section.hide{ display: none;}

.main section.curr{ display: block;}

/*菜单样式*/

.menu{ width: 100%; height: 45px; position: fixed; bottom:0; left:0; box-shadow: #2d2d2d 0 0 4px;background:#0099cc;}

.menu.menucurr{ background: #ea4c88;}

.menu ul{width: 100%; height: 100%; }

.menu li{ width: 24.9%; height: 100%; float: left; line-height: 45px; text-align: center; background: #0099cc; color:#fff;}

.menu li.curr{ background: #ea4c88;}

.menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3){ border-right:1px solid #663300;}

/style

相关问答

Q1: css中按钮怎么设置

css设置按钮样式的方法:定义一个css选择器,然后在按钮标签中使用此选择器即可设置按钮样式。使用:hover伪类选择器可以设置按钮 交互时样式。

Q2: CSS可否改变设置按钮的样式？怎么做呢？菜鸟求教~

1、首先创建一个txt文件，修改后缀名：把.txt改为.html，用记事本打开添加如下代码：打开浏览器，这是一个没有添加样式的button，外观不美观，而且在不同的浏览器下显示的外观是不一样的，所以我们要添加统一的样式。

2、按钮样式比较多，这样写让代码不整洁，可阅读性差，就要用style标签。

3、style type="text/css"/style样式表。style标签里面表示的是一个样式表，我们所有的样式都可以写到标签中去。这段代码的意思是：凡是button标签都使用这个样式。

4、把 样式表中的  button{}改成了.ui_button{}，然后在button标签里面加了class属性，这样做的意思是，这个button标签使用了名字为ui_button的样式。

5、通过javascript动态修改样式，为了避免用户多次点击提交按钮重复提交信息，在用户点击提交按钮之后，禁用按钮，并设置按钮字体的颜色为灰色。

6、修改样式的其他方法：obj.style.cssText = "color:#E1E1E1;background-color:black;";cssText可以写多个样式样式属性。

7、修改样式的其他方法：obj.setAttribute("class", "style2");直接更改按钮标签的class属性，把指向名为ui_button的样式改为指向名为style2的样式。

8、修改样式的其他方法：link href="css1.css" rel="stylesheet" type="text/css" id="css"/obj.setAttribute("href","css2.css");修改引用外部的样式表文件，这样就可以对整个页面的样式进行全部更新。