文档章节

一起来设计前端

h
 helloCHS
发布于 2015/08/11 13:21
字数 588
阅读 11
收藏 0

最近准备一段时间搞搞前端,前端一直都觉得是个二把刀.先从最基本的布局开始吧

.whole_screen {
    height: 100%;
    overflow: hidden;
}
.whole_screen body {
    height: 100%;
    overflow: hidden;
}

整体定义全屏的,如果是再webapp中就可以使用以上的代码 (空格表示后者是前者的子节点) 基本的概念会穿插在整个文章中

overflow 属性规定当内容溢出元素框时发生的事情。其值可能为以下之一.

visible默认值。内容不会被修剪,会呈现在元素框之外。

hidden内容会被修剪,并且其余内容是不可见的。

scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit规定应该从父元素继承 overflow 属性的值。

.login_index .header {
    height: 50px;
    background-color: #522462; 
    overflow: hidden;
}
/*
  定义了在login_index 下的 class 为header的元素的 高度,背景颜色,以及超出内容之后的处理方式.
*/
.login_index .header .back {
    width: 40px;
    background: url(images/login/arrow.png) no-repeat center;
    background-size: 40px;
    float: left;
}
/*
  定义了 再class 为login_index 下的 ,class为header 下的 class为back的 高度,背景图片,背景大小,元素向右浮动
*/


.login_index .header .user a span{
    margin-right: 20px;
    float: right;
    color: #fff;
    line-height: 50px;

    font-size: 14px;
}
.login_index .header .user img {
    width: 40px;
    height: 40px;
    vertical-align: middle;    
}

.login_index .slide_win {
    height: 512px;
}

.login_index .slide_content .page .item {
    width: 25%;
    height: 50%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    float: left;
    border-right: 1px solid rgba(0,0,0,.3);
    border-bottom: 1px solid rgba(0,0,0,.3);
    position: relative;
    text-align: center;
}

.login_index .slide_content .item img {
    width: 140px;
    height: 180px;
    position: relative;
    top: 50%;
    margin-top: -90px;
}
.login_index .nav {
    height: 164px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    line-height: 164px;
    background-color: rgba(0,0,0,0.15);
}
.login_index .nav ul {
    overflow: hidden;
    height: 100%;
    border-top: 1px solid rgba(0,0,0,.3);
}
.login_index .nav li {
    width: 33%;
    float: left;
    height: 100%;
    color: #fff;
    font-size: 20px;
}
.login_index .nav li a {
    color: #fff;
}
.login_index .nav li img {
    vertical-align: middle;
    width: 70px;
    height: 70px;
    margin-right: 13px;
}
.login_index .nav li:nth-child(2) {
    border-left: 1px solid rgba(0,0,0,.3);
    border-right: 1px solid rgba(0,0,0,.3);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.login_index .slide_bar {
    height: 40px;
}

.login_index .slide_bar .bar {
    border: 1px solid rgba(0,0,0,.3);
}
.login_index .slide_bar .bar:last-child {
    margin-right: 0;
}
.login_index .slide_bar .bars .selected {
    background-color: #fff;
    border: 1px solid #fff;
}

定义css 最好能有上面的这样定义一个命名空间,之下的所有元素都用,这样可以避免定义冲突

© 著作权归作者所有

下一篇: 搞搞hadoop
h
粉丝 0
博文 3
码字总数 991
作品 0
东城
私信 提问
吐血推荐:程序员必知的6大前端网站

  1、简明魔法   http://www.nowamagic.net/      2、设计达人   http://www.shejidaren.com/      3、html5资源教程   http://www.html5tricks.com/      4、腾讯前端 ...

学习web前端
2017/12/20
0
0
北京枫华创益科技有限公司招聘Web前端开发/后端开发

我们刚刚起步,在寻觅那些卓尔不群的开创者和精益求精的坚守者。如果你愿意和我们一起开创、一起成长、一起分享,我们期待你的到来。 我们提供富有竞争力的薪酬(工资 + 奖金 + 期权),邀请...

fhcy
2011/06/23
472
1
去sogou面试被面试官给问倒了(分布式实时数据)

昨天下午去搜狗搜索事业部面试,1面都挺好的,2面的时候被问倒了(后来了解此人之前是就职于GOOGLE的某一大牛),要继续努力学习啊 :( 也把这个问题发出来,大家一起来讨论讨论。 他提出的问...

大王叫我来巡山
2012/05/30
11.8K
46
2014.02软件开发者技术交流活动

把我们的应用以及依赖包打包到一个可移植的容器中,可以发布到任何流行的 Linux 机器, 是不是感觉很COOL JS MVC框架Backbone的兴起,一起来对它探个明白吧 面对各种WEB前端JavaScript控件的...

济南工作网
2014/02/08
74
0
互联网创业公司招聘Web开发、设计等多个职位(内附职位月薪)

北京枫华创益科技有限公司求贤 我们刚刚起步,在寻觅那些卓尔不群的开创者和精益求精的坚守者。如果你愿意和我们一起开创、一起成长、一起分享,我们期待你的到来。 我们提供富有竞争力的薪酬...

fhcy
2011/04/08
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
20分钟前
4
0
从零基础到拿到网易Java实习offer,我做对了哪些事

作为一个非科班小白,我在读研期间基本是自学Java,从一开始几乎零基础,只有一点点数据结构和Java方面的基础,到最终获得网易游戏的Java实习offer,我大概用了半年左右的时间。本文将会讲到...

Java技术江湖
昨天
5
0
程序性能checklist

程序性能checklist

Moks角木
昨天
7
0
VUE 计算属性

本文转载于:专业的前端网站▶VUE 计算属性 1、示例代码 <!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>vue示例</title> </hea......

前端老手
昨天
6
0
快速搭建LNMT平台和环境部署 Tomcat详解

Tomcat部署的基本概念 1. CATALINA_HOME与CATALINA_BASE分别指什么?     CATALINA_HOME指的是Tomcat的安装目录     bin:\\Tomcat一些脚本存放目录,比如启动脚本startup.bat/start...

网络小虾米
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部