HTML入门02-Demo

最新推荐文章于 2023-05-18 19:41:28 发布

piziliul

最新推荐文章于 2023-05-18 19:41:28 发布

阅读量647

点赞数

分类专栏： HTML5 文章标签： html css 布局 android

本文链接：https://blog.csdn.net/piziliul/article/details/77937780

版权

HTML5 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

CSS的布局
1. 默认情况下,所有的网页标签都在标准流布局中,也就是说布局原则是从上至下,从左至右.\
2. 脱离标准流的方法有以下两种:
  1. float属性:让指定的标签浮动到父标签的左边-left或者右边-right
  2. position属性: left、right、top、bottom 属性值配合使用.

Float:浮动属性:

float属性可以指定子标签浮动到父标签的左边或右边
float的常用属性值有:left:脱离标准流，浮动在父标签的最左边,right:脱离标准流，浮动在父标签的最右边

注意点:所有的标签一旦脱离标准流，标签的类型就会自动变成行内-块级标签（行内-块级：同一行内可以存在多个标签，并可以设计标签的宽和高）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /* <!--浮点定位-->会自动的把标签的类型转换成行-块级标签-->*/
        #main{
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        /*定位在父标签的左边,同时类型自动变为行内-块级标签*/
        .test1{
            background-color: red;
            float: left;
        }
        .test2{
            background-color: green;
        }
        .test3{
            background-color: blue;
            float: right;
        }
        .test4{
            background-color: aquamarine;
            float: right;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="test1">定位1</div>
        <div class="test2">
            定位2
            <div class="test4">定位4</div>
        </div>
        <div class="test3">定位3</div>
    </div>
</body>
</html>

Position:定位属性:

使用方法:在子标签指定绝对布局（absolute）在父标签指定相对布局（relative）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Position</title>
    <style>
        <!--去掉所有的盒子模型的内外边距-->
        *{
            margin:0px;
            padding: 0px;
        }
        /*id选择器*/
        #main{
           background-color: brown;
            /*设置宽高*/
            width: 300px;
            height: 300px;
            /*position定位  父标签:设置相对布局*/
            position: relative;
            margin-top: 10px;
        }
        /*类选择器*/
        .test1{
            background-color: aquamarine;
            /*子标签 绝对布局*/
            position: absolute;
            /*设置定位 相对于父标签*/
            left: 30px;
            top: 20px;
            margin-left: 10px;
        }
        .test2{
            background-color: aqua;
        }
        .test3{
            background-color: antiquewhite;
            /*子标签 相对于父标签*/
            position: absolute;
            /*定位*/
            bottom: 0px;
            right: 0px;
        }
        .top{
            background-color:greenyellow;
            /*子标签 相对于浏览器布局*/
            position: fixed;
            /*定位*/
            top: 0px;
            right: 0px;
            left: 0px;
        }
        .bottom{
            background-color: blue;
            position: fixed;
            bottom: 0px;
            left: 10px;
            right: 10px;;
        }
    </style>
</head>
<body>
    <div id="main">
        <div class="test1">定位1</div>
        <div class="test2">定位2</div>
        <div class="test3">定位3</div>
    </div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</body>
</html>

居中:水平和垂直居中

水平居中:

在行内标签和行内块级标签水平居中的使用:在父标签中设计：text-align:center; 属性。是对整个标签水平居中

在块级标签中使用:1.在父标签中设计：text-align:center; 属性。是对子标签中的内容（文字..）水平居中,2.在自身标签中设计：margin : 0px auto ; 属性。是对整个块级标签水平居中.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平居中</title>
    <style>
        #main{
            /*设置宽高*/
            width: 300px;
            height: 300px;
            background-color: red;
            /*行内标签/行内块级标签设置水平居中*/
            text-align: center;
        }
        /*行内标签和行内-块级标签水平居中在父标签中设计：text-align:center;   属性。是对整个标签水平居中*/
        .test1{
            background-color: aqua;
            /*行内块级标签书水平居中*/
            text-align: center;
        }
        /*块级标签的水平设置 1..在父标签中设计：text-align:center; 属性。  是对子标签中的内容（文字..）水平居中
        2.在自身标签中设计：margin : 0px auto ;  属性。是对整个块级标签水平居中*/
        .test2{
            background-color: aquamarine;
            width: 200px;
            /*块级标签水平居中*/
            margin:0 auto;
        }
        /*行内标签的水平居中设置 只需要在父标签中设置text-align:center*/
        .test3{
            background-color: bisque;
        }
    </style>
</head>
<body>
<div id="main">
    <button class="test1">行内块级标签</button>
    <p class="test2">块级标签</p>
    <span class="test3">行内标签</span>
</div>
</body>
</html>

垂直居中:

行内标签和行内-块级标签垂直居中:在父标签中设计：line-heigth:xx px; 属性。是对整个标签垂直居中

