html+css网站首页实战
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>魔道祖师</title>
<link href="css/sty.css" rel="stylesheet" type="text/css"/>
<!-- js是引用在网上下载的轮播图，会有该资源的链接 -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<div id="header_wrapper"></div>
<header>
<div class="container">
<div id="logo">
<h1><a href="index.html"><img src="images/logo.jpg" alt="首页" style="height:150px;width:500px;"/></a></h1>
</div>
<div id="sousuo">
<input type="text" placeholder="请输入搜索内容"/><input type="submit" value="搜索"/>
</div>
</div>
<div id="nav">
<nav class="container">
<ul>
<li class="on"><a href="index.html">魔道首页</a></li><li>
<a href="piclist.html">作品列表</a></li><li>
<a href="list.html">新闻列表</a></li><li>
<a href="content.html">内容页面</a></li><li>
<a href="">关于我们</a></li>
</ul>
</nav>
</div>
</header>
<div id="body_wrapper" class="container">
<article>
<section id="luobotu">
<div class="wrap" >
<div id="slide-holder">
<div id="slide-runner">
<a href="/"><img id="slide-img-1" src="images/a1.jpg" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-2" src="images/a2.jpg" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-3" src="images/a3.jpg" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-4" src="images/a4.jpg" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-5" src="images/a5.jpg" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-6" src="images/a6.jpg" class="slide" alt="" /></a>
<a href="/"><img id="slide-img-7" src="images/a4.jpg" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"><strong>壁纸推荐: </strong><span></span></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
<script type="text/javascript">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-2","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-3","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-4","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-5","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-6","client":"标题在这里","desc":"这里是描述信息"},{"id":"slide-img-7","client":"标题在这里","desc":"这里是描述信息"}];
</script>
</div>
</section>
<section id="xinwen">
<div class="title_bg">
<h2><a href="list.html">人物介绍</a></h2>
</div>
<ul>
<li><a href="content.html"><img src="images/person1.jpg" alt="人物简介"></a>
<a href="content.html" class="desp">
<div class="triangle"></div><h3>魏婴</h3>
<p>字无羡/号夷陵老祖。长相俊美，性格不羁。幼年父母在夜猎中丧生，被带回云梦江氏莲花坞，与江澄、江厌离一同生活修习，结识了蓝忘机。穷奇道事变后被仙门百家讨伐，最后死于恶鬼反噬。十三年后被莫玄羽献舍重生，与蓝忘机结伴而行，一路追查被分尸之人的身份。</p>
</a>
</li>
<li><a href="content.html"><img src="images/person2.jpg" alt="人物简介"></a>
<a href="content.html" class="desp">
<div class="triangle"></div>
<h3>蓝湛</h3>
<p>字无羡/号夷陵老祖。长相俊美，性格不羁。幼年父母在夜猎中丧生，被带回云梦江氏莲花坞，与江澄、江厌离一同生活修习，结识了蓝忘机。穷奇道事变后被仙门百家讨伐，最后死于恶鬼反噬。十三年后被莫玄羽献舍重生，与蓝忘机结伴而行，一路追查被分尸之人的身份。</p>
</a>
</li>
<li><a href="content.html"><img src="images/person3.jpg" alt="人物简介"></a>
<a href="content.html" class="desp">
<div class="triangle"></div>
<h3>江橙</h3>
<p>字晚吟/号三毒圣手。云梦江氏江枫眠与虞紫鸢之子，细眉杏目，锐利俊美，明烈骄傲，最讨厌被他人比下去，但对亲近之人百般珍重。起名废，现任家主。与魏无羡一起长大，年少时魏无羡与其许下了“云梦双杰”的约定。</p>
</a>
</li>
<li><a href="content.html"><img src="images/person4.jpg" alt="人物简介"></a>
<a href="content.html" class="desp">
<div class="triangle"></div>
<h3>蓝涣</h3>
<p>字曦臣/号泽芜君。现任蓝家家主。蓝忘机的兄长，与蓝忘机并称“蓝氏双璧”。清煦温雅，款款温柔。与蓝忘机有八九分相似，眸色较深。与赤锋尊聂明玦、敛芳尊金光瑶为结义兄弟，排行第二，一同被尊为“三尊”。</p>
</a>
</ul>
</section>
<section id="huodong">
<div class="title_bg">
<h2><a href="list.html">魔道家氏</a></h2>
</div>
<section id="huodong_a">
<ul>
<li><a href="content.html"><img src="images/logo1.jpg"/></a></li><li>
<a href="content.html"><img src="images/logo2.jpg"/></a></li><li>
<a href="content.html"><img src="images/logo3.jpg"/></a></li><li>
<a href="content.html"><img src="images/logo4.jpg"/></a></li>
</ul>
</section>
<section id="huodong_b">
<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>
<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>
</section><section id="huodong_c">
<ul>
<li><a href="content.html"><img src="images/mainp0.jpg"/></a></li><li>
<a href="content.html"><img src="images/mainp1.jpg"/></a></li>
</ul>
</section>
</section>
</article><aside>
<section id="bowen">
<div class="title_bg">
<h2><a href="list.html">作品简介</a></h2>
</div>
<section id="bowen_a">
<ul>
<li><a href="content.html"><img src="images/logo1.jpg"/></a></li><li>
<a href="content.html"><img src="images/logo2.jpg"/></a></li>
</ul>
</section>
<section id="bowen_b">
<ul>
<li><a href="">前世的魏无羡万人唾骂，声名狼藉。
被护持一生的师弟带人端了老巢，
纵横一世，死无全尸。</a></li>
<li><a href="">曾掀起腥风血雨的一代魔道祖师，重生成了一个……
脑残。
还特么是个人人喊打的断袖脑残！</a></li>
<li><a href="">我见诸君多有病，料诸君见我应如是。
但修鬼道不修仙，任你千军万马，十方恶霸，九州奇侠，高岭之花，
但凡化为一抔黄土，统统收归旗下，为我所用，供我驱策！</a></li>
</ul>
</section>
</section>
<section id="zhaoping">
<div class="title_bg">
<h2><a href="list.html">作者简介</a></h2>
</div>
<section id="bowen_b">
<ul>
<li><a href="">中文名：墨香铜臭（念xiu）</a></li>
<li><a href="">国籍：中国</a></li>
<li><a href="">职业：网络小说作家</a></li>
<li><a href="">座右铭：品人品文千人千面，无缘不必强求，有缘必再相见。</a></li>
</ul>
</section>
</section>
<section id="lianxi">
<div class="title_bg">
<h2><a href="list.html">联系我们</a></h2>
</div>
<a href="content.html"><img src="images/contractus.jpg"/></a>
</section>
<section id="zigongsi">
<div class="title_bg">
<h2><a href="list.html">其他作品</a></h2>
</div>
<ul>
<li>
<h4><a href="content.html">人渣反派自救系统</a></h4>
<div class="others">
<a href="content.html"><img src="images/zuopin1.png"/></a>
<a href="concent.html">“还能不能好好看种马文了！”
沈垣穿书穿成了把少年男主虐到死去活来的人渣反派沈清秋。
前期忠犬小白花后期黑化SJB少女攻×伪斯文败类反派吐槽狂魔受
这其实是一个师徒每天不务正业，打打怪、谈谈恋爱的狗血故事
也是反派亲眼见证，男主如何从一朵小绵羊白莲花变成黑霸王花的故事</a>
</div>
</li>
<li>
<h4><a href="content.html">人渣反派自救系统</a></h4>
<div class="others">
<a href="content.html"><img src="images/zuopin1.png"/></a>
<a href="concent.html">“还能不能好好看种马文了！”
沈垣穿书穿成了把少年男主虐到死去活来的人渣反派沈清秋。
前期忠犬小白花后期黑化SJB少女攻×伪斯文败类反派吐槽狂魔受
这其实是一个师徒每天不务正业，打打怪、谈谈恋爱的狗血故事
也是反派亲眼见证，男主如何从一朵小绵羊白莲花变成黑霸王花的故事</a>
</div>
</li>
<li>
<h4><a href="content.html">人渣反派自救系统</a></h4>
<div class="others">
<a href="content.html"><img src="images/zuopin1.png"/></a>
<a href="concent.html">“还能不能好好看种马文了！”
沈垣穿书穿成了把少年男主虐到死去活来的人渣反派沈清秋。
前期忠犬小白花后期黑化SJB少女攻×伪斯文败类反派吐槽狂魔受
这其实是一个师徒每天不务正业，打打怪、谈谈恋爱的狗血故事
也是反派亲眼见证，男主如何从一朵小绵羊白莲花变成黑霸王花的故事</a>
</div>
</li>
<li>
<h4><a href="content.html">人渣反派自救系统</a></h4>
<div class="others">
<a href="content.html"><img src="images/zuopin1.png"/></a>
<a href="concent.html">“还能不能好好看种马文了！”
沈垣穿书穿成了把少年男主虐到死去活来的人渣反派沈清秋。
前期忠犬小白花后期黑化SJB少女攻×伪斯文败类反派吐槽狂魔受
这其实是一个师徒每天不务正业，打打怪、谈谈恋爱的狗血故事
也是反派亲眼见证，男主如何从一朵小绵羊白莲花变成黑霸王花的故事</a>
</div>
</li>
<li>
<h4><a href="content.html">人渣反派自救系统</a></h4>
<div class="others">
<a href="content.html"><img src="images/zuopin1.png"/></a>
<a href="concent.html">“还能不能好好看种马文了！”
沈垣穿书穿成了把少年男主虐到死去活来的人渣反派沈清秋。
前期忠犬小白花后期黑化SJB少女攻×伪斯文败类反派吐槽狂魔受
这其实是一个师徒每天不务正业，打打怪、谈谈恋爱的狗血故事
也是反派亲眼见证，男主如何从一朵小绵羊白莲花变成黑霸王花的故事</a>
</div>
</li>
<li>
<h4><a href="content.html">人渣反派自救系统</a></h4>
<div class="others">
<a href="content.html"><img src="images/zuopin1.png"/></a>
<a href="concent.html">“还能不能好好看种马文了！”
沈垣穿书穿成了把少年男主虐到死去活来的人渣反派沈清秋。
前期忠犬小白花后期黑化SJB少女攻×伪斯文败类反派吐槽狂魔受
这其实是一个师徒每天不务正业，打打怪、谈谈恋爱的狗血故事
也是反派亲眼见证，男主如何从一朵小绵羊白莲花变成黑霸王花的故事</a>
</div>
</li>
<li>
<h4><a href="content.html">人渣反派自救系统</a></h4>
<div class="others">
<a href="content.html"><img src="images/zuopin1.png"/></a>
<a href="concent.html">“还能不能好好看种马文了！”
沈垣穿书穿成了把少年男主虐到死去活来的人渣反派沈清秋。
前期忠犬小白花后期黑化SJB少女攻×伪斯文败类反派吐槽狂魔受
这其实是一个师徒每天不务正业，打打怪、谈谈恋爱的狗血故事
也是反派亲眼见证，男主如何从一朵小绵羊白莲花变成黑霸王花的故事</a>
</div>
</li>
<li>
<h4><a href="content.html">人渣反派自救系统</a></h4>
<div class="others">
<a href="content.html"><img src="images/zuopin1.png"/></a>
<a href="concent.html">“还能不能好好看种马文了！”
沈垣穿书穿成了把少年男主虐到死去活来的人渣反派沈清秋。
前期忠犬小白花后期黑化SJB少女攻×伪斯文败类反派吐槽狂魔受
这其实是一个师徒每天不务正业，打打怪、谈谈恋爱的狗血故事
也是反派亲眼见证，男主如何从一朵小绵羊白莲花变成黑霸王花的故事</a>
</div>
</li>
</ul>
</section>
</aside>
</div>
<div id="footer_wrapper">
<footer>
<ul>
<li><a href="content.html">版权信息</a></li>
<li><a href="content.html">站点地图</a></li>
<li><a href="content.html">联系我们</a></li>
</ul>
<p>2019@版权信息归unclehuang所有</p>
</footer>
</div>
</body>
</html>
css部分
*{
margin: 0;
padding: 0;
}
body{
background-color: #d0d2d1;
font-family: "微软雅黑";
}
.container{
width: 1000px;
margin: 0 auto;
}
.title_bg{
background: rgba(73, 65, 65, 0.356);
height: 45px;
padding-left: 10px;
}
.title_bg a{
text-decoration: none;
color: white;
font-size: 16px;
}
div#logo{
display: inline-block;
vertical-align: top;
height:150px;
width:755px;
}
div#sousuo{
display: inline-block;
vertical-align: top;
margin-top: 60px;
text-align: right;
width: 240px;
}
input[type="text"] {
font-family: "微软雅黑";
background-color: #d0d2d1;
border: solid 1px white;
height: 40px;
font-size: 20px;
padding-left: 10px;
width: 165px;
display: inline-block;
vertical-align: top;
}
input[type="submit"] {
font-family: "微软雅黑";
background: #d0d2d1;
color: black;
border: solid 1px white;
height: 40px;
display: inline-block;
vertical-align: top;
font-size: 20px;
padding: 0 10px;
}
div#nav{
background-color: black;
height: 60px;
}
div#nav nav li{
display: inline-block;
line-height: 60px;
padding: 0 10px;
border-right: solid 1px #3a3b3b;
transition: background-color 1s linear;
}
div#nav nav li.on,div#nav nav li:hover{
background-color: #3a3b3b;
}
div#nav nav a{
color: white;
text-decoration: none;
font-size: 16px;
}
/* 内容主题样式 */
div#body_wrapper{
margin-top: 20px;
}
div#body_wrapper article{
width: 628px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
}
div#body_wrapper aside{
width: 352px;
display: inline-block;
vertical-align: top;
}
section#luobotu{
box-shadow: 1px 4px 15px black;
}
/* 轮播图 */
div.wrap a{
color:#fff;
}
div#slide-holder {
width : 628px;
height : 278px;
}
div#slide-runner {
width : 628px;
height : 278px;
overflow : hidden;
position : absolute;
}
div#slide-holder img {
margin : 0;
display : none;
position : absolute;
width : 628px;
height : 278px;
}
div#slide-controls {
left : 0;
bottom : 0px;
width : 628px;
height : 46px;
display : none;
position : absolute;
}
div#slide-controls p.text {
float : left;
color : #fff;
display : inline;
font-size : 10px;
line-height : 16px;
margin : 15px 0 0 20px;
text-transform : uppercase;
}
p#slide-nav {
float : right;
height : 24px;
display : inline;
margin : 11px 15px 0 0;
}
p#slide-nav a {
float : left;
width : 24px;
height : 24px;
display : inline;
font-size : 11px;
margin : 0 5px 0 0;
line-height : 24px;
font-weight : bold;
text-align : center;
text-decoration : none;
background-position : 0 0;
background-repeat : no-repeat;
}
p#slide-nav a.on {
background-position : 0 -24px;
}
p#slide-nav a {
background-image : url(../images/silde-nav.png);
}
/* 新闻部分 */
section#xinwen{
margin-top: 20px;
}
section#xinwen li{
display: inline-block;
width: 100%;
vertical-align: bottom;
margin-top: 10px;
height: 264px;
}
section#xinwen li a{
display: inline-block;
vertical-align: top;
text-decoration: none;
height: 264px;
}
section#xinwen li img{
width: 164px;
height: 264px;
}
section#xinwen li a.desp{
width: 459px;
background:rgb(241, 235, 235);
color: black;
padding: 10px;
box-sizing: border-box;
position: relative;
}
a.desp h3{
border-bottom: solid 1px black;
padding-bottom: 10px;
margin-bottom: 10px;
width: 450px;
height: 30px;
overflow: hidden;
}
a.desp p{
text-indent: 22px;
height: 240px;
overflow: hidden;
}
/* 三角形 */
.triangle{
width: 0;
height: 0;
border-right: 20px solid rgb(241, 235, 235);
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* position: relative;设置后移动位置会有空白，消除空白的办法是父元素设为position: relative;子元素设为position: absolute; */
position: absolute;
top: 35px;
left: -16px;
}
/* 魔道家氏 */
section#huodong{
margin-top: 20px;
}
section#huodong_a{
margin-top: 10px;
}
section#huodong_a li {
display: inline-block;
vertical-align: top;
margin-right: 9px;
}
section#huodong_a li:last-child{
margin-right: 0px;
}
section#huodong_a li img{
width: 150px;
height: 140px;
}
section#huodong_b{
display: inline-block;
width: 469px;
vertical-align: top;
margin-right: 9px;
}
/* 在list前面加序号 */
section#huodong_b li::before{
content: counter(listnum);
background-color: #696b6b;
color: white;
padding: 2px 7px;
margin-right: 5px;
}
section#huodong_b li{
counter-increment: listnum;
display: inline-block;
width: 100%;
vertical-align: bottom;
overflow: hidden;
/* 不换行 */
white-space: nowrap;
/* 超出部分省略号代替 */
text-overflow: ellipsis;
margin-top: 16px;
}
section#huodong_b li:nth-child(1):before,section#huodong_b li:nth-child(2):before,section#huodong_b li:nth-child(3):before{
background-color: #3a3b3b;
}
section#huodong_b li:nth-child(10):before,section#huodong_b li:nth-child(11):before,section#huodong_b li:nth-child(12):before{
padding:2px 0px;
font-size: 18px;
}
section#huodong_b li a{
color: black;
text-decoration: none;
transition: text-shadow 1s linear;
/* 上句放到section#huodong_b li里面，渐变效果没反应 */
}
section#huodong_b li a:hover{
text-shadow: 1px 4px 5px #696b6b;
}
section#huodong_c{
width: 150px;
display: inline-block;
margin-top: 14px;
}
section#huodong_c li{
display: inline-block;
}
section#huodong_c li img{
width: 150px;
height: 218px;
}
/* 作品简介 */
section#bowen_a li{
display: inline-block;
margin-right: 10px;
margin-top: 10px;
}
section#bowen_a li img{
width:171px;
}
section#bowen_a li:last-child{
margin-right: 0px;
}
section#bowen_b{
display: inline-block;
width: 352px;
vertical-align: top;
margin-right: 9px;
margin-bottom: 9px;
}
/* 在list前面加序号 */
section#bowen_b li::before{
content: counter(listnum);
background-color: #696b6b;
color: white;
padding: 2px 7px;
margin-right: 5px;
}
section#bowen_b li{
counter-increment: listnum;
display: inline-block;
width: 100%;
vertical-align: bottom;
overflow: hidden;
/* 不换行 */
white-space: nowrap;
/* 超出部分省略号代替 */
text-overflow: ellipsis;
margin-top: 16px;
}
section#bowen_b li:nth-child(1):before,section#huodong_b li:nth-child(2):before,section#huodong_b li:nth-child(3):before{
background-color: #3a3b3b;
}
section#bowen_b li:nth-child(10):before,section#huodong_b li:nth-child(11):before,section#huodong_b li:nth-child(12):before{
padding:2px 0px;
font-size: 18px;
}
section#bowen_b li a{
color: black;
text-decoration: none;
transition: text-shadow 1s linear;
/* 上句放到section#huodong_b li里面，渐变效果没反应 */
}
section#bowen_b li a:hover{
text-shadow: 1px 4px 5px #696b6b;
}
/* 联系我们 */
section#lianxi img{
width: 352px;
}
/* 其他作品 */
section#zigongsi{
}
section#zigongsi li{
display: inline-block;
width: 100%;
vertical-align: top;
margin-top: 10px;
}
section#zigongsi li a{
text-decoration: none;
color: black;
}
section#zigongsi li h4{
font-size: 16px;
height: 28px;
line-height: 28px;
}
.others{
transition: padding 0.3s linear;
}
.others:hover{
border: solid 1px rgb(241, 235, 235);
padding: 10px 0px;
}
.others a{
display: inline-block;
vertical-align: top;
}
.others img{
width: 165px;
margin-left: 5px;
}
.others a:last-child{
width: 175px;
height: 107px;
overflow: hidden;
}
/* 版权信息 */
#footer_wrapper{
margin-top: 20px;
height: 80px;
background-color: black;
padding: 40px 0;
}
#footer_wrapper footer{
text-align: center;
}
#footer_wrapper li{
display: inline-block;
vertical-align: top;
border-right: solid 1px white;
padding-right: 15px;
margin-left: 15px;
margin-bottom: 15px;
}
#footer_wrapper li:last-child{
border: 0;
}
#footer_wrapper a,#footer_wrapper p{
color: white;
text-decoration: none;
}
最后效果图如下：（自娱自乐而已，本不喜勿喷）
（ps：本人喜欢该小说和动漫，自娱自乐而已，不喜勿喷，谢谢了哈。）
扫一扫
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
