初学HTML+CSS练习搭建个人博客笔记

前言
工作需求初学html+css的使用，在网上看视频学着写了一个个人博客
这里写图片描述

在这边只是做一下自己的学习笔记记录，如果对你有帮助，你就稍微看看，如果没有请忽略！

下面上html代码：

<!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>
            <!-- <li class="logo"><a href="#">黄墨一</a></li>
            <ul>
                <li><a href="#" class="active">首页</a></li>
                <li><a href="#">精品博客</a></li>
                <li><a href="#">微博</a></li>
                <li><a href="#">留言</a></li>
            </ul> -->
        </nav>
        <div id="banner">
            <div class="inner">
                <h1>黄墨一</h1>
                <p class="sub-heading">围观其实也是一种态度，你觉得呢？</p>
                 <button class="main-btn">了解我</button>
                 <!-- <div class="more">
                    更多
                 </div> -->
            </div>
        </div>
    </header>

    <div class="content"><!--内容开始-->
        <section class="green-section">
            <div class="wrapper">
                <div>
                    <h2>一个标题</h2>
                    <div class="hr"></div>
                    <p class="sub-heading">lorem ipsum dolor sit amet, 
                    consectetur adipisicing elit.</p>
                </div>
                <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/icon1.png" alt=""></div>
                <div class="text-section">
                    <h2>又一个标题</h2>
                    <div class="sub-heading">我是副标题你好</div>
                    <p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
                </div>

                </div>

            <div class="article-preview">

                <div class="text-section">
                    <h2>又一个标题</h2>
                    <div class="sub-heading">我是副标题你好</div>
                    <p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
                </div>

                <div class="img-section">
                    <img src="img/icon2.png" alt="">
                </div>

            </div>

            <div class="article-preview">
                <div class="img-section">
                    <img src="img/icon3.png" alt="">
                </div>
                <div class="text-section">
                    <h2>又一个标题</h2>
                    <div class="sub-heading">我是副标题你好</div>
                    <p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
                </div>
            </div>
        </section>

        <section class="purple-section">
        <div class="wrapper">
            <div class="heading-wrspper">
                <h2>又是一个标题</h2>
                <div class="hr"></div>
                <div class="sub-heading">
                    Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.
                </div>
            </div>
            <div class="card-group
            clearfix">
                <div class="card">
                    <h3>标题三</h3>
                    <p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
                </div>
                <div class="card">
                    <h3>标题三</h3>
                    <p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
                </div>
            </div>

            <div class="card-group
            clearfix">
                <div class="card">
                    <h3>标题三</h3>
                    <p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
                </div>
                <div class="card">
                    <h3>标题三</h3>
                    <p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
                </div>
            </div>

            <div class="card-group
            clearfix">
                <div class="card">
                    <h3>标题三</h3>
                    <p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
                </div>
                <div class="card">
                    <h3>标题三</h3>
                    <p>Formally established in 1946, the aim is to promote cooperation among countries through education, science and culture, and contribute to world peace and security. According to the introduction, UNESCO has 195 Member States and 58 executive board members.</p>
                </div>
            </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 黄墨一-2017
        </div>
    </footer><!--页脚结束-->
    </div>
    </body>
</html>

这里写图片描述
然后就是对应css代码：

.clearfix:after
{
    content: '';
    display: block;
    clear: both;
}

ul
{
    margin: 0;
}

header
{
    background: rgba(0,0,0,0.4);
}


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

nav ul{
    list-style: none;
    margin: 0;
    float: right;
}

nav ul li, nav .logo
{
    display: inline-block;
    line-height: 50px;
    margin: 5px;
}

nav ul li a{
    line-height: 50px;
    text-decoration: none;
    display: inline-block;
    height: inherit;
    color: #fff;
}

nav ul li.logo{
    float: left;
    padding: 10px;
}

#banner .inner
{
    max-width: 300px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: 160px;
}

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

button
{
    border: none;
    background: #089DB0;
    color: #eee;
}

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

#banner .inner .more
{
    margin-top: 280px;
    color: #fff;
}

.sub-heading
{
    line-height: 30px;
    margin: 30px 0;
    color: #fff;
}

.logo
{
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}

.logo a
{
    color: #fff;
}

h2
{
    font-size: 30px;
}

h3
{
    font-size: 24px;
}

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

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

.sub-heading
{
    font-size: 18px;
}

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

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

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

.green-section .icon-group .icon
{
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 1px solid  #0D6F7C;
    transform: rotate(45deg);
    margin: 30px;
}

.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;
}

.purple-section .heading-wrapper
{
    text-align: center;
}

.purple-section .hr
{
    background: #373259;
    width: 100%;
}

.card
{
    float: left;
    width: 50%;
    min-height: 300px;
    padding: 50px;
    -webkit-box-sizing:border-box;
    -mon-box-sizing:border-box;
    box-sizing:border-box;
    /*border: 1px solid white;*/
}

.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);
}


footer
{
    background: #333;
    color: #fff;
    text-align: center;
    min-height: 200px

}

ul.share-group
{
    display: block;
    width: 1080px;
    margin: 0 auto;
    padding: 50px;
}

.share-group li
{
    display: inline-block;
    padding: 10px;
}

.copy
{
    padding-bottom: 30px;
}

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

这里写图片描述

初学HTML+CSS练习搭建个人博客笔记

猜你喜欢