css基础代码
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础CSS示例</title>
<style>
/* 设置标题文本为红色 */
h1 {
color: red;
}
/* 将标题文本居中显示 */
h1 {
text-align: center;
}
/* 设置页面主体内容宽度为80% */
.container {
width: 80%;
margin: 0 auto; /* 居中显示 */
}
/* 设置页面的整体背景色 */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 设置链接样式 */
a {
color: blue;
text-decoration: none;
}
/* 鼠标悬停链接时的样式 */
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>欢迎来到我的网站</h1>
<p>这是一段网页的内容。这是一段网页的内容。这是一段网页的内容。</p>
<p>这是另一段网页的内容。这是另一段网页的内容。这是另一段网页的内容。</p>
<a href="#">查看更多</a>
</div>
</body>
</html>
这个例子中，有一些基本的CSS样式：
将<h1>元素中的文本颜色设置为红色。将<h1>元素中的文本居中显示。设置页面的主体内容宽度为80%。设置页面的背景颜色为浅灰色。设置链接的默认颜色为蓝色，去掉下划线。鼠标悬停在链接上时，添加下划线。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>扩展的CSS示例</title>
<style>
/* 设置标题文本为红色 */
h1 {
color: red;
text-align: center;
}
/* 设置导航菜单样式 */
nav {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px 0;
}
nav a {
color: #fff;
text-decoration: none;
padding: 0 15px;
}
/* 设置页面主体内容样式 */
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
/* 设置页面的整体背景色 */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 设置链接样式 */
a {
color: blue;
text-decoration: none;
}
/* 鼠标悬停链接时的样式 */
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">服务</a>
<a href="#">联系我们</a>
</nav>
<div class="container">
<h1>欢迎来到我的网站</h1>
<p>这是一段网页的内容。这是一段网页的内容。这是一段网页的内容。</p>
<p>这是另一段网页的内容。这是另一段网页的内容。这是另一段网页的内容。</p>
<a href="#">查看更多</a>
</div>
</body>
</html>
在这个扩展示例中，我添加了一个简单的导航菜单，具有居中对齐、背景色和链接样式。调整了页面主体内容的样式，添加了背景色、阴影和圆角边框。
