04-浮动+一级后代选择器
1.浮动
<html lang="en">
<head>
<style type="text/css">
/*
1 行内显示模式、行内块显示模式、块级显示模式称为标准流。
2 浮动通过float属性实现，浮动是一个脱离标准流的状态，也叫浮动流。
3 当元素设置浮动之后，元素会脱离标准流，然后按照标签的书写顺序，依次排列在包含块（父元素）的左上。
4 浮动的横向布局。代码换行不会使浮动元素之间产生间距；给浮动元素设置自身内边距或者外边距不会影响附近的元素。
*/
* {
padding: 0;
margin: 0;
}
.one {
width: 100px;
height: 100px;
background: red;
float: left;
}
.two {
width: 200px;
height: 200px;
background: green;
float: left;
}
.three {
width: 300px;
height: 300px;
background: blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
2.行内块元素横向布局问题
<html lang="en">
<head>
<style type="text/css">
/*
1 代码换行会使得行内块元素之间有间隔。
2 行内块元素沿基线对齐。
3 当给行内块元素设置垂直方向的内边距或者外边距时会影响附近的元素，因为行内块元素沿基线对齐。
*/
* {
padding: 0;
margin: 0;
}
.one {
width: 100px;
height: 100px;
background: red;
display: inline-block;
}
.two {
width: 200px;
height: 200px;
background: green;
display: inline-block;
}
.three {
width: 300px;
height: 300px;
background: blue;
display: inline-block;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
3.行内元素横向布局问题
<html lang="en">
<head>
<style type="text/css">
/*
1 行内元素主要用来修改文本。
2 代码换行会使得行内元素之间有间隔。
3 行内元素沿基线对齐。
4 给行内元素设置内边距不会影响附近的元素，因为行内元素沿基线对齐。
5 给行内元素设置外边距，上下外边距是不起作用的，左右外边距有用。
6 当给行内元素设置了行高line-height，则会影响附近的元素，因为行内元素沿基线对齐。
*/
.one {
width: 200px;
height: 200px;
background: red;
}
span {
background: blue;
line-height: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
</body>
</html>
4.子元素浮动造成父元素高度塌陷的解决方法
<html lang="en">
<head>
<style type="text/css">
/*
1 当子元素是浮动时，父元素没有设置固定高度，由于子元素是浮动起来的，父元素会认为没有内容
撑开自身的高度，此时会造成父元素高度塌陷，父元素的高度为0。
2 浮动造成父元素高度塌陷的解决方法。
1 给父元素设置overflow: hidden;。不经常使用，如果子元素有超过父元素的内容，则会被隐藏。
overflow: hidden，主要是通过告诉父元素浮动的子元素需要占用空间，来解决塌陷问题。
2 在父元素的最后额外增加标签，<div style="clear: both"></div>。这样方式也不经常使用，因为会
增加标签，从而影响性能。
3 给父元素设置clearFix(.clearFix{content: ""; display: block;clear: both;})属性。
推荐在项目中使用这种方式清除浮动，这种方式的本质也是在父元素后加标签。
4 给父元素设置浮动。这种方式只能在父元素需要浮动的时候才能使用。
*/
.box {
width: 1000px;
border: 5px solid orange;
margin: 0 auto;
/* 子元素浮动造成父元素高度塌陷的解决方法一。 */
/*overflow: hidden;*/
/* 子元素浮动造成父元素高度塌陷的解决方法三。 */
/*float: left;*/
}
.one {
width: 100px;
height: 100px;
background: red;
float: left;
}
.two {
width: 200px;
height: 200px;
background: gray;
float: left;
}
.three {
width: 300px;
height: 300px;
background: blue;
float: left;
}
.four {
/* clear会清除浮动，即让当前元素不受浮动的影响。
clear的值，left，清除左浮动；right，清除右浮动；both，全都清除。
*/
clear: both;
}
/* 子元素浮动造成父元素高度塌陷的解决方法三。 */
.clearFix:after {
content: "";
display: block;
clear: both;
}
.main {
height: 200px;
background: green;
}
</style>
</head>
<body>
<div class="box clearFix">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<!-- 子元素浮动造成父元素高度塌陷的解决方法二。 -->
<!--<div style="clear: both"></div>-->
</div>
<div class="main"></div>
</body>
</html>
5.左浮动和右浮动
- 左浮动，浮动元素按照标签书写顺序在父元素的左上方从左到右依次排开。
- 右浮动，浮动元素按照标签书写顺序在父元素的右上方从右到左依次排开。
6.行内元素的浮动
<html lang="en">
<head>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
border: 1px solid red;
overflow: hidden;
width: 1000px;
margin: 0 auto;
}
/* 给行内元素设置浮动之后设置宽和高也会起作用。 */
.one {
width: 100px;
height: 100px;
background: red;
float: left;
}
</style>
</head>
<body>
<div class="box">
<span class="one"></span>
</div>
</body>
</html>
7.浮动实现文字环绕效果
<html lang="en">
<head>
<style type="text/css">
/*
当给元素设置浮动后，后面的文本不会被浮动元素盖住，而是对浮动元素进行文本环绕。
*/
.box {
width: 300px;
border: 1px solid red;
overflow: hidden;
}
.box img {
width: 200px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/timg.jpg">
<p>
姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名
</p>
</div>
</body>
</html>
8.一级后代选择器
<html lang="en">
<head>
<style>
.box {
width: 500px;
height: 200px;
background: green;
}
/* >表示，.box的一级后代选择器。 */
.box > span {
color: red;
}
</style>
</head>
<body>
<div class="box">
<span>一级</span>
<div class="phone">
<span>二级</span>
</div>
</div>
</body>
</html>
9.练习-尚品汇
- reset.css。
/* 清除外边框和内边框的样式。 */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, li, dt, dd {
margin: 0;
padding: 0;
}
input {
/* 去掉轮郭线。输入框在鼠标选中之后会出现加粗的黑色轮郭线。 */
outline: none;
/* 输入框默认会有1px的内边距。 */
padding: 0;
}
button {
border: none;
}
ul, ol {
/* 去掉列表的原点。 */
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
/* h1-h6取父元素的字体大小。 */
font-size: 100%;
}
b, strong {
font-weight: 400;
}
i, em {
/* 不倾斜。 */
font-style: normal;
}
u, ins, s, del {
/* 去掉下划线。 */
text-decoration: none;
}
table {
/* 去掉表格边框和边框之间的间距。 */
border-spacing: 0;
/* 两个相邻的单元格边框拼接起来，即边框会变为两倍。
border-collapse: collapse，将边框变为一倍。 */
border-collapse: collapse;
}
th, td {
/* 设置表格的边框为1px，并且表格中的文字居中。 */
border: 1px solid #000;
text-align: center;
}
/* 解决子元素浮动之后父元素塌陷问题。 */
.clearFix:after {
content: "";
display: block;
clear: both;
}
img {
/* 解决img底部留白问题。 */
display: block;
}
/* 设置网站的整体风格。 */
body {
/* font: x/1.3，相当与line-height: 1.3;，行高可以设置为倍数，即是当前字体的1.3倍。 */
font: 12px/1.3 "Microsoft YaHei", Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
color: #333;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: yellowgreen;
}
- index.css。
.header-wrap {
height: 30px;
background: #eaeaea;
}
.header {
width: 1200px;
height: 30px;
margin: 0 auto;
line-height: 30px;
}
.header .list-left {
float: left;
}
.header .list-left li {
float: left;
}
.header .list-left .line {
width: 1px;
height: 16px;
background: #b3aeae;
margin-top: 7px;
margin-right: 5px;
}
.header .list-right {
float: right;
}
.logoAndSearch {
width: 1200px;
height: 106px;
margin: 0 auto;
overflow: hidden;
}
.logoAndSearch .logo {
height: 56px;
margin: 25px 0 0 45px;
overflow: hidden;
float: left;
}
.logoAndSearch .search {
float: left;
margin: 10px 0 0 35px;
}
.logoAndSearch .search li {
float: left;
}
.logoAndSearch .search li a {
display: block;
width: 36px;
height: 22px;
line-height: 22px;
text-align: center;
cursor: pointer;
color: #ea4a36;
}
.logoAndSearch .search .current {
font-weight: 700;
color: #fff;
background: #ea4a36;
}
.logoAndSearch .keyword input {
width: 477px;
height: 28px;
float: left;
border: 2px solid #ea4a36;
background: url("../img/fang.png") no-repeat 15px center;
padding-left: 10px;
/* 边框的圆角。左上 右上 右下 左下 */
border-radius: 20px 0 0 20px;
}
.logoAndSearch .keyword button {
float: left;
width: 70px;
height: 32px;
background: #ea4a36;
border-radius: 0 20px 20px 0;
}
.logoAndSearch .hot {
float: left;
margin-top: 5px;
}
.logoAndSearch .hot li {
float: left;
margin-right: 8px;
color: #000;
}
.all-wrap {
border-bottom: 2px solid #ea4a36;
}
.all {
width: 1200px;
height: 45px;
margin: 0 auto;
}
.all div {
float: left;
width: 210px;
height: 45px;
line-height: 45px;
background: #ea4a36;
font-size: 14px;
text-align: center;
color: #fff;
}
.all h2 {
font-weight: 700;
}
.all ul {
float: left;
}
.all li {
float: left;
margin: 0 23px;
font-size: 16px;
line-height: 45px;
}
.main {
width: 1200px;
height: 461px;
background: yellowgreen;
margin: 0 auto;
}
.main .detail {
width: 210px;
height: 461px;
float: left;
background: #fafafa;
}
.main .detail li {
font-size: 14px;
height: 30px;
line-height: 30px;
padding-left: 20px;
/* 隐藏超过li的字体。 */
overflow: hidden;
}
.main .detail li:hover {
background: #7c7c7c;
}
.main .detail li a:hover {
text-decoration: underline;
}
.phone {
width: 1200px;
height: 330px;
background: pink;
margin: 0 auto;
}
.phone .box {
width: 269px;
height: 328px;
float: left;
border: 1px solid blue;
margin: 0 14px 0;
}
- index.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-尚品汇练习</title>
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<!-- 头部 -->
<div class="header-wrap">
<div class="header">
<ul class="list-left">
<li>
<a href="#">尚品汇欢迎您!</a>
</li>
<li style="margin: 0 8px 0 17px">
<a href="#">请登录</a>
</li>
<li class="line"></li>
<li>
<a href="#">免费注册</a>
</li>
</ul>
<ul class="list-right">
<li>
<a href="#">22222222</a>
</li>
</ul>
</div>
</div>
<!-- logo和搜索框 -->
<div class="logoAndSearch">
<!-- logo是网页中最重要的，h1也是最重要的标签，所以使用h1包裹logo图，h1只能给logo使用一次。 -->
<h1 class="logo">
<a href="#">
<img src="./img/Logo.png">
尚品汇
</a>
</h1>
<div class="search">
<ul class="clearFix">
<li>
<a href="#">宝贝</a>
</li>
<li>
<a class="current" href="#">天猫</a>
</li>
<li>
<a href="#">店铺</a>
</li>
</ul>
<div class="keyword">
<form action="#">
<input type="text" placeholder="请输入....">
<button type="submit">搜索</button>
</form>
</div>
<ul class="hot">
<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>
<!-- 全部商品分类 -->
<div class="all-wrap">
<div class="all">
<div>
<h2>全部商品分类</h2>
</div>
<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>
</ul>
</div>
</div>
<!-- 商品主题 -->
<div class="main">
<div class="detail">
<ul>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居家居家居家居家居家居家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
<li>
<a href="#">女装</a>
<span>/</span>
<a href="#">内衣</a>
<span>/</span>
<a href="#">家居</a>
</li>
</ul>
</div>
</div>
<!-- 商品-手机 -->
<div class="phone">
<div class="box">手机</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
浙公网安备 33010602011771号