html页面例子

最新推荐文章于 2023-08-16 19:15:43 发布

lkj41110

最新推荐文章于 2023-08-16 19:15:43 发布

阅读量451

点赞数

文章标签： html 代码

本文链接：https://blog.csdn.net/qq_25673113/article/details/49385573

版权

效果

图片效果

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="content-language" content="cs" />
        <meta name="author" lang="cs" content="..." />
        <meta name="copyright" lang="cs" content="..." />
        <meta name="description" content="..." />
        <meta name="keywords" content="..." />
        <meta name="robots" content="all,follow" />
        <link href="style.css" type="text/css" rel="stylesheet" media="screen,projection" />
        <!--[if lte IE 6]>

        <link href="css/msie.css" type="text/css" rel="stylesheet" media="screen,projection" />

        <![endif]-->
        <link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
        <title>Mintidea – Free CSS Template</title>
    </head>
    <body>
<div id="layout">
    <div id="header">
                <h1 id="logo"><a href="./" title="Company">mint<span class="light">idea</span><span class="leaf"> </span></a></h1>
                <hr class="noscreen" />
                <div id="nav" class="box">
                    <ul>
                        <li>
                            <a href="/">Home
                            <br />
                            <span>Main page</span></a>
                        </li>
                        <li>
                            <a href="/">Who
                            <br />
                            <span>Our team</span></a>
                        </li>
                        <li>
                            <a href="/">What
                            <br />
                            <span>Our services</span></a>
                        </li>
                        <li>
                            <a href="/">Portfolio
                            <br />
                            <span>Our woks</span></a>
                        </li>
                        <li>
                            <a href="/">Prices
                            <br />
                            <span>How much it costs</span></a>
                        </li>
                        <li>
                            <a href="/">Contact
                            <br />
                            <span>Write us!</span></a>
                        </li>
                    </ul>
                    <hr class="noscreen" />
                </div>
                <hr class="noscreen" />
                <div id="container" class="box">
                    <div id="obsah" class="content box">
                        <div class="in">
                            <h2>Lorem ipsum dolor!</h2>
                            <p>
                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </p>
                            <h3>Dolor sit amet:</h3>
                            <ul id="ul2">
                                <li>
                                    <a href="#">Dolor in reprehenderit</a>
                                </li>
                                <li>
                                    <a href="#">In reprehenderit</a>
                                </li>
                                <li>
                                    <a href="#">Molot in reprehenderit in volupta</a>
                                </li>
                                <li>
                                    <a href="#">Rure dolor in reprehenderit in volupta</a>
                                </li>
                            </ul>
                            <h3>Lorem ipsum dolor</h3>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, im veniam, quis n ullamco laboris nisi ut aliquip

                                im veniam, quis n ullamco laboris nisi ut aliquip sed do eiusmod tempor incididunt ut labore et dolore magna

                                aliquaim veniam
                            </p>
                            <p>
                                Quis n ullamco laboris nisi ut aliquip. Ut enim ad minim veniam, quis n ullamco laboris nisi ut aliquip ex ea commodo consequat.
                            </p>
                            <p>
                                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                            </p>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, im veniam, quis n ullamco laboris nisi ut aliquip

                                im veniam, quis n ullamco laboris nisi ut aliquip.
                            </p>
                        </div>
                    </div>
                    <div id="panel-left" class="box panel">
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

css代码

body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, legend, dl, dt, dd, blockquote, applet, object {
    border: 0;
}

body{
background: #192d40 url(images/bg.jpg) repeat-x ;  /*实现渐变效果*/
    font: "Copperplate Gothic Light";
    line-height: 1.2em;
    width: 900px;
    height: 750px;
    color: #e8eaeb;
}

a{
    color: #e5e5e5;
}

#layout{
    margin: 0 auto;
}

#header{
    position: relative;
    padding-left: 7px;
}

#logo{
    width:780px;
    height: 80px;
    text-align: left;
    color: #cccccc;
    position: relative;
    margin: 0;
    line-height: 100px;
}

#logo a{
    text-decoration: none;
}

.light{
    color: #2b4866;
}

.leaf{
    position:absolute;
    background: url(images/leaf.gif)  45px 5px no-repeat;
    width: 120px;
    height: 80px;
    left: 0;
    top: 10px;
}

h1{
    margin: 15px 0 10px 0;
    font-weight: bold;
}

#nav {
    position: relative;
    z-index: 2;
    border: 1px solid #1a2735;
    border-right: none;
    border-left: none;
    padding: 7px 0;
}

#nav li{
    list-style-type: none;
    display: inline;
    padding: 0;
    margin: 0;
}

#nav  ul li a{
    text-decoration: none;
    font-size: 19px;
    font-weight: bold;
    float: left;
    display: block;
    padding: 7px 25px 7px 7px;
    line-height: 18px;
}

#nav ul li span{
    font-size: 11px;
    font-weight: normal;
    color: #67707a;
}

h2{
    color: #E5E5E5;
}

h3{
    padding-left: 50px;
}

div.in p{
    text-align: right;
    color: #CCCCCC;
    padding-left: 50px;
}

#ul2{
    padding-left: 80px;
}

lkj41110

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html页面例子

效果html代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> <head>
复制链接

扫一扫