html5前端开发笔记-个人中心_html/css

来源：动视网责编：小采时间：2020-11-27 16:16:03

html5前端开发笔记-个人中心_html/css

html5前端开发笔记-个人中心_html/css_WEB-ITnose:简单的css自适应PC端*** 移动端*** 一开始的想法就是模仿手机APP 的页面进行布局，首先得有个头部，然后是主题部分，然后加上2个按钮，分别是编辑和退出登录。先布出基本结构。代码如下：个人中心个人中心 [站外图片上传中……(1)] 姓名：性别

推荐度：

点击下载本文 文档为doc格式

导读html5前端开发笔记-个人中心_html/css_WEB-ITnose:简单的css自适应PC端*** 移动端*** 一开始的想法就是模仿手机APP 的页面进行布局，首先得有个头部，然后是主题部分，然后加上2个按钮，分别是编辑和退出登录。先布出基本结构。代码如下：个人中心个人中心 [站外图片上传中……(1)] 姓名：性别

简单的css自适应
PC端
***

移动端

***

一开始的想法就是模仿手机APP 的页面进行布局，首先得有个头部，然后是主题部分，然后加上2个按钮，分别是编辑和退出登录。先布出基本结构。
代码如下：

个人中心 个人中心
 
 [站外图片上传中……(1)] 姓名：
 性别：
 手机：
 学校：
 个人简介：这个地方文字超出范围之外会自动把容器div撑开，注意不是中文字符的话 需要加CCS属性word-wrap:break-word，这是CCS3的属性。
 编辑 退出

由于采用的是流体布局，所以head部分需要加入这句声明

 //声明宽度等于设备宽度，禁止用户缩放//禁止百度转码//禁止百度转码

这时候的效果如下

对于头部：
我们需要做的是：文字居中，方法是将文字用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前端开发笔记-个人中心_html/css

推荐度：

点击下载本文 文档为doc格式

标签： it 开发笔记

热门焦点

html5前端开发笔记-个人中心_html/css

html5前端开发笔记-个人中心_html/css

html5前端开发笔记-个人中心_html/css

最新推荐

猜你喜欢

热门推荐