World word web

最新推荐文章于 2024-06-13 09:45:33 发布

梦逸雨涵

最新推荐文章于 2024-06-13 09:45:33 发布

阅读量286

点赞数 1

分类专栏： web 文章标签： web css html

本文链接：https://blog.csdn.net/qq_41943578/article/details/88969746

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

题目：

请设计如图所示的页面：

代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>World Word</title>
<style>
    *
    {
        margin: 0;
        padding: 0;
    }
    body
    {
        margin-top: 20px;
    }
    .container
    {
        width: 620px;
        margin: auto;
        height: 444px;
        border: 1px solid #333;
    }
    .header
    {
        height: 100px;
        background-color: #A5D31F;
        color: #fff;
        width: 620px;
    }
    .header h1
    {
        width: 416px;
        height: 79px;
        background:url('images/logo.GIF') no-repeat 
        6px 6px;
        text-indent: -999px;
    }
    .header ul li
    {
        display: inline-block;
        float:right;
    }
    .header ul li a
    {
        padding-right: 8px;
        font-size: 14px;
        text-decoration-line: none;
        color:#006600;
    }
    .sidebar1
    {
        position: absolute;
        width: 140px;
        height: 320px;
        background-color: #060;
        float: left;
    }
    .sidebar1 ul 
    {
        width: 96px;
        background-color: #9c0;
        margin-top: 12px;
        margin-left: 22px;
        margin-right:22px;
        float: left;
        list-style: none;
    }
    .sidebar1 ul li 
    {
        line-height: center;
        border-bottom: 1px solid #006600;
        padding-top: 3px;
        padding-left: 16px;
        padding-bottom: 3px;
        border-left: 5px solid #FF9900;
    }
    .sidebar1 ul li a
    {
        text-decoration-line: none;
        font-size:14px;
        color: #000;
    }
    .sidebar1 ul li .current
    {
        color: #666;
    }
   .content
    {
        width: 446px;
        height: 320px;
        position: relative;
        float: right;
        padding-left: 20px;
        padding-right: 20px;
    }
    h2
    {
        text-align: center;
        font-size: 16px;
        padding-top: 40px;
        padding-bottom: 2px;
        border-bottom: 3px double black;
    }
    .content p
    {
        text-indent: 2em;
        padding-top: 16px;
        line-height: 24px;
        font-size: 14px;
    }
    .footer
    {
        height: 24px;
        background-color: #f90;
        width: 620px;
        float: left;
    }
    .footer p
    {
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="header">
        <h1>World Word</h1>
        <ul class=menu>
            <li><a href="#">设为首页</a></li>
            <li><a href="#">加入收藏</a></li>
        </ul>
        <!-- end .header --></div>
        <div class="sidebar1">
            <ul class="nav">
                <li><a href="#">翻译服务</a></li>
                <li><a href="#" class="current">网站建设</a></li>
                <li><a href="#">服务流程</a></li>
                <li><a href="#">付费</a></li>
            </ul>
        <!-- end .sidebar1 --></div>
        <div class="content">
            <h2>网站建设</h2>
            <p>一幅美观而高效的页面、一个强而有力的标志是其所有者的形象，也是他向外展示自己而给人留下深刻印象的第一个机会。它所具有的美应该能抓住浏览者的眼睛，它所包含的内容应该能锁住他们的心。</p>
            <p>这需要一支熟练而具有市场观念的团队来实现。这就是您选择“World-Word”的原因，让我们来帮您实现上述目的。我们的团队会把他们丰富的经验、知识及才干注入到您的网站中。</p>
            <p>当然，如果您需要，由于我们得天独厚的业务专长，我们也可以将您的网站无缝地制作成英文版/中文版。</p>
        <!-- end .content --></div>
        <div class="footer">
        <p>与我们联系：<a  href="mailto:service@world-word.com">service@world-word.com</a></p>
        <!-- end .footer --></div>
        <!-- end .container --></div>
    </body>
</html>

运行结果：

梦逸雨涵

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
World word web

题目：请设计如图所示的页面：代码：<!doctype html><html><head><meta charset="UTF-8"><title>World Word</title><style> * { margin: 0; ...
复制链接

扫一扫