div和span
- Div 它是一个html标签，一个块级元素（单独显示一行）。它单独使用没有任何意义，必须结合CSS来使用。主要用于页面布局
- Span它是一个html标签，一个内联元素（显示一行）。它单独使用没有任何意义，必须结合CSS来使用。主要用于对包裹起来的内容进行样式的修饰
css引入用法
行内样式
通过标签的style属性来设置
style=”color: #0f0; font-size: 20px”2.内部样式
在html的head标签中使用style
style type=”text/css”
3.外部样式
link rel=”stylesheet” type=”text/css” href=”../01.css”
rel是固定值，表示样式表
选择器
- 元素选择器
- ID选择器
- 类选择器
- 属性选择器
input[type="password"]{
background-color:red;
}- 包含选择器
#top div{
background-color:red;
}CSS样式-边框和尺寸：border、width、height
- border：设置边框的样式
格式：宽度，样式，颜色
例如：style=”border:1px solid #0f0” ，1像素 实边 绿色
display
inline：此元素将显示为行内元素（行内元素默认display属性值）
block：此元素显示为块元素（块元素默认display属性值）
inline-block：将对象呈递为内联对象，但是对象的内容作为块对象呈递
none：此元素将被隐藏，不显示，也不占页面空间
布局
通常默认的排版方式，将页面中的元素从上到下一一罗列，而在实际开发中，需要左右方式进行排版，就需要使用浮动
选择器 { float:属性值 }
常用属性 left：元素向左浮动
right：元素向右浮动
none：元素不浮动（默认值）
由于浮动元素不再占用原文档流的位置，所以它会对页面中其他元素的排版产生影响。如果要避免影响，就需要clear属性进行清除浮动
选择器 { clear:性值 }
常用属性 left：不允许左侧有浮动元素（清楚左侧浮动影响）
right：不允许右侧有浮动元素（清楚右侧浮动影响）
both：同时清除清除左右两侧浮动的影响
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为
止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样就像下面，本来是三个依次排列，a浮动后，脱离了文档流
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
</head>
<style>
#a{
border: 1px solid #f00;
width: 200px;
height: 150px;
float:right;
}
#b{
border: 1px solid #0f0;
width: 200px;
height: 150px;
}
#c{
border: 1px solid #0000FF;
width: 200px;
height: 150px;
}
</style>
<body>
<div id="a">
a
</div>
<div id="b">
b
</div>
<div id="c">
c
</div>
</body>
a浮动改为left
float:left;b被挤到下面，但是c却没有向下移动，效果跟文档上看的不一样，
原来是div里面的字被挤下去了。
浮动会让元素脱离文档流，不再影响不浮动的元素。实际上，并不完全如此。如果浮动的元素后边得有一个文档流中的元素，那么这个元素的框就会表现得像浮动根本不存在一样。但是，框的文本内容会收到浮动元素的影响，会移动以留出空间。用技术术语来说，浮动元素旁边的边框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框。
摘自——《精通CSS:高级Web标准解决方案》
简单讲就是行内元素会环绕浮动框
https://www.zhihu.com/question/45507310?sort=created
浮动要么碰到边缘，要么碰到另外一个浮动框
宽度不够用，自动挤到下一行
让a的浮动对普通流的b和c没影响
clear清除浮动
a和b都使用了浮动，就在一行上显示，如果想让b显示在a下面就要用到clear
clear这个属性是用在使用的元素本身上的，所以应该在b身上用
padding内边距
h1元素各边都有10px像素
h1 {padding:10px;}h1按照上、右、下、左分别设置内边距
h1{padding:10px 0.1em 3ex 20%}
margin外边距
- margin-top
- margin-right
- margin-bottom
- margin-left
盒子模型
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。简而言之，就是加上padding或者margin属性后，不影响内容，但是会变大。
重构首页
这里单独设置#top的高度会覆盖掉.top设置的高度，
因为li是块级元素，排列的时候是从上往下
修改display为inline
这里进行一个小插曲，去掉logo父元素后 .top元素和下面的menu元素属于同一级，浮动布局就会对下面非浮动布局产生影响
解决方式，在浮动布局和非浮动布局之间加一个clear块
text-align:center;让元素中文本对其
电炖锅都是class=”small”的，用float:left让它们浮动起来，从左到右排满一行，然后再从第二行开始排列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城首页</title>
<style>
#father{
border:1px solid red;
width: 1300px;
height: 2170px;
/*让父盒子居中*/
margin: auto;
}
/*#logo{
border: 1px solid black;
width: 1300px;
height: 50px;
}*/
.top{
border: 1px solid blue;
width: 431px;
height: 50px;
float:left;
}
#top{
padding-top: 12px;
height: 38px;
}
#menu{
border: 1px solid green;
width: 1300px;
height: 50px;
background-color: black;
}
#menu ul li{
display: inline;
color: white;
}
#clear{ clear: both;}
#product{
border: 1px solid red;
width: 1300px;
height: 558px;
}
#product_top{
border: 1px solid blue;
width: 100%;
height: 45px;
}
#product_bottom{
border: 1px solid green;
width: 100%;
height: 500px;
}
#product_bottom_left{
border: 1px solid red;
width: 200px;
height: 500px;
float:left;
}
#product_bottom_right{
border: 1px solid blue;
width: 1094px;
height: 500px;
float:left;
}
#big{
border: 1px solid red;
width: 544px;
height:248px;
float:left;
}
.small{
border: 1px solid blue;
width: 180px;
height: 248px;
float:left;
/*让里面内容居中*/
text-align: center;
}
#botoom{
text-align: center;
}
</style>
</head>
<body>
<div id="father">
<!--1.logo部分-->
<div id="logo">
<div class="top">
<img src="../img/logo2.png" style="height: 46px;" />
</div>
<div class="top">
<img src="../img/header.png" style="height: 46px;" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div id="clear"></div>
<!--2.导航栏部分-->
<div id="menu">
<ul>
<a href="#"><li style="font-size: 20px;">首页</li></a>
<a href="#"><li>手机数码</li></a>
<a href="#"><li>家用电器</li></a>
<a href="#"><li>鞋靴箱包</li></a>
<a href="#"><li>育婴保健</li></a>
<a href="#"><li>日用百货</li></a>
</ul>
</div>
<!--3.轮播图部分-->
<div id="">
<img src="../img/1.jpg" width="100%"/>
</div>
<!--4.最新商品-->
<div id="product">
<div id="product_top" style="padding-top: 8px;">
<span style="font-size: 25px;">最新商品</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%"/>
</div>
<div id="product_bottom_right">
<div id="big">
<img src="../img/middle01.jpg" width="100%" height="100%" />
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
</div>
</div>
</div>
<!--5.广告图片-->
<div id="">
<img src="../img/ad.jpg" width="100%" height="100%"/>
</div>
<!--6.热门商品-->
<div id="product">
<div id="product_top" style="padding-top: 8px;">
<span style="font-size: 25px;">热门商品</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%"/>
</div>
<div id="product_bottom_right">
<div id="big">
<img src="../img/middle01.jpg" width="100%" height="100%" />
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
<div class="small">
<img src="../img/small03.jpg" />
<a href="#"><p style="color:gray;">电炖锅</p></a>
<p style="color:red;">￥250</p>
</div>
</div>
</div>
</div>
<!--7.广告图片-->
<div id="">
<img src="../img/footer.jpg" width="100%" height="100%"/>
</div>
<!--8.友情链接和版权信息-->
<div id="botoom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<!--用p标签就不用br了-->
<p>
Copyright © 2005-2018 商城页面 版权所有
</p>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
