前端开发 - 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 ...
随机推荐
- Linksys WRT54G2 V1刷ddwrt注意事项
关于DD-WRT和TOMATO下的应用就不多说了,反正其他能刷DD-WRT.TOMATO的路由器会有的功能,这台机器也都有,不过此机器刷TOMATO一定要刷ND版本的,因为5354的CPU是属于比较新 ...
- Linux SSH登录服务器报ECDSA host key "ip地址" for has changed and you have requested strict checking.错误
Linux SSH命令用了那么久,第一次遇到这样的错误:ECDSA host key "ip地址" for has changed and you have requested ...
- 利用Python操作Word文档【图片】
利用Python操作Word文档
- Unix系统编程（）进程内存布局
每个进程所分配的内存由很多部分组成,通常称之为"段(segment)". 文本段包含了进程运行的程序机器语言指令.文本段具有只读属性,以防止进程通过错误指针意外修改自身指令. 因为 ...
- Unity3D 5.0版本+注册工具分享
Unity3D引擎5.0正式版本发布也有一段时间了.笔者今天下载了新版本顺便分享一下资源. 主要有两个资源,一个是5.0f4的官方客户端,另外一个是vs的调试插件.有需要的盆友就拿去.都在下面的连接地 ...
- js 拼接字符串 穿参数 带有单引号
var html="<a href=\"#\" onclick=Unlock(\""+flid+"\",1)>弹出& ...
- 微信APP支付 - C#
最近挺忙的,没时间写东西.然后在弄微信APP支付,网上的搜索一趟,都比较凌乱,我也遇到一些坑,不过也算弄好了,记录分享一下. 1.准备各种调用接口需要的参数,配置app.config. <!-- ...
- thymeleaf教程
本教程涵盖了常见的前端操作,比如,判断,循环,引入模板,常用函数(日期格式化,字符串操作)下拉,js和css中使用,基本可以应对一般场景. 怎么使用? 前端html页面标签中引入如下: <htm ...
- MyBatis 本是apache的一个开源项目iBatis
MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .20 ...
- web 前端 转盘界面
http://www.cnblogs.com/arfeizhang/p/turntable.html "如果有个做转盘的需求,你准备怎么做?设计师只会提供一个转盘的图片,其余都需要你完成,不 ...