一HTML和CSS基础--网页布局--实践

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一HTML和CSS基础--网页布局--实践相关的知识,希望对你有一定的参考价值。

案例一:导航菜单的制作

垂直菜单

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size:14px;
    }
    ul{
        list-style:none;
        width:100px;
    }
    a{
        text-decoration:none;
        display:block;
        height:30px;
        line-height:30px;
        width:100px;
        background-color:#ccc;
        margin-bottom: 3px;
        text-align:center;
    }
    a:hover{
        color:red;
        font-weight:bold;
        background-color:orange;
    }
    </style>
</head>

<body>
    <ul>
        <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>
    </ul>
</body>

关键点:导航菜单使用无序列表更符合语义化要求,而a标签需要设置为块级元素,才可以对其设置宽高背景等样式。

 

水平菜单

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size:14px;
    }
    ul{
        list-style:none;
    }
    li{
        float:left;
    }
    a{
        text-decoration:none;
        display:block;
        height:30px;
        line-height:30px;
        width:100px;
        background-color:#ccc;
        text-align:center;
        margin-right:3px;
    }
    a:hover{
        color:red;
        font-weight:bold;
        background-color:orange;
    }
    </style>
</head>

<body>
    <ul>
        <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>
    </ul>
</body>

 

圆角菜单

圆角背景图片:技术分享

 

以上是关于一HTML和CSS基础--网页布局--实践的主要内容,如果未能解决你的问题,请参考以下文章

汇总css布局模型和常见代码缩写与长度单位

CSS样式表代码布局基础教程

React-Native 样式、布局、绘制

div+css三行两列布局怎么写,求大神解答

以20像素为基准的CSS网页布局实践分享

h5培训心得体会