H5 CSS样式小结

最新推荐文章于 2024-04-28 14:44:52 发布

ForeverNagisa

最新推荐文章于 2024-04-28 14:44:52 发布

阅读量2.6k

点赞数 1

分类专栏： html5 文章标签： css

本文链接：https://blog.csdn.net/ForeverNagisa/article/details/79590982

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

如何查询相关文档

推荐查询相关网址:http://devdocs.io/

第一行代码

  div {
        width: 500px;
        height: 500px;
        background-color: red;
      }
      <!-- 定义了一个长度和高度为500的正方体 背景颜色红色 -->
    <div>我是div</div>

css样式的继承

body {
        color: blue;
      }

如果不给标签添加额外的字体颜色页面所有的文字颜色都会设置为蓝色

CSS 常用属性举例

属性	描述
width	设置长度单位px
height	设置高度单位px
float	float: left / right/ none; 让元素浮动起来用于布局
position	absolute/relative/fixed 元素定位
font	字体格式
background	背景颜色 / 背景图象 / 背景重复 / 背景附件 / 背景位置
border	width /style /color 边框样式
list-style	列表样式
margin	外边距
padding	内边距
cursor	光标样式

css float属性

.left {
                width: 200px;
                height: 200px;
                background-color: red;
                float: left;
            }

            .right {
                width: 200px;
                height: 200px;
                background-color: blue;
            }
            <div class="left"></div>
        <div class="right"></div>

div 本身是块级标签使用两个div同级时候两个div会紧紧相邻使用浮动属性后可以发现两个div重合
这里可以认为第一个div浮起来了之前紧靠的div发现之前的div不见了就占领了第一个div的位置

使用浮动会造成的一些问题

.box{
    width: 800px;
    border: 4px red solid;
    margin: 50px auto;
}
.left{
    width: 200px;
    height: 200px;
    background: blue;
    float: left;
}
.right{
    width: 200px;
    height: 200px;
    background: gold;
    float: right;
}
<div class="box">
            <div class="left"></div>
            <div class="right"></div>
        </div>

一个父级div中有两个子div 父级没有设置高度两个子div分别使用了左浮动和有浮动这时会造成父级的高度塌陷
解决方法:
使用 clear: both;
在添加一个div < div style=”clear: both;”>< /div> 这样就恢复正常了

表单样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

    </style>
</head>
<body>
    <!-- 换行 -->
    <!-- <br/> -->
    <!-- action 表单要提交的服务器接口 -->
    <!-- methid 表单提交的方式 默认是GET 一般用POST -->
    <form id="first" action="" method="">
        <!-- 输入框 placeholder 占位符 给用户提示 value 最终要发送给服务器的值
        name发送给服务器的-->
        <label for="name">用户名: </label>
        <input id="name" type="text" placeholder="请输入用户名" name="username" value="">
        <br/>
        <input type="password" placeholder="请输入密码">
        <br/>
        <input type="radio" name="gender">
        <input type="radio" name="gender">
        <input type="radio" name="gender" value="3">
        <br/>
        <input type="checkbox" name="inster" value="work">
        <input type="checkbox" name="inster" value="play">
        <input type="checkbox" name="inster" value="watch">
        <br/>
        <!-- multiple 上传多个文件 -->
        <input type="file" multiple>
        <br/>
        <input type="email" >
        <br/>
        <input type="date" >
        <br/>
        <input type="search" >
        <br/>
        <input type="button" value="不要按">
        <br/>
        <!-- 隐藏属性 收集一些用户不需要填写的信息-->
        <input type="hidden" name="type" value="Mac">
        <br/>
        <input type="submit" value="注册">
        <br/>
        <textarea></textarea>
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
        </select>
        <!-- 清空 -->

        <br/>
    </form>
    <!-- 如果提交按钮/重置按钮在form外 点击按钮是无效 可以通过 属性关联起来 -->
    <input form="first" type="reset">
</body>
</html>

表格样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        table{
            /* collapse 合并边框
               separate 不合并边框
            */
            border-collapse: collapse;
            border:  1px blue solid;
            /*不合并边框的时候 可以让空的单元格隐藏*/
            /*empty-cells: hide;*/
            text-align: center;
        }
        tbody{
            /*改变表格垂直居中方式*/
            vertical-align: top;
        }
    </style>
</head>
<body>
    <!-- 这里的 border 和 css中的不一样 cellspacing 单元格间距 cellpadding 单元格内边距-->
    <table border="1" width="200" height="100" cellspacing="0" cellpadding="10">
        <!-- 标题 -->
        <!-- <caption></caption> -->
        <!-- <thead></thead> -->
        <!-- tbody 可以省略 -->
        <!-- <tbody> -->
            <tr>
                <th width="100" height="200">1</th>
                <th width="250">2</th>
            </tr>
            <tr>
                <td>11</td>
                <td>22</td>
            </tr>
        <!-- </tbody> -->
    </table>
    <table border="1" width="280" height="280">
        <tr>
            <td rowspan="2">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <!-- <td>1</td> -->
            <td colspan="2">2</td>
            <!-- <td>3</td> -->
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td colspan="2" rowspan="2">3</td>
            <!-- <td>4</td> -->
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <!-- <td colspan="2">3</td> -->
            <!-- <td>4</td> -->
        </tr>
    </table>
</body>
</html>

ForeverNagisa

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
H5 CSS样式小结

如何查询相关文档推荐查询相关网址:http://devdocs.io/第一行代码 div { width: 500px; height: 500px; background-color: red; }  <div>我是div</div> c
复制链接

扫一扫