* {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
//字體圖標(biāo) start
@font-face {
font-family: 'm';
src: url('../fonts/3M.eot?k5ywnw');
src: url('../fonts/3M.eot?k5ywnw#iefix') format('embedded-opentype'),
url('../fonts/3M.ttf?k5ywnw') format('truetype'),
url('../fonts/3M.woff?k5ywnw') format('woff'),
url('../fonts/3M.svg?k5ywnw#3M') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="m-"], [class*=" m-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'm' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.m-binding:before {
content: "\e900";
}
.m-level:before {
content: "\e901";
}
.m-swiper:before {
content: "\e902";
}
.m-integral:before {
content: "\e903";
}
.m-remind:before {
content: "\e904";
}
.m-account2:before {
content: "\e905";
}
.m-success:before {
content: "\e906";
}
.m-authcode:before {
content: "\e907";
}
.m-password:before {
content: "\e908";
}
.m-account:before {
content: "\e909";
}
//字體圖標(biāo) end
//字體顏色 start
.text-nav {
color: #181818;
}
.text-hearder {
color: #333333;
}
.text-placeholder {
color: #cdcdcd;
font-size: 16px;
}
.text-dark {
color: #606060;
}
.text-white {
color: #ffffff;
}
.text-dominant {
color: #a6b8c7
}
//字體顏色 end
//字體大小 start
.text-m {
font-size: 24px;
}
.text-s {
font-size: 12px;
}
//字體大小 end
.page-flex {
display: flex;
}
.page-header {
height: 50px;
align-items: center;
}
.img-responsive {
width: 100%;
}
.text-center {
text-align: center;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.pt15 {
padding-top: 15px;
}
.pb15 {
padding-bottom: 15px;
}
.mt30 {
margin-top: 30px;
}
.page-header.login .logo, .page-header.register .logo {
height: 20px;
padding: 0px 10px;
position: absolute;
}
.page-header.index .logo {
height: 20px;
padding: 0px 10px;
}
.page-header.index p:nth-child(3) {
position: absolute;
right: 10px;
}
.container {
padding: 0 35px;
}
.weui-cell {
padding-left: 0;
}
.weui-cell:before, .weui-cells:before, .weui-cells:after {
border: none;
}
//login start
.weui-label {
width: 45px;
}
.input {
border-bottom: 2px solid #cdcdcd;
> img {
height: calc(100% + 2px);
}
}
.forgotPadssword {
color: #606060;
text-decoration: underline;
}
.regeister-remind {
width: 54%;
margin-left: 23%;
text-align: center;
display: table;
align-items: center;
vertical-align: middle;
.weui-btn, p {
display: inline-block;
display: table-cell;
font-size: 14px;
}
}
.text-supplement > a {
color: #ff0000;
text-decoration: underline;
}
.login-remind {
width: 36%;
text-align: center;
display: table;
align-items: center;
vertical-align: middle;
.weui-btn, p {
display: inline-block;
display: table-cell;
font-size: 14px;
}
}
.btn {
color: #94a7b7;
border: 1px solid #94a7b7;
line-height: 2;
}
.fill-btn {
background: #a6b8c7;
}
.shade-success {
background: rgba(0, 0, 0, .8);
z-index: 2;
position: absolute;
top: 0;
width: 100%;
height: 100%;
.box {
position: absolute;
width: 90%;
height: 34%;
top: 26%;
left: 5%;
background: #fff;
align-items: center;
justify-content: center;
flex-direction: column;
i {
font-size: 56px;
}
a {
width: 80%;
margin-left: 10%;
}
}
}
//login end
//index start
.weui-navbar + .weui-tab__bd {
padding-top: 0px;
}
.weui-navbar {
bottom: 0;
top: auto;
background-color: #fff;
.weui-navbar__item.weui-bar__item--on, .weui-navbar__item {
color: #181818;
font-size: 18px;
background-color: #fff;
padding: 0;
margin: 13px 0;
border-right: 1px solid #e0e0e0
}
}
.weui-tab__bd .weui-tab__bd-item.weui-tab__bd-item--active{
display: flex;
flex-direction: column;
}
.panel {
padding: 0 10px;
width: 100%;
display: -webkit-box;
box-sizing: border-box;
overflow: hidden;
a{
display: block;
}
.link-activity {
background-color: #c5c9cc;
width: 50%;
height: 86%;
float: left;
padding-right: 5px;
}
.r{
float: right;
width: 50%;
height: 86%;
.link-exchange {
background: #cec4c6;
width: 100%;
height: 50%;
float: left;
}
.link-userinfo {
background: #c5d0ca;
width: 100%;
height: 50%;
float: left;
}
}
}
//index end
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport"
content="width=device-width,user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="assets/css/jquery-weui.min.css">
<link rel="stylesheet" href="assets/css/weui.min.css">
<link rel="stylesheet" href="assets/css/style.min.css">
</head>
<body>
<!-- 容器 -->
<div class="weui-tab">
<div class="weui-navbar">
<a class="weui-navbar__item weui-bar__item--on" href="#tab1">
首頁
</a>
<a class="weui-navbar__item" href="#tab2">
活動(dòng)
</a>
<a class="weui-navbar__item" href="#tab3">
我的
</a>
<a class="weui-navbar__item" href="#tab4">
意見反饋
</a>
</div>
<div class="weui-tab__bd">
<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active weui-flex">
<div class="page-header weui-flex index">
<img class="logo" src="assets/images/logo.png">
<p class="text-hearder">您好: <span>張鑫</span></p>
<p class="pull-right">可用積分:<span>600</span></p>
</div>
<div class="page-banner">
<img class="img-responsive" src="assets/images/banner-index.jpg">
</div>
<div class="panel weui-flex__item">
<a href="javascript:;" class="link-activity"></a>
<div class="r">
<a href="javascript:;" class="link-exchange"></a>
<a href="javascript:;" class="link-userinfo"></a>
</div>
</div>
</div>
<div id="tab2" class="weui-tab__bd-item">
<h1>活動(dòng)</h1>
</div>
<div id="tab3" class="weui-tab__bd-item ">
<h1>我的</h1>
</div>
<div id="tab4" class="weui-tab__bd-item">
<h1>意見反饋</h1>
</div>
</div>
</div>
<script src="assets/js/jquery-2.1.4.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery-weui.min.js"></script>
</body>
</html>
現(xiàn)在a元素都是有大小的但是背景色不顯示是為什么
跑了下你的代碼,link-userinfo 沒有顯示,是因?yàn)?,未設(shè)置float
https://jsfiddle.net/zwwill/3...
-----補(bǔ)充
注意看panel
類里面的overflow:hidden; display:-webkit-box;
并且高度未設(shè)置即為auto
,此時(shí)的panel
內(nèi)a便標(biāo)簽有設(shè)置為float:left
那么 float一旦設(shè)置,原生將“脫離”文檔流,即不在占用panel的空間,此時(shí)即使a便簽有高度也無法“撐開“ panel,因?yàn)?panel 設(shè)置了 hidden 屬性,所有被隱藏了,但是,當(dāng)overflow:hidden;display:block;
同時(shí)存在時(shí),會(huì)重新計(jì)算panel的大小
解決方案有多種,簡單清除 a 便簽的浮動(dòng),或者 display:block;
較為方便
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景,秉承“教育改變生活”的發(fā)展理念,致力于培養(yǎng)中國IT技能型緊缺人才,是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年,作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地,中博成功培育了近30000名軟件工程師走向高薪崗位,合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年,經(jīng)過二十年潛心發(fā)展,已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機(jī)構(gòu),發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團(tuán),成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團(tuán)成立于2002年,是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu),是中國一站式人才培養(yǎng)平臺(tái)、一站式人才輸送平臺(tái)。2014年4月3日在美國成功上市,融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師,曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jīng)理從事移動(dòng)互聯(lián)網(wǎng)管理及研發(fā)工作,曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項(xiàng)目經(jīng)理。精通Java與.NET 技術(shù), 熟練的跨平臺(tái)面向?qū)ο箝_發(fā)經(jīng)驗(yàn),技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3;Javascript及主流js庫,具有快速界面開發(fā)的能力,對(duì)瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國Software AG 技術(shù)顧問,美國Dachieve 系統(tǒng)架構(gòu)師,美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。