您的位置：首页 > 其它

第一个任务--动手写一个网页

2016-06-18 16:03 447 查看

哦，第一个小任务出现了，动手写了一个网页，写完了以后是这个样子的，恩

好像有错别字，不管了、

1、background-size IE不兼容，box-shadow IE不兼容（不愧是250浏览器）

2、CSS非常锻炼人的忍耐力

3、水平居中 margin 0 auto 非常好用

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The bitch</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="header">
<img src="images/blah.png" alt="标题图标">
<!-- 文字框上面那点玩意 -->
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Site</a>
</li>
<li>
<a href="#">Other</a>
</li>
</ul>
</div>
<!-- 主角，就是那一个大框框 -->
<div class="main">
<div class="main-content">
<!-- 标题 -->
<h2>The Bitch</h2>
<hr>
<!-- 三个图片 -->
<div class="content">
<ul>
<li>
<img src="images/0002.jpg" alt="第一个bitch">
</li>
<li>
<img src="images/0003.jpg" alt="第二个bitch">
</li>
<li>
<img src="images/0004.jpg" alt="第三个bitch">
</li>
</ul>
<!-- 文字 -->
<p>
Calling someone a bitch used to be pretty straightforward, but today—after many adaptations, reinventions, and attempts to reclaim the word—it's not totally clear what "bitch" really means anymore. There are bad bitches and basic bitches. You can bitch-slap someone, wear a resting bitch face, or just tag the word onto the end of a sentence, as in, “I’m in Miami, bitch!” When the word “bitching” is used as a verb, it means to complain; when it’s used as an adjective, it means to be cool. To be “someone’s bitch” can mean either to be owned by that person or to be his or her BFF—unless you're someone's "prison bitch," which always means the former.
</p>
</div>
</div>
</div>
<div class="footer">
© MUGGLECODING
</div>

</body>
</html>

CSS：

*{
margin: 0;
padding: 0;
font-size: 14px;
font-family:  Helvetica, Arial, sans-serif;
}
body{
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.header{
width: 600px;
margin: 20px auto;
}
.header ul{
margin: 0 auto;
text-align: center;
}
.header li{
display: inline-block;
list-style: none;
margin:0 10px;
}
.header a{
font-size: 16px;
color: #fff;
}
.main{
margin-top: 70px;
}
.main h2{
font-size: 26px;
font-weight: bold;
color: #37A5f0;
text-align:center;
margin: 20px;
}
.main-content{
height: 560px;
width: 502px;
border-radius: 10px;
margin: 20px auto;
border: 1px #CCC solid;
background-color: #fff;
box-shadow: 0 0 15px #000;
padding: 20px;
}
.main-content img{
width: 150px;
height: 150px;
}
.main-content ul{
display: block;
margin: 5px auto;
height: 170px;
}
hr{
border:none;
border-top:1px solid gainsboro;
height:0;
}
.main-content li{
list-style: none;
text-decoration: none;
float: left;
margin: 8px;
}
p{
color: #505050;
font-size: 15px;
padding: 0 10px;
line-height: 26px;
}
.footer{
text-align: center;
font-size: 12px;
font-weight: bold;
font-style: italic;
color: #aaaaaa;
margin-bottom: 30px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航