几个CSS经典案例

最新推荐文章于 2024-08-15 23:19:32 发布

kamcd

最新推荐文章于 2024-08-15 23:19:32 发布

阅读量1.6k

点赞数 1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>start</title>
<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;text-align:center;}
hr   {color:white;}
p    {font-size:11pt;margin-left:50px;}
a:link    {color:green;}<!--点击变色-->
a:visited {color:yellow;}
a:hover   {color:black;}
a:active  {color:blue;}
</style>
</head>
 
<body>
 
<h1>这是标题</h1>
<hr>             <!-- 直线 -->
 
<p>你可以看到这个段落是
被设定的 CSS 渲染的。</p>
 
<p><a href="http://www.runoob.com" 
target="_self">这是一个链接</a></p>
 
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
body
{
	background-color:#d0e4fe;
}
h1
{
	color:red;
	text-align:center;
}
p
{
	font-family:"微软雅黑";
	font-size:30px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
 
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
li a.active {
    background-color: black;
    color: white;
}
 
li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>
 
<h2>垂直导航条</h2>
<p>在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中。</p>
 
<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

一万左右的小生意 https://zhuanlan.zhihu.com/p/158746974

小本生意做什么好 https://zhuanlan.zhihu.com/p/158745896

只需一辆轿车就可做的生意 https://zhuanlan.zhihu.com/p/158693927