HTML 개발 블로그의 홈페이지 디자인 (2)
테마 디자인
먼저 홈페이지 사진을 소개해주세요
<img src="/upload/course/000/000/004/581709cd445a4195.jpg"width="100%"height="300px">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客首页</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<style>
body{
background-color: #F0F0F0;
}
*{
border: 0px;
padding: 0px;
margin: 0px;
font-size: 14px;
}
a:hover{color:red;text-decoration:none;}
#top{
width: 100%;
height: 90px;
background-color: white;
border-bottom: 1px solid #bbbbbb;
}
#menu{
width: 1000px;
overflow: hidden;
margin: 0 auto;
}
#menu img{
height: 90px;
}
#menu ul{
list-style-type: none;
}
#menu ul li{
float: left;
height: 90px;
line-height: 90px;
margin-right: 50px;
}
#menu ul li a{
color: black;text-decoration: none;
display: inline-block;
}
#menu ul li a:hover{color: #65b5ff;text-decoration: none}
#bottom{
width:100%;
background-color:#323333;
height:300px;
margin-top:70px;
}
#bottom-content{
width:1000px;
overflow:hidden;
margin:0 auto;
color:white;
height:280px;
}
#content-left{
width:460px;
float:left;
height:280px;
}
#bottom-content p{
margin-top:10px;
}
#content-right{
width:460px;
float:right;
height:280px;
text-align: center;
margin-top: 40px;
}
</style>
<body>
<div id="top">
<div id="menu">
<ul>
<li><img src=/upload/course/000/000/004/58171021ac1f3460.png></li>
<li><a href="index.html"> 首页</a></li>
<li><a href="list.html">科技资讯</a></li>
<li><a href="list.html">心情随笔</a></li>
<li><a href="list.html">资源收藏</a></li>
<li><a href="list.html">图文图片</a></li>
<li><a href="list.html">留言板</a></li>
<li class="mi" ><a href="login.html">登陆</a>/<a href="reg.html">注册</a></li>
</ul>
</div>
</div>
<img src="/upload/course/000/000/004/581709cd445a4195.jpg"width="100%"height="300px">
<div id="bottom">
<div id="bottom-content">
<div id="content-left">
<p><img src="/upload/course/000/000/004/58170ff175fc3142.jpg" height="150px" height="150px"></p>
<p> 网站位置 | 关于我们 | 意见反馈 |</p>
</div>
<div id="content-right">
<p>友情链接</p>
<p>PHP中文网 | 小猪CMS</p>
<p>公司网址：php.cn</p>
</div>
</div>
</div>
</body>
</html>효과는 그림과 같습니다
사진 내에서 스타일 유형을 정의하세요.
메인 div 생성 및 블로그 ID 태그 정의
<div id="blog"> <ul> <li> <div class="blog-left"> <p ><a href="" class="title">测试文章</a></p> <p style="margin-top: 20px">内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示</p> <p style="margin-top: 90px"><img src="/upload/course/000/000/004/58170b919bc0d569.png" >测试<img src="/upload/course/000/000/004/58170ba6daea4279.png" style="margin-left: 20px">2016/10/31</p> </div> <div class="blog-right"><img src="/upload/course/000/000/004/58170bc487acc779.jpg"></div> </li>
CSS 스타일을 제어합니다
#blog{
width: 1000px;
overflow: hidden;
margin: 0 auto;
margin-top: 20px;
}
#blog ul{
list-style-type: none;
}
#blog ul li{
background-color: white;
padding: 20px;
width: 100%;
overflow: hidden;
margin-top: 15px;
}
.blog-left{
float: left;
width: 680px;
overflow: hidden;
}
.blog-right{
float: left;
margin-left: 10px;
width: 280px;
overflow: hidden;
}
.blog-right img{
width: 280px;
height: 200px;
}
.title{
text-decoration:none;
font-size: 26px;
}
.blog-left p{
color: gray;
}
.blog-left img{
width: 20px;
margin-right: 10px;
vertical-align: middle;
}하단에 페이징 바 추가
<div class="page"> <a href="#">首页</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">...</a><a href="#">尾页</a> </div>
페이지 페이징 바에서의 작업
.page{
height: 40px;
margin-top: 10px;
text-align: center;
padding-top: 20px;
}
.page a{
border: 1px solid #71b0bb;
text-decoration: none;
margin: 5px;
padding: 5px 10px;
}
.page a:link,.page a:visited{
color: #000000;
}
.page a:hover,.page a:active{
color: #FFF;
background-color: #bbac5c;
}효과는 다음과 같습니다.
![프론트엔드 프로젝트 - Shangyou [HTML/CSS/JS 기술 종합실습]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![제로 기반 프론트엔드 과정 [Vue 고급 학습 및 실무 적용]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![웹 프론트엔드 튜토리얼 [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost 실무 응용 [api, 인터페이스, 자동화 테스트, 모의]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
