HTML&CSS&DIV基础<2>

最新推荐文章于 2025-11-19 23:24:29 发布

原创最新推荐文章于 2025-11-19 23:24:29 发布 · 436 阅读

2 ·

CC 4.0 BY-SA版权

HTMI 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了CSS中的盒子模型、页面布局技巧、行高调整方法、元素显示属性修改、注释快捷键、圆角效果实现、文本框焦点边框去除、鼠标样式调整、定位方式及其应用、二级菜单制作等内容。

1.盒子模型

宽=margin-left+margin-right+border-left+border-right+padding-left+padding-right+contenWidth

即宽=margin+border+padding+width

同理：高=margin+border+padding+height

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>tmall</title>
    <style>
        .fl{
            float:left
        }
        #top,#login,#header,#nav,#ban{
            width:1210px;
            margin:0 auto;
        }
        #top{
            height:80px;
            background:red;
        }
        #login{
            height:40px;
            background:pink;
        }
        #header{
            height:100px;
            background:coral;
        }
       .logo{
           width:300px;
           height:60px;
           background:yellowgreen;
           margin-top:20px;
           margin-left:20px;
        }
        .search{
            width:500px;
            height:60px;
            background:green;
            margin-left:20px;
            margin-top:20px;
        }
        #nav{
            height:40px;
            background:cornflowerblue;
        }
        #ban{
            height:300px;
            background:deepskyblue;
        }
        .meau{
            width:200px;
            height:300px;
            background:mediumpurple;
        }
        .banner{
            width:800px;
            height:300px;
            margin-left:10px;
            background:lightcoral;
        }
    </style>
</head>
<body>
<div id="top"></div>
<div id="login"></div>
<div id="header">
    <div class="logo fl"></div>
    <div class="search fl"></div>
</div>
<div id="nav"></div>
<div id="ban">
    <div class="meau fl"></div>
    <div class="banner fl"></div>
</div>
</body>
</html>

效果图：

这里写图片描述

2.页面布局
标准流
浮动流

浮动：float:left;
清除浮动：clear:both/left/right

块级元素： div p ul li ol dl dt dd
行内元素（内联元素）：span strong em i b a

块级元素居中：margin:0 auto;
行内元素居中：父元素 text-align:center;

3.line-height:行高
行高与高度一样：字在正中间
行高比高度大：字体偏下
行高比高度小：字体偏上

4.display:block; 行内元素——>块级元素
display:inline-block; 行内块级元素

5.webstorm: 注释快捷键 ctrl+shift+/
html注释：
css注释： /注释文本/

6.border-radius:10px; 圆角效果
border-radius:50%; 圆

div{
            height:500px;
            width:500px;
            background:blue;
            margin:auto;
            border-radius:20px;
        }

这里写图片描述

div{
            height:500px;
            width:500px;
            background:blue;
            margin:auto;
            border-radius:50%;
        }

这里写图片描述

7.outline:none;/文本框获取焦点时去边框/

8.cursor: pointer;/鼠标变成手状/

9.定位：
position:relative; /相对定位/ 以他的原来位置相对发生偏移
position:absolute;/绝对定位/ 以他的父元素发生偏移，与文档流，无关，不占据空间。
position:fixed;/固定定位/

定位和top bottom left right 在一起使用

定位和浮动都是页面布局的样式，不能一起使用

10.给父元素加相对定位<没有父元素时默认父元素为html页面>
给需要移动的元素加绝对定位及top等值

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul,li{
            list-style:none;
        }
        ul{
            width:800px;
            margin:30px auto 0;
        }
        ul>li{
            width:150px;
            height:30px;
            line-height:30px;
            text-align:center;
            float:left;
            background:#000;
            position:relative;
        }
        ul>li>a{
            color:#fff;
        }
        i{
            width:40px;
            height:18px;
            line-height:18px;
            background:orange;
            display:inline-block;
            color:#fff;
            font-style:normal;
            position:absolute;
            right:2px;
            top:-10px;
        }
        div{
            width:40px;
            height:300px;
            position:fixed;
            top:150px;
            right:20px;
            background:#000;
        }
        body{
            height:1200px;
            background:palegreen;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="">国际酒店</a><i>hot</i></li>
    <li><a href="">国内酒店</a><i>news</i></li>
</ul>
<div>

</div>
</body>
</html>

这里写图片描述
11.z-index:3 上下层叠位置

12.通栏二级菜单
<1> ul>li 父子关系
ul li 后代关系
<2>display:none;隐藏（不占位置）——首选
display:hidden;隐藏（占位置）

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background:plum;
        }
        *{
            margin:0;
            padding:0;
        }
        ul>li{
            list-style:none;
        }
        .nav{
            height:40px;
            background:papayawhip;
        }
        .nav>ul{
            width:1210px;
            margin:0 auto;
        }
        .nav>ul>li{
            float:left;
            width:200px;
            text-align:center;
            line-height:40px;
        }
        .nav>ul>li>a{
            width:100%;
            text-decoration:none;
            color:#000;
            display:inline-block;
        }
       /* .nav ul li:hover{
            background:dodgerblue;
        }*/
        .nav>ul>li>a:hover{
            background:dodgerblue;
        }
        .nav>ul>li>ul{
            width:200px;
            height:160px;
            background:orange;
            display:none;
        }
        .nav>ul>li:hover>ul{
            display:block;
        }
        .nav>ul>li>ul>li>a{
            color:#000;
        }
        .nav>ul>li>ul>li:hover{
            background:darkslateblue;
        }
        .nav>ul>li>ul>li:hover>a{
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="nav">
         <ul>
        <li><a href="">首页</a></li>
        <li><a href="">公司简介</a>
            <ul>
                <li><a href="">aaaa</a></li>
                <li><a href="">aaaa</a></li>
                <li><a href="">aaaa</a></li>
                <li><a href="">aaaa</a></li>
            </ul>
        </li>
        <li><a href="">新闻动态</a></li>
        <li><a href="">国际合作</a></li>
        <li><a href="">关于我们</a>
             <ul>
                 <li><a href="">bbbb</a></li>
                 <li><a href="">bbbb</a></li>
                 <li><a href="">bbbb</a></li>
                 <li><a href="">bbbb</a></li>
                 <li><a href="">bbbb</a></li>
             </ul>
        </li>
        <li><a href="">联系我们</a></li>
         </ul>
    </div>
</body>
</html>