发表于： 2016-06-18 23:09:47
1 769
今天完成的事情：完成task3的页面，对于div的定位还非常的不熟练，达不到不崩的效果。
明天计划的事情：看看task4，看w3c上css， 明天要搬宿舍感觉没什么时间
遇到的问题：div块的定位，vw的用法，vw与%的区别。控制不住vw啊。
dreamweaver靠不住了，这代码还是要看浏览器敲。
收获:了解before，after 伪元素。
最终版task3代码：箭头和圆点是看的别人的代码才实现的这个--------------------------------------------------------------------------------------------
<head>
<TITLE>设计入口</TITLE>
<meta charset="utf-8" >
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<body>
<img src="images/task3-01.png"/ width="100%"/>
<div class="head">
<div class="head-arrow"></div>
<div class="head-text">返回</div>
<div class="head--text">魔镜</div>
<div class="head-circular"></div>
<div class="head--circular"></div>
<div class="head--circular"></div>
<div class="arrow"><img src="images/d69f301eeddbd6a84c1ad6164112ce06_11.png" width="100vw" height="100vw"></div>
<div class="log"><img src="images/log.png"></div>
<p class="text">葡萄藤轻游戏专注于桌游领域，提</p>
<p class="text">供在线杀人游戏，捉鬼，炸狼堡等</p>
<p class="text">多种聚会游戏，以及线下聚会桌游</p>
<p class="text">道具。</p>
<div class="left"><img src="images/qunzu1.png" >
<div id="p1">290560933</div>
</div>
<div class="right"><img src="images/putaotenlogo.png">
<div id="p2">BJPPTeng</div>
</div>
</html>
----------------------------------------
css
/* CSS Document */
body{
background-color: #68cdd5;
margin-top: 0%;
margin-right: 0;
margin-bottom: 20%;
margin-left: 0;
padding-top: 0%;
padding-right: 0%;
padding-bottom: 20%;
padding-left: 0%;
}
p{
font-size:5vw;
color:white;
line-height:185%;
}
.head{
font-size:3.75vw;
height:13.75vw;
background-color:#22292c;
color:#f8f6f5;
margin:-0.3rem 0 0 0 ;
text-align:center;
}
.head-text{
margin:4vw 0 0 0;
float:left;
}
font-size:5vw;
margin:3.43vw 0 0 -5%;
display:inline-block;
}
.head-circular,.head--circular{
background:#f8f6f5 ;
width: 1vw;
height:1vw;
border-radius:1vw;
float: right;
margin: 6.25vw 7% 0 0;
}
.head--circular{
margin: 6.25vw 1% 0 0;
}
border-bottom:solid transparent 3vw;
border-top: solid transparent 3vw;
border-right:solid #22292c 3vw;
width: 0vw;
height: 0vw;
float: left;
margin: 3.75vw 0 0 -2%;
content:' ';
font-size: 0;
}
.head-arrow:before{
border-right:solid #f8f6f5 3vw;
margin: 3.75vw 0 0 5%;
}
text-indent: 4.5%;
position: relative;
top: 0.8em;
}
position: relative;
top: 2.6em;
}
.text{
font-family:Microsoft YaHei, serif;
text-indent:14%;
line-height: 4.375vw;
position: relative;
top: 5em;}
.left{
position: relative;
margin-left: 20%;
margin-top: 30vw;
float: left;
}
.right{
position:relative;
float: right;
margin:30vw 20% 0 0;
.left img{
width: 110%;
}
.right img{
width: 110%;
}
#p1{
font-size: 3vw;
color: white;
text-align: center;
}
#p2{
font-size: 3vw;
color: white;
text-align: center;
}
返回列表
评论