利用列表结构和CSS样式表,制作网页中的导航栏。要求至少需要5个栏目设置,栏目标题内容自拟。栏目标题需添加链接,要求链接状态无下划线,鼠标悬停状态字体颜色变色。 2. 设计制作“新闻公告”栏目,要求栏目标题和栏目内容列表完整,并使用CSS进行字体、字号、颜色、边框、背景、斑马纹等样式设置。 3. 使用CSS设置图片边框、阴影、图文混排等样式;
时间: 2024-02-07 22:04:16 浏览: 29
好的,以下是关于图片边框、阴影、图文混排的CSS样式设置示例:
1. 导航栏
```html
<!DOCTYPE html>
<html>
<head>
<title>Navigation Bar</title>
<style>
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#help">Help</a>
</nav>
</body>
</html>
```
2. 新闻公告栏目
```html
<!DOCTYPE html>
<html>
<head>
<title>News and Announcements</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
h1 {
font-size: 24px;
color: #333;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
ul {
list-style: none;
padding: 0;
margin: 20px 0;
}
li {
padding: 10px;
border: 1px solid #ccc;
}
li:nth-child(even) {
background-color: #f2f2f2;
}
li:hover {
background-color: #ccc;
color: #fff;
}
</style>
</head>
<body>
<h1>News and Announcements</h1>
<ul>
<li>
<h2>Important Announcement</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac venenatis arcu. Nullam massa risus, tincidunt id eleifend ac, viverra eget leo. Donec auctor, velit et dapibus gravida, sapien neque luctus nunc, ac vestibulum mauris est at turpis.</p>
<p class="date">Posted on June 1, 2021</p>
</li>
<li>
<h2>New Product Launch</h2>
<p>Nullam vel nibh at augue tristique accumsan. Sed sed felis lectus. Pellentesque mattis eu nulla ac interdum. Sed vel turpis et felis malesuada varius. Fusce non convallis lectus.</p>
<p class="date">Posted on May 15, 2021</p>
</li>
<li>
<h2>Upcoming Event</h2>
<p>Phasellus euismod sapien non ex iaculis, vel eleifend massa scelerisque. Suspendisse potenti. Sed malesuada, tellus at tincidunt finibus, ex mauris fringilla eros, in fringilla libero ipsum nec lectus.</p>
<p class="date">Posted on May 1, 2021</p>
</li>
</ul>
</body>
</html>
```
3. 图片样式设置
```html
<!DOCTYPE html>
<html>
<head>
<title>Image Styles</title>
<style>
img {
border: 1px solid #ccc;
box-shadow: 2px 2px 5px #ccc;
float: left;
margin-right: 20px;
}
p {
text-align: justify;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Image Styles</h1>
<img src="https://picsum.photos/id/237/200/300" alt="Random Image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed bibendum, sem sed maximus bibendum, mauris metus bibendum sapien, eu vulputate libero eros a risus. Praesent accumsan, nibh eu finibus blandit, odio lacus iaculis elit, in vestibulum quam justo eu massa. Donec sed sodales lorem. Donec euismod vulputate velit, quis posuere ipsum fringilla vel. Duis fringilla turpis quis magna pulvinar, sed dapibus dolor rutrum. Integer lacinia odio sit amet est pretium, nec laoreet urna pharetra. Cras euismod aliquet lorem, vitae consectetur quam ultrices sed. Mauris vitae mi vel justo consequat dictum vel vitae elit. Nullam eleifend sapien nec ultricies pretium. Suspendisse sit amet enim euismod, facilisis odio et, pretium erat.</p>
</body>
</html>
```
在这些示例中,我们使用了CSS来设置导航栏、新闻公告列表和图片的样式。您可以根据自己的需求自定义样式,并根据需要调整大小和布局。希望这些示例对您有所帮助!
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![application/msword](https://img-home.csdnimg.cn/images/20210720083327.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.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)
![](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)