CSS模块2-2:样式属性练习2 1、知识点: 理解样式表的使用: 熟悉各种选择器并熟练应用。 熟悉CSS常用属性:文本、字体、背景、列表、框(盒子)模型等。 2、操作题 1)完成CSS实验:网页设计软件列表(选择器+自定
时间: 2024-05-21 07:10:35 浏览: 8
义样式)
<!DOCTYPE html>
<html>
<head>
<title>网页设计软件列表</title>
<style>
h1 {
font-size: 32px;
color: #333;
text-align: center;
}
ul {
list-style: none;
padding: 0;
margin: 20px auto;
width: 80%;
}
li {
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
background-color: #f5f5f5;
box-shadow: 0 0 10px #ccc;
overflow: hidden;
}
li:hover {
background-color: #fff;
box-shadow: 0 0 10px #999;
}
li img {
float: left;
margin-right: 20px;
width: 120px;
height: 120px;
border-radius: 5px;
}
li h2 {
font-size: 24px;
color: #333;
margin: 0;
}
li p {
font-size: 16px;
color: #666;
margin: 10px 0;
}
li a {
display: block;
font-size: 16px;
color: #09f;
text-decoration: none;
}
</style>
</head>
<body>
<h1>网页设计软件列表</h1>
<ul>
<li>
<img src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582748_1280.png" alt="Photoshop">
<h2>Photoshop</h2>
<p>Photoshop是一款功能强大的图像编辑软件,广泛应用于图片处理、图像编辑、网页设计等领域。</p>
<a href="#">了解更多</a>
</li>
<li>
<img src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582746_1280.png" alt="Illustrator">
<h2>Illustrator</h2>
<p>Illustrator是一款专业的矢量图形软件,可用于创建图标、插画、排版、海报等设计项目。</p>
<a href="#">了解更多</a>
</li>
<li>
<img src="https://cdn.pixabay.com/photo/2017/08/05/11/16/logo-2582747_1280.png" alt="InDesign">
<h2>InDesign</h2>
<p>InDesign是一款专业的出版物设计软件,可用于制作杂志、报纸、书籍等各种印刷品。</p>
<a href="#">了解更多</a>
</li>
</ul>
</body>
</html>