第八十五节，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两种方法 第二十五节 ...
随机推荐
- web页面在微信里打开，字体颜色不正常显示
问题:写的web项目在微信里的webview里打开(iphone手机),会出现颜色的不识别.写的是白色,数字的部分会过了3-5秒后,变成黑色! 原因:在iphone手机里,数字的部分(具体的长度没有测 ...
- [HMLY]7.iOS MVVM+RAC 从框架到实战
1.MVVM浅析 MVC是构建iOS App的标准模式,是苹果推荐的一个用来组织代码的权威范式,市面上大部分App都是这样构建的,具体组织模式不细说,iOS入门者都比较了解(虽然不一定能完全去遵守), ...
- 第六届全球游戏大会（ GMGC 北京 2017 ）有哪些看点？
全球游戏大会作为亚太地区极具影响力的全球性游戏行业盛会,本次第六届全球游戏大会( GMGC 北京 2017 )将力邀全球50个国家.500多位业界领袖.5000多家企业.50000多位业界精英参展参会 ...
- jmeter压力测试的简单实例+badboy脚本录制（一个简单的网页用户登录测试的结果）
JMeter的安装:在网上下载,在下载后的zip解压后,在bin目录下找到JMeter.bat文件,双击就可以运行JMeter. http://jmeter.apache.org/ 在使用jmeter ...
- Linux 分区挂载方案
/boot 1G swap 2G(看内存决定) / 10-15G /home 5G
- Scala Singleton对象
Scala Object: scala没有静态的修饰符,例如Java中的static.但是Scala提供了Object类型,object下的成员都是静态的,比较像Java的静态类.不同在于Scala的 ...
- python中的二维数组90度旋转
data=[[col for col in range(4)] for raw in range(4)] #创建一个二维数组 for n in data: print (n) print('\n') ...
- 人工手动冷备不完全恢复介绍（purge表不完全恢复）
不完全恢复不完全恢复的基本类型:1)基于时间点 (until time): 使整个数据库恢复到过去的一个时间点前2)基于scn (until change): 使整个数据库恢复到过去的某个SCN前3) ...
- Jersey+Spring+Maven环境搭建
第一步:创建一个Maven工程.加入Jersey.Spring.Jersey+Spring的依赖包,以及内嵌的Tomcat7插件: pom.xml文件如图所示: <project xmlns=& ...
- 2017中国数据库技术大会（DTCC）又要来啦！期待~~
2017第八届中国数据库技术大会(DTCC2017)将于2017年5月11-13日如约而至.2017中国数据库技术大会(DTCC)以"数据驱动•价值发现"为主题,汇集来自互联网.电 ...