盒模型给矩形设置边框线:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
.box{
width:300px;
height:150px;
background-color:white;
border-width:2px;
border-color:black;
border-style:dashed;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
盒模型给矩形分别设置边框线:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
.box{
width:300px;
height:300px;
background-color:white;
border-top:2px solid black;
border-right:5px solid orange;
border-bottom:10px dashed pink;
border-left:8px dashed red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
盒模型利用层叠性给矩形设置边框线:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
.box{
width:300px;
height:300px;
background-color:white;
border:2px solid black;
border-bottom:5px solid orange;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
盒模型给矩形设置圆角:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
div {
width: 200px;
height: 200px;
border-radius: 18px;
border: 8px black solid ;
background-color: violet;
}
.box{
width: 200px;
height: 200px;
background-color: violet;
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 15px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
盒模型给矩形设置阴影:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
.box{
width: 200px;
height: 200px;
border:1px solid #c4c4c4;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
border-radius: 15px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
盒模型无序列表行内块元素:
//html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<ul>
<li class="current">首页</li>
<li>优课达学院</li>
<li>App下载</li>
</ul>
</body>
</html>
//css部分:
ul {
list-style: none;
padding: 0px;
margin: 0px;
color: #333333;
font-size: 16px;
border: 1px solid #a4a4a4;
display: inline-block;
}
ul li {
display: inline-block;
padding-left: 15px;
padding-right: 15px;
line-height: 60px;
}
ul li.current {
color: #ffffff;
background-color: #0091ff;
}
盒模型阴影圆角元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<h3 class="title">教学目标</h3>
<p>统地学习数据体系:MySQL、Redis、Mongodb 并深入全栈能力包括 Vue 框架和 SSM
框架(Spring、SpringMVC、MyBatis),掌握处理大数据的能力,可以独立完成复杂而真实的项目,比如美团外卖。</p>
</div>
</body>
</html>
h3,
p {
margin: 0;
padding: 0;
}
.box {
box-sizing: border-box;
width: 280px;
box-shadow: 0 1px 17px 0 rgba(0, 0, 0, 0.1);
padding: 15px;
border-radius: 7px;
}
.box .title {
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
text-align: center;
}
.box p {
font-size: 12px;
color: #2c2c2c;
padding-top: 15px;
}
盒模型外边距:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
div {
width: 300px;
height: 100px;
background-color: #D5E8D4;
border: 1px solid #82B366;
}
.box{
background-color: #F5F5F5;
border: 1px solid #FF0818;
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div></div>
<div class="box"></div>
<div></div>
</body>
</html>
盒模型盒子左右居中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
.father{
width:400px;
height:200px;
border: 1px solid #ccc;
}
.son{
width:200px;
height:100px;
margin:0 auto;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
盒模型外边距实例:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="first">
<div class="second">
<img src="https://gw.alicdn.com/bao/uploaded/i1/749716436/O1CN01OSPWqa1xPjeErSSzf_!!749716436-0-pixelsss.jpg">
</div>
<div class="third">
人本春季红色帆布鞋男网红休闲布鞋潮鞋百搭运动小白鞋子男运动鞋
</div>
<div class="fourth">¥78.3</div>
</div>
</body>
</html>
.first{
width: 232px;
border: 1px solid #c4c4c4;
}
.second{
width:185px;
height:185px;
text-align: center;
margin:0 auto;
margin-top: 20px;
margin-bottom: 8px;
}
.third{
font-size: 14px;
color:#333333;
line-height: 20px;
text-align: center;
overflow: hidden;
height: 40px;
width:135px;
margin: 0 auto;
}
.fourth{
width: 100%;
font-size: 18px;
color: #ff0036;
line-height: 18px;
text-align: center;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 20px;
}
img{
width:185px;
height:185px;
}
盒模型外边距实例2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<img src="https://gw.alicdn.com/bao/uploaded/i1/749716436/O1CN01OSPWqa1xPjeErSSzf_!!749716436-0-pixelsss.jpg">
<div class="introduce">人本春季红色帆布鞋男网红休闲布鞋潮鞋百搭运动小白鞋子男运动鞋</div>
<div class="price">¥78.3</div>
</div>
</body>
</html>
.box {
width: 234px;
border: 1px solid #c4c4c4;
box-sizing: border-box;
text-align: center;
padding: 20px 0px;
}
img {
width: 185px;
height: 185px;
}
.introduce {
width: 135px;
height: 40px;
font-size: 14px;
color: #333;
line-height: 20px;
overflow: hidden;
margin: 8px auto;
}
.price {
font-size: 18px;
color: #FF0036;
line-height: 18px;
margin: 10px auto 0px;
}
盒模型行内元素块元素设置背景色:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
.demo{
width:300px;
height:100px;
background-color:#FFF2CC;
}
</style>
</head>
<body>
<span class="demo">
这是一个span标签
</span>
<br><br>
<div class="demo">
这是一个div标签
</div>
</body>
</html>
盒模型行内元素转块元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
.demo{
display: block;
width:300px;
height:100px;
background-color:#FFF2CC;
}
</style>
</head>
<body>
<span class="demo">
这是一个span标签
</span>
</body>
</html>
盒模型块元素转行内元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
.demo{
display: inline;
width:300px;
height:100px;
background-color:#FFF2CC;
}
</style>
</head>
<body>
<div class="demo">
这是一个div标签
</div>
</body>
</html>
盒模型控制元素显示和隐藏:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
div {
width: 300px;
height: 100px;
text-align: center;
margin-bottom: 10px;
background-color: #D5E8D4;
line-height: 100px;
}
.box2{
display: none;
}
</style>
</head>
<body>
<div>盒子1</div>
<div class="box2">盒子2</div>
<div>盒子3</div>
</body>
</html>
盒模型行内元素设置内边距:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
a{
background-color: #FFF2CC;
padding: 20px;
}
</style>
</head>
<body>
<a href="#">超链接</a>
</body>
</html>
盒模型行内元素设置内边距实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
a {
background-color: #FFF2CC;
padding: 20px;
}
div{
width: 300px;
height: 50px;
background-color: #B0E3E6;
}
</style>
</head>
<body>
<a href="#">超链接</a>
<div></div>
</body>
</html>
盒模型行内元素设置外边距:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
div {
width: 300px;
height: 50px;
background-color: #B0E3E6;
}
a{
margin-left: 40px;
margin-right: 30px;
margin-top: 400px;
margin-bottom: 400px;
}
span{
margin-left: 20px;
}
</style>
</head>
<body>
<a href="#">点击跳转到</a>
<span>优课达</span>
<div></div>
</body>
</html>
盒模型空白折叠:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<style>
.box1 {
width: 200px;
height: 50px;
display: inline-block;
background-color: #FFF2CC;
}
.box2 {
width: 200px;
height: 50px;
display: inline-block;
background-color: #B0E3E6;
}
.father{
word-spacing: -50px;
font-size: 0px;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
盒模型行内块元素:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<ul>
<li>手机</li>
<li>电视</li>
<li>电脑</li>
<li>路由器</li>
</ul>
</body>
</html>
li {
list-style: none;
width: 70px;
line-height: 30px;
color: #ffffff;
font-size: 12px;
display: inline-block;
background-color: #783a3e;
text-align: center;
}
ul {
font-size: 0px;
margin: 0px;
padding: 0px;
}
盒模型行内块元素实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<ul class="head">
<li class="head-first">商品分类</li>
<li class="head-second">天猫双十一</li>
</ul>
<ul class="list">
<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>
</body>
</html>
ul,
li {
list-style: none;
padding: 0px;
margin: 0px;
}
.head {
width: 200px;
color: #ffffff;
font-size: 0px;
}
.head li {
display: inline-block;
font-size: 12px;
line-height: 36px;
width: 100px;
text-align: center;
}
.head .head-first {
background-color: #C60A0A;
}
.head .head-second {
background-color: #464444;
}
.list {
width: 200px;
box-sizing: border-box;
padding-top: 29px;
padding-bottom: 14px;
background-color: #413F3F;
}
.list li {
margin-bottom: 14px;
padding-left: 24px;
padding-right: 24px;
}
.list li a {
display: block;
border: 1px solid #cb0c10;
border-radius: 10px;
text-align: center;
line-height: 29px;
color: #ffffff;
text-decoration: none;
}