前端开发 - CSS - 下
CSS:
12.display
13.浮动效果
14.浮动特性
15.浮动产生的问题和解决方法
16.float京东导航栏
17.position
18.z-index
19.京东案例
12.display
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>display</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red; /* 控制元素隐藏 不占位置 */
/*display: none;*/ /*控制元素隐藏 占位置 影响后面盒子的布局*/
/*visibility: hidden;*/ /*转为 行内块元素*/
/*display: inline-block;*/ /*将 块级元素转换为 行内元素 不能设置宽高*/
display: inline;
}
a{
/*display: block;*/
/*display: inline-block;*/
width: 300px;
height: 300px;
background-color: yellow;
} img{
/* 行内块元素 一般转化块级元素 */
/*display: block;*/
display: inline; /*转为行内元素 依然可设置宽高 没必要转换 */
width: 100px;
height: 100px; }
</style>
</head>
<body>
<div>123</div>
<div>987</div>
<a href="#">百度一下</a>
<img src="./images/homesmall1.png" alt="python">
</body>
</html>
13.浮动效果
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
.wrap div{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black; /*
文档流：可见元素在文档中的显示位置；
浮动产生的效果：
浮动可以使元素按指定位置排列，直到遇到父元素的边界或者另一个元素的边界停止
*/ /* left 左浮动 左侧为起始，从左往右依次排列*/
float: left; /* right 右浮动 右侧为起始，从右往左依次排列 */
/*float: right;*/ /*float: none;*/ }
</style>
</head>
<body>
<div class="wrap">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
14.浮动特性
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>浮动特性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrap div{
width: 200px;
height: 200px;
border: 1px solid black;
}
.box1{
background-color: red;
float: left;
}
.box2{
background-color: yellow;
margin-left: 20px;
}
.box3{
background-color: green;
}
.container{
/*width: 300px;*/
/*height: 300px;*/
background-color: chartreuse;
float: left;
}
span{
float: left;
background-color: blue;
width: 100px;
height: 100px;
} /*
文档流：可见元素在文档中的排列位置
浮动效果：
1.浮动可以使元素脱离文档流，不占位置
2.浮动会使元素提升层级
3.浮动可以使块元素在一行内排列，不设置宽高时，可以使元素适应内容
4.浮动可以使行内元素支持宽高
*/ </style>
</head>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div> <div class="container">哈哈</div>
<div class="container">我们</div> <span>嘿嘿</span> </body>
</html>
15.浮动产生的问题和解决方法
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>浮动产生的问题和解决方法</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
} /* 通常页面布局时，父盒子的高度不需要设置，通过子盒子 自动填充父盒子；*/
.wrap{
width: 800px;
/*height: 500px;*/
background-color: red;
margin: 0 auto;
overflow: hidden;
}
.wrap div{
float: left;
}
.wrap1{
width:200px;
height: 400px;
background-color: yellow;
}
.wrap2{
width:350px;
height: 400px;
background-color: green;
margin-left: 25px;
}
.wrap3{
width:200px;
height: 400px;
background-color: blue;
margin-left: 25px;
}
#clearfix{
float: none;
clear: both;
} /* 官方推荐的解决办法 最长使用的解决办法*/
/*
.wrap:after{
visibility: hidden;
clear: both;
display: block;
content: '.';
height: 0;
}*/ /*
浮动产生的问题：
父元素不设置高度时，子元素设置了浮动，不会撑开父元素的高度，因为子元素不占位置了！
解决办法：
1.给父盒子设定固定高度；缺点：不灵活；
2.给浮动元素最后一个加一个空的块级元素，且该元素为不浮动float:none，设置clear:both,就会撑开盒子。
缺点：结构冗余
3.官方推荐：推荐使用：
.wrap:after{
visibility: hidden;
clear: both;
content: '.';
display: block;
height: 0;
}
4.推荐使用：给父元素添加overflow:hidden eg: .warp{overflow: hidden;}
*/ </style>
</head>
<body>
<div class="wrap">
<div class="wrap1"></div>
<div class="wrap2"></div>
<div class="wrap3"></div>
<!--<div id="clearfix"></div>-->
</div>
</body>
</html>
16.float京东导航栏
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>float京东导航栏</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrap{
width: 100%;
margin: 0 auto;
background-color: rgba(240,243,239,0.73)
}
.wrap .header{
width: 1245px;
height: 40px;
margin: 0 auto;
background-color: rgba(227,228,229,0.73)
}
.header_l,.header_r{
float: left;
}
.header_l img{
width: 20px;
height: 20px;
}
.header_l span{
color: rgba(126,126,126,0.98);
font-size: 12px;
height: 40px;
line-height: 40px;
text-align: center;
}
.header_l{
margin: 5px 0 0 30px;
}
.header_r{
margin-left: 250px;
width: 915px;
}
.header_r ul li{
list-style: none;
height: 40px;
line-height: 40px;
float: left;
padding: 0 10px; }
.header_r ul li a{
text-decoration: none;
color: rgba(126,126,126,0.98);
}
.header_r ul li a:hover{
color: red;
} </style>
</head>
<body>
<!--最外层的父盒子-->
<div class="wrap">
<!--导航-->
<div class="header">
<div class="header_l">
<img src="./images/fav.ico" alt="一个logo">
<span>北京</span>
</div> <div class="header_r">
<ul>
<li><a href="">你好，请登录 <span>免费注册</span></a></li>
<li class="spacer"></li>
<li><a href="#">我的订单</a></li>
<li class="spacer"></li>
<li><a href="#">我的京东</a></li>
<li class="spacer"></li>
<li><a href="#">京东会员</a></li>
<li class="spacer"></li>
<li><a href="#">企业采购</a></li>
<li class="spacer"></li>
<li><a href="#">客户服务</a></li>
<li class="spacer"></li>
<li><a href="#">网站导航</a></li>
<li class="spacer"></li>
<li><a href="#">手机京东</a></li>
</ul>
</div>
</div> <!--中心内容-->
<div class="content"></div> <!--底部-->
<div class="footer"></div>
</div> </body>
</html>
17.position
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>position</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
position:relative;
top: 50px;
left: 30px;
}
.box2{
background-color: yellow;
position:absolute;
top:150px;
}
.box3{
background-color: green;
position:absolute;
left: 100px;
top:10px;
} .father{
width: 300px;
height: 300px;
background-color: gray;
margin-top: 50px;
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:20px;
left: 20px;
}
.aside_logo{
width: 100px;
height: 100px;
background-color: yellow; /* 固定定位*/
position: fixed;
bottom: 20px;
right:20px;
;
} /*
static ： 默认值 relative : 相对定位
1. 不设置偏移量的时候，对元素没有任何影响
2. 相对定位可以提升层级关系。
3. 相对定位是相对于自身定位。 absolute : 绝对定位
1. 可以提升层级关系
2. 脱离文档流
3. 在没有父级元素定位时，以浏览器的左上角为基准定位的。
4. 有父级的情况下，父级设置相对定位（绝对位置），子集设置绝对定位，是以父盒子进行定位的。
（父相子绝） 来设置位置的调整 fixed : 固定定位
*/ </style>
</head>
<body>
<!--<div class="box1"></div>-->
<!--<div class="box2"></div>-->
<!--<div class="box3"></div>--> <div class="father">
<div class="child"> </div>
</div>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<div class="aside_logo"></div> </body>
</html>
18.z-index
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
position: absolute;
}
.box1{
background-color: red;
top: 50px;
z-index: 1;
}
.box2{
background-color: green;
/*border-radius: 5px 10px 15px 20px;*/
border-radius: 50%;
z-index: 20;
}
.box3{
background-color: yellow;
}
</style> </head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
19.京东案例
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>京东案例</title>
<!--
网页布局：
上下 结构
上中下 结构
上左右下 结构： 1-2-1 结构
上左中右下 结构： 1-3-1 结构
-->
<style type="text/css">
*{padding: 0;margin: 0}
ul>li {list-style: none;}
a{text-decoration: none;}
.wrap{width: 100%;background-color: rgba(240,243,239,0.98)}
.container{width: 1300px;overflow: hidden;margin: 0 auto} /*overflow:hidden 用在float:left 可以撑开背景*/
.container div{float: left}
.c_l{width: 200px;height: 500px;background-color: green;}
.c_c{width: 800px;height: 500px;background-color: red;
margin-left: 5px}
.c_r{width: 200px;height: 500px;background-color: yellow;
margin-left: 5px;}
.c_l ul li{
padding: 5px 0 5px 10px;
}
.c_l ul li a{
color: #868686;
}
.c_l ul li a:hover{
color: red;
}
.c_l ul li:hover {
background-color: gray;
}
.center_image{
width: 600px;
height: 500px;
float: left;
}
.c_c ul li{
float: right;
position: relative;
right: 2px;
top: 5px;
}
.c_c ul li img{
width: 200px;
height: 165px;
}
.c_r{
position: relative;
}
.c_r p{
color: green;
background-color: gray;
width: 90px;
height: 70px;
line-height: 70px;
text-align: center;
position: absolute;
}
.c_r .p1{
left: 95px;
top: 30px;
}
.c_r .p2{ } </style> </head>
<body> <div class="wrap">
<div class="container">
<div class="c_l">
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">家用电器</a></li>
<li><a href="#">家用电器</a></li>
</ul>
</div>
<div class="c_c">
<img src="./images/homesmall1.png" alt="" class="center_image">
<ul>
<li><a href=""><img src="./images/homesmall2.png" alt=""></a></li>
<li><a href=""><img src="./images/homesmall1.png" alt=""></a></li>
<li><a href=""><img src="./images/homesmall2.png" alt=""></a></li>
</ul>
</div>
<div class="c_r">
<div>
<p class="p1">哈哈哈</p>
<p class="p2">嘿嘿嘿</p>
</div>
</div>
</div>
</div> </body>
</html>
前端开发 - CSS - 下的更多相关文章
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 第十一章 前端开发-css
第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
- 1+x 证书 Web 前端开发 css 专项练习
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/
- web前端开发CSS命名规范参考
做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...
- 前端开发CSS清除浮动的方法有哪些？
在前端开发过程中,非IE浏览器下,当容器的高度自动,并且容器内容中有浮动元素(float为left或right),此时如果容器的高度不能自适应内容的高度,从而使得内容溢出破坏整体布局,这种现象叫做浮动 ...
- Web前端开发CSS规范总结
作为Web前端开发必备语言,CSS为大家广为熟知,今天就跟大家分享下CSS规范总结,Web前端的小伙伴们看过来吧! CSS样式的权值(权重) 权值等级的定义 第一等:代表内联样式,如: style=” ...
- 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄
做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...
随机推荐
- linux之backtrace
backtrace用于打印函数调用堆栈 /******************************************************************************* ...
- sql语句判断是否为数字、字母、中文
1. sql语句判断是否为数字.字母.中文 select ascii(字段) 数字:48-57字母:65-123汉字:123+ 如,要删除某个全为数字的字段 DELETE FROM table WH ...
- ResourceBundle读取utf-8格式properties 中文乱码
解决方法: ResourceBundle prop = ResourceBundle.getBundle("app");String defaultTunnelName = new ...
- am335x usb host patch设计
USB直接作为host时省掉一个5V的DCDC,直接连接到5V的输入上面.对于Linux SDK,需要一个patch去确保这个设计能够正常工作,patch内容请参考: static struct om ...
- java程序中输出console的日志到文本
http://blog.sina.com.cn/s/blog_76a8411a01010u2h.html 首先:当我们引入data-integration\lib文件夹下的所有jar包后 运行java ...
- 【转】伪O2O已死？2016年实体零售将迎来真正的O2O
O2O果真如所谓的经济学家许小年所说“是两边都是零,中间一个2货”吗?我觉得,经济学家不是说相声的,这种哗众取宠的观点不应该出自一个严谨的经济学家之口.而且,我也不认为许小年真正懂什么叫O2O. 但O ...
- tp 批量转码
读取王正东成功,然后把乱码一条一条的改回来... 专门针对mssql数据库的!!!
- 28Mybatis_查询缓存-二级缓存-二级缓存测试-
二级缓存原理:
- 22SpringMvc_jsp页面上的数据传递到控制器的说明
假设有这个一个业务:在jsp页面上写入数据,然后把这个数据传递到后台. 效果如下:
- 应用于Java中的一个开源的表达式语言（Expression Language）
OGNL(英文全称:Object Graph Navigation Language,中文名:对象导航图语言)是应用于Java中的一个开源的表达式语言(Expression Language),它被集 ...