前端开发 - 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 ...
随机推荐
- 0077 web.xml中配置Spring MVC时，Servlet-name上报Servlet should have a mapping的错误
这次是手工建立的web工程目录,在配置webapp/WEB-INF/web.xml的Spring MVC的DispatcherServlet时,在servlet-name上报错:Servlet sho ...
- error: no matching function for call to 'Ui::GoToCellDialog::setupUi(QDialog*&)' ui.setupUi(dialog); ^
环境:Qt5.3 参考书是:C++ GUI Qt4编程 问题描述: 按照书中的例子2-2做,编译时遇到的问题,从字面意思看是没有匹配的函数可用,UI::GotoCellDialog类是自动生成的,所以 ...
- django admin 或xadmin 错误 总结
django管理界面admin搜索报错:TypeError: Related Field got invalid lookup: icontains 报错 TypeError: Related Fie ...
- Bootstrap学习笔记（4）--导航栏
相关类: nav, nav-pills, nav-tags, nav-stacked ul里使用,导航格胶囊,方片外观,堆叠外观 navbar, navbar-header, navbar-brand ...
- iOS开发 支持https请求以及ssl证书配置(转)
原文地址:http://blog.5ibc.net/p/100221.html 众所周知,苹果有言,从2017年开始,将屏蔽http的资源,强推https 楼主正好近日将http转为https,给还没 ...
- div上下滚动
<div class="table-scrollable" style='height:601px'></div> <style> .table ...
- php -- 魔术方法 之 序列化和反序列化的触发函数：__sleep(),__wakeup()
__sleep():当对象被当做文件保存时会自动触发的方法. 该方法要做的事情,就是返回一个要保存的对象数据的数组 DB.class.php中修改 再次保存效果 读取db对象 因为没有连接数据,不能操 ...
- 【BZOJ】1604: [Usaco2008 Open]Cow Neighborhoods 奶牛的邻居（set+并查集+特殊的技巧）
http://www.lydsy.com/JudgeOnline/problem.php?id=1604 这题太神了... 简直就是 神思想+神做法+神stl.. 被stl整的我想cry...首先,, ...
- 【BZOJ】1633: [Usaco2007 Feb]The Cow Lexicon 牛的词典（dp）
http://www.lydsy.com/JudgeOnline/problem.php?id=1633 一开始也想到了状态f[i]表示i以后的字符串最少删的数 然后想到的转移是 f[i]=min{f ...
- 【BZOJ】1619: [Usaco2008 Nov]Guarding the Farm 保卫牧场（dfs）
http://www.lydsy.com/JudgeOnline/problem.php?id=1619 首先不得不说,,题目没看懂.... 原来就是找一个下降的联通块.... 排序后dfs标记即可. ...