块级标签垂直居中:1..在父亲标签中设计：line-heigth:xx px; 属性。仅仅使文字在父标签垂直居中2.在自己标签中设计：line-heigth:xx px; 属性。仅仅使文字在自己标签垂直居中;3.定位:在在子标签指定绝对布局（absolute）在父标签指定相对布局（relative）;在子标签中设计相对left:50% ; top:50%;对子标签进行平移transform:translate(-50% , -50%)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中</title>
    <style>
        #main{
            width: 300px;
            height: 300px;
            background-color: red;
            /*水平居中*/
            text-align: center;
            /*垂直居中*/
            line-height: 300px;
            /*局对定位*/
            position: relative;
        }
        .test1{
            background-color: bisque;
        }
        .test2{
            background-color: aqua;
            /*块级标签 水平居中*/
            margin:0 auto;
           width: 150px;
            /* 块级标签 垂直居中*/
            line-height:150px;
            /*通过定位垂直居中*/
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        button{
            background-color: bisque;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="main">
    <button class="test3">行内块级标签</button>
    <!--<p class="test2">块级标签</p>-->
    <!--<span class="test1">行内标签</span>-->
</div>
</body>
</html>

百度首页的案例:

html的编写(.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度首页</title>
    <!--引入外部样式的css文件-->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!--头部-->
<div id="top">
    <a href="">糯米</a>
    <a href="http://news.baidu.com/">新闻</a>
    <a href="http://www.hao123.com/">hao123</a>
    <a href="http://map.baidu.com/">地图</a>
    <a href="">视频</a>
    <a href="">贴吧</a>
    <a href="" class="no-weigth">登录</a>
    <a href="" class="no-weigth">设置</a>
    <a href="" class="more-product">更多产品</a>
</div>
<!--内容-->
<div id="middle">
    <!--百度的logo图-->
    <div class="img-logo">
        <img src="./image/logo_white_ee663702.png" alt="加载失败">
    </div>
    <!--搜索输入框-->
    <div class="search">
        <input class="int" type="text"><!--
        --><input class="btn" type="button" value="百度一下">
    </div>
    <!--历史记录1-->
    <div class="search-img">
        <img src="./image/d_1.png" alt="加载失败">
        <img src="./image/d_2.png" alt="加载失败">
        <img src="./image/d_3.png" alt="加载失败">
        <img src="./image/d_4.png" alt="加载失败">
    </div>
    <!--历史记录2-->
    <div class="search-img">
        <img src="./image/d_5.png" alt="加载失败">
        <img src="./image/d_6.png" alt="加载失败">
        <img src="./image/d_7.png" alt="加载失败">
        <img src="./image/d_8.png" alt="加载失败">
    </div>
</div>
<!--尾部-->
<div id="bottom">
    <p class="bottom-top">
        <a href="">把百度设为主页</a>
        <a href="">关于百度</a>
        <a href="">About Baidu</a>
    </p>
    <p class="bottom-bottom">
        @2017 Baidu <a href="">使用百度前必须读意见反馈</a> 京ICP证030173号
        <img src="./image/copy_rignt_24.png" alt="加载失败">
    </p>
</div>
</body>
</html>

外部样式的编写(.css文件):

/*取消所有的边距*/
*{
    margin: 0px;
    padding: 0px;
}
/*整体页面的背景*/
body{
    background: url("../image/bg.jpg");
    /*设置背景随着窗口变化而变化*/
    background-size: cover;
}
/*头部的样式*/
#top{
    /*头部的背景*/
    background-color: rgba(0,0,0,0.5);
    /*背景的高度*/
    height: 40px;
    /*向右对齐*/
    /*float: right;*/
    text-align: right;
}
/*设置头部的链接(a表面)的样式*/
#top a{
    color: white;
    font-weight: bold;
    margin-right: 10px;
}
/*设置头部的链接(a表面)不需要加粗的样式*/
#top .no-weigth{
    font-weight: 400;
}
/*设置头部的链接(a表面)需要添加背景的样式*/
.more-product{
    color: white;
    background-color: #3857eb;
    padding: 3px;
    /*去掉文字的装饰(下划线)*/
    text-decoration: none;
}
/*内容的样式*/
/*找到内容标签*/
#middle{

}
/*百度的logo标志图*/
.img-logo{
    /*设置水平居中*/
    text-align: center;
    /*设置外边距*/
    margin-bottom: 15px;
}
/*设置图片的样式*/
.img-logo img{
    width: 270px;
    height: 129px;
}
/*设置搜索框和按钮的样式*/
.search{
    /*设置搜索模块的宽度*/
    width: 600px;
    /*水平居中*/
    margin:0 auto;
    height: 35px;
    /*设置外边距*/
    margin-bottom: 15px;
}
/*设置搜索框的样式*/
.search .int{
    /*设置输入框的宽高*/
    width: 500px;
    height:100%;/*内容=padding+border*/
    /*修改盒子的大小计算方式*/
    box-sizing: border-box;
    border:1px solid #cccccc;

    /*设置光标右移*/
    padding-left: 16px;
    float: left;
}
/*设置输入框的焦点*/
.search .int:focus{
    /*先去掉边界*/
    border: none;
    /*添加新的边界*/
    border: 1px solid #33dddd;
}
/*设置输入框的按钮*/
.search .btn{
    width:100px;
    height:100%;
    border: 0;
    background-color: #3385ff;
    color: white;
    font-size: 16px;
    /*设置按钮的悬浮位置*/
    float: right;
}
/*历史记录的样式*/
.search-img{
    margin-bottom: 5px;
    /*设置水平居中*/
    text-align: center;
}
.search-img img{
    width: 160px;
}
/*设置当鼠标悬浮在上面的时候的透明度*/
.search-img img:hover{
    opacity: 0.5;
}
/*尾部的样式*/
#bottom{
    margin-top: 100px;
    margin-bottom: 20px;
}
/*设置尾部的直接子类的样式*/
#bottom>p{
    margin-bottom: 15px;
    /*设置水平居中*/
    text-align: center;
}
#bottom a ,#bottom p{
    color: gray;
    font-weight: 400;
}
#bottom a{
    margin-right: 5px;;
}

piziliul

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML入门02-Demo

CSS的布局默认情况下,所有的网页标签都在标准流布局中,也就是说布局原则是从上至下,从左至右.\脱离标准流的方法有以下两种:float属性:让指定的标签浮动到父标签的左边-left或者右边-rightposition属性: left、right、top、bottom 属性值配合使用.Float:浮动属性:float属性可以指定子标签浮动到父标签的左边或右边float
复制链接

扫一扫