建站
咨詢
售后
建站咨詢
新聞中心
如何在移動端實(shí)現(xiàn)純css的自定義布局
在移動端實(shí)現(xiàn)純css的自定義布局的方法：
目前成都創(chuàng)新互聯(lián)已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、鎮(zhèn)坪網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
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
css中按鈕怎么設(shè)置
css設(shè)置按鈕樣式的方法:定義一個css選擇器,然后在按鈕標(biāo)簽中使用此選擇器即可設(shè)置按鈕樣式。使用:hover偽類選擇器可以設(shè)置按鈕 交互時樣式。
CSS可否改變設(shè)置按鈕的樣式？怎么做呢？菜鳥求教~
1、首先創(chuàng)建一個txt文件，修改后綴名：把.txt改為.html，用記事本打開添加如下代碼：打開瀏覽器，這是一個沒有添加樣式的button，外觀不美觀，而且在不同的瀏覽器下顯示的外觀是不一樣的，所以我們要添加統(tǒng)一的樣式。
2、按鈕樣式比較多，這樣寫讓代碼不整潔，可閱讀性差，就要用style標(biāo)簽。
3、style type="text/css"/style樣式表。style標(biāo)簽里面表示的是一個樣式表，我們所有的樣式都可以寫到標(biāo)簽中去。這段代碼的意思是：凡是button標(biāo)簽都使用這個樣式。
4、把 樣式表中的 ?button{}改成了.ui_button{}，然后在button標(biāo)簽里面加了class屬性，這樣做的意思是，這個button標(biāo)簽使用了名字為ui_button的樣式。
5、通過javascript動態(tài)修改樣式，為了避免用戶多次點(diǎn)擊提交按鈕重復(fù)提交信息，在用戶點(diǎn)擊提交按鈕之后，禁用按鈕，并設(shè)置按鈕字體的顏色為灰色。
6、修改樣式的其他方法：obj.style.cssText = "color:#E1E1E1;background-color:black;";cssText可以寫多個樣式樣式屬性。
7、修改樣式的其他方法：obj.setAttribute("class", "style2");直接更改按鈕標(biāo)簽的class屬性，把指向名為ui_button的樣式改為指向名為style2的樣式。
8、修改樣式的其他方法：link href="css1.css" rel="stylesheet" type="text/css" id="css"/obj.setAttribute("href","css2.css");修改引用外部的樣式表文件，這樣就可以對整個頁面的樣式進(jìn)行全部更新。
網(wǎng)站欄目：移動端css按鈕樣式,按鈕的css樣式
文章網(wǎng)址：http://www.ef60e0e.cn/article/dsgseoj.html
