第八十五节，css布局补充一

css布局补充一

图片边框问题

注意css布局时img图片标签默认有的浏览器有边框，所以大多时候需要去除图片的边框

CSS各种居中方法

水平居中的text-align:center 和 margin:0 auto

这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响，否则一切都是无用功。margin:0 auto
也可以被写成margin:0 auto 0 auto。不能理解的童鞋们可以自己去找找关于css缩写的内容。

垂直居中的line-height

什么？！margin在垂直居中里不起作用了？显然事情确实如此，我们仅有margin:0 auto的用法而没有auto 0的情况。至于line-height，他也是作用在父元素上，当他的值等于父元素的height值时
，内部的文字就会自动的垂直居中了。此处好像仅仅只能是文字而已，遗憾。

利用position定位来实现元素的水平和垂直居中

html代码

<div class="a">

    <div class="b">

        <p>这是一段文本</p>

    </div>

</div>

css代码

@charset "utf-8";

*{

    margin:;

    padding:;

}

.a{

    width: 400px;

    height: 300px;

    background-color: #ff3820;

    /*将父元素绝对定位*/

    position: relative;

}

.b{

    width: 100px;

    height: 50px;

    background-color: #3437ff;

    /*将子元素相对定位*/

    position: absolute;

    /*定位上面百分之五十*/

    top: 50%;

    /*定位左边百分之五十*/

    left: 50%;

    /*外边距左边负元素宽度的一半*/

    margin-left: -50px;

    /*外边距上负元素高度的一半*/

    margin-top: -25px;

}

css布局边距问题

有的标签有默认边距，布局起来不方便，我们一般在布局的时候，会先用*将所以内外边距去除

*{

    margin:;

    padding:;

}

利用position: absolute;相对定位来布局管理后台

css代码

@charset "utf-8";

*{

    margin:;

    padding:;

    overflow: hidden;

}

body{

    background-color: #00C5CE;

    color: #FFFFFF;

}

/*头部区域*/

.tou{

    width: auto;

    height: 100px;

    background-color: #00C5CE;

    text-align:center;

    border-bottom: 4px solid #fef6ff;

}

.tou h1{

    font-size: 30px;

    font-weight: bold;

    line-height: 100px;

}

/*左边导航区域*/

div .dh{

    background-color: #5DA7AA;

    width: 180px;

    height: 572px;

    border: 4px solid #3B5521;

    border-radius: 6px;

    /*将导航区域相对定位*/

    position: absolute;

    left:;

}

div .dh h3{

    width: 182px;

    height: 25px;

    background-color: #2E5FC4;

    font-size: 15px;

    text-align: center;

    line-height: 25px;

}

div .dh ul li{

    background-color: #A2D3D3;

    margin-top: 2px;

    margin-bottom: 2px;

    text-align: center;

    color: #1618ff;

    border: 2px solid #A2D3D3;

    border-radius: 6px;

}

/*内容区域*/

div .lr{

    height: 572px;

    /*内容区域相对定位*/

    position: absolute;

    left: 190px;

    right:;

    bottom: 50px;

    top: 104px;

    color: #1618ff;

    background-color: #D3EAEF;

    border: 4px solid #3B5521;

    border-radius: 6px;

    overflow: scroll;

}

/*底部区域*/

div .db{

    width: auto;

    height: 42px;

    background-color: #5DA7AA;

    /*底部相对定位*/

    position: absolute;

    top: 687px;

    left:;

    right:;

    bottom:;

    text-align: center;

    line-height: 42px;

}

html代码

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>后台管理系统</title>

    <link rel="stylesheet" type="text/css" href="1.css"/>

</head>

<body>

<!--头部-->

<div class="tou">

    <h1>欢迎登陆后台管理系统</h1>

</div>

<!--主体-->

