【记录贴】html+css 超简单的布局

先上的超级简单的原型

然后是效果图

然后上代码

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="main.css">
 </head>
 <body>
    <div class="main-wrapper">
    <header>
        <nav>
        
        </nav>
        <div id="banner">
            <div class="inner">
                <h1>标题一</h1>
                <h4 class="sheading"></h4>
            </div>
        </div>
    </header>

        </section>
        <section class="gray-section">

            <div class="article-preview">
            <div class="img-section">
                    <img src="./1.jpg"></div>
                <div class="text-section">
                    <h2>标题一</h2>
                    <p>标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一</p>
                <a href="#">了解更多</a>
			   </div>

                </div>

            <div class="article-preview">

                <div class="text-section">
                    <h2>标题一</h2>
					<p>标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一</p>
                       
					 <p> 标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一</p>
                 </div>

                <div class="img-section">
                    <img src="./1.jpg">
                </div>

            </div>

            <div class="article-preview">
                <div class="img-section">
                    <img src="1.jpg" >
                </div>
                <div class="text-section">
                    <h2>233</h2>
                    <p>标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一</p>
					<p>标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一</p>
					<p>标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一标题一 </p>
					<a href="#">回到顶部</a>
				   </div>
				   
            </div>
        </section>

    </div>
    </body>
</html>

header
{
    background:url(1.jpg);
	background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
}



#banner{

    background: transparent;
    height: 700px;
}

#banner .inner
{
 background-color:rgba(255,255,255,0.3);
    max-width: 300px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: 160px;
}

#banner .inner h1
{
    margin: 0;
    color: #000;
}

.sub-heading
{
    line-height: 30px;
    margin: 30px 0;
    color: #fff;
}
.sheading
{   
    line-height: 30px;
    margin: 30px 0;
    color: #000;
}
h2
{
    font-size: 30px;
}

h3
{
    font-size: 24px;
}

p
{
    font-size: 18px;
    letter-spacing: 1px;
}
a
{
    font-size: 18px;
    letter-spacing: 1px;
}
.sub-heading
{
    font-size: 18px;
}

#main-btn
{
    padding: 14px 28px;
    font-size: 20px;
    letter-spacing: 4px;
    border-collapse: 6px;
    background: #18a;
}

.icon-group
{
    margin-top: 60px;
}

.wrapper
{
    max-width: 1080px;
    margin: 0 auto;
}

.gray-section
{
    background: #252F34;
    color: #fff;
}

.gray-section .img-section
{
    width: 45%;
    margin: 0;
}

.img-section img
{
    width: 100%
}

.gray-section .text-section
{
    width: 55%;
}

.article-preview > div
{
    float: left;
    font-size: 0;
}

.article-preview:nth-child(odd)
{
    background-color: rgba(255,255,255,0.05);
}

.article-preview:after
{
    content: '';
    display: block;
    clear: both;
}

.text-section
{
    position: relative;
    top: 68px;
    left: 50px;
}

.text-section h2
{
    margin-bottom: 20px;
}

.text-section .sub-heading
{
    font-size: 22px;
    margin-top: 0;
}

.text-section p
{
    font-size: 18px;
    letter-spacing: 1px;
}

.text-section > *{
    max-width: 90%;
}

.purple-section
{
    padding: 80px;
    background: #3F3965;
    color: #fff;
}

.main-wrapper
{
    background: #444 url(img/icon04.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

【记录贴】html+css 超简单的布局

猜你喜欢