html5前端开发笔记-个人中心
简单的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)html基础
HTML介绍 HTML是HyperTextMarkupLanguage超文本标记语言的缩写 HTML是标记语意的语言 编辑器 任何纯文本编辑器都能够编辑html,比如记事本,editplus,note ...
- web前端开发笔记(2)
一.什么是作用域. 所有变量都存在于一个执行环境中(也称作用域),这个执行环境决定了变量的生命周期,以及哪一部分代码可以访问其中的变量.总结: 执行环境有全局执行环境和函数执行环境. 每次进入一个新执 ...
- web前端开发笔记(1)
一.HTML标签书写有哪些规范? 页面编码. 文档声明. 关键字与描述. 行内元素不能包含块级元素. a标签不能嵌套a标签. 标签名和属性必须用小写字母书写,属性必须加引号,标签必须闭合,单标签页必 ...
- 前端开发笔记(2)css基础(上)
CSS介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS ...
- 前端开发笔记(3)css基础(中)
上一篇中我们学习了html的标准文档流,下面我们先来看看如何脱离标准流. 脱离标准流 css中一共有三种方法脱离标准流 浮动 绝对定位 固定定位 浮动 我们要搞清楚什么是浮动,先来看一个标准文档流的例 ...
- html5引擎开发 -- 引擎消息中心和有限状态机 - 初步整理 一
一 什么是有限状态机 FSM (finite-state machine),又称有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型.他对于逻辑以及 ...
- MOOC web前端开发笔记(一)
网站和网页 网站 互联网上用于展示特定内容的相关网页的集合. 网页 网站中的一页,一个网站中的网页通过"超链接"的方式被组织在一起. 主页 进入网站看到的第一个网页,主页的文件名通 ...
- 今天再给大家带点html5前端开发的干货模板“text/tpl”怎么用 script template怎么用
text/tpl 顾名思义就是模板,其实和C++模板函数类似的作用,就是利用他生成一个HMTL内容,然后append或者替换html里面 有什么好处,假如后端返回来的数据都是一样的,但是需要生成不同的 ...
- 资料,来自HTML5前端开发学习⑤群
resource HTML5+CSS3视频教程:http://pan.baidu.com/s/1hsyOjze 密码:c3uw JavaScript视频教程:链接:http://pan.baidu.c ...
随机推荐
- F# 越用越喜欢
F# 越用越喜欢 最近由于需要,把遗忘了几年的F#又捡了起来.说捡了起来,倒不如说是从头学习,原来学的早已经忘了!所谓学过,只不过看过一本<F# 语言程序设计> (郑宇军 凌海风 编著 - ...
- Mysql常用命令记录
-- 导出数据库: mysqldump -u user_name -p database_name > import_file.sql -- 执行脚本 source database.sql
- java下的第一个redis
Redis支持很多编程语言的客户端,有C.C#.C++.Clojure.Common Lisp.Erlang.Go.Lua.Objective-C.PHP.Ruby.Scala,甚至更时髦的Node. ...
- 洛谷 P3395 路障
P3395 路障 题目背景 此题约为NOIP提高组Day1T1难度. 题目描述 B君站在一个n*n的棋盘上.最开始,B君站在(1,1)这个点,他要走到(n,n)这个点. B君每秒可以向上下左右的某个方 ...
- Keil C减小代码编译量大小的方法(gai)
keil-C减小代码编译大小的方法整理 方法一:(通过优化代码减小) 1.1少做乘除运算,使用左/右移位来实现乘除 Eg ,普通:a = 0x80*4: 优化:a = 0x80<<2: 1 ...
- hdu 5325 Crazy Bobo (树形dp)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud Crazy Bobo Time Limit: 6000/3000 MS (Java ...
- windows应用中调用DLL一步步试验
试验环境: PC:win10 build 10143 IDE: vs2015 RC WinPhone: win10 build 10136 简单界面,点按钮,算加法 一.主程用C++ 1.新建visu ...
- JS 浮点计算BUG
最近做项目的时候遇到一个比较纠结的js浮点计算问题. 当时是做利率计算,因为利率大多数涉及到小数点,精度要求也很高. 0.6+0.1+0.1=? 结果出现:0.7999999999999 网上查找了一 ...
- LightOj 1230 Placing Lampposts(树形DP)
题意:给定一个森林.每个节点上安装一个灯可以覆盖与该节点相连的所有边.选择最少的节点数num覆盖所有的边.在num最小的前提下,合理放置num个灯使得被两个灯覆盖的边最多? 思路:F[i][0]代表没 ...
- Linux中C/C++头文件一览
1.Linux中一些头文件的作用: #include <assert.h> //ANSI C.提供断言,assert(表达式) #include <glib.h> ...