h5+css实现app界面

最新推荐文章于 2025-03-24 16:55:49 发布

胖哥哥飘过

最新推荐文章于 2025-03-24 16:55:49 发布

阅读量5.8k

点赞数 4

分类专栏： android 前端文章标签： android 前端

本文链接：https://blog.youkuaiyun.com/pgg_cold/article/details/81391165

版权

这篇博客详细介绍了如何利用HTML5和CSS技术来构建应用程序的界面。内容包括了reset.css用于重置浏览器默认样式，main.css用于定义页面的主要样式，set_root.js用于设置根元素的初始状态，以及index.html作为项目的入口文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

1.reset.css


/*将标签默认的间距设为0*/
body,ul,p,h1,h2,h3,h4,h5,h6,dl,dd,input,selector,form{
    margin: 0;padding: 0;
}

/*让h标签继承body内设置的字体大小*/
h1,h2,h3,h4,h5,h6{
    font-size: 100%;
}


/*去掉默认的列表标签*/
ul{
    list-style: none;
}

/*设置em文字不倾斜*/
em{
    font-style: normal;
}

/*清除下划线*/
a{
    text-decoration: none;
}

/*清除图片的边框*/
img{
    border: none;
}

/*清楚margin-top塌陷和浮动问题*/
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}

.clearfix:after{
    clear: both;
}
/*解决ie清楚浮动的问题*/
.clearfix{
    zoom: 1;
}

/*向左浮动*/
.fl{
    float: left;
}
/*向右浮动*/
.fr{
    float: right;
}

2.main.css

body{
    font-family: 'Microsoft Yahei';
    color: #666;
}

.main_wrap{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: gold;
}

/*顶部标题栏*/
.header{
    height: 2.5rem;
    background-color: #37ab40;
    position: relative;
}
.header .logo{
    display: block;
    width: 4.45rem;
    height: 1.8rem;
    margin: 0.35rem auto 0;
}

.header .logo img{
    width: 100%;
}

.header .search{
    position: absolute;
    width: 1.35rem;
    height: 1.35rem;
    right: 0.75rem;
    top: 0.625rem;
    background: url("../image/icons.png") left top;
    background-size: 3rem 42rem;
}

.center_wrap{
    position: absolute;
    left: 0;
    right: 0;
    top: 2.5rem;
    bottom: 2.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #efefef;
}
.slide img{
    width: 100%;
}

.menu_con{
    height:9.25rem;
    background-color:#fff;
    margin-top:0.5rem;
    overflow:hidden;
}

.menu{
    width:19rem;
    height:8.1rem;
    margin:0.7rem 0 0 1.375rem;
}

.menu li{
    width:2.8rem;
    height:4.1rem;
    float:left;
    margin-right:1.625rem;
}

.menu li a{
    display:block;
    width:2.8rem;
    height:2.8rem;
    background:url(../image/icons.png) left -3rem no-repeat;
    background-size:3rem 42rem;
}

.menu li h2{
    height:1.3rem;
    font:13px/1.3rem 'Microsoft Yahei';
    color:#666;
    text-align:center;
}


.menu li:nth-child(2) a{
    background-position:left -6rem;
}
.menu li:nth-child(3) a{
    background-position:left -9rem;
}
.menu li:nth-child(4) a{
    background-position:left -12rem;
}
.menu li:nth-child(5) a{
    background-position:left -15rem;
}
.menu li:nth-child(6) a{
    background-position:left -18rem;
}
.menu li:nth-child(7) a{
    background-position:left -21rem;
}
.menu li:nth-child(8) a{
    background-position:left -24rem;
}

.common_

最低0.47元/天解锁文章