HTML布局与标签

最新推荐文章于 2024-05-25 10:40:54 发布

Tw368WJZ

最新推荐文章于 2024-05-25 10:40:54 发布

阅读量499

点赞数

分类专栏： html 布局调试设置

本文链接：https://blog.csdn.net/Tw368WJZ/article/details/79405313

版权

html 同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

布局

5 篇文章 0 订阅

订阅专栏

调试设置

3 篇文章 0 订阅

订阅专栏

HTML布局

1.浮动布局

    浮动布局 float:left | right | none
    清除浮动 clear:left | right | both
    clear的使用要点1：只能清除同级标签的浮动影响
    clear的使用要点2：只能清除既是同级又在它上面的标签的浮动影响

    浮动会造成的问题
    1：父级元素没有设置高度的情况下，会造成高度"塌陷"

.box{
    width: 800px;
    border: 4px red solid;
    margin: 50px auto;
    overflow: hidden;//超出范围被隐藏--可以清楚浮动
}
.left{
    width: 200px;
    height: 200px;
    background: blue;
    float: left;
}
.right{
    width: 200px;
    height: 200px;
    background: gold;
    float: right;
}
.clear{
    height: 0px;
    clear: both;
}
.content{
    height: 300px;
    background-color: black;
}

2.常用标签

2.1列表

1.有序列表：组合标签 双标签 块级 ol li
2.无序列表：组合标签 双标签 块级 ul li
3.列表修饰：list-style-type: 符号... | none;
4.自定义列表: 字典列表 组合标签 双标签 块级 dl dt dd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
    <style>
        body{
            margin: 0px;
        }
        /*列表修饰：list-style-type: 符号... | none;*/
        ol{

            border: 2px red solid;
            margin: 0px;
            padding: 0px;
            margin-left: 50px;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <!-- 有序列表：组合标签 双标签 块级 ol li -->
    <ol>
        <li>
            <div></div>
            <div></div>
        </li>
        <li>我是列表项2</li>
        <li>我是列表项3</li>
        <li>我是列表项4</li>
        <li>我是列表项5</li>
    </ol>
    <!-- 无序列表：组合标签 双标签 块级 ul li -->
    <ul>
        <li>我是列表项1</li>
        <li>我是列表项2</li>
        <li>我是列表项3</li>
        <li>我是列表项4</li>
        <li>我是列表项5</li>
    </ul>
    <!-- 自定义列表: 字典列表 组合标签 双标签 块级 dl dt dd -->
    <dl>
        <dt>1</dt>
        <dd>2</dd>
        <dt>3</dt>
        <dd>4</dd>
    </dl>

</body>
</html>

2.2图片标签

    1.图片标签 单标签 比较特殊，可以设置尺寸，有行级标签的特点。
    2.src="" 指定引入的图片的地址
     alt="" 图片内容的描述 必须的 描述的准确
    3. <img src="http://p1.pstatp.com/large/65ba000ec6229b2d842a" alt=""/>

2.3标题标签

    1.标题标签是 h1~h6 双标签 块级标签
    2.h1 最好只出现一次，用于网页的logo部分
    3.h2 常用于二级标题，也就是子模块的标题部分
    4.h4~h6 不常用到

    1.display:block(显示为块级) | inline(显示为行级) | none(不显示)
    2.  font-weight:bold(设置为粗体) | normal(设置为正常字体)

    h1{
            border: 4px red solid;
            margin: 0px;
            font-size: 24px;
            font-weight: normal;
        }

2.3段落

    1.段落 P 双标签 块级
    2.p标签不可以嵌套div,最好不嵌套其他的块级标签
    3.首行缩进 text-indent:支持px 以及 em

    p{
            margin: 0px;
            font-size: 20px;
            text-indent: 2em;
        }
注释: 1em代表一个字的空间大小

2.4超链接

    1.超链接 a 双标签 行级
    2.href="" 指定标签跳转的地址
    3.target="_blank | _self" 指定链接跳转的方式
    4.a标签的四种状态
    4.1默认状态:link
    4.2访问过的状态:visited
    4.3悬浮的状态:hover
    4.4点击按住没有松开的状态:active
    5.设置矩形边角园 x轴/y轴
       border-radius: 3px 10px 0px 0px/3px 20px 0px 0px;

        1.行高 line-height
        文本在区域内上下居中 line-height:该区域的高度
        border-radius:;
        爱恨法则 love & hate 
        l link
        v visited
        h hover
        a active
        a:link{

a:link{
            color: #444;
        }
        a:visited{
            color: pink;
        }
        .test:hover{
            display: block;
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        a:active{
            color: #000000;
            font-size: 20px;
        }
        ol{
            margin: 0px;
            padding: 0px;
            list-style-type: none;
            width: 110px;
        }
        ol li {
            margin-bottom: 2px;
        }
        ol li a {
            display: block;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            text-align: center;
            border-radius: 3px;
        }
        ol li a:hover{
            background-color: #ed4040;
            color: #ffffff;
        }
        .radius{
            width: 400px;
            height: 40px;
            background-color: black;
            border-radius: 3px 10px 0px 0px/3px 20px 0px 0px;
        }
        .test2:hover .span1{
            color: red;
        }
        .test2:hover .span2{
            color: blue;
        }
-----------------------------------------
<a href="http://www.163.com/" target="_blank">点我去百度</a>
    <a class="test" href="###">我是超级链接标签</a>
    <a href="###">我是超级链接标签</a>
    <ol class="list">
        <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>
    </ol>
    <div class="radius"></div>
    <a href="###" class="test2">
        <span class="span1">我是span1</span>
        <span class="span2">我是span2</span>
    </a>

Tw368WJZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML布局与标签

HTML布局1.浮动布局浮动布局 float:left | right | none 清除浮动 clear:left | right | both clear的使用要点1：只能清除同级标签的浮动影响 clear的使用要点2：只能清除既是同级又在它上面的标签的浮动影响浮动会造成的问题 1：父级元素没有设置高度的情况下，会造成高度"塌...
复制链接

扫一扫

专栏目录