HTML5-01

使用HBuliderX学习HTML5

HBuliderX快捷键：

注释：ctrl+?
换行：ctrl+enter
激活代码助手：alt+/

块状标签：h(标题)、p(段落)、

内联标签：a(超链接)、img(图片)、span、strong、

display: inline-block;

转换格式，既可以设置宽度和高度，又可以不独占一行

例-搜索页面底部的分页栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>页面低端-分页</title>
        <!-- <link rel="stylesheet" type="text/css" href="css/fenye.css"/> -->
        <style type="text/css">
            a{
                display: inline-block;/* 既可以设置宽度和高度，又可以不独占一行 */
                text-decoration: none;/* 设置划线为无 */
                border: 1px solid black;/* 设置边框 */
                border-radius: 10%;/* 设置圆角 */
                line-height: 28px;/* 垂直居中 */
                padding: 0px 10px;/* 上下内边距，左右内边距 */
                margin: 0px 2px 0px 2px;/* 外边距 */
                background-color: #FFFFFF;/* 背景色 */
            }
            a:hover{/* 超链接悬停样式 */
                background-color: #4E6EF2;/* 设置新的背景色 */
                color: #FFFFFF;/* 设置新的超链接文本颜色 */
            }
            div{
                border: 1px solid black;/* 边框 */
                width: 650px;/* 宽度 */
                height: 60px;/* 高度 */
                text-align: center;/* 水平居中 */
                line-height: 60px;/* 垂直居中 */
                margin: 90px auto;/* 与body距离 */
                background-color: #F5F5F6/* 背景颜色 */
            }
        </style>
    </head>
    <body>
        <div id="div">
        <a class="ye" href="#">上一页</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
        <a class="duoyue" href="#">...87</a>
        <a class="ye" href="#">下一页</a>
        </div>
    </body>
</html>

例-搜索页面顶部的搜索框与按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
        /*         border: 1px solid blue; */
                text-align: center;
                padding: 30px 0px 10px 0px;
            }

        /*     form {
                border: 1px solid red;
            } */
        /*     input {
                border: 1px solid red;
            } */

            #text {
                border: 3px solid red;
                width: 300px;
                height: 38px;/* 文本框高度加上下边框高度应与按钮高度相等 */
                padding: 0px;/* 干掉内边距 */
                vertical-align: top;/* 垂直对齐 */
                outline: none;/* 去掉文本框内部轮廓线 */
            }

            #but {
                width: 100px;
                height: 44px;
                margin-left: -5px;/* 外左边距用margin为0取消不掉 */
                padding: 0px;/* 干掉内边距 */
                letter-spacing: 8px;/* 设置字符间距 */
                line-height: 44px;/* 垂直居中 */
                text-indent: 7px;/* 将第一行缩进x像素 */
                background-color: red;
                color: white;
                font-size: 18px;
                border: none;/* 将按钮自带的边框立体效果去除 */
                outline: none;/* 去掉点按时的轮廓 */
                }
        </style>
    </head>
    <body>
        <div id="">
            <form action="" method="">
                <input type="text" name="" id="text" value="" placeholder="书名、作者、出版社、ISBN、文具" />
                <input type="button" name="" id="but" value="搜索" />
            </form>
        </div>
    </body>
</html>

零散知识：

```
 <a href="#">死链接</a>
```
```
&yen;&copy;
```
div中如果内没有内容的话，会造成高度塌陷，div的高度默认靠内容支撑

line-height: 100px;
                /* div中文字是有中心点的，有一条参照线穿过中心点，
                 这个参照线的上下扩展的距离就是line-height*/

padding: 10px ;
                /* 只设置一个值：内边距上下左右均为10px */
                /* 内边距写几个：
                 写一个：四个页边距相同
                 写两个：第一个代表上下内边距；第二个代表左右页边距
                 写三个：第一个代表上内边距；第二个代表左右内边距；第三个代表下内边距
                 写四个：上右下左，从上开始，顺时针*/

posted @ 2021-06-29 23:40 喵酱爱吃鱼阅读(54) 评论(0) 编辑收藏举报

刷新页面返回顶部

喵酱爱吃鱼

HTML5-01

公告