文案馆网页成果演示
文案馆网页设计
文案馆首页
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css\style.css">
<title>文案</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script language="JavaScript" src="js\script.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body background="photo\17.jpg" onload="startTime()">
<h1 >文案馆</h1>
<div class="first">
<p>“人死了，就变成一个星星。”</p>
<P>“干嘛变成星星呀？”</P>
<p>“给走夜道儿的人照个亮儿。”</p>
<p style="text-indent: 16cm;">—————史铁生</p>
</div><p style="text-indent: 0.5cm;"><font color="blue"><span id="nowDateTimeSpan"></span></font> </p>
<!--导航栏-->
<ul>
<li><a href="index1.html"target="_blank">登录/注册</a></li>
<li><a href="index.html">首页</a></li>
<li><a href="index3.html"target="_blank">电影台词</a></li>
<li><a href="#motto">座右铭</a></li>
<li><a href="#lines">诗歌</a></li>
<li><a href="#sentence">说说</a></li>
<li><a href="#about">关于</a></li>
</ul>
<!--内容区域-->
<div class="row">
<!--左侧栏-->
<div class="column side">
<br>
<p>语</p>
<br>
<p>言</p>
<br>
<p>抚</p>
<br>
<p>慰</p>
<br>
<p>心</p>
<br>
<p>灵</p>
</div>
<!--中间部分-->
<div class="column middle">
<!--中间内容第一部分-->
<h2>名句推荐</h2>
<div class="photo">
<div class="photo1">
<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- 指示符 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img style=" width: 100%;height:50%;"src="photo\1.jpeg" class="d-block" >
</div>
<div class="carousel-item">
<img style=" width: 100%;height:50%;"src="photo\11.webp" class="d-block" >
</div>
<div class="carousel-item">
<img style=" width:100%;height:50%;" src="photo\7.jpeg" class="d-block" >
</div>
</div>
<!-- 左右切换按钮 -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<br><br>
<p>我从来就没有太阳</p>
<p>所以不怕失去</p>
<p style="text-indent: 1cm;">-- by东野圭吾《白夜行》</p>
</div>
<div class="photo2">
<!-- 轮播 -->
<div id="demo1" class="carousel slide" data-bs-ride="carousel">
<!-- 指示符 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo1" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo1" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo1" data-bs-slide-to="2"></button>
</div>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img style=" width: 100%;height:50%;"src="photo\3.jpeg" class="d-block" >
</div>
<div class="carousel-item">
<img style=" width: 100%;height:50%;"src="photo\19.jpeg" class="d-block" >
</div>
<div class="carousel-item">
<img style=" width:100%;height:50%;" src="photo\20.jpeg" class="d-block" >
</div>
</div>
<!-- 左右切换按钮 -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo1" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo1" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<br><br>
<p>黄昏之时</p>
<p>我们可以见到自己想见的人</p>
<p style="text-indent: 1.2cm;">-- by新海诚《你的名字》</p>
</div>
<div class="photo3">
<!-- 轮播 -->
<div id="demo2" class="carousel slide" data-bs-ride="carousel">
<!-- 指示符 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo2" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo2" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo2" data-bs-slide-to="2"></button>
</div>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img style=" width: 100%;height:50%;"src="photo\8.jpeg" class="d-block" >
</div>
<div class="carousel-item">
<img style=" width: 100%;height:50%;"src="photo\9.webp" class="d-block" >
</div>
<div class="carousel-item">
<img style=" width:100%;height:50%;" src="photo\10.webp" class="d-block" >
</div>
</div>
<!-- 左右切换按钮 -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo2" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo2" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<br><br>
<p>迷失的人迷失了</p>
<p>相逢的人会再相逢</p>
<p style="text-indent: 0.6cm;">--by村上春树《挪威的森林》</p>
</div>
<div class="photo4">
<!-- 轮播 -->
<div id="demo3" class="carousel slide" data-bs-ride="carousel">
<!-- 指示符 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo3" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo3" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo3" data-bs-slide-to="2"></button>
</div>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img style=" width: 100%;height:50%;"src="photo\13.jpeg" class="d-block" >
</div>
<div class="carousel-item">
<img style=" width: 100%;height:50%;"src="photo\14.jpeg" class="d-block" >
</div>
<div class="carousel-item">
<img style=" width:100%;height:50%;" src="photo\15.jpeg" class="d-block" >
</div>
</div>
<!-- 左右切换按钮 -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo3" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo3" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<br><br>
<p>满地都是六便士</p>
<p>他却抬头看见了月亮</p>
<p style="text-indent: 0.8cm;">-- by毛姆《月亮与六便士》</p>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--中间内容第二部分-->
<h2>文案推荐</h2>
<div class="copywriting">
<ul1>
<strong>
<li>不管你曾经经历怎样的繁华与喧闹，最终还是要靠自己孤独的走完人生的全程</li><br>
<li>我在人间贩卖黄昏，只为收集世间温柔去见你</li><br>
<li>春来夏往，秋收冬藏，我们来日方长</li><br>
<li>愿你执迷不悟时，少受点伤，愿你幡然醒悟时，物是人是</li><br>
<li>陌生人,我也为你祝福,愿你有一个灿烂的前程,愿你有情人终成眷属,愿你在尘世获得幸福,我只愿面朝大海,春暖花开。 --by 海子</li><br>
<li>相遇总是措不及防，离别都是蓄谋已久，我们要习惯身边的忽冷忽热，也要看淡那些渐行渐远。 --by《人间失格》</li><br>
<li>他自人山人海中来，原来只为给我一场空欢喜，你来时携风带雨，我无处可避。你走时乱了四季，我久病难医。 --by《人间世格》</li><br>
<li>每个人都有属于自己的一片森林,也许我们 从来不曾去过,但它一直在那里,总会在那里。迷失的人迷失了,相逢的人会再相逢。 --by 村上春树</li><br>
<li>一切全在你自己。对你来说，一切都是自由的，在你面前是无限的可能。 --by东野圭吾《解忧杂货店》</li><br>
<li>在雨中来，于晴时去。很久以后，我们的痕迹会慢慢淡去，但这里的故事却不会终止。不是每一场雨后都有彩虹，但是晴天总是会到来</li><br>
<li>山有顶峰，湖有彼岸,在人生漫漫长途中，万物皆有回转。当我们觉得余味苦涩，请你相信，切终有回甘。</li><br>
<li>热爱之所以有力量，就在于你就坚守它就好，永远不要去想它会有什么结果。 --by撒贝宁 </li><br>
<li>再微小的光也是光，再平凡的人也有他们人生当中的高光时刻。 --by康辉</li><br>
<li>所谓无底深渊，下去，也是前程万里。 --by木心《素履之往》</li><br>
<li>从前的日色变得慢。车，马，邮件都慢。一生只够爱一个人。--by木心《从前慢》</li><br>
<li>那个时候，我还不知道，有一天会和爱的人离散；也不知道，有些人真的会彻底消失再也不会回来，不会再见。--by《云边有个小卖部》</p></li>
</strong>
</ul1>
</div>
<br> <br>
<!--中间内容第三部分-->
<h2>书籍推荐</h2>
<div class="book">
<div id="book1">
<img style=" width: 70%;height:80%;" src="photo\2.webp"alt="显示错误">
<br><br>
<a href="https://baike.baidu.com/item/%E6%8C%AA%E5%A8%81%E7%9A%84%E6%A3%AE%E6%9E%97/261?fr=aladdin" target="_blank">《挪威的森林》</a>
<br>
<a href="https://baike.baidu.com/item/%E6%9D%91%E4%B8%8A%E6%98%A5%E6%A0%91/1070?fr=aladdin" target="_blank">-- by村上春树</a>
</div>
<div id="book2">
<img style=" width: 70%;height:80%;" src="photo\4.webp" alt="显示错误">
<br><br>
<a href="https://baike.baidu.com/item/%E4%BA%BA%E9%97%B4%E5%A4%B1%E6%A0%BC/35849?fr=aladdin"target="_blank">《人间失格》</a>
<br>
<a href="https://baike.baidu.com/item/%E5%A4%AA%E5%AE%B0%E6%B2%BB/5426741"target="_blank">-- by太宰治</a>
</div>
<div id="book3">
<img style=" width: 70%;height:80%;" src="photo\5.webp" alt="显示错误">
<br><br>
<a href="https://baike.baidu.com/item/%E4%BA%91%E8%BE%B9%E6%9C%89%E4%B8%AA%E5%B0%8F%E5%8D%96%E9%83%A8/22693709?fr=aladdin"target="_blank">《云边有个小卖部》</a>
<br>
<a href="https://baike.baidu.com/item/%E5%BC%A0%E5%98%89%E4%BD%B3" target="_blank">-- by张嘉佳</a>
</div>
<div id="book4">
<img style=" width: 70%;height:80%;"src="photo\18.webp" alt="显示错误">
<br><br>
<a href="https://baike.baidu.com/item/%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97%E3%80%82/20155861?fr=aladdin"target="_blank">《你的名字》</a>
<br>
<a href="https://baike.baidu.com/item/%E6%96%B0%E6%B5%B7%E8%AF%9A" target="_blank">-- by新海诚</a>
</div>
</div>
</div>
<!--右侧栏-->
<div class="column side">
<br>
<p>文</p>
<br>
<p>学</p>
<br>
<p>唤</p>
<br>
<p>醒</p>
<br>
<p>灵</p>
<br>
<p>魂</p>
</div>
</div>
<!--简单动态效果-->
<div class="animation">
</div>
<!--底部区域-->
<div class="footer">
<hr>
<p>此网页图片及文案皆来自百度</p>
<p>如有侵权，概不负责！</p>
</div>
</body>
</html>CSS
body
{
/*背景图片*/
background-repeat: no-repeat;
background-size: 1500px 230px;
background-attachment:scroll;
background-position:top;
}
/*左右侧栏*/
.column
{
float: left;
padding: 20px;
}
/*左右侧栏文字*/
.column.side
{
text-indent: 0.8cm;
font-size: 0.7cm;
color: aquamarine;
width: 2%;
}
.column.middle
{
width: 90%;
}
/* 列后清除浮动 */
.row:after
{
content: "";
display: table;
clear: both;
}
/*底部区域*/
.footer {
background-color: #f1f1f1;
padding: 0.2px;
text-align: center;
font-size: 0.2cm;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
/*内容格式*/
h1
{
text-shadow: 5px 5px 5px pink;
font-family: 华文行楷;
font-size: 40px;
text-align:center;
color:black;
}
.first
{
text-indent: 10cm;
font-size:16px;
font-family: 隶书;
line-height:0.5cm;
}
ul
{
list-style-type:none;
margin: 10px;
padding: 0;
overflow: auto;
background-color:mediumturquoise;
}
li {
float: left;
}
li a {
display: block;
color: black;
font-size: 18px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color:bisque;
}
h2
{
text-indent: 2cm;
font-family: 幼圆;
font-size: 25px;
}
.photo1
{
font-family: 隶书;
position:relative;
left: 170px;
width: 17%;
float:left;
margin-left: 1cm;
line-height: 4px;
}
.photo2
{
font-family: 隶书;
position: relative;
left: 170px;
width: 17%;
float:left;
margin-left: 1.2cm;
line-height: 4px;
}
.photo3
{
font-family: 隶书;
position:relative;
left: 170px;
width: 17%;
float: left;
margin-left: 1.2cm;
line-height: 4px;
}
.photo4
{
font-family: 隶书;
position:relative;
left: 170px;
width: 17%;
float: left;
margin-left: 1.2cm;
line-height: 4px;
}
.copywriting
{
text-indent: 4.5cm;
font-family: 华文楷体;
font-size: 0.5cm;
line-height: 40px;
}
#book1
{
font-family: 隶书;
position:relative;
left: 170px;
width: 21%;
height:300px;
float: left;
line-height: 20px;
}
#book2
{
font-family: 隶书;
position:relative;
left: 170px;
width: 21%;
height:300px;
float: left;
line-height: 20px;
}
#book3
{
font-family: 隶书;
position:relative;
left: 170px;
width: 21%;
height:300px;
float: left;
line-height: 20px;
}
#book4
{
font-family: 隶书;
position:relative;
left: 170px;
width: 21%;
height:300px;
float: left;
line-height: 20px;
}
/*动态变化*/
.animation
{
width:100%;
height:15px;
background:greenyellow;
animation:myfirst 5s;
-webkit-animation:myfirst 5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes myfirst
{
from {background:greenyellow;}
to {background:yellow;}
}
@-webkit-keyframes myfirst
{
from {background:greenyellow}
to {background:yellow;}
}
?Java Script
function startTime()
{
var today=new Date();//定义日期对象
var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年
var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年
var dd = today.getDate();//通过日期对象的getDate()方法返回年
var hh=today.getHours();//通过日期对象的getHours方法返回小时
var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟
var ss=today.getSeconds();//通过日期对象的getSeconds方法返回秒
// 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09
MM=checkTime(MM);
dd=checkTime(dd);
mm=checkTime(mm);
ss=checkTime(ss);
var day; //用于保存星期（getDay()方法得到星期编号）
if(today.getDay()==0) day = "星期日 "
if(today.getDay()==1) day = "星期一 "
if(today.getDay()==2) day = "星期二 "
if(today.getDay()==3) day = "星期三 "
if(today.getDay()==4) day = "星期四 "
if(today.getDay()==5) day = "星期五 "
if(today.getDay()==6) day = "星期六 "
document.getElementById('nowDateTimeSpan').innerHTML=yyyy+"-"+MM +"-"+ dd +" " + hh+":"+mm+":"+ss+" " + day;
setTimeout('startTime()',1000);//每一秒中重新加载startTime()方法
}
function checkTime(i)
{
if (i<10){
i="0" + i;
}
return i;
} 文案馆登录页面
HTML
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="css\style1.css">
<script language="JavaScript" src="js\script1.js"></script>
<title>登陆/注册</title>
</head>
<body background="photo\16.jpeg">
<br>
<div class="home">
<a class="home1" href="index.html">首页 </a>
|<a class="home1" href="#home1"> 帮助 </a>
</div>
<h2>文案馆</h2>
<div class="box">
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<hr>
<div id="line"></div>
<br><br><br><br>
<p>账号：
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">账号是必须的</span>
</span>
</p>
<p>密码：
<input type="password" name="password" ng-model="password" required>
<span style="color:red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
<span ng-show="myForm.password.$error.required">密码是必须的</span>
</span>
</p>
<br>
<p ><input class="submit" type="submit" value="登 录" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.password.$dirty && myForm.password.$invalid"></p1>
</form>
<div class="text">
<br><br>
<a href="#text" style="color: aqua;float: left; font-size: 13px;">《网络服务使用协议》</a>
<br>
<a href="#text" style="color: aqua;float: left;font-size: 13px;">《个人信息保护政策》</a>
</div>
<br><br>
<div class="register">
没有账号 <a style="color: brown;" href="index2.html"> 立即注册 >></a>
</div>
</div>
</body>
</html>css
body
{
/*背景图片*/
background-repeat: repeat;
background-attachment:scroll;
background-size: 1600px 800px;
}
h2
{
text-shadow: 5px 5px 5px pink;
font-family: 华文行楷;
font-size: 40px;
text-indent: 7cm;
color:black;
}
.box
{
text-align:left;
text-indent: 3cm;
width: 800px;
height: 500px;
margin:auto ;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:white;
}
.home
{
float: right;
padding-top: 70px;
text-indent: -11.6cm;
color:white;
}
.home1
{
text-decoration: none;
color: white;
}
.home1:hover
{
color: rgb(255, 0, 60);
}
#line
{
height: 400px;
border-right: 0.1px solid pink;
float: right;
margin-right :140px;
padding-right: 0px ;
}
.submit
{
font-weight: 540;
color:white;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 170px;
height: 30px;
background-color:rgb(255, 145, 0);
float: none;
margin-left: 55px;
}
.submit:hover {
background-color:orange;
}
.register
{
font-family: 华文行楷;
float: right;
}
Java Script
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = '';
$scope.email = '';
});文案馆注册页面
HTML
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="css\style1.css">
<script language="JavaScript" src="js\script1.js"></script>
<title>登陆/注册</title>
</head>
<body background="photo\16.jpeg">
<br>
<div class="home">
<a class="home1" href="index.html">首页 </a>
|<a class="home1" href="#home1"> 帮助 </a>
</div>
<h2>文案馆</h2>
<div class="box">
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<hr>
<div id="line"></div>
<br><br><br><br>
<p>手机号：
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">账号是必须的</span>
</span>
</p>
<p > 邮箱 ：
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
<p>验证码：
<input type="vc" name="vc" ng-model="vc" required>
<span style="color:red" ng-show="myForm.vc.$dirty && myForm.vc.$invalid">
<span ng-show="myForm.vc.$error.required">密码是必须的</span>
</span>
<p> 密码：
<input type="password" name="password" ng-model="password" required>
<span style="color:red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
<span ng-show="myForm.password.$error.required">密码是必须的</span>
</span>
</p>
<br>
<p ><input class="submit" type="submit" value="注 册" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.password.$dirty && myForm.password.$invalid"></p1>
</form>
<div class="text">
<a href="#text" style="color: aqua;float: left; font-size: 13px;">《网络服务使用协议》</a>
<br>
<a href="#text" style="color: aqua;float: left;font-size: 13px;">《个人信息保护政策》</a>
</div>
<br>
<div class="register">
已有账号 <a style="color: brown;" href="index1.html"> 立即登录 >></a>
</div>
</div>
</body>
</html>注：注册页面和登陆页面 css,js代码相同
电影台词页面
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<title>电影台词</title>
<link rel="stylesheet" href="css\style2.css">
</head>
<body >
<br>
<h3>文案馆·电影台词</h3>
<br><br>
<div class="row">
<!--中间部分-->
<div class="column middle">
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- 指示符 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
</div>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img style=" width: 100%;height:50%;"src="photo\21.jpeg" class="d-block" >
</div>
<div class="carousel-item">
<img style=" width: 100%;height:50%;"src="photo\22.jpeg" class="d-block" >
</div>
<div class="carousel-item">
<img style=" width:100%;height:50%;" src="photo\23.jpeg" class="d-block" >
</div>
<div class="carousel-item">
<img style=" width:100%;height:50%;" src="photo\24.jpeg" class="d-block" >
</div>
</div>
<!-- 左右切换按钮 -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<ul>
<li><a href="index1.html"target="_blank">登录/注册</a></li>
<li><a href="index.html">首页</a></li>
<li><a href="index3.html">电影台词</a></li>
<li><a href="#motto">座右铭</a></li>
<li><a href="#lines">诗歌</a></li>
<li><a href="#sentence">说说</a></li>
<li><a href="#about">关于</a></li>
</ul>
<h3>电影台词</h3>
<br><br>
<div class="text">
<div id="text1">
<img style=" width: 100%;height:70%;" src="photo\26.jpg"alt="显示错误">
<br>
<p >这个世界上从来就没有值得不值得，只有喜欢和不喜欢</p>
</div>
<div id="text2">
<img style=" width: 100%;height:70%;" src="photo\27.jpg" alt="显示错误">
<br>
<p >一只蛋，如果从外面被敲开，注定只能被吃掉。如果从里面啄开，说不定是只鹰！</p>
</div>
<div id="text3">
<img style=" width: 100%;height:70%;" src="photo\28.jpg" alt="显示错误">
<br>
<p >“爸爸，如果这次我真的走了，只有一个要求，你和妈妈不要掉眼泪，不要哭！”</p>
</div>
<div id="text4">
<img style=" width: 100%;height:70%;" src="photo\29.jpg" alt="显示错误">
<br>
<p >向前跑，不退不逃，不去讨好。向前跑，风中吹响号角。</p>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="text21">
<div id="text5">
<img style=" width: 100%;height:70%;" src="photo\30.jpg"alt="显示错误">
<br>
<p >那是我们的边界，祖国的方向，新中国万岁！</p>
</div>
<div id="text6">
<img style=" width: 100%;height:70%;" src="photo\31.jpg" alt="显示错误">
<br>
<p >如果这部戏没有剧本呢？那我只能瞎…即兴发挥</p>
</div>
<div id="text7">
<img style=" width: 100%;height:70%;" src="photo\32.jpg" alt="显示错误">
<br>
<p >“你说未来什么时候来” “如果此时此刻，你喜欢的人也刚好喜欢你，那么现在就是未来 ” </p>
</div>
<div id="text8">
<img style=" width: 100%;height:70%;" src="photo\33.jpg" alt="显示错误">
<br>
<p >也许我的存在本身就是一封写给你的情书。</p>
</div>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="text22">
<div id="text9">
<img style=" width: 100%;height:70%;" src="photo\34.jpg"alt="显示错误">
<br>
<p >只要鼓点还能在心中响起，我们就是雄狮！</p>
</div>
<div id="text10">
<img style=" width: 100%;height:70%;" src="photo\35.jpg" alt="显示错误">
<br>
<p >我们一辈子都是诚实的人，你像踢皮球一样踢我们。</p>
</div>
<div id="text11">
<img style=" width: 100%;height:70%;" src="photo\36.jpg" alt="显示错误">
<br>
<p > 一个小姑娘，想要站在舞台上，那得受多少委屈，多少风险，你们看不到，也不理解，就只能看到她漂亮。</p>
</div>
<div id="text12">
<img style=" width: 100%;height:70%;" src="photo\37.jpg" alt="显示错误">
<br>
<p >最好的前任就要像死了一样，不要再打扰对方的生活。</p>
</div>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="text23">
<div id="text13">
<img style=" width: 100%;height:70%;" src="photo\38.jpg"alt="显示错误">
<br>
<p >只要心有归处，就不会是恶妖。 生死与共，永不背叛。</p>
</div>
<div id="text14">
<img style=" width: 100%;height:70%;" src="photo\39.jpg" alt="显示错误">
<br>
<p >叔叔我想问您，一个人如果没有爸爸妈妈的话该怎么办？</p>
</div>
<div id="text15">
<img style=" width: 100%;height:70%;" src="photo\40.jpg" alt="显示错误">
<br>
<p > 再不堪，那也是我啊。这辈子人潮汹涌，感谢遇见你</p>
</div>
<div id="text16">
<img style=" width: 100%;height:70%;" src="photo\41.jpg" alt="显示错误">
<br>
<p > 你一直在追求一个叫大海的东西，其实你一直就在海里。</p>
</div>
</div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<!--底部-->
<div class="footer">
<hr>
<p>此网页图片及文案皆来自百度</p>
<p>如有侵权，概不负责！</p>
</div>
</body>
</html>CSS
body
{
background-repeat: no-repeat;
background-attachment:scroll;
background-position:top;
}
.row
{
padding: 10px;
}
/* 列后清除浮动 */
.row:after
{
content: "";
display: table;
clear: both;
}
.column.middle
{
width: 1000px;
margin: auto;
}
ul
{
list-style-type:none;
margin: 10px;
padding: 0;
overflow: auto;
background-color:mediumturquoise;
}
li {
float: left;
}
li a {
display: block;
color: black;
font-size: 18px;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color:bisque;
}
h3
{
float: left;
text-indent: 1cm;
text-shadow: 5px 5px 5px pink;
font-family: 华文行楷;
font-size: 25px;
color:black;
}
#demo
{
width: 97%;
height: 18%;
margin: auto;
}
/*底部区域*/
.footer {
background-color: #f1f1f1;
padding: 0.2px;
text-align: center;
font-size: 0.2cm;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#text1
{
font-family: 隶书;
position:relative;
left: 70px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text2
{
font-family: 隶书;
position:relative;
left: 120px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text3
{
font-family: 隶书;
position:relative;
left: 170px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text4
{
font-family: 隶书;
position:relative;
left: 230px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text5
{
font-family: 隶书;
position:relative;
left: 70px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text6
{
font-family: 隶书;
position:relative;
left: 120px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text7
{
font-family: 隶书;
position:relative;
left: 170px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text8
{
font-family: 隶书;
position:relative;
left: 230px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text9
{
font-family: 隶书;
position:relative;
left: 70px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text10
{
font-family: 隶书;
position:relative;
left: 120px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text11
{
font-family: 隶书;
position:relative;
left: 170px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text12
{
font-family: 隶书;
position:relative;
left: 230px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text13
{
font-family: 隶书;
position:relative;
left: 70px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text14
{
font-family: 隶书;
position:relative;
left: 120px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text15
{
font-family: 隶书;
position:relative;
left: 170px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}
#text16
{
font-family: 隶书;
position:relative;
left: 230px;
width: 15%;
height:200px;
float: left;
line-height: 20px;
text-indent: 0cm;
font-size:0.3cm;
}注意：网页图片没有导入，可自行添加,?
? ? ? ? ?完整文件点击链接下载文案馆.zip-行业报告文档类资源-CSDN下载
