简单的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前端开发笔记-个人中心的更多相关文章

  1. 前端开发笔记（1）html基础

    HTML介绍 HTML是HyperTextMarkupLanguage超文本标记语言的缩写 HTML是标记语意的语言 编辑器 任何纯文本编辑器都能够编辑html,比如记事本,editplus,note ...

  2. web前端开发笔记（2）

    一.什么是作用域. 所有变量都存在于一个执行环境中(也称作用域),这个执行环境决定了变量的生命周期,以及哪一部分代码可以访问其中的变量.总结: 执行环境有全局执行环境和函数执行环境. 每次进入一个新执 ...

  3. web前端开发笔记（1）

     一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必 ...

  4. 前端开发笔记（2）css基础（上）

    CSS介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS ...

  5. 前端开发笔记（3）css基础（中）

    上一篇中我们学习了html的标准文档流,下面我们先来看看如何脱离标准流. 脱离标准流 css中一共有三种方法脱离标准流 浮动 绝对定位 固定定位 浮动 我们要搞清楚什么是浮动,先来看一个标准文档流的例 ...

  6. html5引擎开发 -- 引擎消息中心和有限状态机 - 初步整理 一

    一 什么是有限状态机        FSM (finite-state machine),又称有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型.他对于逻辑以及 ...

  7. MOOC web前端开发笔记（一）

    网站和网页 网站 互联网上用于展示特定内容的相关网页的集合. 网页 网站中的一页,一个网站中的网页通过"超链接"的方式被组织在一起. 主页 进入网站看到的第一个网页,主页的文件名通 ...

  8. 今天再给大家带点html5前端开发的干货模板“text/tpl”怎么用 script template怎么用

    text/tpl 顾名思义就是模板,其实和C++模板函数类似的作用,就是利用他生成一个HMTL内容,然后append或者替换html里面 有什么好处,假如后端返回来的数据都是一样的,但是需要生成不同的 ...

  9. 资料,来自HTML5前端开发学习⑤群

    resource HTML5+CSS3视频教程:http://pan.baidu.com/s/1hsyOjze 密码:c3uw JavaScript视频教程:链接:http://pan.baidu.c ...

随机推荐

  1. Android原生Calendar代码阅读(一)

    原生Calendar代码: 5.0Calendar源码.rar 提取的JavaDoc: Calendar的javadoc.rar 1. AsyncQueryService和AsyncQueryServ ...

  2. Windows下使用ODBC API访问数据库之关键

    本文采用SQL2005 + VS2008环境,以ODBC API方式成功连接数据库. 1.SQL安装和环境配置 这部分网上随便搜一下都有很多资料,而且很容易就可以配置成功. 注意的关键点: SA账号配 ...

  3. hdu 1232畅通工程

    Problem Description 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府"畅通工程"的目标是使全省任何两个城镇间都可以实现交通 ...

  4. CODEVS 2451 互不侵犯

    2451 互不侵犯 题目描述 Description 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格 ...

  5. webview 上 postUrl 发送参数过程中数据丢失或错误 的问题

    用到了android 的 webview 来展示页面.webview需要用post来传递参数.于是问题出现了,后台解析中发现参数错误. 之前有因为String 和byte[]转行时,数据丢失的问题,于 ...

  6. UIP协议栈

    UIP协议栈笔记 http://blog.chinaunix.net/uid-23247944-id-2974928.html

  7. 最大公约数(gcd):Euclid算法证明

    1个常识: 如果 a≥b 并且 b≤a,那么 a=b. 2个前提: 1)只在非负整数范围内讨论两个数 m 和 n 的最大公约数,即 m, n ∈ N. 2)0可以被任何数整除,但是0不能整除任何数,即 ...

  8. Python之路第二天，基础(2)-基本数据类型

    一.Python数据类型 数 在Python中有4种类型的数,整数,长整数,浮点数和复数. 2是一个整数的例子 长整数不过是大一点的整数 3.23和52.3E是浮点数的例子.E标记表示10的幂.52. ...

  9. vim 删除临时文件

    今天在用Xshell连接到CentOS后 使用vim 编辑文档 因为中途有事  临时关闭 并没有保存 再一次打开时 vim 提示要恢复 , 但是每次打开文件后到要恢复,于是找到了以下办法 和vim工作 ...

  10. Codeforces 577B Modulo Sum

    http://codeforces.com/problemset/problem/577/B 题意:有n个数,求有无一个子序列满足和是m的倍数 思路:用模下的背包做,发现n是十的六次方级别,但是有个神 ...