发表于： 2016-07-29 23:45:39
0 1336
本来没想到用ul标签实现最下面两个图片的并列，我用的是一个div中浮动放置两个图片，后来折腾半天没办法实现缩放，于是....参考了别人的代码，后来运用了在div中使用ul标签的方法。=-=看别人代码这样是不是不太好。。。。明天的任务，做下一个task。。代码主体如下：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8">
<title>task 3</title>
<style type="text/css">
html
{
font-size:62.5%; /* 10÷16=62.5% */
}
*
{
margin:none;
padding:none;
border-color: #66cccc;
}
.center
{
max-width: 640px;
min-width: 320px;
height: 100%;
background-color: rgb(104, 205, 213);
margin:0 auto;
}
.back
{
width:13rem;
text-align: left;
margin-top: 0rem;
margin-left: 0rem;
}
.logo
{
text-align:center;
margin-top:0rem;
}
.p
{
color:#ffffff;
font-size: 3rem;
margin-top:10rem;
margin-left: 8rem;
margin-right: 8rem;
}
.list
{
list-style: none;
overflow: hidden;
padding-top: 5rem;
padding-bottom: 5rem;
}
.icon1
{
width:50%;
float:left;
text-align:center;
}
.icon2
{
width:50%;
float: right;
text-align: center;
}
@media screen and (max-width: 480px){
html{
font-size: 46.875%
}
}
@media screen and (max-width: 360px){
html{
font-size: 35.1%
}
}
img { max-width: 100%;
}
</style>
</head>
<body>
<div>
<div>
<img src="task2\back.png">
</div>
<div>
<img src="task2\logo.png">
</div>
<div>
<p>葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以下线下聚会桌游道具。</p>
</div>
<div>
<ul class="list">
<li><img src="task2\picture01.png"></li>
<li><img src="task2\picture02.png"></li>
</div>
</div>
</body>
</html>
返回列表
评论