应同学要求，帮忙简单设计一个静态网页。我就愉快的答应了，其实我心里挺没底的，但是基于我前段时间有过微信小程序的基础学习，在部分css代码上还是差不多的。
帮同学做的这个网页是《传闻中的陈芊芊》这个电视剧的部分相关内容。
下面是最终的网页界面。
网页界面最终效果：
源代码：
下面只是展示了部分的源代码，相关素材及全部代码可以点击此处链接下载
🤭🤭🤭
index.html
<html>
<head>
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>传闻中的陈芊芊</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<!--logo开始-->
<div class="logo" id="main">
<div class="list">
<ul>
<li class="p7"><a href="#"><img class="img1" src="img/chenchuchu01.png" alt="" /></a></li>
<li class="p6"><a href="#"><img class="img1" src="img/chenqianqian01.png" alt="" /></a></li>
<li class="p5"><a href="#"><img class="img1" src="img/chenyuanyuan01.png" alt="" /></a></li>
<li class="p4"><a href="#"><img class="img1" src="img/hanshuo01.png" alt="" /></a></li>
<li class="p3"><a href="#"><img class="img1" src="img/peiheng01.png" alt="" /></a></li>
<li class="p2"><a href="#"><img class="img1" src="img/sumu01.png" alt="" /></a></li>
<li class="p1"><a href="#"><img class="img1" src="img/chenqianqian01.png" alt="" /></a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var $a = $(".buttons a");
var cArr = ["p7", "p6", "p5", "p4", "p3", "p2", "p1"];
var index = 0;
$(".next").click(
function () {
nextimg();
}
)
$(".prev").click(
function () {
previmg();
}
)
//上一张
function previmg() {
cArr.unshift(cArr[6]);
cArr.pop();
//i是元素的索引，从0开始
//e为当前处理的元素
//each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
$("li").each(function (i, e) {
$(e).removeClass().addClass(cArr[i]);
})
index--;
if (index < 0) {
index = 6;
}
show();
}
//下一张
function nextimg() {
cArr.push(cArr[0]);
cArr.shift();
$("li").each(function (i, e) {
$(e).removeClass().addClass(cArr[i]);
})
index++;
if (index > 6) {
index = 0;
}
show();
}
//通过底下按钮点击切换
$a.each(function () {
$(this).click(function () {
var myindex = $(this).index();
var b = myindex - index;
if (b == 0) {
return;
}
else if (b > 0) {
/*
* splice(0,b)的意思是从索引0开始,取出数量为b的数组
* 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
* 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
* 这时候原本的数组也将这部分数组进行移除了
* 再把移除的数组添加的原本的数组的后面
*/
var newarr = cArr.splice(0, b);
cArr = $.merge(cArr, newarr);
$("li").each(function (i, e) {
$(e).removeClass().addClass(cArr[i]);
})
index = myindex;
show();
}
else if (b < 0) {
/*
* 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下
* 而b现在是负值,所以取出索引0到-b即为需要取出的数组
* 也就是从原本的照片到需要点击的照片的数组
* 然后将原本的数组跟取出的数组进行拼接
* 再次倒序,使原本的倒序变为正序
*/
cArr.reverse();
var oldarr = cArr.splice(0, -b)
cArr = $.merge(cArr, oldarr);
cArr.reverse();
$("li").each(function (i, e) {
$(e).removeClass().addClass(cArr[i]);
})
index = myindex;
show();
}
})
})
//点击class为p2的元素触发上一张照片的函数
$(document).on("click", ".p2", function () {
previmg();
return false;//返回一个false值，让a标签不跳转
});
//点击class为p4的元素触发下一张照片的函数
$(document).on("click", ".p4", function () {
nextimg();
return false;
});
// 鼠标移入box时清除定时器
$(".box").mouseover(function () {
clearInterval(timer);
})
// 鼠标移出box时开始定时器
$(".box").mouseleave(function () {
timer = setInterval(nextimg, 4000);
})
// 进入页面自动开始定时器
timer = setInterval(nextimg, 4000);
</script>
<!--logo结束-->
<!--*****************************************************************************-->
<!--导航栏开始-->
<div class="jianxi1"></div>
<div class="Navigation">
<a href="index.html#main" target="_parent">基本介绍</a>
<a href="actors.html#actor" target="_parent">参演演员</a>
<a href="fans.html#fans" target="_parent">粉丝见面会</a>
<a href="wonderful_moments.html#video" target="_parent">精彩瞬间</a>
<a href="talk_over.html#form" target="_parent">留言讨论</a>
</div>
<!--导航栏结束-->
<!--*****************************************************************************-->
<div class="jianxi2"></div>
<!--内容开始-->
<div class="content">
<!--第一版块开始-->
<div class="contentone">
<!--栏目一开始-->
<div class="lanmuyi">
<div class="lanmuheadyi">
<div class="lanmunameyi"><span class="nameyi"></span></div>
<!--栏目名-->
<div class="lanmumoeryi"><span class="moreyi"></span></div>
<!--更多-->
</div>
<!--栏目头部-->
<div class="lanmucontent"><img src="img/lanmu01_img.png" width="250" height="270" alt="" /></div>
<!--栏目内容-->
</div>
<!--栏目一结束-->
<!--栏目二开始-->
<div class="lanmuer">
<div class="lanmuheader">
<div class="lanmunameer"><span class="nameer">基本介绍</span></div>
<!--栏目名-->
<div class="lanmumoerer"><span class="moreer">更多...</span></div>
<!--更多-->
</div>
<p>《传闻中的陈芊芊》根据同名影视剧改编。
是赵露思、丁禹兮等主演的古装爱情剧，由腾讯视频全网独播。
母胎单身七流编剧陈小千呕心沥血写了一部女尊题材大剧，
原可顺利开机，却因为演员韩明星对剧本感情戏质疑过多而崩盘。
愤懑难平发誓要证明自己能力的她，意外卡进了自己的剧本，
变身东梁女国地位尊贵但恶评满国的三公主。
原本一个活不过三集的小女配，为了活命开编剧副本，
逆转荒唐人生，
在不懂套路的犬系世子韩烁和人设完美外貌满分的太学院少傅裴恒之间，
最终学会爱与成长
</p>
<div class="lanmucontent"></div>
</div>
<!--栏目二结束-->
<!--栏目三开始-->
<div class="lanmusan">
<div class="lanmuheadsan">
<div class="lanmunameyi"><span class="nameyi"></span></div>
<!--栏目名-->
<div class="lanmumoeryi"><span class="moreyi"></span></div>
<!--更多-->
</div>
<!--栏目头部-->
<div class="lanmucontent"><img src="img/lanmu03_bg.png" width="250" height="270" alt="" /></div>
<!--栏目内容-->
</div>
<!--栏目三结束-->
</div>
<!--第一版块结束-->
<div class="jianxi3"></div>
<!--第二版块开始-->
<div class="contenttwo">
<!--栏目四开始-->
<div class="lanmusi">
<div class="lanmuheadsi">
<div class="lanmunamesi"><span class="namesi"></span></div>
<!--栏目名-->
<div class="lanmumoersi"><span class="moresi"></span></div>
<!--更多-->
</div>
<!--栏目头部-->
<div class="lanmucontent"><img src="img/lanmusi_img.png" width="466" height="270
" alt="" /></div>
<!--栏目内容-->
</div>
<!--栏目四结束-->
<!--栏目五开始-->
<div class="lanmuwu">
<div class="lanmuheadwu">
<div class="lanmunamewu"><span class="namewu"></span></div>
<!--栏目名-->
<div class="lanmumoerwu"><span class="morewu"></span></div>
<!--更多-->
</div>
<!--栏目头部-->
<div class="lanmucontent"><img src="img/lanmu5.jpg" width="466" height="270" alt="" /></div>
<!--栏目内容-->
</div>
<!--栏目五结束-->
</div>
<!--第二版块结束-->
</div>
<!--内容结束-->
<div class="jianxi2"></div>
<div class="footerX">CopyRight@copy2020 </div>
<!--鼠标特效-->
<script src="js/jquery-2.2.0.min.js"></script>
<!--<script>
var a_idx = 0;
jQuery(document).ready(function ($) {
addTips = function (e) {
var a = new Array("传闻", "中", "的", "陈芊芊", "传闻", "中", "的", "陈芊芊", "传闻", "中", "的", "陈芊芊");
var i = $("<span />").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX, y = e.pageY;
i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append(i);
i.animate({ "top": y - 180, "opacity": 0 }, 1500, function () { i.remove() })
return false;
}
//绑定鼠标左键
$("body").click(addTips);
//绑定鼠标左键
$("body").bind("contextmenu", addTips)
});
</script>-->
<script>
function o(w, v, i) {
return w.getAttribute(v) || i
}
function j(i) {
return document.getElementsByTagName(i)
}
function l() {
var i = j("script"), w = i.length, v = i[w - 1];
return { l: w, z: o(v, "zIndex", -1), o: o(v, "opacity", 0.5), c: o(v, "color", "0,0,0"), n: o(v, "count", 99) }
}
function k() {
r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
function b() {
e.clearRect(0, 0, r, n);
var w = [f].concat(t);
var x, v, A, B, z, y;
t.forEach(function (i) {
i.x += i.xa,
i.y += i.ya,
i.xa *= i.x > r || i.x < 0 ? -1 : 1,
i.ya *= i.y > n || i.y < 0 ? -1 : 1,
e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
for (v = 0; v < w.length; v++) {
x = w[v];
if (i !== x && null !== x.x && null !== x.y) {
B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
}
}
w.splice(w.indexOf(i), 1)
}), m(b)
}
var u = document.createElement("canvas"), s = l(), c = "c_n" + s.l, e = u.getContext("2d"), r, n,
m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
window.setTimeout(i, 1000 / 45)
},
a = Math.random, f = { x: null, y: null, max: 20000 };
u.className = "particle_canvas";
var browserName = navigator.userAgent.toLowerCase();
if (/msie/i.test(browserName) && !/opera/.test(browserName)) {
u.className += ' ie10_gte';
};
u.id = c;
u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
j("body")[0].appendChild(u);
k(), window.onresize = k;
window.onmousemove = function (i) {
i = i || window.event,
f.x = i.clientX,
f.y = i.clientY
},
window.onmouseout = function () {
f.x = null,
f.y = null
};
for (var t = [], p = 0; s.n > p; p++) {
var h = a() * r,
g = a() * n,
q = 2 * a() - 1,
d = 2 * a() - 1;
t.push({ x: h, y: g, xa: q, ya: d, max: 6000 })
}
setTimeout(function () { b() }, 100)
</script>
<style>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
}
20%,
60% {
transform: rotate(-25deg)
}
40%,
80% {
transform: rotate(10deg)
}
}
@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
</style>
<!--鼠标特效结束-->
</body>
</html>
actors.html关键代码：
<!--角色板块开始-->
<div class="content03">
<!--*******栏目6********-->
<div class="lanmu6">
<div class="lanmu6_01">
</div>
<div class="lanmu6_middle"></div>
<div class="lanmu6_02" >
<h3>陈芊芊</h3>
传闻中嚣张跋扈、在花垣城中肆意妄为的三郡主，
让别人叫自己三公主，在现实生活当中是一名编剧，
无意中穿越到自己女尊的剧本当中，
为了活下去用着三郡主的角色努力生活下去，
一边与韩烁斗智斗法，
一边尝试撮合原来的女主陈楚楚和韩烁，
不料韩烁却反倒对她情根深种。
</div>
</div>
<!--*******栏目7********-->
<div class="lanmu7">
<div class="lanmu701">
<h3>陈楚楚</h3>
花垣城二郡主，本是下任女帝的最佳人选，
正直善良、乐观漂亮，却因陈芊芊抢走戏份后，
渐渐黑化，后来成为女主陈芊芊的最大劲敌，
殊不知，她也并非花垣女帝的亲生女儿。
</div>
<div class="lanmu702"></div>
<div class="lanmu703">
</div>
</div>
<!--*******栏目8********-->
<div class="lanmu8">
<div class="lanmu801">
</div>
<div class="lanmu802"></div>
<div class="lanmu803">
<h3>陈沅沅</h3>
花垣城大郡主，身负残疾，
终日坐在轮椅上。她悲观但坚强，
一边说着悲春伤秋的话，
一边却各处搜罗各种大补食材。
久病成良医，她医术非常高明，
什么病都能治，除了自己的腿。
表面上冷漠孤僻，
实际内心渴望别人的关怀，更想像正常人一样谈一段刻骨铭心的恋爱。
</div>
</div>
<!--*******栏目9********-->
<div class="lanmu9">
<div class="lanmu901">
</div>
<div class="lanmu902">
<h3>韩烁</h3>
玄虎城的少主，北夏王子，
是个病弱腹黑、傲娇帅气的美男子，
文韬武略且容颜绝美，见过的人无不赞叹，
可惜天生心疾，注定活不过二十，
他同时是陈芊芊的夫婿，他为了传说中那个龙骨来到了花垣城，
表面上柔弱多病，实际上是隐藏实力，
在寻找龙骨的过程中爱上了陈芊芊，放弃了仇恨。
</div>
<div class="lanmu903">
</div>
</div>
<!--*******栏目10********-->
<div class="lanmu10">
<div class="lanmu1001">
</div>
<div class="lanmu1002">
</div>
<div class="lanmu1003">
<h3>裴恒</h3>
花垣城的第一美男子，
家世、才学都近乎完美，
是花垣少女心中的优质偶像，
与陈芊芊有婚约，起初对其排斥，
但在女主小千进入剧情后，却渐渐被其吸引。
</div>
</div>
<!--*******栏目11********-->
<div class="lanmu11">
<div class="lanmu1101">
<h3>苏沐</h3>
花垣城教坊司“头牌”，有“万人空巷看苏郎'的评价。
他最擅长讨好女人，是妇女之友，非常会察言观色。
做事稳妥，风流浪荡的外表下隐藏着一颗细腻体贴有担当的心，
所以他很快发现沅沅脆弱又敏感的一面。
苏沐感恩于沅沅对他没有偏见，
所以他很用心地去对大公主，精准把握住她的脾气。
渐渐两人互生好感。
</div>
<div class="lanmu1102"></div>
<div class="lanmu1103">
</div>
</div>
</div>
<!--第三板结束-->
fans.html关键代码：
<div class="jianxi2"></div>
<div class="footer">
<a id="fans">粉丝见面会</a>
</div>
<div class="fans_content">
<div style="width: 438;height: 2200;float: left;margin-top: 20px;">
<div
style="width: 400; height: 224; float: left;border-radius: 20px;
BORDER-RIGHT: #44ffff 18pt ridge; BORDER-TOP: #44ffff 18pt ridge; BORDER-LEFT: #44ffff 18pt ridge; BORDER-BOTTOM: #44ffff 18pt ridge">
<img src="img/jmh01.jpg" width="400" height=224/>
</div>
<div
style="width: 400; height: 600; float: left;margin-top: 20px;border-radius: 20px;
BORDER-RIGHT: #2ae964c9 18pt ridge; BORDER-TOP: #2ae964c9 18pt ridge; BORDER-LEFT: #2ae964c9 18pt ridge; BORDER-BOTTOM: #2ae964c9 18pt ridge">
<img src="img/jmh02.jpg" width="400" height=600/>
</div>
<div
style="width: 400; height: 711; float: left;margin-top: 20px;border-radius: 20px;
BORDER-RIGHT: #e6d00f 18pt ridge; BORDER-TOP: #e6d00f 18pt ridge; BORDER-LEFT: #e6d00f 18pt ridge; BORDER-BOTTOM: #e6d00f 18pt ridge">
<img src="img/jmh03.jpg" width="400" height=711/>
</div>
<div
style="width: 400; height: 271; float: left;border-radius: 20px;margin-top: 20px;
BORDER-RIGHT: #e06227 18pt ridge; BORDER-TOP: #e06227 18pt ridge; BORDER-LEFT: #e06227 18pt ridge; BORDER-BOTTOM: #e06227 18pt ridge">
<img src="img/jmh04.jpg" width="400" height=271/>
</div>
</div>
<div style="width: 438;height: 1800;float:right;margin-top: 20px;">
<div
style="width: 400; height: 2010; float:right;
BORDER-RIGHT: #ac77e9 18pt ridge; BORDER-TOP: #ac77e9 18pt ridge; BORDER-LEFT: #ac77e9 18pt ridge; BORDER-BOTTOM: #ac77e9 18pt ridge">
<div style="width: 400; height: 502.5;background: url(img/cptext_bg01.png);">
<div style="font-size: 28;">
<br/>
[cp]今天看了《传闻中的陈芊芊》
粉丝见面会直播回放，感觉他们之间的关系比较真诚，
不仅是工作同事，更像是朋友，
或许是因为赵露思比较会搞气氛，感觉他们之间很和谐，
还有因为在看剧的时候，陷入他们演的角色，
看直播时会发现他们也是现实生活中的人啊，会像普通人一样在台上紧张，
给我的感觉特别真实，总之非常开心看到他们，[可爱][/cp]
</div>
</div>
<div style="width: 400; height: 1005;background: url(img/cptext_bg02.png);">
<div style="font-size: 29;">
<br/><br/><br/><br/>
[cp]#传闻中的陈芊芊[超话]##传闻中的陈芊芊[超话]#
真的想说一下
传闻中的陈芊芊这部剧一开始没被所有人看好
连见面会跟售后都是剧粉每天催命似的催官博催出来的
庆祝蛋糕还是贴片 还只贴一半
两位主演也是小演员 没有很大的粉丝基础
我们从来没有 污蔑过别人
甚至被别人超过也只是“果然jynn就是jynn 我们也要努力”
很长时间也以冲一保二作为目标<br/>
理解你们的心情 但这不是否认我们努力的理由 <br/>
伟大的玄虎醋王八曾经说过：“你让的？明明是我们自己争取的！”[/cp]
</div>
</div>
<div style="width: 400; height: 502.5;background: url(img/cptext_bg03.png);">
<div style="font-size: 29;">
<br/>
[cp]#视频创作者##传闻中的陈芊芊#
传闻中的陈芊芊「粉丝见面会直播」托盘抱还是公主抱？
异口同声：公主抱！拍托盘抱的时候什么感受？
露思：我吸了口气，憋住……颤抖着祈祷，抱起我抱起我！
丁禹兮一定要抱起我！球球！
女演员真的是不容易「允悲」
赵露思陈芊芊,丁禹兮韩烁 http://t.cn/A6LVwY1Y [/cp]
</div>
</div>
</div>
</div>
</div>
</div>
wonderful_moments.html关键代码：
<div class="jianxi2"></div>
<!--内容开始-->
<div class="content22">
<div id="video">
<video width="960" height="540" controls autoplay>
<source src="media/video.mp4" type="video/mp4">
</video>
</div>
</div>
talk_over.html关键代码：
<form id="form" action="" method="post" class="elegant-aero">
<h1>留言版
<span>留言讨论，请填入相关内容并提交。</span>
</h1>
<label>
<span>姓 名 :</span>
<input id="name" type="text" name="name" placeholder="Your Full Name" />
</label>
<label>
<span>电子邮件 :</span>
<input id="email" type="email" name="email" placeholder="Valid Email Address" />
</label>
<label>
<span>手机号 :</span>
<input id="number" type="text" name="number" placeholder="Your Phone Number" />
</label>
<label>
<span>留言内容 :</span>
<textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
</label>
<label>
<span> </span>
<input type="button" class="button" value="提交" />
</label>
</form>
css代码：
body{
margin:0;
padding:0;
background-image: url(img/bg.png);
background-repeat: repeat;
background-attachment: fixed;/*背景图片固定，不随鼠标滚动而滚动*/
}
/*logo*/
.logo{
background:url(img/logo_bg.png);
margin:0 auto;
width:960px;
height:300px;
padding-top: 15px;
padding-bottom: 10px;
background-repeat:repeat;
border-radius:20px;/*圆角过渡*/
}
/**##########滚动图片设置#################**/
.box {
margin-top: 80px;
width: 100%;
height: 340px;
position: relative;
}
.list {
width: 1200px;
height: 300px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -365px;
}
.btn {
position: absolute;
top: 50%;
margin-top: -50px;
width: 60px;
height: 100px;
line-height: 100px;
font-size: 30px;
color: white;
text-decoration: none;
text-align: center;
background: rgba(0, 255, 0, .5);
cursor: pointer;
}
.next {
right: 0;
}
li {
position: absolute;
top: 0;
left: 0;
list-style: none;
opacity: 0;
transition: all 0.3s ease-out;
}
.img1 {
width: 280px;
height: 300px;
border: none;
float: left;
}
.p1 {
transform: translate3d(-224px, 0, 0) scale(0.81);
}
.p2 {
transform: translate3d(0px, 0, 0) scale(0.81);
transform-origin: 0 50%;
opacity: 0.8;
z-index: 2;
}
.p3 {
transform: translate3d(224px, 0, 0) scale(1);
z-index: 3;
opacity: 1;
}
.p4 {
transform: translate3d(449px, 0, 0) scale(0.81);
transform-origin: 100% 50%;
opacity: 0.8;
z-index: 2;
}
.p5 {
transform: translate3d(672px, 0, 0) scale(0.81);
}
.p6 {
transform: translate3d(896px, 0, 0) scale(0.81);
}
.p7 {
transform: translate3d(1120px, 0, 0) scale(0.81);
}
.buttons {
position: absolute;
width: 1200px;
height: 30px;
bottom: 0;
left: 50%;
margin-left: -600px;
text-align: center;
padding-top: 10px;
}
.buttons a {
display: inline-block;
width: 35px;
height: 5px;
padding-top: 4px;
margin: 50px;
cursor: pointer;
}
/**####################################################################**/
/*导航栏*/
.Navigation{
background: #e9a6d5;
width: 960px;
height: 40px;
margin: 0 auto;
text-align: center;
font-family: "字魂27号-布丁体";
font-size: 24px;
border-radius:20px;/*圆角过渡*/
}
/*内容*/
.content{ background:#ffffff; width:960px; height:645px; margin:0 auto}
.content22{ background:#ffffff; width:960px; height:543px; margin:0 auto}
/*第一版块*/
.contentone{ background:#ffffff; width:960px; height:300px; margin:0 auto}
/*栏目一*/
.lanmuyi{ background:#ffffff; width:250px; height:300px; float:left;border:2px solid rgb(144, 201, 150); margin:0 20 0 0}
.lanmuheadyi{ background:rgb(144, 201, 150); width:250px;height:30px}
.lanmunameyi{ width:135px;height:30px; float:left}
.lanmumoreyi{ width:135px;height:30px; float:right;}
.nameyi{
text-align: left;
color: #000000;
font-size: 18px;
margin: 0 0 0 10;
font-family: "字魂27号-布丁体";
}
.moreyi{
text-align: right;
color: #151414;
font-size: 16px;
margin: 0 0 0 60;
font-family: "字魂27号-布丁体";
}
/*栏目二*/
.lanmuer{ background:rgb(241, 173, 127); width:408px; height:300px; float:left;border:2px solid #f6c092; margin:0 20 0 0}
.lanmuheader{ background:#f6c092; width:408px;height:30px}
.lanmunameer{ width:180px;height:30px; float:left}
.lanmumoreer{ width:180px;height:30px; float:right;}
.nameer{
text-align: left;
color: #000000;
font-size: 18px;
margin: 0 0 0 10;
font-family: "字魂27号-布丁体";
}
.moreer{
text-align: right;
color: #000000;
font-size: 16px;
margin: 0 0 0 170;
font-family: "字魂27号-布丁体";
}
/*栏目三*/
.lanmusan{ background:#ffffff; width:250px; height:300px;float:left;border:2px solid #f7aea8; margin:0 0 0 0}
.lanmuheadsan{ background:#f7aea8; width:250px;height:30px}
.lanmunamsan{ width:135px;height:30px; float:left}
.lanmumore{ width:135px;height:30px; float:right;}
.namesan{
text-align: left;
color: #000000;
font-size: 18px;
margin: 0 0 0 10;
font-family: "字魂27号-布丁体";
}
.moresan{
text-align: right;
color: #000000;
font-size: 16px;
margin: 0 0 0 60;
font-family: "字魂27号-布丁体";
}
/*第二版块*/
.contenttwo{ background:#ffffff; width:960px; height:300px; margin:0 auto}
/*栏目四*/
.lanmusi{ background:#fff; width:466px; height:300px; float:left;border:2px solid #FF9900; margin:0 20 0 0}
.lanmuheadsi{ background:#FF9900; width:466px;height:30px}
.lanmunamesi{ width:240px;height:30px; float:left}
.lanmumoresi{ width:240px;height:30px; float:right;}
.namesi{
text-align: left;
color: #000000;
font-size: 18px;
margin: 0 0 0 10;
font-family: "字魂27号-布丁体";
}
.moresi{
text-align: right;
color: #000000;
font-size: 16px;
margin: 0 0 0 170;
font-family: "字魂27号-布丁体";
}
/*栏目五*/
.lanmuwu{ background:#fff; width:466px; height:300px; float:left;border:2px solid #FFCC00; margin:0 0 0 0}
.lanmuheadwu{ background:#FFCC00; width:466px;height:30px}
.lanmunamewu{ width:240px;height:30px; float:left}
.lanmumorewu{ width:240px;height:30px; float:right;}
.namewu{
text-align: left;
color: #000000;
font-size: 18px;
margin: 0 0 0 10;
font-family: "字魂27号-布丁体";
}
.morewu{
text-align: right;
color: #000000;
font-size: 16px;
margin: 0 0 0 170;
font-family: "字魂27号-布丁体";
}
/*底部*/
.footer{
background:#8df19b;
width:960px;
height:40px;
margin:auto;
text-align: center;
font-family: "字魂27号-布丁体";
font-size: 24px;
border-radius:40px;/*圆角过渡*/
}
.footerX{
height: 30px;
line-height: 30px;
margin-left: 152px;
position: inherit;
bottom: 0;
width: 960px;
text-align: center;
background: #333;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
/*间隙*/
.jianxi1{
width: 960px;
height: 10px;
margin: 0 auto;}
.jianxi2{
width: 960px;
height: 10px;
margin: 0 auto;}
.jianxi3{
width: 960px;
height: 10px;
margin-bottom: 10;
}
.content03{width:960px; height:2600px; margin:0 auto}
/*********************************************/
.lanmu6{
width: 960px;
height: 400px;
margin: 0 auto;
border:2px solid rgb(243, 68, 14);
border-radius:20px;/*圆角过渡*/
}
.lanmu6_01{
width: 350px;
height: 380px;
margin-top: 10px;
margin-left: 10px;
background:url(img/Chenqianqian.png);
border:2px solid rgb(243, 68, 14);
float:left;
border-radius:20px;/*圆角过渡*/
}
.lanmu6_middle{
width: 205px;
height: 380px;
margin: 10px;
background:url(img/m01.png);
background-repeat: repeat;
border:2px solid rgb(243, 68, 14);
float:left;
border-radius:20px;/*圆角过渡*/
}
.lanmu6_02{
width: 350px;
height: 380px;
margin-top: 10px;
margin-right: 10px;
border:2px solid rgb(243, 68, 14);
float:right;
border-radius:20px;/*圆角过渡*/
font-size: 25;
font-family: KaiTi;
}
/********************************************/
.lanmu7{
width: 960px;
height: 400px;
margin: 0 auto;
border:2px solid rgb(243, 68, 14);
border-radius:20px;/*圆角过渡*/
}
.lanmu701{
width: 350px;
height: 380px;
margin-top: 10px;
margin-left: 10px;
border:2px solid rgb(243, 68, 14);
float:left;
border-radius:20px;/*圆角过渡*/
font-size: 30;
font-family: KaiTi;
}
.lanmu702{
width: 350px;
height: 380px;
margin-top: 10px;
margin-left: 10px;
background:url(img/Chengchuchu.png);
border:2px solid rgb(243, 68, 14);
float:left;
border-radius:20px;/*圆角过渡*/
}
.lanmu703{
width: 205px;
height: 380px;
margin: 10px;
background:url(img/m02.png);
background-repeat: repeat;
border:2px solid rgb(243, 68, 14);
float:right;
border-radius:20px;/*圆角过渡*/
}
/*****************************/
.lanmu8{
width: 960px;
height: 400px;
margin: 0 auto;
border:2px solid rgb(243, 68, 14);
border-radius:20px;/*圆角过渡*/
}
.lanmu801{
width: 205px;
height: 380px;
margin: 10px;
background:url(img/m03.png);
background-repeat: repeat;
border:2px solid rgb(243, 68, 14);
float: left;
border-radius:20px;/*圆角过渡*/
}
.lanmu802{
width: 350px;
height: 380px;
margin-top: 10px;
margin-left: 10px;
background:url(img/Chenyuanyuan.png);
border:2px solid rgb(243, 68, 14);
float:left;
border-radius:20px;/*圆角过渡*/
}
.lanmu803{
width: 350px;
height: 380px;
margin-top: 10px;
margin-right: 10px;
border:2px solid rgb(243, 68, 14);
float:right;
border-radius:20px;/*圆角过渡*/
font-size: 24;
font-family: KaiTi;
}
/****************************/
.lanmu9{
width: 960px;
height: 400px;
margin: 0 auto;
border:2px solid rgb(243, 68, 14);
border-radius:20px;/*圆角过渡*/
}
.lanmu901{
width: 350px;
height: 380px;
margin-top: 10px;
margin-left: 10px;
background:url(img/Hanshuo.png);
border:2px solid rgb(243, 68, 14);
float:left;
border-radius:20px;/*圆角过渡*/
}
.lanmu902{
width: 350px;
height: 380px;
margin-top: 10px;
margin-left: 10px;
border:2px solid rgb(243, 68, 14);
float:left;
border-radius:20px;/*圆角过渡*/
font-size: 24;
font-family: KaiTi;
}
.lanmu903{
width: 205px;
height: 380px;
margin: 10px;
background:url(img/m04.png);
background-repeat: repeat;
border:2px solid rgb(243, 68, 14);
float:right;
border-radius:20px;/*圆角过渡*/
}
/******************************/
.lanmu10{
width: 960px;
height: 400px;
margin: 0 auto;
border:2px solid rgb(243, 68, 14);
border-radius:20px;/*圆角过渡*/
}
.lanmu1001{
width: 205px;
height: 380px;
margin: 10px;
background:url(img/m05.png);
background-repeat: repeat;
border:2px solid rgb(243, 68, 14);
float: left;
border-radius:20px;/*圆角过渡*/
}
.lanmu1002{
width: 350px;
height: 380px;
margin-top: 10px;
margin-left: 10px;
background:url(img/Peiheng.png);
border:2px solid rgb(243, 68, 14);
float:left;
border-radius:20px;/*圆角过渡*/
}
.lanmu1003{
width: 350px;
height: 380px;
margin-top: 10px;
margin-right: 10px;
border:2px solid rgb(243, 68, 14);
float:right;
border-radius:20px;/*圆角过渡*/
font-size: 30;
font-family: KaiTi;
}
/**********************************/
.lanmu11{
width: 960px;
height: 400px;
margin: 0 auto;
border:2px solid rgb(243, 68, 14);
border-radius:20px;/*圆角过渡*/
}
.lanmu1101{
width: 350px;
height: 380px;
margin-top: 10px;
margin-left: 10px;
border:2px solid rgb(243, 68, 14);
float:left;
border-radius:20px;/*圆角过渡*/
font-size: 22;
font-family: KaiTi;
}
.lanmu1102{
width: 205px;
height: 380px;
margin: 10px;
background:url(img/m01.png);
background-repeat: repeat;
border:2px solid rgb(243, 68, 14);
float:left;
border-radius:20px;/*圆角过渡*/
}
.lanmu1103{
width: 350px;
height: 380px;
margin-top: 10px;
margin-right: 10px;
background:url(img/Sumu.png);
border:2px solid rgb(243, 68, 14);
float:right;
border-radius:20px;/*圆角过渡*/
}
/************************************************/
.elegant-aero {
margin-left:auto;
margin-right:auto;
max-width: 800px;
background: #D2E9FF;
padding: 20px 20px 20px 20px;
font: 12px Arial, Helvetica, sans-serif;
color: #666;
}
.elegant-aero h1 {
font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
padding: 10px 10px 10px 20px;
display: block;
background: #C0E1FF;
border-bottom: 1px solid #B8DDFF;
margin: -20px -20px 15px;
}
.elegant-aero h1>span {
display: block;
font-size: 11px;
}
.elegant-aero label>span {
float: left;
margin-top: 10px;
color: #5E5E5E;
}
.elegant-aero label {
display: block;
margin: 0px 0px 5px;
}
.elegant-aero label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 15px;
margin-top: 10px;
font-weight: bold;
}
.elegant-aero input[type="text"], .elegant-aero input[type="email"], .elegant-aero textarea, .elegant-aero select {
color: #888;
width: 50%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
background: #FBFBFB;
outline: 0;
-webkit-box-shadow:inset 0px 1px 6px #ECF3F5;
box-shadow: inset 0px 1px 6px #ECF3F5;
font: 200 12px/25px Arial, Helvetica, sans-serif;
height: 30px;
line-height:15px;
margin: 2px 6px 16px 0px;
}
.elegant-aero textarea{
height:100px;
padding: 5px 0px 0px 5px;
width: 50%;
}
.elegant-aero select {
background: #fbfbfb url('down-arrow.png') no-repeat right;
background: #fbfbfb url('down-arrow.png') no-repeat right;
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
}
.elegant-aero .button{
padding: 10px 30px 10px 30px;
background: #66C1E4;
border: none;
color: #FFF;
box-shadow: 1px 1px 1px #4C6E91;
-webkit-box-shadow: 1px 1px 1px #4C6E91;
-moz-box-shadow: 1px 1px 1px #4C6E91;
text-shadow: 1px 1px 1px #5079A3;
}
.elegant-aero .button:hover{
background: #3EB1DD;
}
/*####################################################*/
.fans_content{
width: 960px;
height: 2000px;
margin: 0 auto;
}
.img_content{
width: 460px;
height: 436px;
margin: 0 auto;
float: left;
border:2px solid rgb(243, 68, 14);
}
/* CSS Document */
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
