CSS---页面布局

最新推荐文章于 2023-03-08 15:18:32 发布

maidu_xbd

最新推荐文章于 2023-03-08 15:18:32 发布

阅读量148

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/maidu_xbd/article/details/96507236

版权

CSS 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

页面布局思想：先大后小，先整体后细节。程序虽然简单，却是希望自己养成一个良好的代码编写习惯和思路。

以百度布局为例(尾部icon图标暂时没加)：划分为三个大块（1）header（2）section（3）footer

分完大块后，再完善各块内容

样式能少写则少写，在样式顶部书写公共样式

（1）头部

：last-child序号选择器

（2）搜索框

（3）尾部

最后，附上完整代码；

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>百度一下, 你就知道</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/baidu.css">
</head>

<body>
    <!-- 1.头部 -->
    <header>
        <div class="header-nav">
            <a href="">新闻</a>
            <a href="">hao123</a>
            <a href="">地图</a>
            <a href="">视频</a>
            <a href="">贴吧</a>
            <a href="">学术</a>
            <a href="">登录</a>
            <a href="">设置</a>
            <a href="">更多产品</a>
        </div>
    </header>
    <!-- 2.搜索框 -->
    <section class="center">
        <div class="search-logo">
            <img src="images/bd_logo.png" alt="">
        </div>
        <div class="search-input">
            <form action="#">
                <input type="text" name="">
                <input type="button" value="百度一下" name="">
            </form>
        </div>
    </section>
    <!-- 3.尾部开始 -->
    <footer class="center">
        <div class="app">
            <img src="images/app.png" alt="">
            <p class="app-title">下载百度APP</p>
            <p class="app-subtitle">有事搜一搜 没事看一看</p>
        </div>
        <div class="list">
            <div class="list-1">
                <a href="">把百度设为主页</a>
                <a href="">关于百度</a>
                <a href="">About Baidu</a>
                <a href="">百度推广</a>
            </div>
            <div>
                <span>©2019&nbsp;Baidu&nbsp;</span>
                <a href="">使用百度前必读</a>
                <a href="">意见反馈</a>
                <span>&nbsp;京ICP证030173号&nbsp;</span>
                <a href="">京公网安备11000002000001号</a>
            </div>
        </div>
        </div>
    </footer>
</body>

</html>

css

/*公共样式*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.center {
    width: 534px;
    text-align: center;

}

/***********头部开始**************/
.header-nav {
    z-index: 2;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    margin: 19px 0 5px;
    padding: 0 15px 0 0;
}

.header-nav a {
    float: left;
    color: #333;
    font-weight: 700;
    line-height: 24px;
    margin-left: 20px;
    font-size: 13px;
    text-decoration: underline;
}

.header-nav a:hover {
    color: #00c;
}

.header-nav a:last-child {
    background: #38f;
    width: 60px;
    height: 23px;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

/***********头部结束**************/


/***********搜索框结束**************/
section {

    /* height: 200px;*/
    /*   background: red;*/
    margin: 80px auto;
}

.search-logo img {
    width: 220px;
    margin-bottom: 30px;
}

.search-input form {
    width: 100%;
    height: 40px;
}

/*序号选择器:first-child，:last-child*/
.search-input input:first-child {
    width: 420px;
    height: 40px;
    outline: none;
    border: 1px solid #e0e0e0;
    padding-left: 8px;
    float: left;

}

.search-input input:first-child:focus {
    border-color: #398bfb;

}

.search-input input:last-child {
    width: 100px;
    height: 40px;
    border: none;
    float: left;
    color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
    background: #3385ff;
    /*去除外边框*/
    outline: none;

}

/***********搜索框结束*************/


/***********尾部开始*************/
footer {
    width: 100%;
    text-align: center;
    margin: 0 auto;
    position: relative;
}

.app-title {
    margin: 0px;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 3px;
}

.app-subtitle {
    margin: 0px;
    color: #999;
    font-size: 14px;
    line-height: 14px;
    font-weight: 300;
}

.list {
    margin-top: 50px;
    /* height: 90px;*/
    width: 100%;
    color: #999;
    /* background: blue;*/
    font-size: 10px;
}

.list a {
    color: #999;
    padding: 10px 5px;
}

.list-1 {
    margin-bottom: 10px;
}

/***********尾部结束*************/

maidu_xbd

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS---页面布局

页面布局思想：先大后小，先整体后细节。程序虽然简单，却是希望自己养成一个良好的代码编写习惯和思路。以百度布局为例(尾部icon图标暂时没加)：划分为三个大块（1）header（2）section（3）footer分完大块后，再完善各块内容样式能少写则少写，在样式顶部书写公共样式（1）头部：last-child序号选择器（2）搜索框...
复制链接

扫一扫