1、高度和宽度
默认情况下,高度和宽度无法应用在行内标签上。
默认情况下,块级标签虽然设置的宽度,右边空白区域也不许被占用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--块级标签-->
<div style="height:100px;width:200px;background-color:red">中国移动</div>
<div style="height:100px;width:200px;background-color:green">中国联通</div>
<!--行内标签-->
<span style="height:100px;width:200px;background-color:pink">中国联通</span>
<!--行内标签转换成块级标签-->
<span style="display:block;height:100px;width:200px;background-color:pink">中国联通</span>
</body>
</html>
2、行内和块级标签
1)块级标签:
2)行内标签:无法应用高度和宽度
转换前代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--块级标签-->
<div>块级标签</div>
<!--行内标签-->
<span>行内标签</span>
<div style="display:inline-block;height: 100px;">行内标签有块级标签的特点</div>
</body>
</html>
转换后代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--块级标签转换为行内标签-->
<div style="display:inline;">块级标签</div>
<!--行内标签转换为块级标签-->
<span style="display:block;">行内标签</span>
<div style="display:inline-block;height: 100px;background-color:red;">行内标签有块级标签的特点</div>
</body>
</html>
3、文本对齐方式
1)文本水平方向:style=text-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--text-align:水平方向对齐方式-->
<h1 style="text-align: left">左边</h1>
<h1 style="text-align: right">右边</h1>
<h1 style="text-align: center">中间</h1>
</body>
</html>
2)文本垂直方向:line-height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--垂直方向对齐-->
<h1 style="text-align: center;width:500px;height:200px;background-color:olive;line-height:200px">垂直对齐</h1>
</body>
</html>
案例:米商城如下图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.header{
height: 40px;
font-size: 12px;
color: #b0b0b0;
background: #333;
line-height:40px;
}
.header a{
display:inline-black;
text-align:center;
color: #b0b0b0;
text-decoration:none;
}
</style>
</head>
<body>
<div class="header">
<a href="https://www.mi.com/index.html">小米商城</a>
<a href="https://www.miui.com/" target="_blank">MUMI</a>
<a href="https://iot.mi.com/" target="_blank">IoT</a>
<a href="https://i.mi.com/" target="_blank">云服务</a>
</div>
</body>
</html>
对于颜色的处理:使用RGB颜色对照表:https://www.917118.com/tool/color_3.html
4、外边距(两人离远一点)margin
margin-top:10px; /* 距上边*/
margin-left:10px; /* 距左边*/
margin:10px; /* 距上下左右边*/
margin:10px 20px; /* 距上下边10px 左右边20px*/
margin:10px 20px 30px 40px; /* 距上边10px 右边20px 下边30px 左40px --> 顺时针方向*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
</style>
</head>
<body>
<div style="background-color: red;height: 100px"></div>
<div style="background-color: green;height: 100px;margin-top:10px;"></div>
</body>
</html>
特殊的margin,左右边距自动=>标签居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.login-box{
height: 300px;
width: 500px;
background: gray;
# 左右居中;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="login-box"></div>
</body>
</html>
常见布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.header{
height: 40px;
font-size: 12px;
color: #b0b0b0;
background: #333;
line-height:40px;
}
.header a{
display:inline-black;
text-align:center;
color: #b0b0b0;
text-decoration:none;
}
.container{
width: 1226px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<a href="https://www.mi.com/index.html">小米商城</a>
<a href="https://www.miui.com/" target="_blank">MUMI</a>
<a href="https://iot.mi.com/" target="_blank">IoT</a>
<a href="https://i.mi.com/" target="_blank">云服务</a>
<a href="https://i.mi.com/" target="_blank" style="float: right">商城</a>
</div>
</div>
</body>
</html>
5、内边距(一个人吃胖一点),自己会变大。
padding-left: 10px; //内边距距离左边10
padding:10px; //内边距距离上下左右10
padding:10px 20px; //内边距距离上下10 距离左右20
padding:10px 20px 30px 40px; //内边距距离上10 距离右20 距离下30 距离左40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.header{
height: 40px;
font-size: 12px;
color: #b0b0b0;
background: #333;
line-height:40px;
}
.header a{
display:inline-black;
text-align:center;
color: #b0b0b0;
text-decoration:none;
}
.container{
width: 1226px;
margin-right: auto;
margin-left: auto;
}
.header .menu{
padding: 0 20px; //设置内边距
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<a href="https://www.mi.com/index.html">小米商城</a>
<a class="menu" href="https://www.miui.com/" target="_blank">MUMI</a>
<a class="menu" href="https://iot.mi.com/" target="_blank">IoT</a>
<a class="menu" href="https://i.mi.com/" target="_blank">云服务</a>
<a class="menu" href="https://i.mi.com/" target="_blank" style="float: right">商城</a>
</div>
</div>
</body>
</html>
关于内外边距的提示:
行内标签设置外边距和内边距都是无效的注意使用 display:inline-black;
6、float,页面布局必不可少的一个样式,让标签左右飘。 float可以让标签浮动展示,脱离文档流。
1)标签向左瓢
如上的效果代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.item{
height: 270px;
width: 180px;
background-color: olive;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="course">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
2)标签左右瓢
如上的效果代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
</style>
</head>
<body>
<div style="width: 500px;">
<div style="float: left">瓢向左边</div>
<div style="float: right">瓢向右边</div>
</div>
</body>
</html>
没有瓢:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
</style>
</head>
<body>
<div style="background-color: green">
<div>瓢了么?</div>
</div>
</body>
</html>
如果瓢:使用笨方法处理(<div style="clear: both"></div>)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
</style>
</head>
<body>
<div style="background-color: green">
<div style="float: left">瓢了</div>
<div style="float: right">瓢了</div>
<!-- 飘了我再给拉回来-->
<div style="clear: both"></div>
</div>
</body>
</html>
如果瓢:使用聪明的方法处理(after伪类)
先了解after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li:before{
content: "他们和";
}
li:after{
content:"打篮球";
}
</style>
</head>
<body>
<ul>
<li>周杰伦</li>
<li>刘耕宏</li>
</ul>
</body>
</html>
使用after处理瓢的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.bg{
background-color: green;
}
.bg:after{
display: block;
content: '';
clear: both;
}
</style>
</head>
<body>
<div class="bg">
<div style="float: left">瓢了</div>
<div style="float: right">瓢了</div>
</div>
</body>
</html>
上面只是处理一个,要是很多该怎么处理?如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.bg,.xxx,.hhhh{
background-color: green;
}
.clearfix:after{
display: block;
content: '';
clear: both;
}
</style>
</head>
<body>
<div class="bg clearfix">
<div style="float: left">瓢了</div>
<div style="float: right">瓢了</div>
</div>
<div class="xxx clearfix">
<div style="float: left">瓢了</div>
<div style="float: right">瓢了</div>
</div>
<div class="hhhh clearfix">
<div style="float: left">瓢了</div>
<div style="float: right">瓢了</div>
</div>
</body>
</html>
7、hover 鼠标悬停
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
color: red;
}
.c1:hover{
color:green;
}
</style>
</head>
<body>
<div class="c1">中国移动</div>
</body>
</html>
鼠标悬停后效果
小米案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:0;
}
.top{
background: #333;
}
.container{
width: 1226px;
margin: 0 auto;
}
.clearfix:after{
display: block;
content: '';
clear: both;
}
.top a{
display: inline-block;
line-height: 40px;
color: #b0b0b0;
font-size: 12px;
text-decoration: none;
}
.top a:hover{
color:white;
}
</style>
</head>
<body>
<div class="top">
<div class="container clearfix">
<a href="https://www.mi.com/index.html">小米商城</a>
<a href="https://www.miui.com/">MUMI</a>
<a href="https://iot.mi.com/" >IoT</a>
<a href="https://i.mi.com/" >云服务</a>
<div style="float: right">
<a>登录</a>
<a>注册</a>
</div>
</div>
</div>
</body>
</html>
效果如下图:
8、小米logo菜单案例
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.top {
background: #333;
}
.container {
width: 1226px;
margin: 0 auto;
}
.clearfix:after {
display: block;
content: '';
clear: both;
}
.top a {
display: inline-block;
line-height: 40px;
color: #b0b0b0;
font-size: 12px;
text-decoration: none;
}
.top a:hover {
color: white;
}
.hd .logo {
float: left;
width: 234px;
}
.hd .main-menu{
float: left;
}
.hd .main-menu a{
display: inline-block;
padding: 40px 20px;
color: #333;
text-decoration: none;
}
.hd .main-menu a:hover{
color: #ff6700;
}
.hd .search{
float: right;
}
</style>
</head>
<body>
<div class="top">
<div class="container clearfix">
<a href="https://www.mi.com/index.html">小米商城</a>
<a href="https://www.miui.com/">MUMI</a>
<a href="https://iot.mi.com/">IoT</a>
<a href="https://i.mi.com/">云服务</a>
<div style="float: right">
<a>登录</a>
<a>注册</a>
</div>
</div>
</div>
<div class="hd">
<div class="container clearfix">
<div class="logo">
<a href="" style="height: 56px;width: 56px;display: inline-block;margin-top: 20px">
<img src="imgs/logo-mi2.png" alt="" style="width: 100%">
</a>
</div>
<div class="main-menu">
<a href="https://www.mi.com/index.html">Xiaomi手机</a>
<a href="https://www.mi.com/index.html">Redmi手机</a>
<a href="https://www.mi.com/index.html">电视</a>
<a href="https://www.mi.com/index.html">笔记本</a>
<a href="https://www.mi.com/index.html">平板</a>
</div>
<div class="search">
asdfghj
</div>
</div>
</div>
<div class="banner">
<div class="container">
<a href="" style="width: 1226px;">
<img src="imgs/b1.png" alt="" style="width: 100%">
</a>
</div>
</div>
</body>
</html>
9、边框border实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 100px;
width: 300px;
border: 1px solid #ff6700;
/*border-right: 1px solid #ff6700;
border-bottom: 1px solid #ff6700;*/
}
</style>
</head>
<body>
<div class="c1">边框</div>
</body>
</html>
9.1、场景:当鼠标移到到某一字体上出现下滑线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
height: 100px;
width: 300px;
border: 1px solid #ff6700;
/*border-right: 1px solid #ff6700;
border-bottom: 1px solid #ff6700;*/
}
.menu{
display: inline-block;
padding: 10px;
margin-right: 20px;
border-bottom: 2px solid transparent;
}
.menu:hover{
border-bottom: 1px solid #333;
}
</style>
</head>
<body>
<div>asdfghjk</div>
<div class="c1">边框</div>
<a class="menu">菜单1</a>
<a class="menu">菜单2</a>
<a class="menu">菜单3</a>
<div>123456789</div>
</body> </html>
9.2、场景:边框的圆角设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn{
display: inline-block;
padding: 10px 20px;
border: 1px solid #ff6700;
border-radius: 50px; /* 设计圆角半径*/
text-decoration: none;
background-color: #b0b0b0;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" class="btn">点击跳转百度</a>
</body>
</html>
10、position定位的使用
10.1、fiexed固定定位:永远固定在窗口的指定位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 5000px;background-color: #b0b0b0">返回顶部案例</div>
<div style="position: fixed;right: 10px;bottom: 10px;">返回顶部111</div>
</body>
</html>
案例:登录窗体所在页面的正中间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.login-box{
border: 1px solid red;
height: 300px;
width: 500px;
margin: 0 auto;
position: fixed;
left: 0;
right: 0;
top: 200px;
}
</style>
</head>
<body>
<!--登录窗体所在页面的正中间-->
<div class="login-box">
登录窗体
</div>
</body>
</html>
案例:登录窗体+遮罩层+内容层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.middle{
position: fixed;
background: #333333;
left: 0px;
right: 0;
top: 0px;
bottom: 0px;
opacity: 0.7;
z-index: 100;
}
.outer{
position: fixed;
background-color: white;
height: 100px;
width: 500px;
left: 0px;
right: 0px;
margin: 0 auto;
top: 200px;
z-index:101;
}
</style>
</head>
<body>
<!--内容层-->
<div style="height: 5000px;">
<div>a's'd'f'g'h'j'k</div>
<div>a's'd'f'g'h'j'k</div>
<div>a's'd'f'g'h'j'k</div>
<div>a's'd'f'g'h'j'k</div>
<div>a's'd'f'g'h'j'k</div>
<div>a's'd'f'g'h'j'k</div>
<div>a's'd'f'g'h'j'k</div>
<div>a's'd'f'g'h'j'k</div>
<div>a's'd'f'g'h'j'k</div>
<div>a's'd'f'g'h'j'k</div>
<div>a's'd'f'g'h'j'k</div>
<div>a's'd'f'g'h'j'k</div>
<div>a's'd'f'g'h'j'k</div>
</div>
<!--最外层z-index:101 值越小表示该部分在最底层-->
<div class="outer">登录窗体</div>
<!--中间层遮罩层-->
<div class="middle"></div>
</body>
</html>
10.2、absolute 绝对定位&relative相对定位
右边弹窗的出现随左边的按钮移动而变化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--relative相当于是父,absolute相当于子-->
<div style="height: 500px; width: 500px;border: 1px solid red;position: relative;">
<div style="position: absolute;right: 0;top: 0;">xxx</div>
</div>
</body>
</html>