margin负值应用 一个粗糙的静态网站页面
这是一个粗糙的网站静态页面，学习练手之作。
代码很乱，整个页面非常简单，没有难度。
唯一一个有用的只是就是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;
}
版权属于：Cyril 本文链接：https://www.cyrilstudio.top/archives/574/ 转载时须注明出处及本声明
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021 年 08 月，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
