CSS布局

最新推荐文章于 2024-11-21 19:20:42 发布

原创最新推荐文章于 2024-11-21 19:20:42 发布 · 330 阅读

3 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

3 篇文章

订阅专栏

默认情况下，所有的网页标签都在标准流布局中

从上到下，从左到右

脱离标准流的方法有

float属性
position属性和left、right、top、bottom属性

值	描述
absolute	生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过“left”，“top”，“right”以及“bottom”属性规定
fixed	生成绝对的定位元素，相对于浏览器窗口进行定位。元素的位置通过“left”，“top”，“right”以及“bottom”属性规定
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left：20”会向元素的LEFT位置添加20像素
static	默认值。没有定位，元素出现在正常的流中
inherit	规定应该从父元素继承position属性的值

再次呈现修改过后的页面代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" >
    <title>百度一下，你就知道</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="content">
        <!--LOGO-->
        <div class="logo">
            <img src="image/bd_logo1.png">
        </div>
        <!--导航-->
        <div class="nav">
            <ul>
            <li><a href="#">新闻</a></li>
            <li><a href="#" class="active">网页</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>
            <li><a href="#">地图</a></li>
            <li><a href="#">百科</a></li>
            <li><a href="#">文库</a></li>
            <li><a href="#">更多>></a></li>
            </ul>
        </div>
        <!--搜索框-->
        <div class="search-container">
            <div class="search">
                <input>
                <button>百度一下</button>
            </div>
        </div>
    </div>
</body>
</html>

下面是样式配置文件

body{
    background-image:url("../image/bg.jpg");
    background-size: 100% 750px;
}

.content{
    width: 700px;
    margin:50px auto 0px;
}
.content .logo{
    text-align: center;
}

.content .logo img{
    width:270px;
    height:129px;
}
.content .nav{
    text-align: center;
}

.content .nav ul{
    list-style: none; /*去除左边的圆点*/
    display:inline-block;
    padding-left: 0px;
}
.content .nav ul li{
    float:left;
    margin-left:5px;
    margin-right:5px;
}

.content .nav ul li a{
    color:white;
    font-size:16px;
}

.content .nav ul li a.active{
    text-decoration :none; /*去除文件底部的下划线*/
    color:blue;
}

.content .search-container{
    text-align:center;
}

.content .search-container .search{
    clear：both;
    height:40px;
    display:inline-block;
}

.content .search-container .search input{
    float:left;
    width:500px;
    height:100%;
    font-size:17px;
    padding-left: 10px;
    float:left;
    padding-top:0px;
    padding-buttom:0px;
    border:0px;
}

.content .search-container .search input:focus{
    border:0px;/*去除文本框蓝色边框*/
}

.content .search-container .search button{
    float:left;
    width: 80px;
    height: 100%;
    background-color: #3388FF;
    color: white;
    font-size: 15px;
    border:0px;
    float:left;
    padding-left:10px;
    padding-right:10px;
}

.content .search-container .search button:hover{
    cursor:pointer; /*鼠标的光标变为手指*/
}

/* 非块级元素水平居中：设置父标签的text-align:center;*/
/* 块级元素居中，设置自己的margin；0px auto;*/