<div class="zht">

    <div class="dh">

        <h3>导航中心</h3>

        <ul>

            <li>列表1</li>

            <li>列表2</li>

            <li>列表3</li>

            <li>列表4</li>

            <li>列表5</li>

        </ul>

    </div>

    <div class="lr">

         <h1>这是内容</h1>

         <h1>这是内容</h1>

         <h1>这是内容</h1>

         <h1>这是内容</h1>

         <h1>这是内容</h1>

         <h1>这是内容</h1>

         <h1>这是内容</h1>

         <h1>这是内容</h1>

         <h1>这是内容</h1>

         <h1>这是内容</h1>

         <h1>这是内容</h1>

         <h1>这是内容</h1>

         <h1>这是内容</h1>

         <h1>这是内容</h1>

    </div>

    <div class="db">

    玉秀文化传播版权所有©

    </div>

</div>

</body>

</html>

效果图：

利用font-awesome图片和position定位来实现文本框图标

css代码

@charset "utf-8";

.shrk{

    width: 190px;

    height: auto;

    background-color: #194aff;

    position: relative;

}

.shrk input{

    width: 170px;

    height: 25px;

    padding-right: 25px;

    border: 2px solid #2758ff;

    border-radius: 6px;

}

.shrk span{

    /*定位图片*/

    position: absolute;

    right: 0px;

    top: 8px;

    opacity: 0.7;

    color: #2758ff;

}

html代码

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>输入框</title>

    <link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/css/font-awesome.css"/>

    <link rel="stylesheet" type="text/css" href="1.css"/>

</head>

<body>

<div class="shrk">

    <input type="text"/>

    <span class="fa fa-user"></span>

</div>

</body>

</html>

利用position定位来设置模态对话框

html代码

<!--网页层-->

<div class="wy">

    <p>这是网页层</p>

</div>

<!--遮罩层-->

<div class="mt">

</div>

<!--提示层-->

<div class="tshk">

    <h2>提示框</h2>

</div>

css代码

@charset "utf-8";

*{

    margin:;

    padding:;

}

/*网页层*/

.wy{

    width: auto;

    height: 2000px;

    background-color: #ffd41e;

}

/*遮罩层*/

.mt{

    position: fixed;

    top:;

    right:;

    bottom:;

    left:;

    z-index:;

    background-color:black;

    opacity: 0.8;

}

/*提示层*/

.tshk{

    width: 400px;

    height: 300px;

    background-color:aliceblue;

    position: fixed;

    top: 50%;

    left: 50%;

    z-index:;

    margin-left: -200px;

    margin-top: -150px;

}

布局购物商城的购买数量加减框

html代码

<div class="a">

    <div class="b">-</div>

    <div class="c">

        <input type="text" value="1"/>

    </div>

    <div class="d">+</div>

</div>

css代码

@charset "utf-8";

*{

    margin:;

    padding:;

}

.a{

    width: 150px;

    height: 30px;

    margin-top: 10px;

    margin-left: 10px;

    border: 1px solid #C6C6C6;

    cursor: pointer;

}

.b{

    width: 30px;

    height: 30px;

    background-color: #C6C6C6;

    border-right: 1px solid #9B9898;

    text-align: center;

    line-height: 30px;

    font-size: 20px;

    float: left;

}

.c{

    width: 88px;

    height: 30px;

    float: left;

}

.c input{

    width: 88px;

    height: 30px;

    border:;

    text-align: center;

    line-height: 30px;

}

.d{

    width: 30px;

    height: 30px;

    background-color: #C6C6C6;

    border-left: 1px solid #9B9898;

    text-align: center;

    line-height: 30px;

    font-size: 20px;

    float: right;

}

第八十五节，css布局补充一的更多相关文章

