2544次阅读
前端静态页面
我们先来看首页，首先整个网站有一个背景色，需要给body一个background-color，然后标题栏可以是一个div，图片展示区是一个div，日记展示区是一个div。标题栏中的元素用div配合margin和左浮就能搞定，其中的几个超链可以用ul li来搞定。图片展示区是典型的ul li用武之地，九宫格的样式我们之前已经做过。下面的日记展示区也是ul li，所以这个页面很快就能做出来：
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>pet show</title>
<style>
* {
margin : 0px;
padding : 0px;
}
body {
background-color : #B1ECFE;
}
.totalDiv {
width : 1000px;
margin : 10px auto;
}
.titleDiv {
width : 100%;
height : 100px;
background-color : #AEFFCF;
margin-top : 10px;
}
.imgDiv {
float : left;
}
.twoTitle {
float : left;
}
.bigTitle {
font-size : 45px;
color : #FF5400;
font-weight : bold;
margin-top : 8px;
margin-left : 28px;
}
.subTitle {
font-size : 20px;
color : #FF0000;
margin-top : 5px;
margin-left : 35px;
}
.menu {
float : left;
margin-left : 120px;
margin-top : 15px;
}
.menu li {
float : left;
margin-left : 50px;
list-style-type : none;
}
.menu a {
font-size : 60px;
text-decoration : none;
color : #FFC600;
}
.menu a:hover {
color : #6CDBFF;
}
.picDiv, .blogDiv {
width : 100%;
background-color : #6CDBFF;
margin-top : 10px;
}
.picUl {
width : 800px;
margin : 0px auto;
}
.picLi {
list-style-type : none;
width : 350px;
float : left;
margin-left : 40px;
}
.picLi li {
list-style-type : none;
float : left;
margin-top : 10px;
margin-left : 10px;
}
.picTitle {
color : #2B6BB2;
font-size : 20px;
font-weight : bold;
text-align : center;
margin-top : 10px;
}
.blogUl {
width : 900px;
margin : 0px auto;
}
.blogLi {
list-style-type : none;
padding-top : 15px;
padding-bottom : 15px;
}
.blogTitle {
color : #2B6BB2;
font-size : 50px;
}
</style>
</head>
<body>
<div class="totalDiv">
<div class="titleDiv">
<div class="imgDiv">
<img src="../../images/logo.jpg" width="150px" height="100px" />
</div>
<div class="twoTitle">
<div class="bigTitle">
宠恋秀
</div>
<div class="subTitle">
秀出你的宠物
</div>
</div>
<div class="menu">
<ul>
<li><a href="index.php">首页</a></li>
<li><a href="pic.php">图片</a></li>
<li><a href="blog.php">日记</a></li>
</ul>
</div>
</div>
<div class="picDiv">
<ul class="picUl">
<li class="picLi">
<div class="picTitle">喵喵和狗狗</div>
<ul>
<li><img src="../../images/pics/pic1.jpg" /></li>
<li><img src="../../images/pics/pic2.jpg" /></li>
<li><img src="../../images/pics/pic3.jpg" /></li>
<li><img src="../../images/pics/pic4.jpg" /></li>
<li><img src="../../images/pics/pic5.jpg" /></li>
<li><img src="../../images/pics/pic6.jpg" /></li>
<li><img src="../../images/pics/pic7.jpg" /></li>
<li><img src="../../images/pics/pic8.jpg" /></li>
<li><img src="../../images/pics/pic9.jpg" /></li>
</ul>
</li>
<li class="picLi">
<div class="picTitle">喵喵和狗狗</div>
<ul>
<li><img src="../../images/pics/pic1.jpg" /></li>
<li><img src="../../images/pics/pic2.jpg" /></li>
<li><img src="../../images/pics/pic3.jpg" /></li>
<li><img src="../../images/pics/pic4.jpg" /></li>
<li><img src="../../images/pics/pic5.jpg" /></li>
<li><img src="../../images/pics/pic6.jpg" /></li>
<li><img src="../../images/pics/pic7.jpg" /></li>
<li><img src="../../images/pics/pic8.jpg" /></li>
<li><img src="../../images/pics/pic9.jpg" /></li>
</ul>
</li>
<li class="picLi">
<div class="picTitle">喵喵和狗狗</div>
<ul>
<li><img src="../../images/pics/pic1.jpg" /></li>
<li><img src="../../images/pics/pic2.jpg" /></li>
<li><img src="../../images/pics/pic3.jpg" /></li>
<li><img src="../../images/pics/pic4.jpg" /></li>
<li><img src="../../images/pics/pic5.jpg" /></li>
<li><img src="../../images/pics/pic6.jpg" /></li>
<li><img src="../../images/pics/pic7.jpg" /></li>
<li><img src="../../images/pics/pic8.jpg" /></li>
<li><img src="../../images/pics/pic9.jpg" /></li>
</ul>
</li>
<li class="picLi">
<div class="picTitle">喵喵和狗狗</div>
<ul>
<li><img src="../../images/pics/pic1.jpg" /></li>
<li><img src="../../images/pics/pic2.jpg" /></li>
<li><img src="../../images/pics/pic3.jpg" /></li>
<li><img src="../../images/pics/pic4.jpg" /></li>
<li><img src="../../images/pics/pic5.jpg" /></li>
<li><img src="../../images/pics/pic6.jpg" /></li>
<li><img src="../../images/pics/pic7.jpg" /></li>
<li><img src="../../images/pics/pic8.jpg" /></li>
<li><img src="../../images/pics/pic9.jpg" /></li>
</ul>
</li>
</ul>
<div style="clear : both; height : 10px;"></div>
</div>
<div class="blogDiv">
<ul class="blogUl">
<li class="blogLi">
<div class="blogTitle">狗狗到我家</div>
<div class="blogArticle">
有一天，我在路上遇到一只小狗。就用声问：“小汪，你怎么在这，你的主人呢？”“汪汪
，我被主人赶出来了，我的主人是小明。”小狗好像说。我好奇地继续又问：“那你主人
为什么把你赶出门呢？”小狗愁眉苦脸地回答道：“我跟小明看电视，我们看到公益广告，
那个汽车排气管排出烟雾全是灰色，把屏幕弄得全灰色，我也不懂就随便大叫，小明叫我
别吵，但我还叫着，小明一脚把我给踹到门外，我只好在街上走来走去，哎！”我叹了口
气说：“你也够可怜的，哦！我觉得你也叫得对……
</div>
</li>
<li class="blogLi">
<div class="blogTitle">狗狗到我家</div>
<div class="blogArticle">
有一天，我在路上遇到一只小狗。就用声问：“小汪，你怎么在这，你的主人呢？”“汪汪
，我被主人赶出来了，我的主人是小明。”小狗好像说。我好奇地继续又问：“那你主人
为什么把你赶出门呢？”小狗愁眉苦脸地回答道：“我跟小明看电视，我们看到公益广告，
那个汽车排气管排出烟雾全是灰色，把屏幕弄得全灰色，我也不懂就随便大叫，小明叫我
别吵，但我还叫着，小明一脚把我给踹到门外，我只好在街上走来走去，哎！”我叹了口
气说：“你也够可怜的，哦！我觉得你也叫得对……
</div>
</li>
</ul>
</div>
</div>
</body>
check the result
我知道你看这个是看不懂的，最好的学习方法就是自己实现，有什么不懂的再来这里对照哦。
在这里，我们用到了*选择器，用它把margin和padding清零，避免一些元素自带的margin和padding给我们带来困扰。而其他的，就是用div的嵌套就能搞定了，其实div布局，主要是搞清楚嵌套关系，搞清楚了嵌套关系，其他的就迎刃而解了。
再来看看图片页，其实与主页的技巧类似，要注意clear的用法，可用来清除浮动。但是图片页还有一个遮罩的效果，这个效果就要用到一些技巧了。首先是半透明的遮罩层，需要设置透明度，通过opacity来设置，然后是中间的大图，我们希望页面滚动时，大图始终出现在视野中，这就要用到position中非常重要，但是我们没讲的fixed，fixed就是指无论页面怎么滚动，它都不会随着页面滚动，就像固定在那里一样。图片和按钮的定位就是用top和left啦，那么怎么居中呢，可以先设置margin-left为50%，然后left设为-(width/2)px，最后一点就是遮罩层的高度，设为100%是不行的，因为当滚动的时候，遮罩会遮不全，这就要借助于javascript，document.body.scrollHeight就是body的全高，但是body要等页面加载完毕才能算出全高，所以要延迟100ms后再执行高度设定，也就出现了代码中的javascript。
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>pet show</title>
<style>
* {
margin : 0px;
padding : 0px;
}
body {
background-color : #B1ECFE;
}
.totalDiv {
width : 1000px;
margin : 10px auto;
}
.titleDiv {
width : 100%;
height : 100px;
background-color : #AEFFCF;
margin-top : 10px;
}
.imgDiv {
float : left;
}
.twoTitle {
float : left;
}
.bigTitle {
font-size : 45px;
color : #FF5400;
font-weight : bold;
margin-top : 8px;
margin-left : 28px;
}
.subTitle {
font-size : 20px;
color : #FF0000;
margin-top : 5px;
margin-left : 35px;
}
.menu {
float : left;
margin-left : 120px;
margin-top : 15px;
}
.menu li {
float : left;
margin-left : 50px;
list-style-type : none;
}
.menu a {
font-size : 60px;
text-decoration : none;
color : #FFC600;
}
.menu a:hover {
color : #6CDBFF;
}
.picDiv {
width : 100%;
background-color : #6DDBFF;
margin-top : 30px;
}
.picLi {
width : 950px;
background-color : #29CAFF;
list-style-type : none;
margin : 0px auto;
padding : 5px;
}
.picTitle {
color : #2B6BB2;
font-size : 40px;
}
.picLi ul {
width : 900px;
margin : 0px auto;
}
.picLi li {
list-style-type : none;
float : left;
margin : 25px;
}
.grayDiv {
position : absolute;
width : 100%;
height : 100%;
background-color : gray;
top : 0px;
left : 0px;
opacity : 0.5;
}
.wrapDiv {
position : fixed;
top : 100px;
left : -250px;
width ：100%;
margin-left : 50%;
}
.leftButton, .rightButton {
position : fixed;
top : 300px;
width ：100%;
margin-left : 50%;
}
.leftButton {
left : -320px;
}
.rightButton {
left : 270px;
}
</style>
</head>
<body>
<div class="totalDiv">
<div class="titleDiv">
<div class="imgDiv">
<img src="../../images/logo.jpg" width="150px" height="100px" />
</div>
<div class="twoTitle">
<div class="bigTitle">
宠恋秀
</div>
<div class="subTitle">
秀出你的宠物
</div>
</div>
<div class="menu">
<ul>
<li><a href="index.php">首页</a></li>
<li><a href="pic.php">图片</a></li>
<li><a href="blog.php">日记</a></li>
</ul>
</div>
</div>
<div class="picDiv">
<ul class="picUl">
<div style="height : 30px;"></div>
<li class="picLi">
<div class="picTitle">喵喵和狗狗</div>
<ul>
<li><img src="../../images/pics/pic1.jpg" /></li>
<li><img src="../../images/pics/pic2.jpg" /></li>
<li><img src="../../images/pics/pic3.jpg" /></li>
<li><img src="../../images/pics/pic4.jpg" /></li>
<li><img src="../../images/pics/pic5.jpg" /></li>
<li><img src="../../images/pics/pic6.jpg" /></li>
<li><img src="../../images/pics/pic7.jpg" /></li>
<li><img src="../../images/pics/pic8.jpg" /></li>
<li><img src="../../images/pics/pic9.jpg" /></li>
</ul>
<div style="clear : both;"></div>
</li>
<div style="height : 30px;"></div>
<li class="picLi">
<div class="picTitle">喵喵和狗狗</div>
<ul>
<li><img src="../../images/pics/pic1.jpg" /></li>
<li><img src="../../images/pics/pic2.jpg" /></li>
<li><img src="../../images/pics/pic3.jpg" /></li>
<li><img src="../../images/pics/pic4.jpg" /></li>
<li><img src="../../images/pics/pic5.jpg" /></li>
<li><img src="../../images/pics/pic6.jpg" /></li>
<li><img src="../../images/pics/pic7.jpg" /></li>
<li><img src="../../images/pics/pic8.jpg" /></li>
<li><img src="../../images/pics/pic9.jpg" /></li>
</ul>
<div style="clear : both;"></div>
</li>
<div style="height : 30px;"></div>
<li class="picLi">
<div class="picTitle">喵喵和狗狗</div>
<ul>
<li><img src="../../images/pics/pic1.jpg" /></li>
<li><img src="../../images/pics/pic2.jpg" /></li>
<li><img src="../../images/pics/pic3.jpg" /></li>
<li><img src="../../images/pics/pic4.jpg" /></li>
<li><img src="../../images/pics/pic5.jpg" /></li>
<li><img src="../../images/pics/pic6.jpg" /></li>
<li><img src="../../images/pics/pic7.jpg" /></li>
<li><img src="../../images/pics/pic8.jpg" /></li>
<li><img src="../../images/pics/pic9.jpg" /></li>
</ul>
<div style="clear : both;"></div>
</li>
<div style="height : 30px;"></div>
</ul>
</div>
</div>
<div class="grayDiv" id="grayDiv"></div>
<div class="wrapDiv"><img src="../../images/pics/pic1.jpg" width="500px" height="500px" /></div>
<div class="leftButton"><img src="../../images/left.png" /></div>
<div class="rightButton"><img src="../../images/right.png" /></div>
<script>
setTimeout(function() {
document.getElementById("grayDiv").style.height = document.body.scrollHeight + "px";
}, 100);
</script>
</body>
check the result
再来看看日记页，同样用div布局，没有什么特别：
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>pet show</title>
<style>
* {
margin : 0px;
padding : 0px;
}
body {
background-color : #B1ECFE;
}
.totalDiv {
width : 1000px;
margin : 10px auto;
}
.titleDiv {
width : 100%;
height : 100px;
background-color : #AEFFCF;
margin-top : 10px;
}
.imgDiv {
float : left;
}
.twoTitle {
float : left;
}
.bigTitle {
font-size : 45px;
color : #FF5400;
font-weight : bold;
margin-top : 8px;
margin-left : 28px;
}
.subTitle {
font-size : 20px;
color : #FF0000;
margin-top : 5px;
margin-left : 35px;
}
.menu {
float : left;
margin-left : 120px;
margin-top : 15px;
}
.menu li {
float : left;
margin-left : 50px;
list-style-type : none;
}
.menu a {
font-size : 60px;
text-decoration : none;
color : #FFC600;
}
.menu a:hover {
color : #6CDBFF;
}
.blog {
margin-top : 30px;
background-color : #6DDAFF;
}
.blog li {
list-style-type : none;
background-color : #29CAFF;
width : 950px;
margin : 0px auto;
padding : 15px;
}
.blogTitle {
margin-top : 10px;
color : #2B6BB2;
font-size : 50px;
}
</style>
</head>
<body>
<div class="totalDiv">
<div class="titleDiv">
<div class="imgDiv">
<img src="../../images/logo.jpg" width="150px" height="100px" />
</div>
<div class="twoTitle">
<div class="bigTitle">
宠恋秀
</div>
<div class="subTitle">
秀出你的宠物
</div>
</div>
<div class="menu">
<ul>
<li><a href="index.php">首页</a></li>
<li><a href="pic.php">图片</a></li>
<li><a href="blog.php">日记</a></li>
</ul>
</div>
</div>
<div class="blog">
<ul>
<div style="height : 30px;"></div>
<li>
<div class="blogTitle">狗狗的故事</div>
<div class="blogArticle">
有一天，我在路上遇到一只小狗。就用声问：“小汪，你怎么在这，你的主人呢？”“汪汪
，我被主人赶出来了，我的主人是小明。”小狗好像说。我好奇地继续又问：“那你主人
为什么把你赶出门呢？”小狗愁眉苦脸地回答道：“我跟小明看电视，我们看到公益广告，
那个汽车排气管排出烟雾全是灰色，把屏幕弄得全灰色，我也不懂就随便大叫，小明叫我
别吵，但我还叫着，小明一脚把我给踹到门外，我只好在街上走来走去，哎！”我叹了口
气说：“你也够可怜的，哦！我觉得你也叫得对……</div>
</li>
<div style="height : 30px;"></div>
<li>
<div class="blogTitle">狗狗的故事</div>
<div class="blogArticle">
有一天，我在路上遇到一只小狗。就用声问：“小汪，你怎么在这，你的主人呢？”“汪汪
，我被主人赶出来了，我的主人是小明。”小狗好像说。我好奇地继续又问：“那你主人
为什么把你赶出门呢？”小狗愁眉苦脸地回答道：“我跟小明看电视，我们看到公益广告，
那个汽车排气管排出烟雾全是灰色，把屏幕弄得全灰色，我也不懂就随便大叫，小明叫我
别吵，但我还叫着，小明一脚把我给踹到门外，我只好在街上走来走去，哎！”我叹了口
气说：“你也够可怜的，哦！我觉得你也叫得对……</div>
</li>
<div style="height : 30px;"></div>
<li>
<div class="blogTitle">狗狗的故事</div>
<div class="blogArticle">
有一天，我在路上遇到一只小狗。就用声问：“小汪，你怎么在这，你的主人呢？”“汪汪
，我被主人赶出来了，我的主人是小明。”小狗好像说。我好奇地继续又问：“那你主人
为什么把你赶出门呢？”小狗愁眉苦脸地回答道：“我跟小明看电视，我们看到公益广告，
那个汽车排气管排出烟雾全是灰色，把屏幕弄得全灰色，我也不懂就随便大叫，小明叫我
别吵，但我还叫着，小明一脚把我给踹到门外，我只好在街上走来走去，哎！”我叹了口
气说：“你也够可怜的，哦！我觉得你也叫得对……</div>
</li>
<div style="height : 30px;"></div>
<li>
<div class="blogTitle">狗狗的故事</div>
<div class="blogArticle">
有一天，我在路上遇到一只小狗。就用声问：“小汪，你怎么在这，你的主人呢？”“汪汪
，我被主人赶出来了，我的主人是小明。”小狗好像说。我好奇地继续又问：“那你主人
为什么把你赶出门呢？”小狗愁眉苦脸地回答道：“我跟小明看电视，我们看到公益广告，
那个汽车排气管排出烟雾全是灰色，把屏幕弄得全灰色，我也不懂就随便大叫，小明叫我
别吵，但我还叫着，小明一脚把我给踹到门外，我只好在街上走来走去，哎！”我叹了口
气说：“你也够可怜的，哦！我觉得你也叫得对……</div>
</li>
<div style="height : 30px;"></div>
<li>
<div class="blogTitle">狗狗的故事</div>
<div class="blogArticle">
有一天，我在路上遇到一只小狗。就用声问：“小汪，你怎么在这，你的主人呢？”“汪汪
，我被主人赶出来了，我的主人是小明。”小狗好像说。我好奇地继续又问：“那你主人
为什么把你赶出门呢？”小狗愁眉苦脸地回答道：“我跟小明看电视，我们看到公益广告，
那个汽车排气管排出烟雾全是灰色，把屏幕弄得全灰色，我也不懂就随便大叫，小明叫我
别吵，但我还叫着，小明一脚把我给踹到门外，我只好在街上走来走去，哎！”我叹了口
气说：“你也够可怜的，哦！我觉得你也叫得对……</div>
</li>
<div style="height : 30px;"></div>
</ul>
</div>
</div>
</body>
check the result
日记详情页，技巧类似，值得注意的就是p标签，也就是段落标签，首行缩进可以用text-indent来实现。
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>pet show</title>
<style>
* {
margin : 0px;
padding : 0px;
}
body {
background-color : #B1ECFE;
}
.totalDiv {
width : 1000px;
margin : 10px auto;
}
.titleDiv {
width : 100%;
height : 100px;
background-color : #AEFFCF;
margin-top : 10px;
}
.imgDiv {
float : left;
}
.twoTitle {
float : left;
}
.bigTitle {
font-size : 45px;
color : #FF5400;
font-weight : bold;
margin-top : 8px;
margin-left : 28px;
}
.subTitle {
font-size : 20px;
color : #FF0000;
margin-top : 5px;
margin-left : 35px;
}
.menu {
float : left;
margin-left : 120px;
margin-top : 15px;
}
.menu li {
float : left;
margin-left : 50px;
list-style-type : none;
}
.menu a {
font-size : 60px;
text-decoration : none;
color : #FFC600;
}
.menu a:hover {
color : #6CDBFF;
}
.blog {
background-color : #6DDBFF;
margin-top : 30px;
}
.blogTitle {
font-size : 50px;
color : #2B6BB2;
padding-top : 30px;
text-align : center;
}
.blogArticle {
margin-top : 30px;
}
.blogArticle p {
text-indent : 35px;
margin-top : 15px;
margin-bottom : 15px;
}
</style>
</head>
<body>
<div class="totalDiv">
<div class="titleDiv">
<div class="imgDiv">
<img src="../../images/logo.jpg" width="150px" height="100px" />
</div>
<div class="twoTitle">
<div class="bigTitle">
宠恋秀
</div>
<div class="subTitle">
秀出你的宠物
</div>
</div>
<div class="menu">
<ul>
<li><a href="index.php">首页</a></li>
<li><a href="pic.php">图片</a></li>
<li><a href="blog.php">日记</a></li>
</ul>
</div>
</div>
<div class="blog">
<div class="blogTitle">狗狗的故事</div>
<div class="blogArticle">
<p>有一天，刚放学我正在回家的路上走着，遇到了一只小狗……</p>
<p>
我看那只狗挺可爱的，毛绒绒的，毛是黄色的，看到它在流浪，觉得很可怜。就用声问：“小汪，
你怎么在这，你的主人呢？”“汪汪，我被主人赶出来了，我的主人是小明。”小狗好像说。我好
奇地继续又问：“那你主人为什么把你赶出门呢？”小狗愁眉苦脸地回答道：“我跟小明看电视，
我们看到公益广告，那个汽车排气管排出烟雾全是灰色，把屏幕弄得全灰色，我也不懂就随便
大叫，小明叫我别吵，但我还叫着，小明一脚把我给踹到门外，我只好在街上走来走去，哎！”
我叹了口气说：“你也够可怜的，哦！我觉得你也叫得对，哦！不对，你叫得非常非常之非常对
，你想一想，你看到车发灰烟，就说明那些开车的人没有重视保护环境的重要意义，是不对的，
而开车时车的尾部有个管子，是排出二氧化碳的，二氧化碳是破坏环境的一类。日本造那些核
电站，无非是想要他们国家强大，但当海啸，地震的降临破坏了核电站导致核泄漏，这样破坏
了环境，肯定会引来天灾！破坏了环境等于毁灭地球，世界谈什么和平强盛呢？还有那些大人
们乱开车，丢垃圾，乱吸烟……这都是不好的行为。”</p>
<p>
小狗听得津津有味说：“那你们小朋友呢？”我认真地说：“我们小朋友即不会破坏环境又会保
护环境，我们要提醒身边的每个人，叫他们保护环境，不要破坏环境。”小狗听了，很快回到
家告诉小明。</p>
<p>说了这么多我懂得了一个道理：人人都要保护环境，因为地球只有一个。</p>
</div>
<div style="height : 30px;"></div>
</div>
</div>
</body>
check the result
最后就是管理页面了，其他都是类似的，只有select与视觉稿不用，因为select的样式很难定制，一般select要自定义样式都是用插件或者自己用div配合javascript来实现，而且这里是后台系统，不展现给用户，所以这里暂时就用默认的select效果好了。
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>pet show</title>
<style>
* {
margin : 0px;
padding : 0px;
}
body {
background-color : #B1ECFE;
}
.totalDiv {
width : 1000px;
margin : 10px auto;
}
.titleDiv {
width : 100%;
height : 100px;
background-color : #AEFFCF;
margin-top : 10px;
}
.imgDiv {
float : left;
}
.twoTitle {
float : left;
}
.bigTitle {
font-size : 45px;
color : #FF5400;
font-weight : bold;
margin-top : 8px;
margin-left : 28px;
}
.subTitle {
font-size : 20px;
color : #FF0000;
margin-top : 5px;
margin-left : 35px;
}
.menu {
float : left;
margin-left : 120px;
margin-top : 15px;
}
.menu li {
float : left;
margin-left : 50px;
list-style-type : none;
}
.menu a {
font-size : 60px;
text-decoration : none;
color : #FFC600;
}
.menu a:hover {
color : #6CDBFF;
}
.bodyDiv {
width : 100%;
background-color : #6DDBFF;
padding-top : 10px;
padding-bottom : 10px;
}
.picDiv, .blogDiv {
width : 950px;
background-color : #29CAFF;
margin : 30px auto;
padding : 15px;
}
.selectDiv {
width : 950px;
background-color : #29CAFF;
margin : 10px auto;
padding : 15px;
}
.blogDiv {
text-align : center;
}
.picTitle {
color : #2B6BB2;
font-size : 40px;
}
.picUl li {
list-style-type : none;
float : left;
margin : 15px;
}
.bodyDiv select {
width : 200px;
height : 30px;
}
.blogDiv input[type="text"] {
width : 100%;
height : 30px;
font-size : 20px;
}
.blogDiv textarea {
margin-top : 10px;
width : 100%;
font-size : 20px;
}
.blogDiv button {
background-color : #4C42C7;
color : white;
width : 150px;
height : 50px;
font-size : 30px;
margin-top : 10px;
}
</style>
</head>
<body>
<div class="totalDiv">
<div class="titleDiv">
<div class="imgDiv">
<img src="../../images/logo.jpg" width="150px" height="100px" />
</div>
<div class="twoTitle">
<div class="bigTitle">
宠恋秀
</div>
<div class="subTitle">
秀出你的宠物
</div>
</div>
<div class="menu">
<ul>
<li><a href="index.php">首页</a></li>
<li><a href="pic.php">图片</a></li>
<li><a href="blog.php">日记</a></li>
</ul>
</div>
</div>
<div class="bodyDiv">
<div class="selectDiv">
<select>
<option>狗狗的故事</option>
<option>狗狗的故事</option>
<option>狗狗的故事</option>
</select>
</div>
<div class="picDiv">
<div class="picTitle">狗狗的故事</div>
<ul class="picUl">
<li><img src="../../images/pics/pic1.jpg" /></li>
<li><img src="../../images/pics/pic2.jpg" /></li>
<li><img src="../../images/pics/pic3.jpg" /></li>
<li><img src="../../images/pics/pic4.jpg" /></li>
<li><img src="../../images/pics/pic5.jpg" /></li>
<li><img src="../../images/pics/pic6.jpg" /></li>
<li><img src="../../images/pics/pic7.jpg" /></li>
<li><img src="../../images/pics/pic8.jpg" /></li>
<li><img src="../../images/pics/pic9.jpg" /></li>
<li><img src="../../images/add.jpg" /></li>
</ul>
<div style="clear : both;"></div>
</div>
<div class="blogDiv">
<form action="#" method="post">
<input type="text" name="title" placeholder="标题"/>
<textarea name="article" placeholder="正文" cols="100" rows="30"></textarea>
<button>提交</button>
</form>
</div>
</div>
</div>
</body>
check the result
这样，前端页面就全部完成了，其实使用的技术很简单，关键还是细心和耐心，前端编写可谓所见即所得，写完后刷新就能看到效果，所以还是很好做的。
本文的代码放在这里，欢迎大家下载！
如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点赞助
，不要超过100元哦！
，不要超过100元哦！
评论请先登录