下拉选<select name><option value selected>
<textarea name rows表示行 cols表示列 placeholder占位文本>
按钮: <input type="submit/reset/button" value="显示文本">
<button>按钮</button>
赋值方式:两种
1.外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;/*去掉body自带的8个像素外边距*/
}
h1{
margin-bottom: 0;
background-color: #008000;
}
p{
margin-top: 0;
background-color: #0000FF;
}
#big{
width:200px;
height:200px;
background-color: red;
overflow: hidden;/* 解决粘连显示异常*/
}
#small{
width:50px;
height:50px;
background-color: green;
margin-left: 50px;
/*粘连问题:当元素的上边缘和上级元素的上边缘重叠时
给元素添加.上外边距会出现粘连显示异常,通过给上级元素
添加overflow:hidden解决*/
margin-top: 50px;
}
#d1{
width:100px;
height:100px;
background-color: red;
/* 四个方向各50 */
/* margin:50px; */
/* 上下50px 左右100px */
/* margin: 50px 100px; */
/* 设置元素上下外边距0 水平居中 */
/* margin: 100px auto; */
/* 上右下左 顺时针赋值 */
/* margin: 20px 40px 60px 80px; */
}
#d2{
width:100px;
height:100px;
background-color: blue;
margin-left: 100px;
margin-top: 50px;
}
#s1{
margin-left: 50px;
margin-right: 50px;
/* 行内元素上下外边距无效 */
margin-top: 50px;
}
#s2{
/* 左右相邻外边距是求和
上下相邻外边距是取最大*/
margin-left: 30px;
}
</style>
</head>
<body>
<div id="big">
<div id="small">
</div>
</div>
<h1>这是h1</h1>
<span id="s1">
这是span1
</span>
<span id="s2">
这是span2
</span>
<p>这是p标签</p>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
显示效果:
2.外边距练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1{
width:120px;
height:80px;
background-color: red;
margin-left: 100px;
overflow: hidden;
margin-top: 80px;
}
#d2{
width:120px;
height:80px;
background-color: blue;
margin-left: 220px;
}
#small{
width:50px;
height:40px;
background-color: yellow;
margin-left: 70px;
margin-top: 20px;
</style>
</head>
<body>
<div id="d1">
<div id="small">
</div>
</div>
<div id="d2"></div>
</body>
</html>
显示效果:
3.边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h3{
/* 单独给某一个方向添加边框 */
border-bottom: 1px solid red;
text-align: center;
}
div{
width: 200px;
height: 200px;
border: 1px solid red;
/* 圆角 值越大越圆 */
border-radius: 200px;
}
a{
/*宽高132*40 颜色#Oaaled */
width: 132px;
height: 40px;
background-color: #0aa1ed ;
display: block;
text-align: center;
line-height: 40px;
color: white ;
text-decoration: none ;
border-radius: 3px;
font-size: 20px;
}
</style>
</head>
<body>
<a href="#">查看详情</a>
<h3>边框测试</h3>
<div>这是一个div</div>
</body>
</html>
测试效果:
4.内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d1 {
width: 100px;
height: 100px;
border: 1px solid red;
/* 添加内边距会影响元素的宽高 */
padding-top: 20px;
padding-left: 50px;
}
#d2,#d3 {
width: 100px;
height: 100px;
border: 1px solid red;
}
div>div {
width: 25px;
height: 25px;
background-color: green;
}
#d2{
padding: 25px 0 0 25px;
width: 75px ;
height: 75px;
}
#d3>div{
/*除了给上级元素添加overflow:hidden可以
解决粘连问题,给上级元素添加边框也能解决*/
margin: 25px 0 0 25px;
}
</style>
</head>
<body>
<div id="d1">内边距测试</div>
<div id="d2">
<div></div>
</div>
<div id="d3">
<div></div>
</body>
</html>
测试效果:
5.学子商城练习1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
font: 12px "simhei",Arial, Helvetica, sans-serif;
color: #666;
}
a{
/*宽高132*40 颜色#Oaaled */
width: 132px;
height: 40px;
background-color: #0aa1ed ;
display: block;
text-align: center;
line-height: 40px;
color: white ;
text-decoration: none ;
border-radius: 3px;
font-size: 20px;
}
#d1>div {
width: 245px;
height: 232px;
margin: 68px 0 0 36px;
}
#d1{
width: 611px;
height: 376px;
background-color: #e8e8e8;
/*设置背景图片*/
background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png);
background-size: 318px 319px;
background-repeat: no-repeat ;
background-position: 90% 70%;
overflow: hidden;
}
#p1{
font-size: 32px;
color: #333;
}
#p3{
font-size: 24px;
font-weight: bold;
color: #0aa1ed;
}
</style>
</head>
<body>
<div id="d1">
<div>
<p id="p1">灵越 燃7000系列</p>
<p id="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br />
英特尔HD显卡620含共享显卡内存</p>
<p id="p3">¥999999.99</p>
<a href="#">查看详情</a>
</div>
</div>
</body>
</html>
显示效果:
6.学子商城练习2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
font: 12px "simhei",Arial, Helvetica, sans-serif;
color: #666;
}
a{
/*宽高132*40 颜色#Oaaled */
width: 132px;
height: 40px;
background-color: #0aa1ed ;
display: block;
text-align: center;
line-height: 40px;
color: white ;
text-decoration: none ;
border-radius: 3px;
font-size: 20px;
}
#d1>div {
width: 253px;
height: 232px;
margin: 39px 0 0 25px;
}
#d1{
width: 400px;
height: 376px;
background-color: #e8e8e8;
/*设置背景图片*/
background-image: url(http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png);
background-size: 290px 232px;
background-repeat: no-repeat ;
background-position: 90% 90%;
overflow: hidden;
}
#p1{
font-size: 32px;
color: #333;
}
#p3{
font-size: 24px;
font-weight: bold;
color: #0aa1ed;
}
</style>
</head>
<body>
<div id="d1">
<div>
<p id="p1">颜值 框不住</p>
<p id="p2">酷睿双核i5处理器|256GB SSD| 8GB内存<br />
英特尔HD显卡620含共享显卡内存
<p id="p3">¥999999.99</p>
<a href="#">查看详情</a>
</div>
</div>
</body>
</html>
显示效果:
7.学子商城练习3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
font: 12px "simhei",Arial, Helvetica, sans-serif;
color: #666;
}
a{
/*宽高132*40 颜色#Oaaled */
width: 100px;
height: 24px;
background-color: #0aa1ed ;
display: inline-block;
text-align: center;
line-height: 24px;
color: white ;
text-decoration: none ;
border-radius: 3px;
font-size: 12px;
}
div{
width: 210px;
height: 233px;
background-color: #e8e8e8;
background-size: 290px 232px;
background-repeat: no-repeat ;
background-position: 90% 90%;
overflow: hidden;
text-align: center;
}
#p1{
margin: 0;
font-weight: bold;
}
#p2{
margin:4px;
font-weight: bold;
color: #0aa1ed;
}
</style>
</head>
<body>
<div>
<img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png" >
<p id="p1">戴尔(DELL)XPS13-9360-R1609 13.3英<br>
寸微边框笔记本电脑</p>
<p id="p2">¥4600.00</p>
<a href="#">查看详情</a>
</div>
</body>
</html>
显示效果:
本节所有的代码: https://download.csdn.net/download/qq_44273429/12729648 未完待续,,, 下一节链接: Web前端基础(04)