用HTML做一个简单漂亮的页面_漂亮的head html-CSDN博客

本文链接：https://blog.csdn.net/L666Q/article/details/95230612

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="common.css"/>
    <style>
    .main{
        width: 1300px;
        height: 890px;
        margin-left: 160px;
        margin-right: 30px;
        margin: 0 auto;
        background:  url("img/007.jpg") no-repeat 600px bottom;
    }
    .nav{
        margin-top: 20px;
        margin-bottom: 13px;
    }
    li{
        float: left;
        margin-left: 12px;
    }
    a{
        width: 90px;
        height: 45px;
        display: block;
    }
    .a1{
        background: url("img/009.gif") no-repeat;
    }
    .a2{
        background: url("img/010.gif") no-repeat;
    }
    .a3{
        background: url("img/011.gif") no-repeat;
    }
    .a4{
        background: url("img/012.gif") no-repeat;   
    }
    .a1:hover{
        background: url("img/018.gif") no-repeat;
    }
    .a2:hover{
        background: url("img/019.gif") no-repeat;
    }
    .a3:hover{
        background: url("img/020.gif") no-repeat;
    }
    .a4:hover{
        background: url("img/021.gif") no-repeat;
    }
    section{
        width: 675px;
        line-height: 26px;
    }
    section p{
        font-size: 16px;
    }
    footer{
        height: 218px;
        background: url("img/013.jpg") no-repeat;
        padding-left: 20px;
        padding-top: 40px;
        margin-top: 20px;
    }
    footer img{
        display: block;
        width: 90px;
        height: 90px;
        border: 3px #83a6a8 solid;
        float: left;
        margin-top: 12px;
        margin-left: 18px;
    }
    </style>
</head>
<body>
    <div class="main clearfix">
        <div class="left">
            <header>
                <img src="img\008.jpg" alt="">
                <ul class="nav clearfix">
                    <li><a href="#" class="a1"></a></li>
                    <li><a href="#" class="a2"></a></li>
                    <li><a href="#" class="a3"></a></li>
                    <li><a href="#" class="a4"></a></li>
                </ul>
            </header>
            <section>
                <h5>爆笑网文——很搞笑哦！</h5>
                <p>酒桌上，领导醉意微微，拿起酒杯，说：
                   20多岁的男人，就像啤酒，生活节奏快！
                   30多岁的男人，就像红酒，生活讲究品位！
                   40多岁的男人，像我，就像白酒，而且还是陈酿，一滴就能把你醉倒！
                   美女小王也有点醉意，说了一句让人浮想联翩的话：你这岁数，能滴出一滴就不错了！
                   酒桌上，领导醉意微微，拿起酒杯，说：
                   20多岁的男人，就像啤酒，生活节奏快！
                   30多岁的男人，就像红酒，生活讲究品位！
                   40多岁的男人，像我，就像白酒，而且还是陈酿，一滴就能把你醉倒！
                   美女小王也有点醉意，说了一句让人浮想联翩的话：你这岁数，能滴出一滴就不错了！
                   酒桌上，领导醉意微微，拿起酒杯，说：
                   20多岁的男人，就像啤酒，生活节奏快！
                   30多岁的男人，就像红酒，生活讲究品位！
                   40多岁的男人，像我，就像白酒，而且还是陈酿，一滴就能把你醉倒！
                   美女小王也有点醉意，说了一句让人浮想联翩的话：你这岁数，能滴出一滴就不错了！
                </p>
                <h5>个人随笔</h5>
                <p>这是今年4月份的新茶，到现在也才三个多月，喝起来肯定香了。可是这茶在我喝来，已经    没有多大的香气了，毕竟已经喝了两年了，喝不出以前的香气了。这是今年4月份的新茶，    到现在也才三个多月这是今年4月份的新茶，到现在也才三个多月这是。</p>
            </section>
            <footer class="clearfix">
                <img src="img\014.jpg" alt="">
                <img src="img\015.jpg" alt="">
                <img src="img\016.jpg" alt="">
                <img src="img\017.jpg" alt="">
            </footer>
        </div>
    </div>
</body>
</html>

CSS部分（用来初始化浏览器）

@charset "utf-8";
/* CSS Document */
*{
	box-sizing:border-box;
	color:#000;
}
body{
	font-size:14px;
	font-family:Arial,Verdana,Tahoma,"微软雅黑","黑体";
	line-height:1.2em;
	background:#fff;
	margin:0;
	overflow-x:hidden;
}
p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,form,table{
	margin:0;
	padding:0;
}
img{
	vertical-align:middle;
}
li{
	list-style:none;
}
i,em{
	font-style:normal;
}
a{
	text-decoration:none; 
	color:#000000;
}
a:link{
	text-decoration:none; 
	color:#000000;
}
a:visited{
	text-decoration:none; 
	color:#000000;
}
a:hover{
	text-decoration:none; 
	color:#000000;
}
a:active{
	text-decoration:none; 
	color:#000000;
}
.clearfix:after{
	display:block;
	content:"";
	clear:both;
}
.clearfix{
	*zoom:1;
}

结果展示：