前端第六波

最新推荐文章于 2024-06-20 00:58:51 发布

空巷挽清风

最新推荐文章于 2024-06-20 00:58:51 发布

阅读量140

点赞数

分类专栏： HTML CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/kong_xiang/article/details/90173830

版权

HTML 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

前端第六波

页面排版初体验

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面排版</title>
    <link rel="stylesheet" href="CSS/index.css" />
</head>
<body>
<!-- 头部导航栏开始 -->
    <div class="header">
        <div class="inner">
            <div class="logo">
                <a href="#"><img src="img/Add.png" /></a>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">导航栏选项</a></li>
                    <li><a href="#">导航栏选项</a></li>
                    <li><a href="#">导航栏选项</a></li>
                    <li><a href="#">导航栏选项</a></li>
                    <li><a href="#">导航栏选项</a></li>
                </ul>
            </div>
        </div>
    </div>
<!-- 头部导航栏结束 -->

<!-- 展示栏开始 -->
<div class="banner">
        
</div>
<!-- 展示栏结束 -->

<!-- 选项栏开始 -->
<div class="service">
    <div class="service-head">
        <h3> 标题</h3>
        <p>这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字这里是开头文字</p>
    </div>
    <div class="service-body">
        <lu>
            <li> <img src="img/2.png"> </li>
            <li> <img src="img/2.png"> </li>
            <li> <img src="img/2.png"> </li>
        </lu>
    </div>
</div>
<!-- 选项栏结束 -->

<!-- 结束栏 -->
<div class="end">
    <div class="end-head">
        <h3>结束</h3>
    </div>
    <div class="end-body">
        <p>这里是页面的结束这里是页面的结束这里是页面的结束这里是页面的结束这里是页面的结束这里是页面的结束这里是页面的结束这里这里是页面的结束这里是页面的结束这里是页面的结束这里是页面的结束这里是页面的结束这里是页面的结束这里是页面的结束这里</p>
    </div>
</div>
<!-- 结束栏 -->
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
body{                           
    background-color: #eee;             /*设置页面的主题颜色*/
    height: 3000px;                     /*设置页面长度*/
}
li{
    list-style: none;                   /*取消li的小点*/
}
/*header STAR*/
.header{                                
    height: 100px;                      /*设置头部导航栏的高度*/
    background-color: #fff;             /*设置导航栏的颜色，颜色与主题颜色应相似*/
}
.inner{
    height: 100px;                      /*高度与导航栏高度一致*/
    width: 1200px;                      /*对导航栏进行分块处理*/
    background-color: #fff;
    margin: 0 auto;                     /*控制导航栏块儿上下间距为零，左右充满，即：水平居中*/
    line-height: 100px;                 /*字体距顶部父块的距离*/
}
.logo{              /*放logo用*/
    height: 100px;
    width: 200px;
    /*background-color: pink;*/
    float: left;                        /*向左浮动*/
}
.nav{               /*放导航栏*/
    height: 100px;
    /*background-color: pink;*/
    float: right;                       /*向右浮动*/
}
.nav li{
    float: left;                        /*向左浮动*/
    margin: 0 30px;                     /*左右间隔30px*/
}
.nav li a{
    color: #333;                        /*设置字体颜色*/
    text-decoration: none;              /*取消下划线*/
}
.nav li a:hover{
    color: #2288f6;                     /*伪类 ：hover ，当鼠标经过a标签时的字体颜色*/
}
/*header END*/

/*banner STAR*/
.banner{
    height: 400px;
    background-color : pink;
}
/*banner END*/

/*service STAR*/
.service{
    height: 700px;
    width: 1200px;
    background-color: pink;
    margin: 50px auto;                  /*距离上方板块50px，水平居中*/
}
.service-head{
    height: 100px;
    width: 1100px;
    background-color: #eee;
    margin:25px auto 0;
    border-top: 2px solid #ccc;          /*设置顶部边框，宽度为2px，边框为实线 ，颜色为#ccc*/
    text-align: center;                  /*设置字体居中对齐*/
}
.service-head h3{
    height: 30px;
    width: 50px;
    background-color: #eee;
    margin: 0 auto;
    margin-top: -15px;
}
.service-head p{
    font-size:12px;
    color:#666;
    line-height:26px;
    text-align: center;
    width: 830px;
    margin: 0 auto;
}
.service-body{
    height: 550px;
    width: 1200px;
    background-color: yellow;
}
.service-body li{
    float: left;
    margin: 0 39px;
}
/*service END*/

/*end STAR*/
.end{
    height: 150px;
    width: 1200px;
    background-color: #eee;
    margin:0 auto;
    text-align: center;
}
.end-head{
    height: 30px;
    width: 1100px;
    background-color: #eee;
    margin:0 auto;
    border-top: 2px solid #ccc;
}
.end-head h3{
    height: 30px;
    width: 50px;
    background-color: #eee;
    margin: 0 auto;
    margin-top:-15px;
}
.end-body p{
    font-size:14px;
    color:#aac;

}
/*end END*/

空巷挽清风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端第六波

前端第六波页面排版初体验<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>页面排版</title> <link rel="stylesheet" href="CSS/index.css" /...
复制链接

扫一扫