HTML布局与标签

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 

<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>
            <div>div>
            <div>div>
        li>
        <li>我是列表项2li>
        <li>我是列表项3li>
        <li>我是列表项4li>
        <li>我是列表项5li>
    ol>
    
    <ul>
        <li>我是列表项1li>
        <li>我是列表项2li>
        <li>我是列表项3li>
        <li>我是列表项4li>
        <li>我是列表项5li>
    ul>
    
    <dl>
        <dt>1dt>
        <dd>2dd>
        <dt>3dt>
        <dd>4dd>
    dl>

body>
html>
2.2图片标签
    1.图片标签 单标签 比较特殊,可以设置尺寸,有行级标签的特点。
    2.src="" 指定引入的图片的地址
     alt="" 图片内容的描述 必须的 描述的准确
    3. "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">我是span1span>
        <span class="span2">我是span2span>
    a>

你可能感兴趣的:(html,布局,调试设置)