发表于: 2016-04-14 10:58:08
2 1687
首先呢,我不知道这是一个好的习惯还是不好的习惯,我不太喜欢碰到什么问题了然后临时去学习这个方面的知识。我花了挺多的时间去学习HTML和CSS的每个标签和属性,一个个看过去,不断的进行试验,花费了大量的时间。但是咱们的目标是成为一个优秀的程序员,所以打好基础也是很有必要的是吧?
废话不多说了,来汇报一下自己这些天的成果。
首先完成了任务3的要求。
Chrome浏览器下的页面。
Chrome浏览器调试页面。
我的iphone5c上的浏览页面。
下面是代码。
HEML代码部分:
<body>
<div class="back">
<a href="http://www.baidu.com">
<img src="task 3\images\back.jpg" alt="退后"/ id="back">
</a>
</div>
<div id="logo">
<img src="task 3\images\logo.jpg" alt="葡萄藤"/>
</div>
<p>
葡萄藤轻游戏专注于桌游领域,提供在线杀人游戏,捉鬼,炸狼堡等多种聚会游戏以下线下聚会桌游道具。
</p>
<div class="image">
<a href="http://www.youku.com">
<img src="task 3\images\290560933.jpg" alt="290560933"/ class="290560933"></a>
<a href="http://www.jnshu.com/#/skill/home#1">
<img src="task 3\images\BJPTTeng.jpg" alt="BJPTTeng"/ id="BJPTTeng"></a>
</div>
</body>
</html>
CSS代码部分:
<meta charset=utf-8>
<meta name="Conten-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body {
background-color:rgb(104,205,213);width:90%;margin:50px auto;
}
p {
font-family:hei;color:white;font-size:14pt;width:80%;margin:30px auto;
text-align:justify;
}
.back{
width:80%;margin:0px auto;position:relative;top:-10px
}
#back{
float:left;height:50px;
}
#logo{
width:191px;margin:0px,auto;
}
.image{
width:80%;margin:20px auto;
}
.290560933{
float:left;height:100px;
}
#BJPTTeng{
float:right;height:100px;
}
</style>
这里有一个问题:
我的两张图片,都进行了CSS的属性定义,但是第一张图片没有被成功定义,但是第二张可以。这个问题可能还需要研究一下,到时候解决了再来更新。
评论