这是一个粗糙的网站静态页面,学习练手之作。

代码很乱,整个页面非常简单,没有难度。

唯一一个有用的只是就是margin的应用

代码如下:

html代码:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>firstM</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <script src="jqery.min.js"></script>

    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div class="header">
            <div class="site-topbar">
                <div class="container">
                    <div class="topbar-nav">
                        <a href="#">首页</a>
                        <span class="sep">|</span>
                        <a href="#">分类</a>
                        <span class="sep">|</span>
                        <a href="#">专题</a>
                        <span class="sep">|</span>
                        <a href="#">友链</a>
                        <span class="sep">|</span>
                        <a href="#">关于</a>
                    </div>
                </div>
            </div>
        </div>
     
        <div class="content">
            <div class="windows">
                <a href="#" class="show-window"><img src="images/01.png" /></a>
                <a href="#" class="show-window"><img src="images/02.png" /></a>
                <a href="#" class="show-window"><img src="images/03.png" /></a>
                <a href="#" class="show-window"><img src="images/04.png" /></a>
            </div>
            <div class="xwindow">
            <p>这是一条公告,欢迎您的来访</p>
            </div>
            <div class="subject">
                <div class="article">
                    <div class="article-list">
                    <h2>这是一篇文章</h2>
                    <p>我好像为什么事情很悲哀,我想起“生命”。
                    ……

                    有什么人能用绿竹作弓矢,射入云空,永不落下?我之想象,犹如长箭,向云空射去,去即不返。长箭所注,在碧蓝而明静之广大虚空。

                    明智者若善用其明智,即可从此云空中,读示一小文,文中有微叹与沉默,色与香,爱和怨。无著者姓名。无年月。无故事。无……然而内容极柔美。虚空静寂,读者灵魂中如有音乐。虚空明蓝,读者灵魂上却光明净洁。

                    大门前石板路有一个斜坡,坡上有绿树成行,长干弱枝,翠叶积叠,如翠等,如羽葆,如旗帜。常有山灵,秀腰白齿,往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p>
                    </div>
                    <div class="article-list">
                    <h2>这是一篇文章</h2>
                    <p>我好像为什么事情很悲哀,我想起“生命”。
                    ……

                    有什么人能用绿竹作弓矢,射入云空,永不落下?我之想象,犹如长箭,向云空射去,去即不返。长箭所注,在碧蓝而明静之广大虚空。

                    明智者若善用其明智,即可从此云空中,读示一小文,文中有微叹与沉默,色与香,爱和怨。无著者姓名。无年月。无故事。无……然而内容极柔美。虚空静寂,读者灵魂中如有音乐。虚空明蓝,读者灵魂上却光明净洁。

                    大门前石板路有一个斜坡,坡上有绿树成行,长干弱枝,翠叶积叠,如翠等,如羽葆,如旗帜。常有山灵,秀腰白齿,往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p>
                    </div>
                    <div class="article-list">
                    <h2>这是一篇文章</h2>
                    <p>我好像为什么事情很悲哀,我想起“生命”。
                    ……

                    有什么人能用绿竹作弓矢,射入云空,永不落下?我之想象,犹如长箭,向云空射去,去即不返。长箭所注,在碧蓝而明静之广大虚空。

                    明智者若善用其明智,即可从此云空中,读示一小文,文中有微叹与沉默,色与香,爱和怨。无著者姓名。无年月。无故事。无……然而内容极柔美。虚空静寂,读者灵魂中如有音乐。虚空明蓝,读者灵魂上却光明净洁。

                    大门前石板路有一个斜坡,坡上有绿树成行,长干弱枝,翠叶积叠,如翠等,如羽葆,如旗帜。常有山灵,秀腰白齿,往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p>
                    </div>
                    <div class="article-list">
                    <h2>这是一篇文章</h2>
                    <p>我好像为什么事情很悲哀,我想起“生命”。
                    ……

                    有什么人能用绿竹作弓矢,射入云空,永不落下?我之想象,犹如长箭,向云空射去,去即不返。长箭所注,在碧蓝而明静之广大虚空。

                    明智者若善用其明智,即可从此云空中,读示一小文,文中有微叹与沉默,色与香,爱和怨。无著者姓名。无年月。无故事。无……然而内容极柔美。虚空静寂,读者灵魂中如有音乐。虚空明蓝,读者灵魂上却光明净洁。

                    大门前石板路有一个斜坡,坡上有绿树成行,长干弱枝,翠叶积叠,如翠等,如羽葆,如旗帜。常有山灵,秀腰白齿,往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p>                  
                    </div>
                    <div class="article-list">
                    <h2>这是一篇文章</h2>
                    <p>我好像为什么事情很悲哀,我想起“生命”。
                    ……

                    有什么人能用绿竹作弓矢,射入云空,永不落下?我之想象,犹如长箭,向云空射去,去即不返。长箭所注,在碧蓝而明静之广大虚空。

                    明智者若善用其明智,即可从此云空中,读示一小文,文中有微叹与沉默,色与香,爱和怨。无著者姓名。无年月。无故事。无……然而内容极柔美。虚空静寂,读者灵魂中如有音乐。虚空明蓝,读者灵魂上却光明净洁。

                    大门前石板路有一个斜坡,坡上有绿树成行,长干弱枝,翠叶积叠,如翠等,如羽葆,如旗帜。常有山灵,秀腰白齿,往来其间。遇之者即喑哑。爱能使人喑哑——一种语言歌呼之死亡。“爱与死为邻”。</p>                  
                    </div>
                </div>
              
            </div>
             <div class="footer">
            <p>备案号</p>
            </div>
        </div>
     
        <script src="" async defer></script>
    </body>
</html>

CSS代码:

* {
    padding: 0;
    margin: 0;
}
.site-topbar {
    position: relative;
    z-index: 30;
    height: 40px;
    font-size: 12px;
    color: #b0b0b0;
    background: #333;
}
.container {
    position: relative;
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
}
.site-topbar .topbar-nav {
    float: left;
    height: 40px;
    line-height: 40px;
  
}
.site-topbar a {
    color: #b0b0b0;
    line-height: 40px;
    display: inline-block;
}
.site-topbar .sep {
    margin: 0 1em;
    color: #424242;
}
a, a:hover {
    text-decoration: none;
    color:white;
}
.content {
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
}
.content .windows {
    margin-right: -80px;
}
.content .windows .show-window {
    width: 240px;
    height: 160px;
    display: inline-block;
    margin-right: 75px;
    margin-top: 50px;

    overflow: hidden;
}

.show-window img {
    overflow: hidden;
    height: 160px;
   
}
.xwindow {
    width: 1200px;
    height: 50px;
    margin-top: 50px;
    background-color: rgba(0, 255, 255, 0.014);
    display: inline-block;
    border: rgba(255, 0, 0, 0.041) solid 1px;
}
.xwindow p {
    height: 50px;
    font-size: 14px;

}
.subject {
    width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
    font-size: 0;
  
  
}.subject .article{
    width: 1200px;
    display: inline-block;
    font-size: 14px;
    text-align: left;

}

.footer { 
    width: 1200px;
    bottom: 0;
    background-color: #333;
    margin: 0 auto;
    margin-top: 20px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    height: 20px;
   
}
.article-list {
    height: 150px;
    margin-top: 20px;
    background: rgba(255, 192, 203, 0.014);
    border: rgba(255, 0, 0, 0.041) solid 1px;
    line-height: 30px;
  
}
最后修改:2021 年 08 月 21 日
如果觉得我的文章对你有用,请随意赞赏