博客页面布局案例

HTML源码:

[cce_html]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
<div class="main-wrapper">
	<header>
        <!-- 页头开始 -->
        <nav>
            <div class="logo"><a href="#">张小窝</a></div>
            <ul>
                <li><a href="#">链接1</a></li>
                <li><a href="">链接2</a></li>
                <li><a href="">链接3</a></li>
                <li><a href="">链接4</a></li>
            </ul>
        </nav>
        <div id="banner">
            <div class="inner">
                <h1>张小窝</h1>
                <p class="sub-heading">测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试</p>
                <button>了解我</button>
                <div class="more">更多</div>
            </div>
        </div>
    </header>
    <!-- 页头结束 -->
    <div class="content">
        <!-- 内容开始 -->
        <section class="green-section">
            <div class="wrapper">
                
                    <h2>一个标题</h2>
                    <div class="hr"></div>
                    <p class="sub-heading">测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试</p>
                    <div class="icon-group">
                        <span class="icon">item1</span>
                        <span class="icon">item2</span>
                        <span class="icon">item3</span>
                    </div>
                
            </div>
        </section>
        <section class="gray-section">
            <div class="article-preview">
                <div class="img-section">
                    <img src="img/pic01.jpg" alt="">
                </div>
                <div class="text-section">
                    <h2>又一个标题</h2>
                    <div class="sub-heading">我是副标题</div>
                    <p>aabbccddeeaabbccddeeaabbccddeeaabbccddeeaabbccddee</p>
                </div>
            </div>
            <div class="article-preview">
                
                <div class="text-section">
                    <h2>又一个标题</h2>
                    <div class="sub-heading">我是副标题</div>
                    <p>aabbccddeeaabbccddeeaabbccddeeaabbccddeeaabbccddee</p>
                </div>
                <div class="img-section">
                    <img src="img/pic02.jpg" alt="">
                </div>
            </div>
             <div class="article-preview">
                <div class="img-section">
                    <img src="img/pic03.jpg" alt="">
                </div>
                <div class="text-section">
                    <h2>又一个标题</h2>
                    <div class="sub-heading">我是副标题</div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat pariatur hic optio eius molestias illum fuga harum eos quisquam tempore. Deleniti labore asperiores nihil ipsam, in, accusantium! Nulla pariatur, hic?</p>
                </div>
            </div>
        </section>
        <section class="purple-section">
        	<div class="heading-wrapper">
        		<h2>又一个标题</h2>
        		<div class="hr"></div>
        		<div class="sub-heading">
        			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia eligendi fugit ipsam obcaecati voluptas, voluptate accusantium eius rem doloremque. Quam id, temporibus veniam voluptates fugiat tempora. Tempora, adipisci maxime aspernatur!
        		</div>
        	</div>
        	<div class="cord-group clearfix">
        		<div class="card">
        			<h3>标题三</h3>
        			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quas odit, exercitationem neque saepe praesentium ratione, facilis, consectetur ullam aliquam impedit obcaecati distinctio, inventore aperiam asperiores. Aperiam rerum deleniti natus.</p>
        		</div>
        		<div class="card">
        			<h3>标题三</h3>
        			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quas odit, exercitationem neque saepe praesentium ratione, facilis, consectetur ullam aliquam impedit obcaecati distinctio, inventore aperiam asperiores. Aperiam rerum deleniti natus.</p>
        		</div>
        		<div class="card">
        			<h3>标题三</h3>
        			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quas odit, exercitationem neque saepe praesentium ratione, facilis, consectetur ullam aliquam impedit obcaecati distinctio, inventore aperiam asperiores. Aperiam rerum deleniti natus.</p>
        		</div>
        		<div class="card">
        			<h3>标题三</h3>
        			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quas odit, exercitationem neque saepe praesentium ratione, facilis, consectetur ullam aliquam impedit obcaecati distinctio, inventore aperiam asperiores. Aperiam rerum deleniti natus.</p>
        		</div>
        		<div class="card">
        			<h3>标题三</h3>
        			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quas odit, exercitationem neque saepe praesentium ratione, facilis, consectetur ullam aliquam impedit obcaecati distinctio, inventore aperiam asperiores. Aperiam rerum deleniti natus.</p>
        		</div>
        		<div class="card">
        			<h3>标题三</h3>
        			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quas odit, exercitationem neque saepe praesentium ratione, facilis, consectetur ullam aliquam impedit obcaecati distinctio, inventore aperiam asperiores. Aperiam rerum deleniti natus.</p>
        		</div>

        	</div>
        </section>
    </div>
    <!-- 内容结束 -->
    <footer>
        <!-- 页脚开始 -->
        <ul class="share-group">
        	  <li>item1</li>
        	  <li>item2</li>
        	  <li>item3</li>
        	  <li>item4</li>
        	  <li>item5</li>
        </ul>
        <div class="copy">
        	&copy 王小窝 - 2010
        </div>
    </footer>
    <!-- 页脚结束 -->
</div>
    
</body>

</html>

[/cce_html]

css源码:

[cce]
nav {
    background: #ccc;
    height: 50px;
}

#banner {
    background: transparent;
    height: 700px;
}

nav ul {
    list-style: none;
    margin: 0;
    /*去除ul边距*/
    float: right;
}

nav .logo {
    float: left;
    margin-left: 20px;
}

nav ul li,
nav .logo {
    display: inline-block;
    /*行内块可以并列显示*/
    line-height: 50px;
    margin-right: 20px;
}

