重置、去电小数点、链接无下划线和变黑
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ /*重置*/
margin: 0;
padding: 0;
font-size: 12px;
}
ul{
list-style: none;/*去掉小点*/
padding: 0;
}
a{ /*无下划线和变成黑色*/
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<p>sfgh</p>
<p>ertyuh</p>
<h1>rty</h1>
<h2>wye</h2>
<h3>cvb</h3>
<ul>
<li>dfg</li>
<li>eri</li>
<li>xcj</li>
</ul>
<br />
<a href="aaa.html">百度</a>
</body>
下面为运行结果：
字体大小、字体颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>111</title>
<style>
h1{
font-size: 20px;/*字体大小*/
color: red;/*字体颜色*/
}/*css,大括号很重要！*/
p{
color: red;
}
.word{
color: blueviolet;
}
#txt{
color: blue;
}
p strong{
color: red;
}/*只有在p中的strong变红*/
</style>
</head>
<body>
<h1>学习使我快乐！</h1>
<h2 class="word">学海无涯苦作舟</h2>
<h1>ghyft</h1>
<p>段落</p>
<h3 class="word">学海无涯</h3>
<p id="txt">段段段段段落</p>
<p><strong>文字</strong></p>
<strong>文字</strong>
</body>
</html>
下面为运行结果：
小练习1：
<html>
<head>
<meta charset="UTF-8">
<title>破阵子</title>
<style>
h1{
font-size: 18px;
color: red;
}
.word{
font-size: 12px;
color: red;
}
.fill{
font-size: 12px;
}
</style>
</head>
<body>
<h1>破阵子·为陈同甫赋壮词以寄之</h1>
<hr />
<p class="word">
醉里挑灯看剑，梦回吹角连营。<br />
八百里分麾下炙，五十弦翻塞外声。<br />
沙场秋点兵。<br />
</p>
<p class="fill">
马作的卢飞快，弓如霹雳弦惊。<br />
了却君王天下事，赢得生前身后名。<br />
可怜白发生!<br />
</p>
</body>
下面为运行结果：
选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<link href="css/demo1.css" type="text/css" rel=""/>
</head>
<body>
<p style="color: blue;">sdfghj</p>
<strong>dfghjkmnb</strong>
<br />
<em>wertyui</em>
</body>
</html>
下面为运行结果：
div
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 50px;
border: 1px solid;
/*padding-right: 20px;*/
/*padding: 20px 50px;*//*上下，左右*/
padding: 20px 50px 10px;/*上，左右，下*/
padding: 10px 20 px 30 px 40px;/*上,右,下,左*/
}
</style>
</head>
<body>
<div>
sdsdsddssdsdsdsdsdsddsd<br />
asdfghjdfsdfhgh
</div>
</body>
</html>
下面为运行结果：
小练习2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书列表</title>
<style>
.word{
color: blueviolet;
font-size: 12px;
}
.sdd{
color: black;
font-size: 15px;
}
</style>
</head>
<body>
<ol type="1">
<li><img src="img/111.jpg" width="120" height="120" />
<br />
<p class="word">111</p>
<p class="sdd">456</p>
</li>
<li>
<img src="img/111.jpg" width="120" height="120" />
<br />
<p class="word">222</p>
<p class="sdd">456</p>
</li>
<li>
<img src="img/111.jpg" width="120" height="120" />
<br />
<p class="word">333</p>
<p class="sdd">456</p>
</li>
</ol>
</body>
</html>
下面为运行结果：
div叠加
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 400px;
height: 300px;
border: 1px solid;
padding-left: 10px;
padding-top: 20px;
margin-bottom: 5px;/*边距*/
}
.div2{
width: 400px;
height: 50px;
border: 1px solid;
}
</style>
</head>
<body>
<div class="div1">
这是一个div
</div>
<div class="div2">
这是一个div
</div>
</body>
</html>
下面是运行结果：
列表:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
padding: 0;
margin: 0;
list-style: none;
}
ul li{
float: left;
margin-left: 10px;
border: 1px solid;
overflow:hidden;/*防止塌陷*/
}
</style>
</head>
<body>
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
<li>66666</li>
<li>77777</li>
<li>88888</li>
</ul>
</body>
</html>
下面是运行结果：
填充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
widows: 20px;
height: 10px;
background-color: red;
text-align: center;
border-radius: 50%;
}
</style>
</head>
<body>
<div>2</div>
</body>
</html>
下面是运行结果：
小练习3：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
width: 350px;
height: 30px;
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid;
}
ul li{
float: left;
margin-left: 20px;
border: 1px solid;
overflow:hidden;
font-size: 12px;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>服装</li>
<li>化妆品</li>
<li>电子产品</li>
<li>生活用品</li>
</ul>
</body>
</html>
下面是运行结果：
作业1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微信</title>
</head>
<style>
#weixin{
height: 70px;
width: 70px;
font-size: 20px;
text-align: center;
line-height: 70px;
border: 1px solid green;
}
#center{
height: 20px;
width: 20px;
background-color: red;
text-align: center;
line-height: 20px;
border-radius: 50%;
font-size: 14px;
position: relative;
top: -80px;
right: -63px;
}
</style>
<body>
<div id="weixin">微信</div>
<div id="center">2</div>
</body>
</html>
下面是运行结果：
作业2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微信</title>
<style>
#weixin{
height: 70px;
width: 70px;
font-size: 20px;
text-align: center;
line-height: 70px;
border: 1px solid green;
position: relative;
}
#center{
height: 20px;
width: 20px;
background-color: red;
text-align: center;
line-height: 20px;
border-radius: 50%;
font-size: 14px;
position: absolute;
top: -10px;
right: -10px;
}
</style>
</head>
<body>
<div id="weixin">微信
<div id="center">2</div>
</div>
</body>
</html>
下面是运行结果：
——The End
2519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