第三百八十五节，Django+Xadmin打造上线标准的在线教育平台—登录功能实现，回填数据以及错误提示html
第三百八十五节,Django+Xadmin打造上线标准的在线教育平台—登录功能实现 1,配置登录路由 from django.conf.urls import url, include # 导入dja ...
第二百八十五节，MySQL数据库-MySQL函数
MySQL数据库-MySQL函数 1.MySQL内置函数 SELECT执行函数,后面跟要执行的函数 CHAR_LENGTH(str)函数:返回字符串的字符长度 -- CHAR_LENGTH(str)函 ...
第一百八十五节，jQuery，Ajax 表单插件
jQuery,Ajax 表单插件学习要点: 1.核心方法 2.option 参数 3.工具方法传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 ...
第三百八十六节，Django+Xadmin打造上线标准的在线教育平台—HTML母版继承
第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承母板-子板-母板继承母板继承就是访问的页面继承一个母板,将访问页面的内容引入到母板里指定的地方,组合成一个新页 ...
第三百八十四节，Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册
第三百八十四节,Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册基于类的路由映射 from django.conf.urls import url, incl ...
第三百五十五节，Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy信号详解
第三百五十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy信号详解信号一般使用信号分发器dispatcher.connect(),来设置信号,和信号触发函数,当捕获到信号时执行 ...
第三百一十五节，Django框架，CSRF跨站请求伪造
第三百一十五节,Django框架,CSRF跨站请求伪造全局CSRF 如果要启用防止CSRF跨站请求伪造,就需要在中间件开启CSRF #中间件 MIDDLEWARE = [ 'django.midd ...
centos shell脚本编程1 正则 shell脚本结构 read命令 date命令的用法 shell中的逻辑判断 if 判断文件、目录属性 shell数组简单用法 $( ) 和${ } 和$(( )) 与 sh -n sh -x sh -v 第三十五节课
centos shell脚本编程1 正则 shell脚本结构 read命令 date命令的用法 shell中的逻辑判断 if 判断文件.目录属性 shell数组简单用法 $( ) 和$ ...
centos lamp/lnmp阶段复习以后搬迁discuz论坛不需要重新安装，只需修改配置文件即可安装wordpress 安装phpmyadmin 定时备份mysql两种方法第二十五节课
centos lamp/lnmp阶段复习以后搬迁discuz论坛不需要重新安装,只需修改配置文件即可安装wordpress 安装phpmyadmin 定时备份mysql两种方法第二十五节 ...

随机推荐

UITabelview的删除
删除的效果 Automatic Bottom Fade left middle none right top 简单删除先删除数据源里的数据,然后再删除cell,否者会报错 let indexPath ...
RHEL账号总结一：账号的分类
账号是一种用来记录单个用户或者多个用户的数据.RHEL中每一个合法的用户都必须拥有账号,才能使用RHEL. 在RHEL上的账号可以分为两类: 用户账号:用来存储单一用户的数据,你也可以使用一个用户账号 ...
centos tomcat 安装
安装说明安装环境:CentOS-6.3 安装方式:源码安装软件:apache-tomcat-7.0.29.tar.gz 下载地址:http://tomcat.apache.org/downloa ...
[Q]打印机页边距设置
问题描述:当您在使用CAD批量打图精灵默认设置打印图纸(使用pdfFactory虚拟打印机),可能会发现打印出的图纸页边距比您手工打印(使用Adobe或系统打印机)的要偏大. Adobe虚拟打印机打印 ...
Webupload + MVC 之上传下载
最近工作中用到了 MVC 的上传及下载 , 写下感受本项目中用到的是百度的webuploader  <script src="~/Conte ...
ios下点击穿透focus获取问题
在ios下的浏览器中当点击当前页的一个按钮,用window.location.href进行跳转时,如果下一个页面里这点击按钮的位置是一个textarea或者text等那么他会触发focus事件,会出现 ...
svn自动备份并上传到ftp
.建立bat文件 simpleBackup.bat,文件内容如下 @echo 正在备份版本库%1......@%SVN_HOME%bin\svnadmin hotcopy %1 %BACKUP_DIR ...
ASP.NET中重复表格列合并的实现方法(转自脚本之家)
这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...
jquery点击目标DIV以外关闭效果
$(function(){ $(".cover").hide(); $("#call").click(function(){ console.log(" ...
学习smail注入遇到的坑
1.将需要被反编译的apk包解开之后,找到MainActivity,然后在OnCreate中添加需要加入注入的smail代码: Java代码: /** * 获取Android id * * @para ...

第八十五节，css布局补充一

第八十五节，css布局补充一的更多相关文章

随机推荐

热门专题