html css静态页面基础背景图练习

最新推荐文章于 2022-10-28 16:01:20 发布

入门橙虚圆

最新推荐文章于 2022-10-28 16:01:20 发布

阅读量419

点赞数 3

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_56682205/article/details/125984750

版权

效果图

分为三个部分做

第一个部分是头部，也就是header和logo部分，header需要设置浮动，第三个盒子需要设置margin-right，给logo空出位置，然后是水平居中，logo用绝对定位，隐藏文字用display:none。

.header {
    width: 1198px;
    height: 73px;
    line-height: 73px;
    color: #f8b700;
    margin: 0 auto;
    margin-top: 45px;
    background: url("../img/bg_nav.jpg") no-repeat 0 0/100%;
    position: relative;
    border-left: none;
    border-right: none;
}

.header nav a {
    float: left;
    width: 161px;
    height: 73px;
    border: 1px solid #3f2a22;
    text-align: center;
    box-sizing: border-box;
    border-top: none;
    border-bottom: none;
}

.header nav a:nth-child(3) {
    margin-right: 232px;
}

.header .logo {
    width: 238px;
    height: 118px;
    position: absolute;
    left: 7px;
    right: 0;
    top: -37px;
    margin: auto;
    background: url("../img/logo.png") no-repeat;
    border: none;
}

.header .logo h1 {
    display: none;
}

第二个部分是main部分，设置两个按钮，可以设置成行块元素display:inline-block,第二个按钮需要设置background-position使图片在盒子内。

.main {
    margin-top: 353px;
    text-align: center;
}

.main a {
    display: inline-block;
    width: 323px;
    height: 105px;
    background: url("../img/btns.png") no-repeat;
}

.main a span {
    display: none;
}

.main .download {
    background-position: -323px 0;
}

第三个是广告图片。img1分为四个一模一样的盒子，只需要改些数据，一个盒子分为title和img两个小部分，只要使用了浮动，最好设置一个clearfix防止坍塌。

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

.img1 {
    width: 1220px;
    margin: 50px auto;
}

.img1 .item {
    float: left;
    width: 290px;
    height: 195px;
    border: 1px solid #3f2a22;
    margin-left: 13px;
}

.img1 .item .title {
    width: 290px;
    height: 50px;
    background: #211510;
    color: #f8b700;
    line-height: 50px;
    text-align: center;
}

.img1 .item .tu img {
    width: 290px;
    height: 150px;
}

index.html的代码内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header class="header">
        <nav>
            <a href="">进入官网</a>
            <a href="">账号注册</a>
            <a href="">充值管理</a>
            <a href="">游戏下载</a>
            <a href="">客服中心</a>
            <a href="">官方论坛</a>
            <a class="logo">
                <h1>魔兽世界</h1>
            </a>
        </nav>
    </header>
    <div class="main">
        <a href="" class="detail">
            <span>了解详情</span>
        </a>
        <a href="" class="download">
            <span>客户端下载</span>
        </a>
    </div>
    <div class="img1 clearfix">
        <div class="item">
            <div class="title">
                <h2>
                    <a href="">点卡兑换现已开启</a>
                </h2>
            </div>
            <div class="tu">
                <img src="./img/1.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="title">
                <h2>
                    <a href="">直升110级现已开启</a>
                </h2>
            </div>
            <div class="tu">
                <img src="./img/2.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="title">
                <h2>
                    <a href="">客户端下载</a>
                </h2>
            </div>
            <div class="tu">
                <img src="./img/3.jpg" alt="">
            </div>
        </div>
        <div class="item">
            <div class="title">
                <h2>
                    <a href="">免费注册</a>
                </h2>
            </div>
            <div class="tu">
                <img src="./img/4.jpg" alt="">
            </div>
        </div>
    </div>
</body>

</html>

最好设置重置代码reset.css

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote::before,
blockquote::after,
q:before,
q::after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

修饰页面index.html

body {
    background: url("../img/bg.jpg") no-repeat 0 0/100%;
}

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

.header {
    width: 1198px;
    height: 73px;
    line-height: 73px;
    color: #f8b700;
    margin: 0 auto;
    margin-top: 45px;
    background: url("../img/bg_nav.jpg") no-repeat 0 0/100%;
    position: relative;
    border-left: none;
    border-right: none;
}

.header nav a {
    float: left;
    width: 161px;
    height: 73px;
    border: 1px solid #3f2a22;
    text-align: center;
    box-sizing: border-box;
    border-top: none;
    border-bottom: none;
}

.header nav a:nth-child(3) {
    margin-right: 232px;
}

.header .logo {
    width: 238px;
    height: 118px;
    position: absolute;
    left: 7px;
    right: 0;
    top: -37px;
    margin: auto;
    background: url("../img/logo.png") no-repeat;
    border: none;
}

.header .logo h1 {
    display: none;
}

.main {
    margin-top: 353px;
    text-align: center;
}

.main a {
    display: inline-block;
    width: 323px;
    height: 105px;
    background: url("../img/btns.png") no-repeat;
}

.main a span {
    display: none;
}

.main .download {
    background-position: -323px 0;
}

.img1 {
    width: 1220px;
    margin: 50px auto;
}

.img1 .item {
    float: left;
    width: 290px;
    height: 195px;
    border: 1px solid #3f2a22;
    margin-left: 13px;
}

.img1 .item .title {
    width: 290px;
    height: 50px;
    background: #211510;
    color: #f8b700;
    line-height: 50px;
    text-align: center;
}

.img1 .item .tu img {
    width: 290px;
    height: 150px;
}

主要练习的是定位以及css样式的使用