您的位置：首页 > Web前端 > CSS

一个简单css例子

2017-04-29 21:49 381 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css讲解</title>
<link rel="stylesheet" href="style.css">
<style>
/*    body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}*/
div{
width: 200px;
height: 200px;
background: blue;
/* border: 15px solid red; */
}
#dd{
width: 300px;
height: 300px;
background: red;
}
.xdd{
color: yellow;
}
a{
color: #000;
font-size: 30px;
}
a:hover{
color: green;
}
.abc{
color: blue;
}
ul li:first-child{
color: orange;
background: blue;
}
ul li:last-child{
color: blue;
background: orange;
}
ul li:nth-child(3){
color: green;
}
ul li:only-child{
color: red;
}
</style>

</head>
<body>
<div style="border: 20px solid #000;">
<h2 style="color:red;">css讲解</h2>
</div>

<form action=""></form>
<div id="dd" class="xdd">
我的div标签
<p id="mm" class="xdd">我是p标签</p>
<a id="gg" href="http://www.baidu.com">baidu</a>
<h1></h1>
<span></span>
</div>

<div>
<a href="#"> 这是一个超链接</a>
<p>今天气不错,大家有没有出游的计划</p>
</div>
<ul>
<!-- <h2>我的老大</h2>
<h2>我的男孩子</h2> -->
<li class="abc">11111</li>
<li>222222</li>
<li>33333333</li>
<li>4444444444</li>
<li>555555555</li>
<li>6666666</li>
<li>7777777777</li>
<li>8888888888</li>
<li>9999999</li>
<li>1000000000000</li>

<ul>
<<!-- h1>我的哥哥</h1> -->
<li>我的独生子女</li>
<li>我不是生子女</li>
</ul>
<ul>
<li>我的真正的独生子女</li>
</ul>

</body>
</html>

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航