nav ul li a,
nav .logo a {
    line-height: 50px;
    text-decoration: none;
    /*清除a默认样式*/
    display: inline-block;
    /*为点击范围扩大把行定义为行内块*/
    height: inherit;
    /*继承父元素行高*/
}

#banner .inner {
    max-width: 300px;
    /*定义最大宽度*/
    text-align: center;
    /*文字居中*/
    margin: 0 auto;
    /*块居中*/
    position: relative;
    /*相对定位*/
    top: 160px;
    /*距离顶部160px*/
}

#banner .inner h1 {
    margin: 0;
}

button {
    border: none;
    /*去掉边框*/
    background: #333;
    color: #eee;
    padding: 10px;
    /*填充*/
}

#banner button {
    padding: 14px 40px;
}

#banner .inner .more {
    margin-top: 250px;
}

.sub-heading {
    line-height: 30px;
    margin: 30px 0;
    font-size: 18px;
}

.logo {
    font-size: 20px;
    font-weight: 700;
    /*字重*/
    letter-spacing: 1px;
    /*字间距*/
}

.logo a {
    color: #fff;
}

h2 {
    margin: 0;
    font-size: 30px;
}

.hr {
    width: 100%;
    height: 2px;
    margin: 20px auto;
}

.green-section {
    background: #089db0;
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

.green-section .hr {
    background: #078494;
    width: 60%
}

.green-section .icon-group .icon {
	display:inline-block;
	width: 80px;
	height:80px;
	background: #0d6f7c;
	transform:rotate(45deg);/*旋转45度*/
	margin:20px;
}
.icon-group {
	margin-top: 60px;
}
.wrapper {
    max-width: 1080px;
    margin: 0 auto;
}
.wrapper .sub-heading {
	max-width: 300px;
	display: inline-block;
}
.gray-section {
	background: #252F34;
	color: #fff;
	width: 100%;
}
.gray-section .img-section {
	width: 45%;
}
.img-section img {
	width: 100%;
}
.gray-section .text-section {
	width: 45%
}
.article-preview > div {
	float: left;/*下面所有div向左浮动*/
	font-size: 0;/*解决小缝隙*/
}
.article-preview {
	overflow: auto;/*清除父元素的浮动*/
}
.article-preview:nth-child(odd) {
	background-color:rgba(255,255,255,0.05); 
}/*根据子元素基数的不同,增加一个白色蒙版*/

.text-section {
	position: relative;
	top:68px;
	left:50px;
}
.text-section h2 {
	margin-bottom: 20px;
}
.text-section .sub-heading {
	font-size: 20px;
	margin-top: 0;
}
.text-section p {
	font-size: 18px;
	letter-spacing: 2px;
}
.text-section >* {
	max-width: 90%;
}
.purple-section {
	padding: 80px;
	background: #3f3965;
	color: #fff;
}
.purple-section .heading-wrapper {
	text-align: center;
}
.purple-section .hr {
	background: #373259;
	width 60%;
}
.card {
	float: left;
	width: 50%;
	padding: 50px;
	box-sizing:border-box;/*定义BOX*/
	border: 1px solid white;

}
.clearfix:after {
	content: '';
	display: block;
	clear: both;
}
.card p {
	font-size: 18px;
	letter-spacing: 1px;/*字间距*/
}
.card:first-child {
	background: rgba(0,0,0,0.04);/*第一个孩子*/
}
.card:nth-child(2) {
	background: rgba(0,0,0,0.08);/*第二个孩子*/
}
.card:nth-child(3) {
	background: rgba(0,0,0,0.12);/*第三个孩子*/
}
.card:nth-child(4) {
	background: rgba(0,0,0,0.16);/*第四个孩子*/

}
.card:nth-child(5) {
	background: rgba(0,0,0,0.20);/*第五个孩子*/
	
}
.card:nth-child(6) {
	background: rgba(0,0,0,0.24);/*第六个孩子*/
	
}
ul {
	margin:0;

}
footer {
	background: #333;
	color: #fff;
	min-height: 200px;
	text-align: center;
}
ul .share-group {
	display: block;/*定义成一个块*/
	width: 1080px;
	margin:0 auto;
}
.share-group li {
	display: inline-block;/*定义一个行内块可以让li变成并列显示并去掉默认格式*/
	padding: 10px;
}
.copy {
	padding-bottom: 20px;
}
.main-wrapper {
	background: #444 url(../img/banner.jpg);
	background-attachment: fixed;/*不让图片动*/
	background-repeat: no-repeat;/*不重复*/
	background-size: cover; /*伸展图片*/
	background-position: center center;/*居中*/
}
[/cce]

 

网页模块分析

1.页面整体分析

页面包含: head and body

body->page-warpper and menu

page-warpper 包含整页:

banner 头部

content 内容

footer 底部

2.页面组件分析:

头:

page-warpper->header

header->h1 一页中只有一个H1

header->nav 导航菜单

内容:

section1->banner

section1->banner->header

section1->banner->header->h2 小标题

section2->one

section3->two

尾部:

footer

 

 

 

 

 

 

 

 

网站开发步骤

一.创建常用目录和文件:

目录:lib 常用函数库:

image.func.php 图片函数库

mysql.func.php 数据库函数库

page.func.php 分页函数库

string.func.php 字串处理函数库

upload.func.php 文件上传函数库

common.func.php 公用函数库