<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/中国诗词鉴赏.css" />
<style type="text/css">
#div1{
width: 530px;
height: 200px;
display: inline;
color: rgb(85, 255, 127);
}
#div2{
width: 530px;
display: inline;
height: 200px;
color: rgb(85, 255, 127);
}
#div3{
width: 530px;
display: inline;
height: 200px;
color: rgb(85, 255, 127);
}
#div p{
display: inline;
}
</style>
<title></title>
</head>
<body>
<head>
<div class="page" >
<div class="nav">
<a href="index.html" class="logo fl">首页</a>
<ul class="fr">
<li><a href="#">网站首页</a></li>
<li><a href="#">诗词格律</a></li>
<li><a href="http://www.xcz.im/library/">佳作欣赏</a></li>
<li>
<a href="111.html">格律检验</a>
</li>
</ul>
</div>+
<div class="mi">
<input type="search" name="" id="" placeholder="请输入要的搜索诗歌/作者">
<button type="button">搜索</button>
<ul class="result-list">
<li><a href="#">全部作者</a></li>
<li><a href="http://m.xichuangzhu.com/author/57ad1badc4c9710054676d9d">苏轼</a></li>
<li><a href="http://m.xichuangzhu.com/author/57b8e7ac165abd0054bf3de3">李白</a></li>
<li><a href="http://m.xichuangzhu.com/author/57b927a2128fe10054cad4c3">李贺</a></li>
<li><a href="http://m.xichuangzhu.com/author/57b927b7d342d3005ac872a6">秦观</a></li>
<li><a href="http://m.xichuangzhu.com/author/57b9836cc4c971005593dfec">杜牧</a></li>
<li><a href="http://m.xichuangzhu.com/author/57b9109fa633bd00665dcd5d">王勃</a></li>
<li><a href="http://m.xichuangzhu.com/author/57b922b57db2a2005427bf3a">刘禹锡</a></li>
</ul>
</div>
</head>
<div class="wrapper1">
<div class="col">
<img src="img/OIP-C%20(5).jpg" />
<h1>浪漫</h1>
</div>
<div class="col">
<img src="img/OIP-C%20(3).jpg" />
<h1>古雅</h1>
</div>
</div>
<div class="col">
<img src="img/OIP-C%20(4).jpg" />
<h1>风趣</h1>
</div>
<h1> 春兰秋菊，夏荷冬梅</h1>
<p>这是大自然赋予季节的美丽芳华；春风梳柳，夜雨润华，这是造物主滋润芳华的天工神韵；杏花秋雨江南，骏马秋风北塞，这是大自然诗情画意的精彩篇章；每每寄情于这些杰作，我所欣赏陶醉的是那诗歌。
在别人眼中诗歌乏味，没月故事性，在我眼中诗歌是寄托情感的不二之选，诗歌读起朗朗上口，具有一种独特的美感。
</p>
<p>每当我捧起诗集，心中月如落英一般的愁殇。书本页上，有着淡淡的香，似丁香，如，再细细闻，原来是专属诗歌的味道，使我陶醉，沉迷。
翻开一叶，文字映入眼帘，具有魅力。你那简简单单的一句话，却可以让人流连忘返，诗中总是会出现画面，让人心旷神怡。</p>
<p>诗歌是最纯粹的文字，不含任何虚假、虚伪的成分，它没有华丽的词藻，也没有动人心弦的淡雅；诗歌，它有的仅仅只是一如既往的纯粹，干净。
读一本诗歌，你会为万物凋零所叹息，你会为成功而欣喜，你会为离别而散热潸然泪下……诗歌就是这样，可以让人任意抒发，自由地感叹，并没有局限。
</p>
<p>细品诗歌，你会慢慢地人中体会到“把赞美给别人，让心中真诚温暖人心，便可以领略友爱，温馨最浓。海有容而纳细流，胸怀博大领略万物有情人间有爱“的真切。
读品诗歌总会如此，心中总会怀有对未来的憧憬和几分惆怅的留念。我人诗歌中明白了：德是高的、心是诚的、爱是纯的，心便会永远是年轻的。这一切的一切便是诗歌的馈赠。有了诗歌，亦有了内心的真情。</p>
<!-- 第二栏开始 --></br></br></br>
<div>
<asiderc class>
<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><li ><a href="#"></a></li>
</ul>
<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><li ><a href="#"></a></li>
</ul>
<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><li ><a href="#"></a></li>
</ul>
<h1 align="center">风姿绰约</h1><pre>
<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><li ><a href="#"></a></li>
</ul>
</pre>
</asider>
</div>
<div>
<video src="img/CB4E7AA0D67C294BBAC3747B8683841B.mp4" controls="controls" preload="metadata" width="540px" height="300px" ></video>
<video src="img/E87CD41103F1EA0AD11B2B2C033B1B58.mp4" controls="controls" preload="metadata" width="540px" height="300px" ></video>
<video src="img/QQ视频20221213160705.mp4"controls="controls"preload="metadata " width="540px" height="300px"></video>
</div>
<div class="wrapper1">
<div class="col"><h2 >念奴娇·赤壁怀古</h2>
<h3>【作者】苏轼 【朝代】宋</h3>
<p>大江东去，浪淘尽，千古风流人物。</p><p>故垒西边，人道是，三国周郎赤壁。</p>
<p>乱石穿空，惊涛拍岸，卷起千堆雪。</p>
<p>江山如画，一时多少豪杰。</p>
<p>遥想公瑾当年，小乔初嫁了，雄姿英发。</p>
<p>羽扇纶巾，谈笑间，樯橹灰飞烟灭。</p>
<p>故国神游，多情应笑我，早生华发。</p>
<p>人生如梦，一尊还酹江月。</p>
</div>
</div>
<div class="wrapper1">
<div class="col"><h3>将进酒 李白 〔唐代〕</h3><p>君不见黄河之水天上来，
奔流到海不复回。</p><p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p>岑夫子，丹丘生，</p>
<P>将进酒，杯莫停。</P>
</div>
</div>
<div class="wrapper1">
<div class="col"><p>现代诗也叫"白话诗"，最早可追源到清末，</p>
<p>是诗歌的一种，与古典诗歌相比而言，</p>
<p>虽都为感于物而作，但一般不拘格式和韵律。</p>
<p>现代诗形式自由，意涵丰富，意象经营重于修辞运用，</p>
<p>完全突破了古诗"温柔敦厚，哀而不怨"的特点，</p>
<p>更加强调自由开放和直率陈述与进行"可感与不可感之间"的沟通。</p>
<p>中国代表人物：徐志摩、北岛、顾城、海子等</p>
</div>
</div>
<hr />
<hr />
<hr />
<hr />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
<br/><br/><br/><br/><br/><hr /><br />
<hr />
<h4 align="center">链接速查</h4>
<div class="wrapper1">
<div class="col">
<li><a href="http://m.xichuangzhu.com/author/57ad1badc4c9710054676d9d">苏轼</a></li>
<li><a href="http://m.xichuangzhu.com/author/57b8e7ac165abd0054bf3de3">李白</a></li>
<li><a href="http://m.xichuangzhu.com/collection/57ea81d38ac247005be5621c">唐诗三百首</a></li>
<li><a href="http://m.xichuangzhu.com/collection/57ea81d30bd1d0005b1a8fb2">宋词三百首</a></li>
<li><a href="http://m.xichuangzhu.com/collection/57ea81d3bf22ec00588688db">给孩子的诗</a></li>
<li><a href="http://m.xichuangzhu.com/collection/57ea81d4da2f600060e88946">诗经全集</a></li>
<li><a href="http://m.xichuangzhu.com/collection/57ea81e4c4c971005f84e1aa">乐府诗集</a></li>
<li><a href="http://m.xichuangzhu.com/collection/57ea81d5a34131006252a4e5">古诗十九首</a></li>
<li><a href="http://m.xichuangzhu.com/collection/57ea81e5a0bb9f00585c94d3">楚辞全集</a></li>
</div>
<div class="wrapper1">
<div class="col">
<li><a href="http://m.xichuangzhu.com/author/57b927a2128fe10054cad4c3">李贺</a></li>
<li><a href="http://m.xichuangzhu.com/author/57b927b7d342d3005ac872a6">秦观</a></li>
<li><a href="http://m.xichuangzhu.com/collection/5836c5a6c4c9710054ac1e57">金刚经</a></li>
<li><a href="http://m.xichuangzhu.com/collection/58ad3ac28fd9c500670175f4">道德经</a></li>
<li><a href="http://m.xichuangzhu.com/collection/58ad3f8d1b69e6006c1a9492">周易</a></li>
<li><a href="http://m.xichuangzhu.com/collection/5ae281072f301e003dd7ac07">庄子</a></li>
<li><a href="http://m.xichuangzhu.com/collection/5ae70fcb9f54540040196541">史记 </a></li>
</div>
<div class="wrapper1">
<div class="col">
<li><a href="http://m.xichuangzhu.com/author/57b9836cc4c971005593dfec">杜牧</a></li>
<li><a href="http://m.xichuangzhu.com/author/57b9109fa633bd00665dcd5d">王勃</a></li>
<li><a href="http://m.xichuangzhu.com/collection/57ea81d4da2f600060e88946">诗经全集</a></li>
<li><a href="http://m.xichuangzhu.com/collection/57ea81e4c4c971005f84e1aa">乐府诗集</a></li>
<li><a href="http://m.xichuangzhu.com/collection/57ea81d5a34131006252a4e5">古诗十九首</a></li>
<li><a href="http://m.xichuangzhu.com/collection/57ea81e5a0bb9f00585c94d3">楚辞全集</a></li>
<li><a href="http://m.xichuangzhu.com/collection/5aa8c33d9f5454006a20a32c">白香词谱</a></li>
</div>
<div id="footer">
<p> 联系我们：<a href="#">shizixing.com</a></p>
</div>
</body>
</html>
此为页面布局
css如下
在确定页面大小以后设置链接，连接到下一页面
@charset "utf-8";
*{
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
li{
list-style: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear20{
clear: both;
margin-bottom: 20px;
}
body{
font-size: 12opx;
color: #fff;
/* background-image: url(../img/u=91673060,7145840&fm=193&f=GIF.jpg);
background-repeat: repeat; */
}
.page{
width: 1650px;
height: 2000px;
margin: 0 auto;
background-color:#53868b;
overflow: hidden;
margin: 0 auto;
}
.nav{
width: 100%;
background-color: #53a3b9;
overflow: hidden;
}
.logo{
display: block;
white-space: nowrap;
text-indent: 999em;
width: 213px;
height: 50px;
background: url(../images/logo.png) no-repeat;
background-size: cover;
overflow: hidden;
margin: 5px 8px;
}
.nav ul{
width: 720px;
overflow: hidden;
margin: 5px 10px 5px 0;
}
.nav ul li{
width: 120px;
text-align: center;
line-height: 50px;
font-size: 14px;
color: #FFF;
float: left;
}
.nav ul li:hover{
background-color: #4996a5;
}
/* 下面开始制作弹性盒子 */
.col{
width: 33.33%;
float: left;
text-align: center;
box-sizing: border-box;
padding: 20px;
color: #fff;
background: #53868b;
}
col img{
width: 327px;
height: 248px;
margin-top: 30px;
-webkit-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
}
.a: col img{
-webkit-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
}
/* -------------------------------------------------------------------------------- */
/* 下面开始搜索框 */
button,
input {
border: 0;
outline: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.mi {
position: absolute;
left: 346px;
top: 25px;
width: 538px;
height: 36px;
border: 2px solid #00ffff;
}
.mi button {
float: left;
width: 80px;
height: 33px;
background-color: #aaffff;
font-size: 16px;
color: #fff;
}
.mi input {
float: left;
width: 454px;
height: 33px;
padding-left: 10px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
border: 1px solid #e0e0e0;
outline: none;
transition: all 0.3s;
}
.mi .search {
border: 1px solid #00ffff;
}
.result-list {
display: none;
left: 0;
top: 48px;
width: 454px;
border: 1px solid #00ffff;
border-top: 0;
background: #fff;
}
.result-list a {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.result-list a:hover {
background-color: #eee;
button,
input {
border: 0;
outline: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
.mi {
position: absolute;
left: 346px;
top: 25px;
width: 538px;
height: 36px;
border: 2px solid #00ffff;
}
.mi button {
float: left;
width: 80px;
height: 33px;
background-color: #aaffff;
font-size: 16px;
color: #fff;
}
.mi input {
float: left;
width: 454px;
height: 33px;
padding-left: 10px;
padding: 0 10px;
font-size: 14px;
line-height: 48px;
border: 1px solid #e0e0e0;
outline: none;
transition: all 0.3s;
}
.mi .search {
border: 1px solid #00ffff;
}
.result-list {
display: none;
left: 0;
top: 48px;
width: 454px;
border: 1px solid #00ffff;
border-top: 0;
background: #fff;
}
.result-list a {
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
text-decoration: none;
}
.result-list a:hover {
background-color: #eee;
#max{
width: 900px;
height: 500px;
align-items: center;
margin: 5% auto;
margin-top: 0%;
}
.re{
position: relative;
height: 400px;
}
.re ul{
list-style-type:none ;
}
.re ul>li{
width: 600px;
height: 300px;
position: absolute;
transition: 1s;
opacity: 0;
}
.re ul>li img{
width: 900px;
height: 500px;
border-radius: 10%;
border: 15px solid #fffbd6;
}
#max ol {
position: relative;
display: grid;
grid-template-columns: repeat(5,75px);
grid-template-rows: auto;
grid-gap: 1em;gap: 1em;
float: right;
margin-top: 450px;
list-style: none;
top:0;left:0;
}
#max ol li {
width: 25px;
height: 10px;
font-size: 15px;
line-height: 20px;
float: left;
text-align: center;
border-radius: 2em;
border: 5px solid #999999;
}
/* 第二栏 */
#sidebar{
float: right;
width: 240px;
margin-left: 10px;
margin: 85px;
}
aside{
border-left-width: 1px solid #ccc;
border-bottom-style: 10px solid #ccc;
}
#sidebar h2{
background-color: #2267b5;
font-size: 12px;
color: #f5f5f5;
padding: 5px 0 5px 20px;
}
#sidebar ul{
margin-left: 30px;
}
#sidebar li{
margin: 8px 0;
}
#sidebar a:link,#sidebar a:visited{
color: #000;
text-decoration: none;
}
#sidebar a:hover{
text-decoration: underline;
}
#footer{
clear: both;
text-align: center;
padding-top: 10px;
background-repeat: repeat-x;
position: absolute;
width: 1650px;
height: 67px;
z-index: 6;
left: 3px;
top: 813px;
}
从此开始下一页面出现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet " href="css/为111的赛艾思.css" type="text/css"/>
<style type="text/css">
a{
display: block;
width: 360px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid #ffaaff;
text-decoration: none;
color: white;
background-color: #55aaff;
}
a:hover{
background-color: #ff557f;
}
body{
background-color: #53A3B9;
}
</style>
<title></title>
</head>
<body>
<div class='' align="center">
<div class='wrapper' style="padding-top: 0.6em;">
<form name="AnalyzePoem" method="post" action="./AnalyzePoem.aspx" id="AnalyzePoem">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTc3NzUyMTE1M2QYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgIFDUVuYWJsZVNlbGZKaXUFDkVuYWJsZU90aGVySml1no1oo4gDrpTWGZ18ldSAO9OnRQITERlqS/dnyNtp7tU=" />
</div>
<div>
<input type="hidden" name="__VIEWSTATEGENERATOR" value="29E89D69" />
</div>
<div style='min-height: 310px;display: flex;'>
<div style="width: 150px; height: 260px; background-image: url('images/logox.png'); background-position: left center; background-size: 129px; background-repeat: no-repeat;">
</div>
<div style='width: 360px; padding: 10px; margin-right: 20px; display: inline-block;'>
<div style="padding: 4px 0 8px 0;">
输入律诗或绝句<input type="submit" name="StartAnalyze" value=" 开始分析 " style="background-color:#F0F0F0;border-color:LightBlue;border-radius: 12px; padding: 4px;margin-left:4px;" /><!-- <a href="在测.html">冲</a> -->
<input type="submit" name="Save" value="保存" onclick="javascript: OnPreSave();" style="background-color:#F0F0F0;border-color:LightBlue;border-radius: 12px; padding: 4px;margin-left:10px;" /><br />
<div style="font-size: small; color: gray; margin: 4px 0;">当前使用韵书：<select onchange="javascript: SwitchRhyme()" style="font-size: small;"><option value="psy">平水韵</option><option value="ty">中华通韵</option></select></div>
<div style="font-size: small; color: grey; display: none;">以下是此前的输入：<a class="expand" href="javascript: CleanCachedPoem()">清除</a></div>
</div>
<textarea name="PoemTextbox" rows="2" cols="20" style="border-color:LightBlue;font-size:Large;height:142px;width:308px;">
</textarea><br />
<span class="inlineComment2"> 是否允许：</span>
<input id="EnableSelfJiu" type="checkbox" name="EnableSelfJiu" checked="checked" /><span class="inlineComment2" style="margin-right: 1rem;">本句自救</span>
<input id="EnableOtherJiu" type="checkbox" name="EnableOtherJiu" /><span class="inlineComment2">对句相救</span>
<div style="font-size: small; color: gray;">
<div >
<em ></em>
<span</span>
</div>
<div align="left">
<a href="中国诗词鉴赏.html">返回前页</a>
<a href="首页面.html">返回首页</a>
<a href="https://wx.qq.com/index.php">微信分享</a>
<a href="https://im.qq.com/index">QQ分享</a>
<a href="#">更多了解</a>
</div>
</body>
</html>
关于此的css为
.wrapper{
text-align: center;
width: 500px;
height: 500px;
}，仅设置大小
2193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
