文章目录
敲完心得
傍晚了，花了一下午时间，我终于终于把这个页面东凑西拼弄好了，高度还原了这个页面，怎么说呢，真的很累，就是凑，在敲代码前还是建议先构思好，你要用表格还是列表还是表单什么的，先想好布局，然后再下手，成果了就好，虽然累，但是看到结果出来那一刻还是能开心一点点的，好了，吃饭去啦。加油！
页面目标图
我的效果图
我敲的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.header a{
text-decoration: none;
color: white;
}
.header {
background-color:firebrick;
width: 1000px;
height: 45px;
}
.header a:hover{
text-decoration:underline;
color: black;
}
.header p{
float: right;
line-height: 45px;
padding-right: 20px;
color: white;
}
.header p a {
padding-left: 10px;
padding-right: 10px;
}
.header h1{
background: url(img/gameLogo.jpg)0px 0px no-repeat;
height: 45px;
float: left;
}
.header h1 span{
display: inline-block;
color: red;
width: 120px;
background-color: white;
margin-left: 246px;
margin-top: 10px;
text-align: center;
font-size: 23px;
line-height: 40px;
border-radius: 5px 5px 0px 0px ;
}
.contanier{
width:1000px;
height: 230px;
}
.contanier ul {
width: 190px;
height: 230px;
float:left;
}
.contanier ul li a{
color: #000000;
text-decoration: none;
line-height: 27px;
padding-left: 30px;
}
.contanier ul li{
display: block;
padding-top: 1px;
background: url(img/gameBg1.jpg);
}
.contanier ul li a:hover{
text-decoration: underline;
color: red;
}
.middle{
width: 520px;
height: 230px;
background: url(img/img-3.jpg);
float: left;
padding-top: 2px;
}
.right{
background-color: gainsboro;
height: 230px;
}
.right form h1{
color: dimgrey;
font-size: 18px;
display: block;
margin-left: 2em;
line-height: 70px;
height: 50px;
padding: 0px;
}
.right form p{
height: 20px;
}.right form p:nth-of-type(3){
padding-left: 80px;
padding-top: 20px;
float: left;
}
.right form p:nth-of-type(3) input{
background-color: red;
display: inline-block;
color: white;
float: left;
width: 70px;
height:30px ;
letter-spacing: 5px;
}
.right form p:nth-of-type(4) a{
display: block;
text-decoration: none;
float: left;
margin-left: 20px;
padding-top: 20px;
}
.right form p:nth-of-type(5) a{
display: block;
text-decoration: none;
float:left;
padding-top: 10px;
margin-left: 170px;
}
.a{
float: left;
padding-left: 20px;
padding-top: 20px;
}
.right form p a:hover{
text-decoration: underline;
color: red;
}
.contanier02{
width: 1000px;
height: 660px;
}
.lll{
width: 723px;
height: 660px;
/*border: 1px solid red;*/
float: left;
padding-left: 0px;
display: inline-block;
}
.rrr{
width:275px;
height: 660px;
/* border: 1px solid red;*/
float: left;
display: inline-block;
}
.rrr h1{
border: 1px solid #DCDCDC;color:#B22222;
font-size: 17px;
height: 23px;
line-height: 23px;
padding-left: 8px;
background-color:gainsboro;
}
li{
list-style: none;
}
.contanier02 .rrr .xxx li{
height: 30px;
line-height: 30px;
background: url(img/btn-04.gif)5px 8px no-repeat;
padding-left: 45px;
border-bottom: 1px dashed gainsboro;
font-size: 14px;
}
.rrr h2{
border: 1px solid #DCDCDC;color:#B22222
最低0.47元/天 解锁文章
453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
