之前我们写过这样一个简单的页面
通过我们之前学习的,将其修改为这样的
注:如果想要原始代码可以私信我
答案代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css.css">
<title>Challenge#2</Challenge></title>
</head>
<body>
<h1>CONVERSE CHUNK TAYLOR ALL STAR LOW TOP</h1>
<article>
<img src="img/challenges.jpg" alt="匡威图片" width="250" height="250" />
<p><strong>$65.00</strong></p>
<p class="mian">免运费</p>
<p>这些经典帆布夹头可随时打扮,是日常衣橱必备品</p>
<a class="converse" href="https://www.converse.com">More information →</a>
<h3>产品详情</h3>
<ul>
<li>轻便耐用的帆布运动鞋</li>
<li>轻薄软垫鞋床,增加舒适度</li>
<li>标志性的卡盘泰勒脚踝贴片</li>
</ul>
<button>Add to cart</button>
</article>
</body>
</html>
CSS代码如下
body {
border: 4px solid black;
}
body h1 {
text-align: center;
font-size: 36px;
}
body p strong {
font-size: 30px;
}
.mian {
color: #777;
font-weight: bold;
}
.converse:link {
color: black;
}
.converse:hover, .converse:active {
text-decoration: none;
}
ul{
list-style-type: square;
}
button {
font-size: 23px;
color: #FFFFFF;
border: none;
background-color: black;
text-transform: uppercase;
}
button:hover {
background-color: #FFFFFF;
color: black;
text-transform: uppercase;
}