html5前端开发笔记-个人中心
2015-12-14 02:33
627 查看
简单的css自适应
PC端
***
移动端
***
)
***
一开始的想法就是模仿手机APP 的页面进行布局,首先得有个头部,然后是主题部分,然后加上2个按钮,分别是编辑和退出登录。先布出基本结构。
代码如下:
由于采用的是流体布局,所以head部分需要加入这句声明
这时候的效果如下
对于头部:
我们需要做的是:文字居中,方法是将文字用p标签标记起来,设置text-align在水平方向居中,通过调整line-height在竖直方向上居中,给予背景色,这里使用的是em单位,1em=16px,这是方便做流体布局的时候缩放计算的。对于配色整体的思路是一个底色,各个部分设置solid 的borde来形成扁平化的效果。
css代码如下:
主体:
首先应该先把边距都清掉,即body的margin和padding都为零,
然后主体用一个容器div包容起来(content),这是之前很老的写法了。当然了没有这个也可以。然后个人信息部分,这里是重点,如何让头像固定的情况下让头像div和信息div在同一行,使用浮动或者定位的话会导致当个人信息的文字多了以后,会超出div容器,这时候如果设置detail的heig为auto的话是无效的,它没法把他撑开的。原因是浮动和定位都会导致该元素脱离文档流。除了一种情况,相对定位。
解决方法如下:
对ul个人信息部分:display:inline-block
调整margn-left使它不遮挡住img,然后img浮动或者定位都可以。主要是要保证ul在容器内。
另外,ing不能被缩放,对其设置固定宽高即可。
完整CSS代码如下:
PC端
***
移动端
***
)
***
一开始的想法就是模仿手机APP 的页面进行布局,首先得有个头部,然后是主题部分,然后加上2个按钮,分别是编辑和退出登录。先布出基本结构。
代码如下:
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=0,maximum-scale=1.0,minimun-sacle=1.0"> <meta http-equiv="Cache-Control" content="no-siteapp"> <meta http-equiv="Cache-C ontrol" content="no-transform"> <link rel="stylesheet" href="style.css"> <title>个人中心</title> </head> <body> <header> <p>个人中心</p> </header> <div class="content"> <div class="detail"> [站外图片上传中……(1)] <ul class="block"> <li>姓名:</li> <li>性别:</li> <li>手机:</li> <li>学校:</li> <li>个人简介:这个地方文字超出范围之外会自动把容器div撑开,注意不是中文字符的话 需要加CCS属性word-wrap:break-word,这是CCS3的属性。</li> </ul> </div> <div class="edit"> <a href="###">编辑</a> </div> <div class="login-out"> <a href="###">退出</a> </div> <footer> </footer> </body>
由于采用的是流体布局,所以head部分需要加入这句声明
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,maximum-scale=1.0,minimun-sacle=1.0"> //声明宽度等于设备宽度,禁止用户缩放 <meta http-equiv="Cache-Control" content="no-siteapp">//禁止百度转码 <meta http-equiv="Cache-Control" content="no-transform">//禁止百度转码
这时候的效果如下
对于头部:
我们需要做的是:文字居中,方法是将文字用p标签标记起来,设置text-align在水平方向居中,通过调整line-height在竖直方向上居中,给予背景色,这里使用的是em单位,1em=16px,这是方便做流体布局的时候缩放计算的。对于配色整体的思路是一个底色,各个部分设置solid 的borde来形成扁平化的效果。
css代码如下:
header{ width: 100%; height: 3em; background-color: #00A2CA; } header p{ text-align: center; line-height:3em; }
主体:
首先应该先把边距都清掉,即body的margin和padding都为零,
然后主体用一个容器div包容起来(content),这是之前很老的写法了。当然了没有这个也可以。然后个人信息部分,这里是重点,如何让头像固定的情况下让头像div和信息div在同一行,使用浮动或者定位的话会导致当个人信息的文字多了以后,会超出div容器,这时候如果设置detail的heig为auto的话是无效的,它没法把他撑开的。原因是浮动和定位都会导致该元素脱离文档流。除了一种情况,相对定位。
解决方法如下:
对ul个人信息部分:display:inline-block
调整margn-left使它不遮挡住img,然后img浮动或者定位都可以。主要是要保证ul在容器内。
另外,ing不能被缩放,对其设置固定宽高即可。
完整CSS代码如下:
@charset "utf-8";
body{
margin: 0;
padding: 0;
background-color: #EEEEEE;
font-family: 微软雅黑;
}
ul{
list-style: none;
margin: 0 0 0 7.5em;
padding: 0;
}
header{ width: 100%; height: 3em; background-color: #00A2CA; } header p{ text-align: center; line-height:3em; }
.content{
width: 100%;
background-color: #EEEEEE;
}
.detail{
background-color: #FFFFFF;
height: auto;
margin-top:1em;
padding: 10px;
position: relative;
}
.edit{
background-color: #FFFFFF;
height: 2em;
width: 100%;
margin-top:1em;
clear: both;
}
.login-out{
background-color: #FFFFFF;
height: 2em;
width: 100%;
margin-top:0.1em;
margin-bottom: 0.5em;
}
.footer{
width: 100%;
height:2em;
background-color: rgb(75,75,75);
}
img{
width: 100%;
height: 100%;
height: 7em;
width: 7em;
border: 1px solid grey;
position: absolute;
top: 0.5em;
left: 0.5em;
}
a{
text-decoration: none;
display: inline-block;
height: 2em;
text-align: center;
width: 100%;
line-height: 2em;
color: black;
}
.block{
display: inline-block;
height: auto;
word-wrap:break-word;
width: 50%;
}
相关文章推荐
- html5语义化标签
- HTML5实现3D和2D可视化QuadTree四叉树碰撞检测
- html5 表格使用基础
- 使用HTML5技术控制电脑或手机上的摄像头
- HTML5实现3D和2D可视化QuadTree四叉树碰撞检测
- HTML5 页面编辑API之Range对象二
- HTML5 页面编辑API之Range对象
- HTML5增强的页面元素
- 如何让IE9以下版本认识html5元素
- 10个免费的响应式布局HTML5+CSS3模板
- HTML5--关于Web Worker
- HTML5--关于Geolocalition(地理定位)
- HTML5--Canvas
- HTML5--关于音频和视频
- HTML5-关于表单
- HTML5模仿逼真地球自转
- HTML5 form表单新增
- html5 列表
- HTML5全局属性
- HTML5中<meta>标签的学习