给我一个HTML5中css的font-size,color,text-decoration属性的使用案例
时间: 2024-03-01 09:55:20 浏览: 23
当然可以,下面是一个简单的HTML5代码示例,展示了如何使用CSS的font-size,color和text-decoration属性:
```html
<!DOCTYPE html>
<html>
<head>
<title> CSS示例 </title>
<style>
/* 设置字体大小为20像素 */
h1 {
font-size: 20px;
}
/* 设置文本颜色为红色 */
p {
color: red;
}
/* 设置文本下划线 */
a {
text-decoration: underline;
}
</style>
</head>
<body>
<h1> 这是一个标题 </h1>
<p> 这是一段红色的文本 </p>
<p> 这是一段带有下划线的链接:<a href="#">点击这里</a> </p>
</body>
</html>
```
在这个示例中,我们设置了标题的字体大小为20像素,设置了文本的颜色为红色,并在链接下方添加了下划线。这些属性都是CSS中常用的属性,可以通过它们来控制页面的外观和样式。
相关问题
用html和css写一个案例实现按钮切换图片
好的,这个问题可以回答。以下是一个简单的示例代码:
HTML代码:
```
<div>
<button onclick="changeImage(1)">图片1</button>
<button onclick="changeImage(2)">图片2</button>
</div>
<div>
<img id="myImage" src="image1.jpg" alt="图片1">
</div>
```
CSS代码:
```
button {
background-color: #4CAF50; /* 绿色按钮背景 */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: auto;
}
```
JavaScript代码:
```
function changeImage(num) {
var img = document.getElementById("myImage");
if (num == 1) {
img.src = "image1.jpg";
img.alt = "图片1";
} else if (num == 2) {
img.src = "image2.jpg";
img.alt = "图片2";
}
}
```
以上代码会在页面上展示两个按钮,用户点击按钮后,通过 JavaScript 改变图片的 src 和 alt 属性来实现图片的切换。
用html+css+js编写一个完整的悬停和跳转的旅游网案例
好的,以下是一个简单的悬停和跳转的旅游网案例的HTML、CSS和JS代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旅游网</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>旅游网</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#destination">目的地</a></li>
<li><a href="#hotels">酒店</a></li>
<li><a href="#tours">旅游</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>欢迎来到旅游网</h2>
<p>我们提供全球范围内的旅游服务,让您的旅行更加愉快、方便。</p>
</section>
<section id="destination">
<h2>热门目的地</h2>
<ul>
<li><a href="#">巴黎</a></li>
<li><a href="#">伦敦</a></li>
<li><a href="#">东京</a></li>
<li><a href="#">纽约</a></li>
<li><a href="#">悉尼</a></li>
</ul>
</section>
<section id="hotels">
<h2>精选酒店</h2>
<ul>
<li><a href="#">希尔顿酒店</a></li>
<li><a href="#">万豪酒店</a></li>
<li><a href="#">喜来登酒店</a></li>
<li><a href="#">香格里拉酒店</a></li>
<li><a href="#">四季酒店</a></li>
</ul>
</section>
<section id="tours">
<h2>旅游套餐</h2>
<ul>
<li><a href="#">欧洲十日游</a></li>
<li><a href="#">日本五日游</a></li>
<li><a href="#">美国十日游</a></li>
<li><a href="#">澳洲七日游</a></li>
<li><a href="#">亚洲八日游</a></li>
</ul>
</section>
<section id="contact">
<h2>联系我们</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email"><br>
<label for="message">留言:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="提交">
</form>
</section>
<footer>
<p>版权所有 © 2021 旅游网</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global styles */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 10px;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
text-decoration: underline;
}
section {
padding: 50px;
}
h2 {
margin-bottom: 30px;
}
ul {
list-style: none;
}
ul li {
margin-bottom: 10px;
}
ul li a {
color: #333;
text-decoration: none;
}
ul li a:hover {
text-decoration: underline;
}
form label {
display: block;
margin-bottom: 10px;
}
form input[type="text"],
form input[type="email"],
form textarea {
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
}
form input[type="submit"] {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
form input[type="submit"]:hover {
background-color: #555;
}
```
JS代码:
```javascript
// Smooth scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
```
这个案例包括一个页面标题、导航菜单、五个页面部分(首页、目的地、酒店、旅游和联系我们)、一个页脚和一个JS脚本来实现平滑滚动。当您在导航菜单中单击链接时,页面将平滑滚动到相应的部分。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)